<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Времена года</title>
<style>
body{font-family:sans-serif;margin:0;padding:20px;}
header{display:flex;align-items:flex-start;gap:40px;margin-bottom:20px;}
.logo img{width:100px;height:auto;}
.section{height:300px;padding:20px;border:1px solid #ccc;}
#summer{background-color:rgb(229,179,179);} /* Лето - розовый (цвет задан числом, но по желанию оставлен комментарий) */
#autumn{background-color:rgb(179,229,179);} /* Осень - зеленый */
#winter{background-color:rgb(179,179,229);} /* Зима - сиреневый */
#spring{background-color:rgb(179,217,217);} /* Весна - голубой */
ul{list-style-type:none;padding:0;}
a{text-decoration:none;color:blue;}
</style>
</head>
<body>
<header>
<div class="logo">
<a href="index.html">
<img src="https://via.placeholder.com/100" alt="Логотип">
</a>
</div>
<div class="content">
<h1>Времена года</h1>
<h3>Оглавление:</h3>
<ul>
<li><a href="#summer">Лето</a></li>
<li><a href="#autumn">Осень</a></li>
<li><a href="#winter">Зима</a></li>
<li><a href="#spring">Весна</a></li>
</ul>
</div>
</header>
<div id="summer" class="section" style="background-color: pink;"><h2>Лето (розовый)</h2></div>
<div id="autumn" class="section" style="background-color: lightgreen;"><h2>Осень (зелёный)</h2></div>
<div id="winter" class="section" style="background-color: lavender;"><h2>Зима (сиреневый)</h2></div>
<div id="spring" class="section" style="background-color: lightblue;"><h2>Весна (голубой)</h2></div>
</body>
</html>
