Ver Fonte

фотки сломались, нужно починить!

123 há 7 meses atrás
pai
commit
6b2e0f1cb3
3 ficheiros alterados com 276 adições e 6 exclusões
  1. BIN
      .DS_Store
  2. 204 5
      index.html
  3. 72 1
      style.css

BIN
.DS_Store


+ 204 - 5
index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <link rel="stylesheet" href="style.css">
     <meta charset="UTF-8">
@@ -7,18 +8,19 @@
     <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="">
+                <img src="FitoNyashki/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>
-                        <li class="nav_item"><a href="">Контакт</a></li>
-                        
+                        <li class="nav_item"><a href="">Контакты</a></li>
+
                     </ul>
                 </nav>
             </div>
@@ -37,6 +39,203 @@
             </div>
         </div>
     </section>
-
+    <section>
+        <div class="container us">
+            <img src="FitoNyashki/images/about.png" alt="О нас">
+            <div class="content">
+                <h2>
+                    О нас
+                </h2>
+                <p>
+                    Наша команда 
+                </p>
+            </div>
+        </div>
+    </section>
+    <section id="cotolog">
+        <div class="container">
+            <div class="cotolog_d">
+                <h2>
+                    Каталог
+                </h2>
+            </div>
+            <div class="cards">
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растение 1
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растение 2
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растение 3
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растеня 4
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растение 5
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                <div class="card">
+                    <img src="FitoNyashki/images/chris-lee-70l1tDAI6rM-unsplash 1.png" alt="">
+                    <div class="card_d">
+                        <p>
+                            Растение 6
+                        </p>
+                        <p>
+                            1000₽
+                        </p>
+                    </div>
+                    <button>
+                        Заказать
+                    </button>
+                </div>
+                
+        </div>
+    </section>
+    <section id="guide">
+        <div class="container">
+            <div class="guide_content">
+                <div class="guide_form">
+                    <h2>
+                        Получите гайд по любому растению бесплатно
+                    </h2>
+                    <form action="">
+                        <input type="text" placeholder="Имя"> 
+                        <input type="text" placeholder="Номер"> 
+                    </form>
+                    <button>Получить</button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="block blockom">
+        <div class="container">
+            <div class="block_d">
+                <h2>
+                    Блок
+                </h2>
+                <p>
+                    Узнайте 
+                </p>
+            </div>
+            <div class="blocks">
+                <div class="block">
+                    <img src="FitoNyashki/images/news_card.png" alt="">
+                        <div class="block_d">
+                            <p>
+                                Как выбрать растение
+                            </p>
+                        </div>
+                </div>
+                <div class="block">
+                    <img src="FitoNyashki/images/news_card.png" alt="">
+                        <div class="block_d">
+                            <p>
+                                Как выбрать растение
+                            </p>
+                        </div>
+                </div>
+                <div class="block">
+                    <img src="FitoNyashki/images/news_card.png" alt="">
+                        <div class="block_d">
+                            <p>
+                                Как выбрать растение
+                            </p>
+                        </div>
+                </div>
+                <div class="block">
+                    <img src="FitoNyashki/images/news_card.png" alt="">
+                        <div class="block_d">
+                            <p>
+                                Как выбрать растение
+                            </p>
+                        </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section id="svaz">
+        <div class="svaz1">
+            <div class="svaz_txt">
+                <h2>
+                    Оставайтесь с нами на связи
+                </h2>
+                <p>
+                    +79999999999
+                </p>
+                <p>
+                    Телеграм
+                </p>
+                <p>
+                    ВКонтакте
+                </p>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <img src="FitoNyashki/images/logo 1.svg" alt="" style="width: 50px;">
+        <p>
+            Home plants
+        </p>
+        <p>
+            2024
+        </p>
+    </footer>
 </body>
+
 </html>

+ 72 - 1
style.css

@@ -61,7 +61,78 @@ button:hover{
     align-items: center;
 }
 #cover{
-    background-image: url(img/main.png);
+    background-image: url(FitoNyashki/images/main.png);
     background-repeat: no-repeat;
     background-size: cover;
 }
+.us{
+    display:flex;
+    align-items: center;
+}
+.content{
+    margin-left: 70px;
+}
+h2{
+    font-size: 48px;
+}
+.card_d{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.cards{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.card{
+    width: 300px;
+    margin-bottom: 60px;
+}
+#guide{
+    background-image: url(FitoNyashki/images/form_bg.png);
+}
+.guide_content{
+    height: 40vh;
+}
+.guide_content{
+    display: flex;
+    align-items: center;
+}
+input{
+    height: 30px;
+    width: 240px;
+}
+.blocks{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.block{
+    margin-bottom: 60px;
+}
+
+.block_d:h2{
+    margin: 0px;
+}
+
+#svaz{
+    margin: 0;
+}
+.svaz1{
+    background-image: url(FitoNyashki/images/contact_img.png);
+    height: 52vh;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+}
+.svaz_txt{
+    width: 650px;
+}
+footer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}