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;
 }
@@ -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;
@@ -739,3 +740,77 @@ 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%;
+  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;
+}

index.html

@@ -1007,6 +1007,26 @@
         </div>
     </div>
 </section>
+<section class="connection">
+    <div class="main-container">
+        <div class="form-wrapper">
+            <h6>Остались вопросы?</h6>
+            <div class="form-line">
+            </div>
+            <p>
+                Свяжитесь с нашим специалистом, чтобы узнать, как быстро
+                и безболезненно для Вашего бизнеса повысить его эффективность!
+            </p>
+            <form>
+                <input type="email" name="login" placeholder="Электронная почта">
+                <input name="login" placeholder="Имя">
+                <input class="form-last-child" type="tel" name="tel"
+                       pattern="2[0-9]{3}-[0-9]{3}" placeholder="Телефон">
+                <button type="button" class="main-btn form-btn">Отправить</button>
+            </form>
+        </div>
+    </div>
+</section>
 <!--<section id="id_about_section">
     <div class="section-header">
         <h3>Что такое MySmart Office</h3>