MorozovDanil/InternetProg_MorozovDV_PIbd-22
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

выпадающий список, подвал, корректировка размеров

Browse Source
This commit is contained in:
MorozovDanil
2025-03-01 03:53:25 +04:00
parent 7e7051d83a
commit d1bca0d0a3
2 changed files with 91 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
css/style.css
View File

@@ -16,8 +16,8 @@ a {
div { div {
background-color: #312b46; background-color: #312b46;
width: 1300px; width: 1075px;
margin: 0 auto 10px; margin: 0 auto 20px;
} }
.author { .author {
@@ -29,19 +29,18 @@ div {
margin-top: 70px; margin-top: 70px;
} }
.menu {
margin-bottom: 50px;
}
.icons { .icons {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.icon { .icon {
width: 150px; width: 150px;
margin: 0 30px; margin-left: 25px;
}
.icon:nth-of-type(n+6){
margin-right: 25px;
} }
.card { .card {
@@ -57,4 +56,68 @@ h3 {
display: block; display: block;
} }
footer {
background-color: #312b46;
margin-top: 50px;
padding: 10px;
height: 150px;
color: rgb(163, 154, 87);
}
.menu {
display: flex;
align-items: center;
margin-bottom: 50px;
background-color: #312b46;
padding: 10px;
}
.logo img {
height: 50px;
}
.nav {
list-style: none;
display: flex;
margin-left: 20px;
}
.nav li {
position: relative;
padding: 10px;
}
.nav a, .dropdown span {
color: bisque;
cursor: pointer;
}
.features-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #413a58;
list-style: none;
padding: 5px 0;
min-width: 150px;
}
.features-menu li {
padding: 5px 10px;
}
.features-menu li a {
display: block;
color: bisque;
padding: 5px;
}
.features-menu li a:hover {
background: #574f73;
}
.dropdown:hover .features-menu {
display: block;
}

25
index.html
View File

@@ -2,19 +2,29 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<title>Заголовок страницы</title> <title>Манга онлайн</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<div class="menu"> <div class="menu">
<a href="index.html"> <a href="index.html" class="logo">
<img src="img/manga.png" alt="ЛОГО"> <img src="img/manga.png" alt="ЛОГО">
</a> </a>
<p>надо будет прикрепить, чтобы не двигался при прокрутке</p> <ul class="nav">
<p>Тут возможно будет каталог</p> <li class="dropdown">
<a href="account.html">вход</a> <span>Статьи ▾</span>
<ul class="features-menu">
<li><a href="#">Статья 1</a></li>
<li><a href="#">Статья 2</a></li>
<li><a href="#">Статья 3</a></li>
<li><a href="#">Статья 4</a></li>
</ul>
</li>
<li><a href="account.html">вход</a></li>
</ul>
</div> </div>
<div class="main"> <div class="main">
@@ -107,6 +117,11 @@
</section> </section>
</div> </div>
<footer>
<p>Спасибо, что посетили наш сайт, если возникли вопросы обращайтесь к нам на почту manga@manga.scom</p>
<p>Если вас интерисуют наши соц.сети, то вот они: </p>
</footer>
</body> </body>
</html> </html>