html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Замки Франкции</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body style="background-image: url(твой фон); background-repeat: no-repeat; background-size: cover;">
<header>
<div class="container">
<strong>Замки Франции</strong>
</div>
</header>
<section>
<div class="container">
<div class="menu">
<ul>
<li>Разделы</li>
<li><a href="#" style="color: #d3d3d3;">Главная</a></li>
<li><a href="#" style="color: #d3d3d3;">Версаль</a></li>
<li><a href="#" style="color: #d3d3d3;">Замок Шамбор</a></li>
<li><a href="#">Замок Шенонсо</a></li>
<li><a href="#">Источник</a></li>
</ul>
</div>
<h1>Замок Шамбор</h1>
<div class="text">
<p><img src="твоя картинка замка" alt="замок шамбор"></p>
<p>твой текст</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>Автор:Фамилия Имя</p>
<p>апрель 2020 г.</p>
</div>
</footer>
</body>
</html>
CSS:
.container {
font-size: 1.75em;
width: 90%;
border: 4px double black;
}
header {
display: flex;
text-align: center;
justify-content: center;
font-size: 1.5em;
}
section {
display: flex;
text-align: center;
justify-content: space-around;
}
.menu {
width: 200px;
padding-right: 20px;
height: 100%;
float: left;
border-right: 4px double black;
}
.menu li {
font-weight: bold;
list-style-type: none;
padding: 10px;
}
.menu a {
color: black;
}
.text {
display: flex;
justify-content: space-around;
}
footer {
font-weight: bold;
display: flex;
text-align: center;
justify-content: center;
}
footer p {
margin: 5px;
}
img {
width: 350px;
padding: 10px;
}
