Merge pull request #23 from ElizabethBil/your-order

order section cleaned the code
ElizabethBil · Oct 3, 2023 · 5a86eb6 · 5a86eb6
2 parents c0b67be + 85b0521
commit 5a86eb6
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 123 deletions.
diff --git a/src/css/base.css b/src/css/base.css
@@ -143,8 +143,7 @@ main {
   padding-bottom: 80px;
 }
 
-@media screen and (min-width: 375px) {
-}
+@media screen and (min-width: 375px) {}
 
 @media screen and (min-width: 768px) {
   .section-title {
@@ -165,8 +164,7 @@ main {
     padding-bottom: 100px;
   }
 
-  .your-order-section {
-  }
+  .your-order-section {}
 
   .testimonials-section {
     padding-top: 100px;
@@ -188,11 +186,10 @@ main {
     padding-bottom: 150px;
   }
 
-  .your-order-section {
-  }
+  .your-order-section {}
 
   .testimonials-section {
     padding-top: 150px;
     padding-bottom: 150px;
   }
-}
+}
diff --git a/src/css/order.css b/src/css/order.css
@@ -1,3 +1,6 @@
+/* ======MOBILE===== */
+
+
 .your-order-section {
     max-width: 100%;
     background-image: url('../img/order/order-bkg-mobile.jpg');
@@ -19,13 +22,10 @@
 }
 
 .order-title {
-    font-size: 32px;
-    font-weight: 500;
     line-height: 1.36;
-    letter-spacing: -0.03em;
-    color: #FCF9F9;
     max-width: 350px;
     margin-bottom: 40px;
+    text-align: left;
 }
 
 .order-colored-part {
@@ -37,41 +37,49 @@
 }
 
 .order-form-input {
+    font-family: inherit;
     display: block;
     width: 335px;
     height: 47px;
     padding: 14px 16px;
-    background-color: transparent;
-    outline: transparent;
     border-radius: 15px;
     font-size: 14px;
     font-weight: 400;
-    line-height: normal;
     letter-spacing: -0.02em;
+    background-color: transparent;
+    outline: transparent;
     border: 1px solid rgba(252, 249, 249, 0.10);
+    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .order-form-input::placeholder {
     color: rgba(252, 249, 249, 0.50);
 }
 
+.order-form-input:focus {
+    border-color: rgba(252, 249, 249, 0.60);
+}
+
+
 .order-section-textarea-wrapper {
     margin-bottom: 40px;
 }
 
 
 .order-form-coment {
+    font-family: inherit;
     display: block;
     width: 335px;
     height: 196px;
     padding: 14px 16px;
-    background-color: transparent;
-    outline: transparent;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.02em;
+    background-color: transparent;
+    outline: transparent;
+    resize: none;
     border: 1px solid rgba(252, 249, 249, 0.10);
     margin-bottom: 40px;
 }
@@ -84,7 +92,7 @@
     border: none;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: baseline;
     min-width: 145px;
     height: 49px;
     padding: 14px 36px;
@@ -99,8 +107,19 @@
     margin-left: auto;
     margin-right: auto;
     color: var(--white, #FCF9F9);
+    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.order-button:hover,
+.order-button:focus {
+    border-color: #ECD979;
+}
+
+.order-button:active {
+    border-color: #ECD979;
 }
 
+
 .order-button-icon {
     margin-left: 10px;
 }
@@ -109,7 +128,9 @@
     display: none;
 }
 
+/* ======/MOBILE===== */
 
+/* ======TABLET===== */
 
 
 @media screen and (min-resolution: 192dpi) and (min-width:768px) {
@@ -136,68 +157,29 @@
         margin-bottom: 100px;
     }
 
-
-
     .order-title {
-        font-size: 44px;
-        font-weight: 500;
         line-height: 1.31;
-        letter-spacing: -0.03em;
-        color: #FCF9F9;
         max-width: 545px;
-        margin-bottom: 40px;
     }
 
     .order-form-input {
-        display: block;
         width: 508px;
         height: 50px;
-        padding: 14px 16px;
-        background-color: transparent;
-        outline: transparent;
-        border-radius: 15px;
         font-size: 16px;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: -0.02em;
-        border: 1px solid rgba(252, 249, 249, 0.10);
+
     }
 
     .order-form-coment {
-        display: block;
         width: 508px;
         height: 196px;
-        padding: 14px 16px;
-        background-color: transparent;
-        outline: transparent;
-        border-radius: 8px;
         font-size: 16px;
-        font-weight: 400;
-        line-height: normal;
         letter-spacing: -0.02em;
-        border: 1px solid rgba(252, 249, 249, 0.10);
-        margin-bottom: 40px;
     }
 
     .order-button {
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 145px;
-        height: 49px;
-        padding: 14px 36px;
-        border-radius: 15px;
-        border: 1px solid rgba(252, 249, 249, 0.10);
-        background-color: transparent;
-        outline: transparent;
-        font-size: 14px;
-        font-weight: 600;
-        letter-spacing: -0.04em;
-        text-transform: uppercase;
+        font-size: 16px;
         margin-left: 0;
         margin-right: 0;
-        color: var(--white, #FCF9F9);
     }
 
     .order-content-img {
@@ -210,6 +192,10 @@
 }
 
 
+/* ======/TABLET===== */
+
+/* ======DESKTOP===== */
+
 @media screen and (min-resolution: 192dpi) and (min-width:1280px) {
     .your-order-section {
         background-image: url('../img/order/[email protected]')
@@ -245,67 +231,10 @@
 
 
     .order-title {
-        font-size: 44px;
-        font-weight: 500;
-        line-height: 1.31;
-        letter-spacing: -0.03em;
-        color: #FCF9F9;
         max-width: 545px;
         margin-bottom: 40px;
     }
 
-    .order-form-input {
-        display: block;
-        width: 508px;
-        height: 50px;
-        padding: 14px 16px;
-        background-color: transparent;
-        outline: transparent;
-        border-radius: 15px;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: -0.02em;
-        border: 1px solid rgba(252, 249, 249, 0.10);
-    }
-
-    .order-form-coment {
-        display: block;
-        width: 508px;
-        height: 196px;
-        padding: 14px 16px;
-        background-color: transparent;
-        outline: transparent;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: normal;
-        letter-spacing: -0.02em;
-        border: 1px solid rgba(252, 249, 249, 0.10);
-        margin-bottom: 40px;
-    }
-
-    .order-button {
-        border: none;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 145px;
-        height: 49px;
-        padding: 14px 36px;
-        border-radius: 15px;
-        border: 1px solid rgba(252, 249, 249, 0.10);
-        background-color: transparent;
-        outline: transparent;
-        font-size: 14px;
-        font-weight: 600;
-        letter-spacing: -0.04em;
-        text-transform: uppercase;
-        margin-left: 0;
-        margin-right: 0;
-        color: var(--white, #FCF9F9);
-    }
-
     .order-content-img-wrapper {
         margin-left: auto;
     }
@@ -314,9 +243,11 @@
         display: block;
     }
 
-    /* .bkg-ornament-placeholder {
-        height: 79px;
-    } */
+    .bkg-ornament-placeholder {
+        display: none;
+    }
 }
 
+/* ======DESKTOP===== */
+
 @media screen and (min-width: 1440px) {}
diff --git a/src/partials/order.html b/src/partials/order.html
@@ -3,13 +3,13 @@
     <div class="container order-container">
         <div class="order-bkg-img"></div>
         <div class="order-flex-wrapper">
-            <div class="order-form-wrapper">
-                <h2 class="order-title">
+            <div class="order-form-wrapper" id="order-section">
+                <h2 class="section-title order-title">
                     <span class="order-colored-part">Your order</span> is our priority: Personalized approach and
                     quality of
                     service
                 </h2>
-                <form class="order-form" id="order-section">
+                <form class="order-form">
                     <div class="order-section-field-wrapper">
                         <label class="order-form-label" for="user-name">
                             <input class="order-form-input" type="text" id="user-name" name="user-name"
@@ -30,7 +30,7 @@ <h2 class="order-title">
                     </div>
                     <button class="order-button" type="submit">
                         Send
-                        <svg class="order-button-icon" width="26" height="10">
+                        <svg class="order-button-icon" width="26" height="13">
                             <use href="../img/icons.svg#icon-arrow"></use>
                         </svg>
                     </button>
@@ -45,7 +45,7 @@ <h2 class="order-title">
                     alt="girl-wearing-embroidered-shirt">
             </div>
         </div>
-        <!-- <div class="bkg-ornament-placeholder "></div> -->
+        <div class="bkg-ornament-placeholder "></div>
     </div>
 </section>
 <!-- =======/Your order section======= -->