<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Alina Pasechnaya">
<title>Главная страница</title>
<style>
@import url("style.css");
</style>
</head>
<body>
<header>
<a href="Сюрприз.html">
<img src="../img/Есенин.png" alt="Фотография" title="Кликните, чтобы открыть" class="photo"></a>
<p class="text_g">О поэте, о стихах, о песне</p>
</header>
<nav class="menu">
<ul>
<li><a href="#">О проекте</a></li>
<li><a href="#">Биография</a></li>
<li><a href="#">Стихотворения</a>
<ul>
<li><a href="#">Письмо женщине</a></li>
<li><a href="#">Заметался пожар голубой</a></li>
<li><a href="#">Хулиган</a></li>
<li><a href="#">Ещё что-то</a></li>
<li><a href="#">Что-то очень-очень длинное</a></li>
<li><a href="#">Ещё</a></li>
</ul>
</li>
<li><a href="#">Исполнители</a></li>
<li><a href="#">Материалы</a></li>
</ul>
</nav>
<main class="text">
Данный сайт является частью школьного проекта
</main>
<footer>
2020-2021
</footer>
</body>
</html>
@font-face {
font-family: "MarckScript";
src: url("../fonts/MarckScript-Regular.ttf") format('truetype');
}
:root {
background-image: url("../img/берёзы.jpg");
overflow: hidden;
}
html {
height: 100%;
}
header {
display: block;
position: absolute;
max-height: 20%;
width: 80%;
left: 0;
top: 0;
padding: 15px 10% 0 10%;
background-image: url("../img/берёзы.jpg");
clear: right;
}
.menu ul {
position: relative;
background-color: #FFFBD5;
list-style-type: none;
box-shadow: 0 0 10px 10px white;
background-attachment: fixed;
min-height: 5%;
text-align: center;
margin: 0 auto;
padding: 0;
width: 100%;
}
.menu ul li {
padding: 10px 15px;
}
.menu ul ul {
background-attachment: fixed;
display: none;
position: absolute;
background-color: #FFFBD5;
margin-top: 18px;
max-width: 40%;
margin-left: -10px;
padding: 0;
overflow: auto;
}
.menu ul ul>li:hover {
background-color: #FFF;
}
li>a {
font-family: "MarckScript";
font-size: 22px;
}
.menu ul li,
.menu ul {
display: inline-block;
}
.menu li:hover ul {
display: block;
}
.menu li:hover li {
display: block;
}
body {
margin: 14% auto;
max-width: 80%;
height: 100%;
min-height: 100%;
background-color: #FFFBD5;
overflow: auto;
}
footer {
display: block;
position: absolute;
bottom: 0;
padding: 2px 0 2px 0;
background-color: #FFFBD5;
width: 80%;
text-align: center;
}
.photo {
width: 11%;
height: 11%;
float: left;
}
.text_g {
display: inline;
margin-left: 5%;
font-family: "MarckScript";
text-align: center;
vertical-align: middle;
color: #FFFBD5;
font-size: 66px;
text-shadow: 8px 8px 10px #013220;
}
.text {
display: line-block;
padding: 2%;
color: #5C320B;
text-indent: 10px;
}
a {
display: inline;
color: #53BE6D;
text-decoration: none;
}
a:hover {
color: #013220;
}
До недавнего времени всё было нормально:
