Added Main-Info

index.html

@@ -1,23 +1,28 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Belazi Landing</title>
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css">
     <!-- Styles -->
     <link rel="stylesheet" href="./src/styles/style.css">
     <link rel="stylesheet" href="./src/styles/media.css">
 </head>
+
 <body>
 
     <header>
         <div class="container">
             <div class="header-wrap">
                 <div class="header-wrap__logo">
-                    <img src="./src/img/header/header-logo.png" alt="#">
+                    <a href="#">
+                        <img src="./src/img/header/header-logo.png" alt="#">
+                    </a>
                 </div>
                 <div class="header-wrap__opening">
                     <p>
@@ -39,10 +44,61 @@
     </header>
     <main>
         <section id="info">
-
+            <div class="container">
+                <div class="row no-gutter">
+                    <div class="col-lg-6">
+                        <div class="info-wrap">
+                            <div class="info-wrap__card">
+                                <div class="info-card__title">
+                                    <h1>Оригинальные<br>
+                                        запчасти<br>
+                                        для Белаз
+                                    </h1>
+                                </div>
+                                <div class="info-card__description">
+                                    <p>
+                                        с бесплатной доставкой <br>в Ваш город!
+                                    </p>
+                                </div>
+                                <div class="info-card__advantages">
+                                    <div class="info-advantages__item">
+                                        <p>
+                                            Дилерские цены - ниже на 20%,<br> работаем без посредников!
+                                        </p>
+                                    </div>
+                                    <div class="info-advantages__item">
+                                        <p>
+                                                Срочная бесплатная доставка<br>
+                                                за 7 дней
+                                        </p>
+                                    </div>
+                                    <div class="info-advantages__item">
+                                        <p>
+                                                Даем рассрочку<br>
+                                                6 месяцев                                                  
+                                        </p>
+                                    </div>
+                                    <div class="info-advantages__item">
+                                        <p>
+                                                Даем гарантию<br>
+                                                от 12 месяцев                                                 
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="price">
+            <div class="container">
+                
+            </div>
         </section>
     </main>
     <!-- Index Js -->
     <script src="./src/js/index.js"></script>
 </body>
+
 </html>

src/styles/media.css

@@ -22,4 +22,32 @@
     header .header-wrap__logo {
         text-align: center;
     }
+}
+@media (max-width: 576px) {
+    #info .info-wrap__card {
+        padding-left: 50px;
+    }
+    #info .info-card__title h1 {
+        font-size: 32px;
+    }
+    #info .info-card__description p {
+        font-size: 18px;
+    }
+    #info .info-advantages__item p {
+        font-size: 16px;
+    }
+    .no-gutter > [class*='col-'] {
+        padding-right:0;
+        padding-left:0;
+    }
+}
+@media (max-width: 400px) {
+    #info .info-wrap__card {
+        padding-left: 25px;
+    }
+}
+@media (max-width: 360px) {
+    #info .info-card__title h1 {
+        font-size: 29px;
+    }
 }

src/styles/style.css

@@ -26,6 +26,15 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+    font-family: 'ProximaNovaExtraBold';
+    src: url('../fonts/ProximaNova-Extrabld.eot');
+    src: url('../fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/ProximaNova-Extrabld.woff') format('woff'),
+    url('../fonts/ProximaNova-Extrabld.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    }
 
 h1,
 h2,
@@ -49,8 +58,6 @@ button {
 
 .container {
     max-width: 1170px;
-    padding-left: 10px;
-    padding-right: 10px;
 }
 /* Section Header */
 header {
@@ -108,6 +115,82 @@ header {
     position: relative;
     right: 28px;
 }
-.flex {
-    text-align: center;
+/* Section Maon-info */
+#info {
+    min-height: 860px;
+    background: url(../img/main-info/main-info__background.jpg) no-repeat center center;
+    background-size: cover;
 }
+.info-wrap__card {
+    background-color: #f7b516;
+    color: #000000;
+    height: 860px;
+    padding-top: 100px;
+    padding-left: 100px;
+}
+.info-card__title h1 {
+    text-transform: uppercase;
+    font-family: 'ProximaNovaBlack';
+    font-size: 38px;
+}
+.info-card__description p {
+    font-family: 'ProximaNovaExtraBold';
+    margin-top: 47px;
+    font-size: 24px;
+}
+.info-card__advantages {
+    margin-top: 100px;
+    font-family: 'ProximaNovaRegular';
+}
+.info-advantages__item {
+    margin-top: 45px;
+}
+.info-advantages__item p {
+    padding-left: 15px;
+    display: inline-block;
+    font-size: 18px;
+}
+.info-advantages__item:nth-child(1)::before {
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    position: relative;
+    bottom: 4px;
+    background: url(../img/main-info/icon-1.png) no-repeat center center;
+}
+.info-advantages__item:nth-child(2)::before {
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    position: relative;
+    bottom: 4px;
+    background: url(../img/main-info/icon-2.png) no-repeat center center;
+}
+.info-advantages__item:nth-child(3)::before {
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    position: relative;
+    bottom: 4px;
+    background: url(../img/main-info/icon-3.png) no-repeat center center;
+}
+.info-advantages__item:nth-child(4)::before {
+    content: '';
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    position: relative;
+    bottom: 4px;
+    background: url(../img/main-info/icon-4.png) no-repeat center center;
+}
+/* Section Main-price */
+#price {
+    min-height: 500px;
+    background: url(../img/main-price/main-price__background.png) no-repeat center center;
+    background-size: cover;
+    padding-top: 100px;
+    padding-bottom: 100px;
+}