Делаем так, чтобы портфолио отлично смотрелось на планшете и телефоне.
Сверстай сайт для разрешений 1920, 768 и 360 пикселей по макетам. Макет — скачать для Figma или открыть онлайн.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Сделай так, чтобы у блока .projects менялось число колонок:
grid-template-columns: repeat(3, 1fr))@media (max-width: 768px) — 2 колонки@media (max-width: 360px) — 1 колонка<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
.projects { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.project { background-color: #19b8a6; color: white; padding: 40px; border-radius: 12px; font-family: sans-serif; }
@media (max-width: 768px) {
.projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
.projects { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="projects">
<div class="project">Проект 1</div>
<div class="project">Проект 2</div>
<div class="project">Проект 3</div>
<div class="project">Проект 4</div>
<div class="project">Проект 5</div>
<div class="project">Проект 6</div>
</div>
</body>
</html>
Сделай у шапки .hero скошенный нижний край с помощью clip-path: polygon(...). Подобрать форму поможет генератор clip-path.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
body { margin: 0; font-family: sans-serif; }
.hero { height: 300px; background: linear-gradient(135deg, #6d4aff, #ff4d8d); color: white; display: flex; align-items: center; justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
</style>
</head>
<body>
<section class="hero">
<h1>Привет! Я — веб-дизайнер</h1>
</section>
</body>
</html>