<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Измените размер окна браузера, чтобы увидеть отзывчивый эффект</h4>
</div>
<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>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>