configure

_scss/partials/_contact.scss

@@ -0,0 +1,130 @@
+#contact-section {
+  .contact-description {
+    margin: 0 auto;
+    max-width: 440px;
+    font-size: 1.2em;
+    @include MQ(L) {
+      padding: 0;
+    }
+  }
+  .form-wrapper {
+    width: 500px;
+    margin: 20px auto;
+    padding: 0;
+    @include MQ(S600) {
+      width: 90%;
+    }
+    @include MQ(S400) {
+      width: 95%;
+    }
+    .input-wrapper {
+      padding: 0;
+      margin-bottom: 10px;
+      position: relative;
+      transition: all 0.5s ease;
+      @include MQ(M) {
+        margin-bottom: 10px;
+      }
+      @include MQ(SM) {
+        margin-bottom: 5px;
+      }
+      &:before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: $grey;
+        bottom: 0;
+        left: 0;
+        transition: all 0.5s ease;
+      }
+      &:after {
+        background-color: #00b7c7;
+        content: "";
+        position: absolute;
+        display: block;
+        width: 0px;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        transition: all 0.5s ease;
+      }
+      .input-label {
+        display: block;
+        padding-left: 4px;
+        font-size: 1.15em;
+        font-weight: 500;
+        transform: translateY(25px);
+        color: $white;
+        transition: all 0.5s ease;
+      }
+      .contact-input {
+        position: relative;
+        background: transparent;
+        width: 100%;
+        border: none;
+        padding: 20px 0 10px;
+        margin-bottom: -10px;
+        font-size: 1em;
+        line-height: 1.3;
+        color: $white;
+        font-family: $Whitney, $sans-serif-stack;
+        resize: none;
+        display: block;
+        overflow: hidden;
+        box-sizing: padding-box;
+        transition: all 0.5s ease;
+        &:focus {
+          outline: 0;
+          color: $white;
+        }
+      }
+    }
+    .is-active,
+    .is-completed {
+      padding: 15px 0 0 0;
+    }
+    .is-active:after {
+      width: 100%;
+    }
+    .is-active .input-label {
+      color: #00b7c7;
+    }
+    .is-completed .input-label {
+      font-size: 14px;
+      font-weight: 700;
+      transform: translateY(0);
+      padding: 0;
+    }
+    .is-completed .contact-input {
+      padding-top: 10px;
+    }
+    .message-btn {
+      display: block;
+      text-align: center;
+      cursor: pointer;
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size: 14px;
+      font-family: $Gotham, $sans-serif-stack;
+      line-height: 1.5;
+      padding: 12px 20px 10px;
+      margin: 70px auto 0;
+      color: $blue;
+      background: transparent;
+      border: 2px solid $blue;
+      border-radius: 3px;
+      position: relative;
+      overflow: hidden;
+      transition: all 0.3s ease;
+      &:hover {
+        color: $white;
+        background: $blue;
+      }
+    }
+    #message-label {
+      margin-bottom: 10px;
+    }
+  }
+}