x
<html><head><title>Заголовок страницы</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}/* Стиль body */body { font-family: Arial; margin: 0;}/* Header/logo Title */.header { padding: 60px; text-align: center; background: #1abc9c; color: white;}/* Стиль верхней панели навигации */.navbar { display: flex; background-color: #333;}/* Стиль ссылок на панели навигации */.navbar a { color: white; padding: 14px 20px; text-decoration: none; text-align: center;}/* Изменить цвет при наведении */.navbar a:hover { background-color: #ddd; color: black;}/* Контейнер столбца */.row { display: flex; flex-wrap: wrap;}/* Создайте два неравных столбца, которые расположены рядом друг с другом *//* Сайдбар/Левый столбец */.side { flex: 30%; background-color: #f1f1f1; padding: 20px;}/* Главный столбец */.main { flex: 70%; background-color: white; padding: 20px;}/* Поддельное изображение, только для этого примера */.fakeimg { background-color: #aaa; width: 100%; padding: 20px;}/* Footer */.footer { padding: 20px; text-align: center; background: #ddd;}/* Адаптивный макет - при ширине экрана менее 700 пикселей расположите два столбца друг над другом, а не рядом друг с другом */@media screen and (max-width: 700px) { .row, .navbar { flex-direction: column; }}</style></head><body><!-- Примечание --><div style="background:yellow;padding:5px"> <h4 style="text-align:center">Измените размер окна браузера, чтобы увидеть отзывчивый эффект</h4></div><!-- Header --><div class="header"> <h1>Мой веб-сайт</h1> <p>С <b>flexible</b> макетом.</p></div><!-- Навигационная панель --><div class="navbar"> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a> <a href="#">Ссылка</a></div><!-- Гибкая сетка (контент) --><div class="row"> <div class="side"> <h2>Обо мне</h2> <h5>Мои фото:</h5> <div class="fakeimg" style="height:200px;">Изображение</div> <p>Какой-то бессмысленный текст culpa qui officia deserunt mollit anim..</p> <h3>Больше текста</h3> <p>Lorem ipsum dolor sit ame.</p> <div class="fakeimg" style="height:60px;">Изображение</div><br> <div class="fakeimg" style="height:60px;">Изображение</div><br> <div class="fakeimg" style="height:60px;">Изображение</div> </div> <div class="main"> <h2>ЗАГОЛОВОК</h2> <h5>Описание, Dec 7, 2025</h5> <div class="fakeimg" style="height:200px;">Изображение</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>ЗАГОЛОВОК</h2> <h5>Описание, Sep 2, 2025</h5> <div class="fakeimg" style="height:200px;">Изображение</div> <p>Еще бессмысленный текст..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div></div><!-- Footer --><div class="footer"> <h2>Footer</h2></div></body></html>