Настоящие сайты верстают по макету. Учимся смотреть на рисунок и видеть в нём блоки и flex-контейнеры.
Прежде чем писать код, обведи на макете прямоугольники: какие блоки стоят в ряд (flex), а какие — друг под другом.
Сверстай сайт по макету. Серые прямоугольники — места для картинок.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Сверстай сайт по второму макету.
🖥️ Это большое задание — делай его в VS Code на компьютере и открывай страницу в браузере. Не забудь выложить результат на свой сайт на GitHub!
Разложи блоки как у большинства сайтов:
header — сверху на всю ширинуaside слева (ширина 200px) и контент main — всё остальное местоfooter — внизу на всю ширинуОберни aside и main в flex-контейнер (он уже есть — .middle). Чтобы main занял остаток, дай ему flex-grow: 1.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя страница</title>
<style>
body { margin: 0; font-family: sans-serif; }
header, aside, main, footer { padding: 20px; color: white; }
header { background-color: #6d4aff; }
aside { background-color: #ff4d8d; }
main { background-color: #19b8a6; flex-grow: 1; }
.middle { display: flex; }
aside { width: 200px; }
footer { background-color: #1f1b3d; }
</style>
</head>
<body>
<header>Шапка сайта</header>
<div class="middle">
<aside>Меню</aside>
<main>Основной контент</main>
</div>
<footer>Подвал</footer>
</body>
</html>