[#75] feat: style add to contact page

damla · Feb 24, 2021 · b3a714d · b3a714d
1 parent 6526ff9
commit b3a714d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 9 deletions.
diff --git a/components/custom-container/custom-container.module.scss b/components/custom-container/custom-container.module.scss
@@ -38,10 +38,14 @@
     .h3 {
         font-family: "SuisseInt-Regular", sans-serif;
         font-size: 1.7rem;
+        font-weight: 200;
+        letter-spacing: 0.1rem;
+        font-size: 1.5rem;
+        line-height: 1.5rem;
         color: variables.$secondary-color;
         max-width: 70vw;
         text-align: center;
-        margin-bottom: 1.5rem;
+        margin-bottom: 3rem;
 
         @media only screen and (max-width: variables.$max-width-tablet) {
             font-size: 1.3rem;

diff --git a/pages/contact/contact.module.scss b/pages/contact/contact.module.scss
@@ -1,12 +1,52 @@
 @use "../../global/variables.scss" as variables;
 
 .item {
-    border: 1px solid green;
+    border: 2px double black;
     flex-basis: 40%;
     min-height: 50vh;
     display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
+    margin-bottom: 2.5rem;
 
     @media only screen and (max-width: variables.$max-width-tablet) {
         min-height: 40vh;
+        margin-bottom: 3rem;
+    }
+
+    .boxTitle {
+        font-family: "Zaph Humanist", sans-serif;
+        text-decoration: underline;
+        font-size: 2rem;
+        text-transform: uppercase;
+        color: variables.$secondary-color;
+        margin: 1rem 0;
+
+        @media only screen and (max-width: variables.$max-width-middle) {
+            font-size: 2rem;
+        }
+    }
+
+    .h4 {
+        font-family: "Zaph Humanist", sans-serif;
+        font-size: 1.5rem;
+        text-transform: uppercase;
+        color: variables.$secondary-color;
+        // margin-bottom: 2.4rem;
+
+        @media only screen and (max-width: variables.$max-width-middle) {
+            font-size: 1.5rem;
+        }
+    }
+
+    .p {
+        font-family: "SuisseInt-Regular", sans-serif;
+
+        text-decoration: none;
+        font-weight: 200;
+        letter-spacing: 0.1rem;
+        font-size: 1rem;
+        line-height: 1.5rem;
+        margin-bottom: 1.5rem;
     }
 }
diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx
@@ -67,13 +67,15 @@ export default function Contact ({
             {
               informations.map((element, index) => (
                 <div key={index} className={styles.item}>
-                  <h3>{element.city}</h3>
-                  <h4>{element.address.field_name}</h4>
-                  <p>{element.address.value}</p>
-                  <h4>{element.phone.field_name}</h4>
-                  <p>{element.phone.value}</p>
-                  <h4>{element.email.field_name}</h4>
-                  <p>{element.email.value}</p>
+                  <h3 className={styles.boxTitle}>{element.city}</h3>
+                  <h4 className={styles.h4}>{element.address.field_name}</h4>
+                  <p className={styles.p}>{element.address.value}</p>
+                  <h4 className={styles.h4}>{element.phone.field_name}</h4>
+                  <p className={styles.p}>{element.phone.value}</p>
+                  <h4 className={styles.h4}>{element.email.field_name}</h4>
+                  <p className={styles.p}>{element.email.value}</p>
+                  <h4 className={styles.h4}>FAX</h4>
+                  <p className={styles.p}>+90 (212) 875 87 95</p>
                 </div>
               ))
             }
@@ -83,3 +85,4 @@ export default function Contact ({
     </>
   )
 }
+// lat: 41.231282, lng: 28.420897