refactor contact form typography

assets/scss/components/_contact.scss

@@ -20,135 +20,17 @@
         z-index: 1;
       }
     }
-    h4 {
-      margin: 0 0 30px 0;
-      font-family: $primary-font;
-      font-size: 25px;
-      color: $secondary-color;
-    }
-    p {
-      margin: 0;
-      font-size: 16px;
-      line-height: 34px;
-      color: #7e7e8a;
-      font-family: $secondary-font;
-    }
     a {
-      color: #7e7e8a;
+      color: $body-color;
       text-decoration: underline;
-      font-size: 16px;
-      line-height: 34px;
-      font-family: $secondary-font;
-      display: block;
     }
   }
 }
 .contact-form {
   padding: 50px 0 100px 0;
-  &-title {
-    h4 {
-      font-family: $primary-font;
-      color: $secondary-color;
-      margin: 0 0 30px 0;
-      font-size: 35px;
-    }
-  }
   &-input {
     .form-group {
       margin-bottom: 30px;
-      .form-control {
-        border: 1px solid #aeb8be;
-        border-radius: 7px;
-        padding: 10px 30px;
-        font-size: 14px;
-        font-family: $secondary-font;
-        color: #282f49;
-        &::placeholder {
-          /* Chrome, Firefox, Opera, Safari 10.1+ */
-          color: #282f49;
-        }
-        &:-ms-input-placeholder {
-          /* Internet Explorer 10-11 */
-          color: #282f49;
-        }
-        &::-ms-input-placeholder {
-          /* Microsoft Edge */
-          color: #282f49;
-        }
-        &:focus {
-          outline: 0;
-          box-shadow: none;
-        }
-      }
-      input.form-control {
-        height: 55px;
-        border: 1px solid #aeb8be;
-      }
-    }
-    .form-check {
-      padding: 0;
-      margin-bottom: 30px;
-      margin-top: -10px;
-      &-input {
-        padding: 0;
-        height: initial;
-        width: initial;
-        margin-bottom: 0;
-        // display: none;
-        cursor: pointer;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-        margin-left: 10px;
-        margin-top: 23px;
-      }
-      &-label {
-        position: relative;
-        cursor: pointer;
-        &::before {
-          content: "";
-          -webkit-appearance: none;
-          background-color: transparent;
-          border: 1px solid #aeb8be;
-          height: 20px;
-          width: 20px;
-          border-radius: 4px;
-          display: inline-block;
-          position: relative;
-          vertical-align: middle;
-          cursor: pointer;
-          margin-right: 8px;
-        }
-      }
-
-      input:checked + label:after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 6px;
-        left: 7px;
-        width: 6px;
-        height: 12px;
-        border: solid #0079bf;
-        border-width: 0 2px 2px 0;
-        transform: rotate(45deg);
-      }
-    }
-    .contact-form-btn {
-      padding: 20px 45px;
-      display: inline-block;
-      font-size: 16px;
-      font-family: $secondary-font;
-      background: $primary-color;
-      border-radius: 7px;
-      color: #fff;
-      transition: all 0.3s ease;
-      &:hover {
-        background: #425fee;
-        box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
-        transform: scale(1.03);
-        text-decoration: none;
-      }
     }
   }
   #map {

layouts/contact/list.html

@@ -44,17 +44,10 @@
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
-                xmlns="http://www.w3.org/2000/svg"
+                <path fill="#f1f6f9"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
+                  data-name="Path 1354" />
-                />
               </svg>
             </div>
             <div class="icon">
@@ -71,17 +64,10 @@
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
-                xmlns="http://www.w3.org/2000/svg"
+                <path fill="#f1f6f9"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
+                  data-name="Path 1354" />
-                />
               </svg>
             </div>
             <div class="icon">
@@ -89,25 +75,20 @@
             </div>
           </div>
           <h4>Phone & Email</h4>
-          <p>{{ $address.phone }}</p>
+          <p>{{ $address.phone }}<br>
             <a href="mailto:{{ $address.email }}">{{ $address.email }}</a>
+          </p>
+
         </div>
       </div>
       <div class="col-lg-4">
         <div class="contact__info_item">
           <div class="contact__info_item-icon">
             <div class="icon-background">
-              <svg
+              <svg xmlns="http://www.w3.org/2000/svg" width="122.457" height="109.702" viewBox="0 0 122.457 109.702">
-                xmlns="http://www.w3.org/2000/svg"
+                <path fill="#f1f6f9"
-                width="122.457"
-                height="109.702"
-                viewBox="0 0 122.457 109.702"
-              >
-                <path
-                  fill="#f1f6f9"
                   d="M49.855527 9.984102c-4.337424-.815024-8.766002-1.633779-13.152776-1.113889-8.196034.975107-15.344329 6.696991-19.41555 13.879649s-5.363288 15.655094-5.187042 23.907191c.156996 7.385448 1.479849 14.875357 4.972905 21.38465s9.337384 11.961229 16.458344 13.922244c4.833752 1.331211 10.056683 1.044827 14.74081 2.829827 7.560693 2.881382 12.209757 10.489626 19.01235 14.870016a25.650039 25.650039 0 0024.16316 1.698928c8.342551-3.846451 14.03857-12.107291 16.641338-20.918947s2.471077-18.187687 1.756125-27.346305c-.843101-10.912846-3.01686-22.783019-11.354287-29.869462-6.037066-5.130853-14.208558-6.772976-21.995428-8.235353z"
-                  data-name="Path 1354"
+                  data-name="Path 1354" />
-                />
               </svg>
             </div>
             <div class="icon">
@@ -123,59 +104,84 @@
     </div>
   </div>
 </section>
+
 <section class="contact-form">
   <div class="container">
     <div class="row">
       <div class="col-lg-6">
         <div class="contact-form-title">
-          <h4>Contact Form</h4>
+          <h3>Contact Form</h3>
         </div>
         <div class="contact-form-input">
           <form id="contact-form" action="{{ .Site.Params.formspreeURL }}" method="POST">
+
             <div class="form-row">
+
               <div class="form-group col-md-6 pr-3">
-                <input
+                <input type="text" class="form-control" name="Name" placeholder="Name" required />
-                  type="text"
-                  class="form-control"
-                  name="Name"
-                  placeholder="Name"
-                  required
-                />
               </div>
               <div class="form-group col-md-6">
-                <input
+                <input type="email" class="form-control" name="email" placeholder="Email" required />
-                  type="email"
-                  class="form-control"
-                  name="email"
-                  placeholder="Email"
-                  required
-                />
               </div>
             </div>
+
             <div class="form-group">
-              <textarea
+              <textarea class="form-control" id="message" rows="6" name="message" placeholder="Message"></textarea>
-                class="form-control"
-                id="exampleFormControlTextarea1"
-                rows="6"
-                name="message"
-                placeholder="Message"
-              ></textarea>
             </div>
-            <div class="form-check">
+
+            <div class="form-group">
+              <div class="form-check small">
                 <input type="checkbox" class="form-check-input" name="agreement" id="aggrement" required />
                 <label class="form-check-label" for="aggrement">
                   I agree that my submitted data is being collected and
-                stored.</label
+                  stored.</label>
-              >
+              </div>
             </div>
-            <button type="submit" class="btn contact-form-btn" id="contact-form-button">Send Message</button>
+
+            <button type="submit" class="btn btn-primary btn-zoom" id="contact-form-button">Send Message</button>
             <p id="contact-form-status" class="mt-3"></p>
           </form>
+
+          <!-- <form>
+            <div class="form-row">
+              <div class="form-group col-md-6">
+                <label for="inputEmail4">Email</label>
+                <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
+              </div>
+              <div class="form-group col-md-6">
+                <label for="inputPassword4">Password</label>
+                <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
+              </div>
+            </div>
+            <div class="form-group">
+              <label for="inputAddress">Address</label>
+              <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
+            </div>
+            <div class="form-group">
+              <label for="inputAddress2">Address 2</label>
+              <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
+            </div>
+
+            <div class="form-group">
+              <div class="form-check">
+                <input class="form-check-input" type="checkbox" id="gridCheck">
+                <label class="form-check-label" for="gridCheck">
+                  I agree that my submitted data is being collected and
+                  stored.
+                </label>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary">Sign in</button>
+          </form> -->
+
+
+
         </div>
       </div>
       <div class="col-lg-6">
         {{ $map := .Site.Params.map }}
-        <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}></div>
+        <div id="map" data-lat={{ $map.latitude }} data-long={{ $map.longitude }} data-pin={{ $map.pinImage | absURL }}>
+        </div>
       </div>
     </div>
   </div>