agg section form

css/styles.css

@@ -85,7 +85,7 @@ header {
   background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
-  opacity: 0.5;
+  opacity: 0.65;
   margin-right: 0;
   margin-left: 0;
 }
@@ -717,8 +717,11 @@ header {
 }
 /*price*/
 .price-wrapper {
+  margin: 0 auto;
+  width: 100%;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 160px;
 }
 .price-container,
 .price-container-active {
@@ -726,9 +729,7 @@ header {
   width: 256px;
   height: 834px;
   margin-top: 20px;
-  /*margin-right: 32px;*/
   padding: 30px 16px 32px 16px;
-  /*background: #f9fbff;*/
   background: #f9fbff;
   border: #e6effa 1px solid;
   border-radius: 4px;
@@ -874,4 +875,80 @@ header {
   color: white;
   margin-top: 27px;
 }
+/*forms*/
+.connection {
+  background-image: url("../img/background-form.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+.form-wrapper {
+  text-align: center;
+  height: 548px;
+  max-width: 610px;
+  margin: 0 auto;
+  padding-top: 12.7%;
+  padding-bottom: 12.7%;
+}
+.form-wrapper h6 {
+  font-size: 60px;
+  font-weight: 400;
+  color: white;
+  letter-spacing: 0.6px;
+  margin-bottom: 20px;
+}
+.form-wrapper p {
+  font-size: 20px;
+  font-weight: 400;
+  color: white;
+  letter-spacing: 0;
+  line-height: 30px;
+  margin-bottom: 55px;
+}
+.form-wrapper input {
+  width: 582px;
+  height: 52px;
+  border-radius: 10px;
+  padding-left: 28px;
+  background: white;
+  margin-bottom: 30px;
+  border: none;
+}
+input.form-last-child {
+  margin-bottom: 0;
+  background: white;
+}
+.form-line {
+  margin: 0 auto;
+  width: 398px;
+  height: 10px;
+  border-bottom: #c94d4e 2px solid;
+  margin-bottom: 47px;
+}
+.form-btn {
+  margin-top: -100px;
+  border: none;
+}
+::-webkit-input-placeholder {
+  color: #c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}
+::-moz-placeholder {
+  color: #c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}
+/* Firefox 19+ */
+:-moz-placeholder {
+  color: #c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}
+/* Firefox 18- */
+:-ms-input-placeholder {
+  color: #c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}
 /*# sourceMappingURL=styles.css.map */
\ No newline at end of file

css/styles.less

@@ -82,7 +82,7 @@ header {
   background-size: 100% 100%;
   background-position: center;
   margin-top: -733px;
-  opacity: 0.5;
+  opacity: 0.65;
   margin-right: 0;
   margin-left: 0;
 }
@@ -261,9 +261,9 @@ header {
   }
 }
 .advertising-text-order {
-   @media (max-width: 576px) {
+  @media (max-width: 576px) {
     width: 100%;
-     order: 0;
+    order: 0;
   }
   width: 110%;
   h2 {
@@ -539,7 +539,7 @@ header {
   background-position: center;
   padding-top: 140px;
   padding-bottom: 115px;
-      margin-bottom: 148px;
+  margin-bottom: 148px;
 
   @media (max-width: 576px) {
     padding-top: 51px;
@@ -549,18 +549,18 @@ header {
 .technology-container-wrapper {
   display: flex;
   width: 100%;
-   @media (max-width: 576px) {
+  @media (max-width: 576px) {
     flex-wrap: wrap;
-     justify-content: flex-start;
+    justify-content: flex-start;
   }
 }
 .technology-containe {
   width: 50%;
   margin-top: 50px;
   display: flex;
-     @media (max-width: 576px) {
-     justify-content: center;
-       width: 100%;
+  @media (max-width: 576px) {
+    justify-content: center;
+    width: 100%;
   }
 }
 .technology-card {
@@ -576,9 +576,9 @@ header {
     letter-spacing: 0.16px;
   }
   img {
-     @media (max-width: 576px) {
-    width: 142px;
-  }
+    @media (max-width: 576px) {
+      width: 142px;
+    }
   }
   @media (max-width: 576px) {
     padding-right: 0;
@@ -589,17 +589,18 @@ header {
 }
 /*price*/
 .price-wrapper {
+  margin: 0 auto;
+  width: 100%;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 160px;
 }
 .price-container, .price-container-active {
   position: relative;
   width: 256px;
   height: 834px;
   margin-top: 20px;
-  /*margin-right: 32px;*/
   padding: 30px 16px 32px 16px;
-  /*background: #f9fbff;*/
   background: #f9fbff;
   border: #e6effa 1px solid;
   border-radius: 4px;
@@ -621,7 +622,7 @@ header {
   }
 }
 .price-container-active {
-   box-shadow: 0 25px 25px #e6effa;
+  box-shadow: 0 25px 25px #e6effa;
   height: 901px;
   position: relative;
   width: 256px;
@@ -738,4 +739,78 @@ header {
   background: #c94d4e;
   color: white;
   margin-top: 27px;
-}
\ No newline at end of file
+}
+/*forms*/
+.connection {
+  background-image: url("../img/background-form.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+}
+.form-wrapper {
+  text-align: center;
+  height: 548px;
+  max-width: 610px;
+  margin: 0 auto;
+  padding-top: 12.7%;
+  padding-bottom: 12.7%;
+  h6 {
+    font-size: 60px;
+    font-weight: 400;
+    color: white;
+    letter-spacing: 0.6px;
+    margin-bottom: 20px;
+  }
+  p {
+    font-size: 20px;
+    font-weight: 400;
+    color: white;
+    letter-spacing: 0;
+    line-height: 30px;
+    margin-bottom: 55px;
+  }
+  input {
+    width: 582px;
+    height: 52px;
+    border-radius: 10px;
+    padding-left: 28px;
+    background: white;
+    margin-bottom: 30px;
+    border: none;
+  }
+}
+input.form-last-child {
+  margin-bottom: 0;
+  background: white;
+}
+.form-line {
+  margin: 0 auto;
+  width: 398px;
+  height: 10px;
+  border-bottom: #c94d4e 2px solid;
+  margin-bottom: 47px;
+}
+.form-btn {
+  margin-top: -100px;
+  border: none;
+}
+::-webkit-input-placeholder {
+  color:#c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}
+::-moz-placeholder {
+  color:#c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}/* Firefox 19+ */
+:-moz-placeholder {
+  color:#c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}/* Firefox 18- */
+:-ms-input-placeholder {
+  color:#c0c0c0;
+  font-size: 18px;
+  letter-spacing: 0;
+}