Створення типового двохколонкового макету сторінки
Макет сторінки представлено на схемі:
HTML-код макету сторінки:
Завдання №1
- Створити сітку з 8 колонок, якщо 1 та 8 колонки мають ромір 1fr, інші 6 колонок мають мінімальний розмір: auto, 10em.
- Стіка має 4 рядки, розміром: мінімальний 1em auto, 1fr, auto, мінімальний 1em auto
- Стилізувати макет згідно зразка.
- Створити медіа-запит адаптивності, у якому на розмірах екранів більше 600px:
- header, footer займають 8 колонок
- .main-content з 2 по 6 колонку;
- .sidebar з 6 по 8 колонку;
- .twin1 з 2 по 5 колонку і з 3 по 4 рядок;
- .twin2 з 5по 8 колонку;
html-код сторінки для стилізації:
Завдання №2
- Стилізувати зразок сторінки сіткою для блоку header та для блоку card-section
HTML-код макету сторінки у 3 колонки:
Завдання №3
Створити макет сторінки згідно зразка на малюнку
Завдання №4
1. створити веб-сторінку по grid-технології згідно зразка, html-код в он-лайн редакторі:
Грід-елементи мають мінімальну ширину 300рх, макисмальну - 1fr, відступи між грід-елементами 2 rem, кольорові кола реалізувати блоками по flex-box технології. Забезпечити адаптивність сторінки через медіа-запити, точки переривання: 500рх, 768рх.
Завдання №5
See the Pen grid-covid-task by kravets (@raisa69) on CodePen.
Для грід-елементів .box використати nth-child(), медіазапити на 992px.
.container {display: grid;}
.container .box {display: grid;}