Для каждой задачи создай отдельные классы в файле style.css и примени их к нужным тегам.
📌 Структура файлов: index.html + style.css
💡 Главное правило: display: flex всегда пишется на родителе, а не на дочернем
элементе.
Слева расположен один высокий блок. Справа находятся три одинаковых блока друг под другом. Первый касается верхнего края, второй находится по центру, третий касается нижнего края.
В центре большого контейнера находится карточка. Внутри карточки сверху расположен один блок, ниже два блока рядом, снизу ещё один широкий блок.
Контейнер разделён на три колонки. Слева находятся два блока — сверху и снизу. В центре расположен один блок по середине. Справа находятся три одинаковых блока друг под другом.
Сверху расположен один широкий блок. Ниже находятся две колонки. В левой колонке три одинаковых блока друг под другом. В правой колонке расположен один высокий блок.
Контейнер состоит из двух частей. Слева расположен один квадратный блок. Справа находятся два ряда. В каждом ряду расположены по два одинаковых блока рядом друг с другом.
px.В центре большого контейнера находится карточка. Сверху расположены три небольших блока в один ряд. Посередине находится один широкий блок. Снизу снова расположены три небольших блока в один ряд.
Повтори расположение блоков.
px.
Важно:
Каждый класс пишется отдельно в style.css.
Используйте только HTML и CSS.
Практикуйте свойства:
display: flex,
flex-direction,
justify-content,
align-items.