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

2025-03-01 03:53:25 +04:00
parent 7e7051d83a
commit d1bca0d0a3
2 changed files with 91 additions and 13 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -16,8 +16,8 @@ a {

 div {
    background-color: #312b46;
-    width: 1300px;
-    margin: 0 auto 10px;
+    width: 1075px;
+    margin: 0 auto 20px;
 }

 .author {
@@ -29,19 +29,18 @@ div {
    margin-top: 70px;
 }

-.menu {
-    margin-bottom: 50px;
-}
-
 .icons {
    display: flex;
    flex-wrap: wrap;
 }

 .icon {
-    
    width: 150px;
-    margin: 0 30px;
+    margin-left: 25px;
+}
+
+.icon:nth-of-type(n+6){
+    margin-right: 25px;
 }

 .card {
@@ -57,4 +56,68 @@ h3 {
    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;
+}

--- a/index.html
+++ b/index.html
@@ -2,19 +2,29 @@
 <html lang="ru">

 <head>
-	<title>Заголовок страницы</title>
+	<title>Манга онлайн</title>
 	<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">
 </head>

 <body>
 	<div class="menu">
-		<a href="index.html">
+		<a href="index.html" class="logo">
 			<img src="img/manga.png" alt="ЛОГО">
 		</a>
-		<p>надо будет прикрепить, чтобы не двигался при прокрутке</p>
-		<p>Тут возможно будет каталог</p>
-		<a href="account.html">вход</a>
+		<ul class="nav">
+			<li class="dropdown">
+				<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 class="main">
@@ -107,6 +117,11 @@
 		</section>
 	</div>
 	
+	<footer>
+		<p>Спасибо, что посетили наш сайт, если возникли вопросы обращайтесь к нам на почту manga@manga.scom</p>
+		<p>Если вас интерисуют наши соц.сети, то вот они: </p>
+	</footer>
+
 </body>

 </html>