1. Пример размещения элементов с Flexbox:

HTML-код:

<div class="menu">

<div>Главная</div>

<div>Курсы</div>

<div>Контакты</div>

</div>

CSS-код:

.menu {

display: flex;

gap: 20px;

}

Результат: три элемента располагаются горизонтально с промежутками 20 пикселей.

2. Пример создания сетки CSS Grid:

HTML-код:

<div class="courses">

<div>WEB-технологии</div>

<div>Базы данных</div>

<div>Программирование</div>

</div>

CSS-код:

.courses {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

}

.courses div {

background-color: lightblue;

padding: 15px;

}

Результат: три карточки размещаются в трёх одинаковых столбцах с промежутками 10 пикселей.

3. Пример адаптивного изменения фона:

CSS-код:

body {

background-color: white;

}

@media (max-width: 600px) {

body {

background-color: lightgray;

}

}

Результат: на экранах шириной более 600 пикселей фон страницы белый, а при ширине 600 пикселей и меньше становится светло-серым.