Trang chủ Khám phá Trợ giúp
Đăng nhập
kp11
/
FitoNyashki
48
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

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

123 7 tháng trước cách đây
mục cha
353630eef8
commit
9b08872b90
2 tập tin đã thay đổi với 109 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  1. 42 0
      index.html
  2. 67 0
      style.css

+ 42 - 0
index.html
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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;
 
+}