diff --git a/components/custom-container/custom-container.module.scss b/components/custom-container/custom-container.module.scss index 5617462..233335e 100644 --- a/components/custom-container/custom-container.module.scss +++ b/components/custom-container/custom-container.module.scss @@ -5,14 +5,13 @@ flex-direction: column; align-items: center; min-width: 100%; - padding: 2.4rem 0; + padding: 6rem 0 10rem; .h1 { font-family: "Zaph Humanist", sans-serif; font-size: 3rem; text-transform: uppercase; - color: variables.$secondary-color; - margin-bottom: 2.4rem; + color: variables.$quaternary-color; @media only screen and (max-width: variables.$max-width-middle) { font-size: 2.5rem; @@ -26,6 +25,7 @@ max-width: 70vw; text-align: justify; margin-bottom: 1.5rem; + margin-top: 1rem; @media only screen and (max-width: variables.$max-width-middle) { font-size: 1rem; @@ -37,18 +37,19 @@ .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; + letter-spacing: 0.05em; + font-size: 1.375rem; + line-height: 1.5em; color: variables.$secondary-color; max-width: 70vw; text-align: center; - margin-bottom: 3rem; + margin-bottom: 6rem; + margin-top: 0.5rem; @media only screen and (max-width: variables.$max-width-tablet) { font-size: 1.3rem; + margin-bottom: 1rem; } } diff --git a/pages/contact/contact.module.scss b/pages/contact/contact.module.scss index 82b0f89..e9cc968 100644 --- a/pages/contact/contact.module.scss +++ b/pages/contact/contact.module.scss @@ -1,16 +1,23 @@ @use "../../global/variables.scss" as variables; .item { + display: flex; flex-basis: 45%; min-height: 50vh; - display: flex; + align-items: center; flex-direction: column; padding: 0 1rem; margin-bottom: 2.5rem; - align-items: center; + justify-content: space-between; + + .container { + display: flex; + align-items: center; + flex-direction: column; + } &:first-child { - border-right: 1px solid variables.$secondary-color; + border-right: 1px solid #6a6f7b6b; } @media only screen and (max-width: variables.$max-width-tablet) { @@ -27,7 +34,7 @@ text-decoration: underline; font-size: 2rem; text-transform: uppercase; - color: variables.$quaternary-color; + color: variables.$secondary-color; margin: 1rem 0; @media only screen and (max-width: variables.$max-width-middle) { @@ -42,15 +49,12 @@ .h4 { font-family: "SuisseInt-Regular", sans-serif; - font-size: 1.5rem; - font-weight: 200; + font-size: 1rem; + font-weight: 600; text-transform: uppercase; - color: variables.$secondary-color; + color: #6a6f7b; margin-left: 5px; - - @media only screen and (max-width: variables.$max-width-middle) { - font-size: 1.5rem; - } + letter-spacing: 0.1em; } } @@ -58,7 +62,7 @@ font-family: "SuisseInt-Regular", sans-serif; text-decoration: none; font-weight: 200; - letter-spacing: 0.1rem; + letter-spacing: 0.05em; font-size: 1rem; line-height: 1.5rem; margin-bottom: 1.5rem; diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx index 562670a..447a6f7 100644 --- a/pages/contact/index.tsx +++ b/pages/contact/index.tsx @@ -74,55 +74,57 @@ export default function Contact ({ { informations.map((element, index) => ( +
-

{element.title}

-
- map-pin-icon -

{element.address.field_name}

-
-

{element.address.value}

-
- phone-icon -

{element.phone.field_name}

-
-

{element.phone.value}

-
- envelope-icon -

{element.email.field_name}

-
-

{element.email.value}

-
- fax-icon -

{element.fax.field_name}

+
+

{element.title}

+
+ map-pin-icon +

{element.address.field_name}

+
+

{element.address.value}

+
+ phone-icon +

{element.phone.field_name}

+
+

{element.phone.value}

+
+ envelope-icon +

{element.email.field_name}

+
+

{element.email.value}

+
+ fax-icon +

{element.fax.field_name}

+
+

{element.fax.value}

-

{element.fax.value}

+
)) } - -