Explorar o código

1 страница сайта, Шавокшин и Ольховский делайте 2

123 hai 7 meses
pai
achega
9b08872b90
Modificáronse 2 ficheiros con 109 adicións e 0 borrados
  1. 42 0
      index.html
  2. 67 0
      style.css

+ 42 - 0
index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <section id="cover">
+        <header>
+            <div class="container header">
+                <img src="images/logo 1.svg" alt="">
+                <nav>
+                    <ul class="nav_menu">
+                        <li class="nav_item"><a href="">О нас</a></li>
+                        <li class="nav_item"><a href="">Блог</a></li>
+                        <li class="nav_item"><a href="">Каталог</a></li>
+                        <li class="nav_item"><a href="">Контакт</a></li>
+                        
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <div class="container cover">
+            <div>
+                <h1>
+                    Джунгли у вас дома
+                </h1>
+                <p>
+                    У нас растения, за которыми легко ухаживать
+                </p>
+                <button>
+                    Выбрать растение
+                </button>
+            </div>
+        </div>
+    </section>
+
+</body>
+</html>

+ 67 - 0
style.css

@@ -0,0 +1,67 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+.container {
+    width: 1140px;
+    margin: 0 auto;
+}
+h1{
+    font-family: "Playfair Display", serif;
+    font-size: 64px;
+}
+h1+p{
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-size: 36px;
+}
+li, p, button{
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-size: 24px;
+}
+h1, p{
+    margin: 0;
+}
+h1{
+    margin-bottom: 20px;
+}
+section {
+    margin-bottom: 100px;
+    }
+.nav_item
+{list-style: none;
+margin-left: 60px;
+}
+a{
+    text-decoration: none;
+    color: black;
+}
+ul{
+    display: flex;
+}
+.header{
+    display: flex ;
+    justify-content: space-between;
+    align-items: center;
+}
+button{
+    padding: 20px 30px;
+    border: 1px solid black;
+    background-color: rgba(255, 255, 255, 0);
+    color: black;
+    margin-top: 30px;
+}
+button:hover{
+    background-color: black;
+    color: white;
+    transition: 1s;
+}
+.cover{
+    height: 80vh;
+    display: flex;
+    align-items: center;
+}
+#cover{
+    background-image: url(img/main.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+}