Footer

index.html

@@ -254,6 +254,7 @@
             <div class="container">
                 <h2>Наши услуги</h2>
                 <div class="services-content">
+                    <a href="#">
                         <div class="service">
                             <div class="service-img">
                                 <img src="./src/img/services/service-1.png" alt="#">
@@ -262,6 +263,8 @@
                                 <h3>Аренда самосвала</h3>
                             </div>
                         </div>
+                    </a>
+                    <a href="#">
                         <div class="service">
                             <div class="service-img">
                                 <img src="./src/img/services/service-2.png" alt="#">
@@ -270,6 +273,9 @@
                                 <h3>Аренда спецтехники</h3>
                             </div>
                         </div>
+                    </a>
+
+                    <a href="#">
                         <div class="service">
                             <div class="service-img">
                                 <img src="./src/img/services/service-3.png" alt="#">
@@ -278,10 +284,65 @@
                                 <h3>Рытье траншеи</h3>
                             </div>
                         </div>
+                    </a>
+
+                </div>
+            </div>
+        </section>
+        <section id="contacts">
+            <div class="container">
+                <div class="contacts-content">
+                    <div class="contacts-info">
+                        <div class="contact-title">
+                            <h3>Контакты</h3>
+                        </div>
+                        <div class="contact-telephone">
+                            <p>
+                                8 800 034-23-34
+                                <br>
+                                8 495 034-23-34
+                            </p>
+                        </div>
+                        <div class="contact-place">
+                            <p>
+                                Московская обл. г. Балашиха,<br>
+                                пер. Столовой, д.23, кор. 34
+                            </p>
+                        </div>
+                        <div class="contact-email">
+                            <a href="#">Info@stroika.ru</a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </section>
     </main>
+    <footer>
+        <div class="container">
+            <div class="footer-wrap">
+                <div class="footer-content_top">
+                    <div class="footer-logo">
+                        <p>Granit<br>
+                            <small>Доставка нерудных материалов</small>
+                        </p>
+                    </div>
+                    <div class="footer-info">
+                        <p>8 800 342-13-33<br>
+                            <small>Бесплатный звонок по России</small>
+                        </p>
+                    </div>
+                </div>
+                <div class="footer-content_bottom">
+                    <div class="footer-copy">
+                        <span>© 2019. Гранти</span>
+                    </div>
+                    <div class="footer-btn">
+                        <button class="btn-yellow">Обратный звонок</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
 </body>
 
 </html>

src/img/footer/footer-logo.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36.469" height="38" viewBox="0 0 36.469 38">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #292929;
+        fill-rule: evenodd;
+        filter: url(#filter);
+      }
+    </style>
+    <filter id="filter" x="490" y="3530" width="36.469" height="38" filterUnits="userSpaceOnUse">
+      <feFlood result="flood" flood-color="#fff"/>
+      <feComposite result="composite" operator="in" in2="SourceGraphic"/>
+      <feBlend result="blend" in2="SourceGraphic"/>
+    </filter>
+  </defs>
+  <path id="Фигура_1" data-name="Фигура 1" class="cls-1" d="M490,3564.77v-2.25a2.863,2.863,0,0,1,2.845-2.88h16.318c2.231,0,3.382,1.07,3.382,2.66v3.21c0,1.66-1.1,2.49-3.382,2.49H492.631C490.971,3568,490,3566.88,490,3564.77Zm3.221,0.19h16.1a0.218,0.218,0,0,0,.214-0.22v-1.84a0.218,0.218,0,0,0-.214-0.22h-16.1a0.218,0.218,0,0,0-.215.22v1.84A0.218,0.218,0,0,0,493.221,3564.96Zm9.34-22.79a0.21,0.21,0,0,1,.215.21v7.06h0l-0.85,2.31a0.215,0.215,0,0,0,.2.29h1.194a0.206,0.206,0,0,0,.174-0.09l15.54-21.89a0.223,0.223,0,0,1,.284-0.06l3.116,1.9a0.225,0.225,0,0,1,.075.3l-0.918,1.62a0.236,0.236,0,0,0-.028.11v9.54a0.218,0.218,0,0,0,.214.22h0.648a0.209,0.209,0,0,1,.212.24l-0.684,4.89a0.216,0.216,0,0,1-.212.19h-0.178v1.47a0.216,0.216,0,0,0,.116.19,2.422,2.422,0,0,1,.711,3.75,0.216,0.216,0,0,0,.015.31l3.46,3.01a0.217,0.217,0,0,1-.14.38h-0.5a0.234,0.234,0,0,1-.14-0.05l-3.454-3.01a0.2,0.2,0,0,0-.207-0.04,2.844,2.844,0,0,1-.91.16,2.1,2.1,0,0,1-.885-0.2,0.2,0.2,0,0,0-.225.02l-3.747,3.07a0.175,0.175,0,0,1-.135.05h-0.436a0.242,0.242,0,0,1-.149-0.43l3.821-3.14a0.208,0.208,0,0,0,.043-0.28,2.352,2.352,0,0,1-.39-1.35,0.752,0.752,0,1,1,1.5,0,1.17,1.17,0,0,0,.029.27,0.213,0.213,0,0,0,.343.11h0a0.379,0.379,0,0,1,.481.01l0.165,0.14a0.213,0.213,0,0,0,.271.01,0.8,0.8,0,0,0,.278-0.67,0.934,0.934,0,0,0-.8-0.88,0.757,0.757,0,0,1-.627-0.75v-1.94a0.21,0.21,0,0,0-.214-0.21H519.4a0.221,0.221,0,0,1-.21-0.18l-0.965-4.88a0.214,0.214,0,0,1,.21-0.26h0.658a0.218,0.218,0,0,0,.214-0.22v-4.41a0.213,0.213,0,0,0-.4-0.1l-8.589,16.71a0.229,0.229,0,0,0-.024.1v0.62a0.21,0.21,0,0,1-.215.21H507.5a0.217,0.217,0,0,0-.214.22v1.09a0.21,0.21,0,0,1-.215.21H496.226a0.21,0.21,0,0,1-.214-0.21v-1.09a0.218,0.218,0,0,0-.214-0.22h-4.081a0.21,0.21,0,0,1-.214-0.21v-14.01a0.21,0.21,0,0,1,.214-0.21h10.844Zm6.715,3.95-0.009.01,2.508,1.65a0.214,0.214,0,0,0,.316-0.26l-1.192-3.09a0.213,0.213,0,0,0-.373-0.05Zm10.784-2.65a0.218,0.218,0,0,0,.214.22H520.6a0.218,0.218,0,0,0,.214-0.22v-7.29a0.213,0.213,0,0,0-.4-0.1l-0.323.61a0.218,0.218,0,0,0-.025.1v6.68Zm-0.369-8.08,0.922-1.77a0.218,0.218,0,0,0-.072-0.28l-1.437-.95a0.213,0.213,0,0,0-.328.22l0.515,2.72A0.211,0.211,0,0,0,519.691,3535.39Zm-2.319-1.25-1.064,1.87a0.217,0.217,0,0,0,.07.29l1.717,1.12a0.216,0.216,0,0,0,.325-0.23l-0.653-2.99A0.214,0.214,0,0,0,517.372,3534.14Zm-0.12,4.91-1.589-1.05a0.216,0.216,0,0,0-.326.23l0.622,2.86a0.215,0.215,0,0,0,.4.06l0.966-1.82A0.212,0.212,0,0,0,517.252,3539.05Zm-3.238.37-1.207,1.78a0.211,0.211,0,0,0,.061.3l1.815,1.18a0.216,0.216,0,0,0,.325-0.23l-0.608-2.95A0.212,0.212,0,0,0,514.014,3539.42Zm0.378,5.25-2-1.39a0.214,0.214,0,0,0-.321.25l1.14,3.09a0.211,0.211,0,0,0,.391.02l0.862-1.7A0.21,0.21,0,0,0,514.392,3544.67Zm-3.649,6.94,1-1.78a0.213,0.213,0,0,0-.062-0.28l-2.482-1.79a0.215,0.215,0,0,0-.322.26l1.482,3.57A0.211,0.211,0,0,0,510.743,3551.61Zm-1.52,1.43-1.786-3.89a0.214,0.214,0,0,0-.367-0.04l-1.452,2a0.222,0.222,0,0,0,.066.32l3.237,1.89A0.217,0.217,0,0,0,509.223,3553.04Zm-14.5-3.28h4.832a0.21,0.21,0,0,0,.214-0.21v-4.13a0.21,0.21,0,0,0-.214-0.21h-4.832a0.21,0.21,0,0,0-.215.21v4.13A0.21,0.21,0,0,0,494.724,3549.76Zm30.987,12.92h0.537a0.218,0.218,0,0,1,.215.22v1.08a0.218,0.218,0,0,1-.215.22h-11.6a0.218,0.218,0,0,1-.214-0.22v-1.08a0.218,0.218,0,0,1,.214-0.22h1.075a0.218,0.218,0,0,0,.214-0.22v-1.84a0.218,0.218,0,0,0-.214-0.22h-1.075a0.21,0.21,0,0,1-.214-0.21v-1.09a0.218,0.218,0,0,1,.214-0.22h11.6a0.218,0.218,0,0,1,.215.22v1.09a0.21,0.21,0,0,1-.215.21h-1.074a0.218,0.218,0,0,0-.215.22v1.84a0.218,0.218,0,0,0,.215.22h0.537Z" transform="translate(-490 -3530)"/>
+</svg>

src/styles/media.css

@@ -3,81 +3,131 @@
         flex-wrap: wrap;
         justify-content: center;
     }
+
     #catalogue .catalogue-content .item {
         margin-left: 10px;
         margin-top: 10px;
     }
 }
+
 @media (max-width: 919px) {
     #services .services-content {
         flex-wrap: wrap;
         justify-content: space-around;
     }
+
     #services .service {
         margin-top: 15px;
     }
 }
+
 @media (max-width: 868px) {
     #advantages .advantages-content {
         flex-wrap: wrap;
         justify-content: center;
     }
+
     #advantages .advantage {
         margin-top: 15px;
     }
 }
+
 @media (max-width: 768px) {
     header .header-content_top {
         flex-direction: column;
         align-items: center;
     }
+
     header .header-info {
         margin-top: 25px;
     }
 }
+
 @media (max-width: 679px) {
     #popular-items .pop-item {
         width: 250px;
     }
 }
+
 @media (max-width: 660px) {
     header .header-content_bottom ul {
         flex-direction: column;
         align-items: center;
     }
+
     header .header-content_bottom ul li {
         margin-top: 10px;
     }
 }
+
 @media (max-width: 619px) {
     #catalogue .catalogue-content .item {
         margin-left: 0px;
     }
 }
+
 @media (max-width: 576px) {
     #popular-items .popular-items_content {
         justify-content: space-around;
     }
+
+    #contacts .contacts-content {
+        justify-content: center;
+    }
+
+    #contacts .contacts-info {
+        padding-left: 30px;
+        padding-top: 45px;
+    }
+
+    footer .footer-content_top {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    footer .footer-content_bottom {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    footer .footer-copy {
+        align-self: center;
+        margin-top: 25px;
+    }
+
+    footer .footer-btn {
+        margin-top: 15px;
+    }
+
+    footer .footer-info p {
+        margin-top: 15px;
+        text-align: center;
+    }
 }
+
 @media (max-width: 519px) {
     #popular-items .pop-item {
         width: 80%;
     }
 }
+
 @media (max-width: 440px) {
     header .header-info {
         margin-top: 20px;
     }
+
     header .header-info p {
         display: block;
         padding: 0;
         margin-bottom: 10px;
         text-align: center;
     }
+
     header .header-info button {
         width: 100%;
     }
 }
+
 @media (max-width: 420px) {
     #main-info .more-info span {
         display: block;

src/styles/style.css

@@ -1,14 +1,23 @@
 * {
     box-sizing: border-box;
 }
+
 body {
     padding: 0;
     margin: 0;
 }
-h1,h2,h3,h4,h5,h6,p {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
     padding: 0;
     margin: 0;
 }
+
 h2 {
     text-align: center;
     text-transform: uppercase;
@@ -17,6 +26,7 @@ h2 {
     font-family: GothamProBold;
     margin-bottom: 60px;
 }
+
 .container {
     max-width: 960px;
     padding-right: 10px;
@@ -24,6 +34,7 @@ h2 {
     margin-left: auto;
     margin-right: auto;
 }
+
 .btn-yellow {
     color: #0d0d0d;
     font-family: GothamProMedium;
@@ -34,35 +45,43 @@ h2 {
     border: none;
     transition: all .1s;
 }
+
 .btn-yellow:hover {
     border: 2px solid #ffd200;
     background: none;
     color: #fff;
 }
+
 ul {
     padding: 0;
     margin: 0;
 }
+
 ul li {
     list-style: none;
     padding: 0;
     margin: 0;
 }
+
 a {
     text-decoration: none;
     color: #000
 }
+
 button {
     outline: none;
 }
+
 /* Header */
 header {
     padding-top: 25px;
 }
+
 .header-content_top {
     display: flex;
     justify-content: space-between;
 }
+
 .header-logo p {
     font-family: GothamProBold;
     font-size: 20px;
@@ -71,12 +90,14 @@ header {
     padding-left: 50px;
     text-transform: uppercase;
 }
+
 .header-logo p small {
     font-family: GothamProLight;
     font-size: 11px;
     color: #969696;
     text-transform: initial;
 }
+
 .header-logo::before {
     content: '';
     display: inline-block;
@@ -85,6 +106,7 @@ header {
     position: absolute;
     background: url(../img/header/logo.svg) no-repeat center center;
 }
+
 .header-info p {
     font-family: GothamProBold;
     font-size: 18px;
@@ -94,11 +116,13 @@ header {
     padding-right: 30px;
     line-height: 20px;
 }
+
 .header-info p small {
     font-family: GothamProMedium;
     font-size: 11px;
     color: #969696;
 }
+
 .header-info button {
     vertical-align: top;
     height: 40px;
@@ -112,10 +136,12 @@ header {
     transition: all .1s;
     min-width: 160px;
 }
+
 .header-info button:hover {
     background-color: #292929;
     color: #fff;
 }
+
 .header-content_bottom {
     min-height: 60px;
     background-color: #ffcc00;
@@ -128,10 +154,12 @@ header {
     position: relative;
     top: 30px;
 }
+
 .header-nav ul {
     display: flex;
     justify-content: space-between;
 }
+
 /* Section Main Info */
 #main-info {
     min-height: 550px;
@@ -139,12 +167,14 @@ header {
     background-size: cover;
     padding-top: 170px;
 }
+
 .main-info_content h1 {
     font-size: 36px;
     color: #fff;
     font-family: GothamProBold;
     text-transform: uppercase;
 }
+
 .main-info_content p {
     color: #fff;
     font-family: GothamProLight;
@@ -152,33 +182,40 @@ header {
     line-height: 22px;
     margin-top: 45px;
 }
+
 .more-info {
     margin-top: 60px;
 }
+
 .more-info button {
     min-width: 200px;
 }
+
 .more-info span {
     color: #fff;
     font-family: GothamProLight;
     font-size: 12px;
     padding-left: 30px;
 }
+
 .more-info span a {
     color: #fff;
     text-decoration: underline;
     font-family: GothamProMedium;
 }
+
 /* Section Catalogue */
 #catalogue {
     padding-top: 80px;
     padding-bottom: 80px;
 }
+
 .catalogue-content {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }
+
 .item {
     width: 300px;
     height: 470px;
@@ -188,15 +225,19 @@ header {
     padding-left: 35px;
     padding-top: 35px;
 }
+
 .item-image {
-    min-height: 130px;
+    height: 130px;
 }
+
 .item-image img {
     width: 100%;
 }
+
 .item:nth-child(3) img {
     height: 110px;
 }
+
 .item-title h3 {
     font-size: 15px;
     font-family: GothamProMedium;
@@ -205,38 +246,46 @@ header {
     border-bottom: 1px solid #c9c9c9;
     margin-bottom: 18px;
 }
+
 .item-description p {
     color: #626262;
     font-size: 13px;
     font-family: GothamProLight;
     margin-bottom: 30px;
 }
+
 .item-price p {
     font-size: 16px;
     font-family: GothamProMedium;
     color: #0f0f0f;
     margin-bottom: 35px;
 }
+
 .item-btn {
     padding-right: 23px;
     padding-left: 23px;
 }
+
 .item-btn button {
     width: 100%;
 }
+
 .item-btn button:hover {
     color: #000;
 }
+
 /* Section Advantages */
 #advantages {
     padding-top: 80px;
     padding-bottom: 80px;
     background-color: #f4f4f4;
 }
+
 .advantages-content {
     display: flex;
     justify-content: space-between;
 }
+
 .advantage {
     text-align: center;
     width: 300px;
@@ -248,19 +297,23 @@ header {
     padding-left: 25px;
     color: #292929;
 }
+
 .advantage:nth-child(3) {
     background-color: #fff;
     box-shadow: 0px 9px 21px 0px rgba(0, 0, 0, 0.05);
 }
+
 .advantage-image {
     min-height: 54px;
 }
+
 .advantage-title {
     margin-top: 30px;
     margin-bottom: 20px;
     font-family: GothamProMedium;
     font-size: 15px;
 }
+
 .advantage-description {
     font-family: GothamProLight;
     font-size: 13px;
@@ -272,11 +325,13 @@ header {
     padding-bottom: 80px;
     background-color: #fff;
 }
+
 .popular-items_content {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }
+
 .pop-item {
     width: 220px;
     height: 345px;
@@ -285,9 +340,11 @@ header {
     padding-top: 20px;
     margin-top: 15px;
 }
+
 .pop-img {
     min-height: 155px;
 }
+
 .pop-img span {
     height: 23px;
     width: 55px;
@@ -303,52 +360,60 @@ header {
     margin-left: 10px;
     margin-top: 10px;
 }
+
 .pop-title h3 {
     font-size: 13px;
     font-family: GothamProMedium;
     font-weight: normal;
     margin-top: 15px;
 }
+
 .pop-price {
     margin-bottom: 20px;
     margin-top: 25px;
     font-family: GothamProMedium;
     font-size: 16px;
 }
+
 .pop-item.sale p {
     color: #ff0000;
 }
+
 .pop-price span {
     font-size: 10px;
     text-decoration: line-through;
     color: #979797;
 }
+
 .pop-btn button {
     width: 100%;
 }
+
 .pop-btn button:hover {
     color: #000;
 }
+
 .pop-btn {
     padding-right: 18px;
     padding-left: 18px;
 }
+
 .pop-item:nth-child(3) {
     height: 360px;
 }
+
 /* Section Services */
-/* #main-info, #catalogue, #advantages, #popular-items {
-    display: nsdsdsdsdsdone;
-} */
 #services {
     padding-top: 80px;
     padding-bottom: 80px;
     background-color: #f4f4f4;
 }
+
 .services-content {
     display: flex;
     justify-content: space-between;
 }
+
 .service {
     text-align: center;
     font-family: GothamProMedium;
@@ -357,11 +422,194 @@ header {
     width: 300px;
     height: 253px;
     padding-top: 45px;
+    transition: all .2s;
+    cursor: pointer;
 }
+
+.service:hover {
+    opacity: .6;
+    border: 2px solid;
+}
+
 .service-img {
     height: 129px;
 }
+
 .service-title h3 {
     display: inline-block;
     border-bottom: 1px solid #c1c1c1;
 }
+
+/* Section Contacts */
+#contacts {
+    min-height: 520px;
+    background: url(../img/contacts/contacts-background.png) no-repeat center center;
+    background-size: cover;
+    padding-top: 80px;
+    padding-bottom: 80px;
+}
+
+.contacts-content {
+    display: flex;
+    justify-content: flex-end;
+    color: #292929;
+}
+
+.contacts-info {
+    width: 380px;
+    height: 360px;
+    background-color: #fff;
+    padding-left: 60px;
+    padding-top: 60px;
+}
+
+.contact-title h3 {
+    font-family: GothamProBold;
+    font-size: 20px;
+    text-transform: uppercase;
+}
+
+.contact-telephone {
+    margin-top: 50px;
+}
+
+.contact-telephone p {
+    font-size: 14px;
+    padding-left: 25px;
+    font-family: GothamProMedium;
+}
+
+.contact-telephone::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    margin-top: 2px;
+    background: url(../img/contacts/phone-icons.png);
+}
+
+.contact-place {
+    margin-top: 40px;
+    font-family: GothamProMedium;
+    font-size: 14px;
+}
+
+.contact-place p {
+    padding-left: 25px;
+}
+
+.contact-place::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 10px;
+    height: 15px;
+    margin-top: 2px;
+    background: url(../img/contacts/pin-icon.png);
+}
+
+.contact-email a {
+    font-family: GothamProMedium;
+    font-size: 14px;
+    text-decoration: underline;
+    display: block;
+    padding-left: 25px;
+}
+
+.contact-email {
+    margin-top: 40px;
+}
+
+.contact-email::before {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    width: 14px;
+    height: 10px;
+    margin-top: 3px;
+    background: url(../img/contacts/email-icon.png);
+}
+
+footer {
+    min-height: 196px;
+    background-color: #292929;
+    padding-bottom: 45px;
+    padding-top: 50px;
+}
+
+.footer-content_top {
+    display: flex;
+    justify-content: space-between;
+}
+
+.footer-copy span {
+    color: #fff;
+    font-size: 12px;
+    font-family: GothamProMedium;
+    font-weight: normal;
+}
+
+.footer-content_bottom {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+}
+
+.footer-logo p {
+    font-family: GothamProBold;
+    font-size: 20px;
+    color: #fff;
+    line-height: 19px;
+    padding-left: 50px;
+    text-transform: uppercase;
+}
+
+.footer-logo p small {
+    font-family: GothamProLight;
+    font-size: 11px;
+    color: #fff;
+    text-transform: initial;
+}
+
+.footer-logo::before {
+    content: '';
+    display: inline-block;
+    width: 38px;
+    height: 40px;
+    position: absolute;
+    background: url(../img/footer/footer-logo.svg) no-repeat center center;
+}
+
+.footer-info p {
+    font-family: GothamProBold;
+    font-size: 18px;
+    color: #fff;
+    text-align: right;
+    display: inline-block;
+    line-height: 20px;
+}
+
+.footer-info p small {
+    font-family: GothamProMedium;
+    font-size: 11px;
+    color: #fff;
+}
+
+.footer-copy {
+    align-self: flex-end;
+}
+
+.footer-btn button {
+    width: 160px;
+    height: 40px;
+    color: #fff;
+    background: none;
+    border: 2px solid #fff;
+}
+
+.footer-btn button:hover {
+    background-color: #ffd200;
+    color: #000;
+    border: none;
+}