form

contacts.html

@@ -33,6 +33,14 @@
                 <div class="contacts-text">Отправьте письмо</div>
                 <div class="contacts-link">info@spatialsystems.ru</div>
             </div>
+            <div class="contacts-form">
+                <form>
+                    <input type="text" class="contacts-input" placeholder="Ваше имя">
+                    <input type="text" class="contacts-input" placeholder="Как с Вами связаться">
+                    <textarea class="contacts-textarea" placeholder="Что Вас интересует"></textarea>
+                    <a class="contacts-submit" href="#">Отправить</a>
+                </form>
+            </div>
         </div>
         <div class="contacts-footer">
 

style.css

@@ -472,7 +472,6 @@ html {
 .contacts-main {
   display: flex;
   flex-grow: 1;
-  width: 100%;
   justify-content: space-between;
   padding-bottom: 50px;
 
@@ -542,6 +541,63 @@ html {
   cursor: pointer;
 }
 
+.contacts-form {
+  width: 66%;
+
+  @media (max-width: 1200px) {
+    width: 100%;
+  }
+}
+
+.contacts-input {
+  width: 100%;
+  height: 60px;
+  color: #cccccc;
+  background: transparent;
+  border: 1px solid #cccccc;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 0;
+
+  font-size: 20px;
+  padding-left: 20px;
+  margin-bottom: 30px;
+  font-family: var(--primary-font);
+
+  &::placeholder {
+    color: #aaaaaa;
+  }
+}
+
+.contacts-textarea {
+  width: 100%;
+  height: 180px;
+  color: #cccccc;
+  background: transparent;
+  border: 1px solid #cccccc;
+  box-sizing: border-box;
+  outline: none;
+  border-radius: 0;
+
+  font-size: 20px;
+  padding-left: 20px;
+  padding-top: 20px;
+  margin-bottom: 30px;
+
+  resize: none;
+  font-family: var(--primary-font);
+
+
+  &::placeholder {
+    color: #aaaaaa;
+  }
+}
+
+.contacts-submit {
+  color: #cccccc;
+  text-decoration: underline;
+}
+
 .section {
   padding: 80px 60px;
   text-align: left;