agg footer

css/styles.css

@@ -721,14 +721,14 @@ header {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 160px;
+  margin-bottom: 143px;
 }
 .price-container,
 .price-container-active {
   position: relative;
   width: 256px;
   height: 834px;
-  margin-top: 20px;
+  margin-top: 10px;
   padding: 30px 16px 32px 16px;
   background: #f9fbff;
   border: #e6effa 1px solid;
@@ -752,15 +752,16 @@ header {
   left: 0;
   top: 0;
 }
+.price-container {
+  margin-top: 20px;
+}
 .price-container-active {
   box-shadow: 0 25px 25px #e6effa;
   height: 901px;
   position: relative;
   width: 256px;
   margin-top: 20px;
-  /*margin-right: 32px;*/
   padding: 20px 16px 32px 16px;
-  /*background: #f9fbff;*/
   background: white;
   border: #e6effa 1px solid;
   border-radius: 4px;
@@ -888,7 +889,7 @@ header {
   max-width: 610px;
   margin: 0 auto;
   padding-top: 12.7%;
-  padding-bottom: 12.7%;
+  padding-bottom: 14%;
 }
 .form-wrapper h6 {
   font-size: 60px;
@@ -951,4 +952,46 @@ input.form-last-child {
   font-size: 18px;
   letter-spacing: 0;
 }
+/*footer*/
+footer {
+  height: 226px;
+}
+.footer-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.footer-info {
+  width: 244px;
+  margin-top: 32px;
+}
+.footer-info img {
+  margin-bottom: 20px;
+}
+.footer-link {
+  margin-bottom: 15px;
+}
+.footer-img {
+  margin-top: 12px;
+}
+.footer-link a {
+  width: 244px;
+  font-size: 14px;
+  font-weight: 400;
+  color: #315197;
+  letter-spacing: 0.14px;
+}
+.footer-contacts {
+  text-align: right;
+  margin-top: 35px;
+}
+.footer-contacts-link {
+  margin-bottom: 9px;
+}
+.footer-contacts-link a {
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 30px;
+  color: #315197;
+  letter-spacing: 0.16px;
+}
 /*# sourceMappingURL=styles.css.map */
\ No newline at end of file

css/styles.less

@@ -593,13 +593,13 @@ header {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 160px;
+  margin-bottom: 143px;
 }
 .price-container, .price-container-active {
   position: relative;
   width: 256px;
   height: 834px;
-  margin-top: 20px;
+  margin-top: 10px;
   padding: 30px 16px 32px 16px;
   background: #f9fbff;
   border: #e6effa 1px solid;
@@ -621,15 +621,16 @@ header {
     top: 0;
   }
 }
+.price-container {
+  margin-top: 20px;
+}
 .price-container-active {
   box-shadow: 0 25px 25px #e6effa;
   height: 901px;
   position: relative;
   width: 256px;
   margin-top: 20px;
-  /*margin-right: 32px;*/
   padding: 20px 16px 32px 16px;
-  /*background: #f9fbff;*/
   background: white;
   border: #e6effa 1px solid;
   border-radius: 4px;
@@ -753,7 +754,7 @@ header {
   max-width: 610px;
   margin: 0 auto;
   padding-top: 12.7%;
-  padding-bottom: 12.7%;
+  padding-bottom: 14%;
   h6 {
     font-size: 60px;
     font-weight: 400;
@@ -814,3 +815,45 @@ input.form-last-child {
   font-size: 18px;
   letter-spacing: 0;
 }
+/*footer*/
+footer {
+  height: 226px;
+}
+.footer-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.footer-info {
+  width: 244px;
+  margin-top: 32px;
+  img {
+    margin-bottom: 20px;
+  }
+}
+.footer-link {
+  margin-bottom: 15px;
+}
+.footer-img {
+  margin-top: 12px;
+}
+.footer-link  a{
+  width: 244px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #315197;
+    letter-spacing: 0.14px;
+}
+.footer-contacts {
+  text-align: right;
+  margin-top: 35px;
+}
+.footer-contacts-link {
+  margin-bottom: 9px;
+}
+.footer-contacts-link a {
+   font-size: 16px;
+    font-weight: 300;
+  line-height: 30px;
+    color: #315197;
+    letter-spacing: 0.16px;
+}

index.html

@@ -1006,8 +1006,7 @@
             <button type="button" class="price-btn">Попробовать бесплатно</button>
         </div>
     </div>
-</section>
-<section class="connection">
+</section>o<section class="connection">
     <div class="main-container">
         <div class="form-wrapper">
             <h6>Остались вопросы?</h6>
@@ -1027,6 +1026,33 @@
         </div>
     </div>
 </section>
+<footer>
+    <div class="main-container footer-wrapper">
+        <div class="footer-info">
+            <img src="img/logo.png">
+            <div class="footer-link">
+                <a href="">Лицензионное соглашение</a>
+            </div>
+            <div class="footer-link">
+             <a href="">Политика конфиденциальности</a>
+            </div>
+            <img class="footer-img" src="img/footer-img.png">
+        </div>
+        <div class="footer-contacts">
+            <div class="footer-contacts-link">
+                <a href="">Вход для клиентов</a>
+            </div>
+            <div class="footer-contacts-link">
+                <a href="">+7 000 000 00 00</a>
+            </div>
+            <div class="footer-contacts-link">
+                <a href="">exemple@email.com</a>
+            </div>
+            <div class="footer-contact-img">
+            </div>
+        </div>
+    </div>
+</footer>
 <!--<section id="id_about_section">
     <div class="section-header">
         <h3>Что такое MySmart Office</h3>