From c2051ff557a4db8af818b7e6fde1ae58930d1ac6 Mon Sep 17 00:00:00 2001 From: Vitalii Date: Fri, 6 Dec 2024 18:49:16 +0000 Subject: [PATCH] ready scss page --- src/images/contact-us/facebook-logo.png | Bin 0 -> 299 bytes src/images/contact-us/instagram.png | Bin 0 -> 576 bytes src/images/contact-us/twitter.png | Bin 0 -> 399 bytes src/index.html | 123 ++++++++++++++++-- src/styles/blocks/footer.scss | 166 ++++++++++++++++++++++++ src/styles/blocks/header.scss | 2 +- src/styles/blocks/testimonials.scss | 1 - src/styles/page.scss | 1 + src/styles/style.scss | 1 + 9 files changed, 282 insertions(+), 12 deletions(-) create mode 100644 src/images/contact-us/facebook-logo.png create mode 100644 src/images/contact-us/instagram.png create mode 100644 src/images/contact-us/twitter.png create mode 100644 src/styles/blocks/footer.scss diff --git a/src/images/contact-us/facebook-logo.png b/src/images/contact-us/facebook-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..0c16fc4152954d7c09253e419c3a6455fc804aab GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?3oVGw3ym^DWND9BhG z^; z`L4?y2lIsHV&*r0KZ_LkE-c@s}XtTww0#sdag9-41YzDue7_54(1GB@Lv9m^9v z3LI3WPwd#@p(o_9`+bJRLcvKwQzqG;ychqOftQQ7yiLH9|3}aJR!LTq)I!F|z8+s? z*Ug^KaXawNdVP!MN?D#o5#gbmS@``XOlvq{Tc^v|D1D-mvtPnI@!j;@i8W6cqeP_E qH49XC_%v`vENz(a@v8xkqWr6?OYH^r?JfcOg~8L+&t;ucLK6U@ylOoF literal 0 HcmV?d00001 diff --git a/src/images/contact-us/instagram.png b/src/images/contact-us/instagram.png new file mode 100644 index 0000000000000000000000000000000000000000..8c5a66da6b6a1b41551c251c650ae9e57b8a2d22 GIT binary patch literal 576 zcmV-G0>Ax%kyJpDp0 zkw5%ZTZlvRc!w;-`~@RXK?-PG3(wO6X?+#zYB;4yfszFb^aQ7GgPihw!#d|(gx9IO ziMVzU(wAMx`LM;l>*nOK- zTzp2X=^+lJ8j-PKkgTr}dH)WAuLfMMuiFclS2~&>kneDKEYmZ!-+SH@!cmc4c{bIs z>)E%SHCK?&^z1_2q2O|%I}TJjce#X-AktQL*{nnzyuv_`j!wlpl^TcM zBxv&v9acs-wI>T^9@`)2ScozKwBvlh_7~%^RMz$J(BpU48D~_D=4jri7YSp|Tk-F; zVt_APfuVSPJFu4Y>_m~k^3sAp)}s^PIl16-Nz0$g8clcGA|0=yg^Nn0!AdAxTp^xP zVu(y4y!uWOuIF3mDI^7Slm#SENebHPwKt-Y7}|
  • - + About us
  • - + Services
  • - + Testimonials
  • - + Contact Us
    • @@ -104,7 +104,7 @@

    We believe in the power of bold ideas that
    -

    Intro

    +

    Intro


    By the same illusion which lifts the
    horizon.

    @@ -125,7 +125,7 @@

    Who we are

    -
    +

    Our expertise @@ -180,7 +180,7 @@

    -
    +

    Services

    @@ -268,7 +268,7 @@

    -
    +

    Testimonials

    @@ -337,7 +337,7 @@

    -
    +
    Vision, Passion, Results
    @@ -345,9 +345,112 @@

    We are sure that first-rate job is possible only if all three components are united.

    -
    +

    + diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..a1a0bbcf0a --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,166 @@ +.footer{ + + &__wrapper{ + height: 100%; + padding: 72px 0 80px; + background-color: #2C2C2C; + border-radius: 20px 20px 0 0; + color: #fff; + } + + + @include page-grid; + + + &__message{ + display: flex; + flex-direction: column; + + grid-column: 1 /-1; + + & button{ + @extend %button; + + } + + &-title{ + font-size: 32px; + font-weight: 600; + line-height: 150%; + + } + + &-input{ + background-color: #2C2C2C; + height: 41px; + width: 100%; + box-sizing: border-box; + margin-bottom: 44px; + border: hidden; + border-bottom: 1px solid white; + color: white; + font-size: 15px; + line-height: 150%; + font-weight: 600; + outline: 0; + + + &::placeholder{ + color: white; + opacity: .7; + + + } + + &:hover{ + border-bottom: 1px solid #144ED4; + + } + + + } + } + + &__contact{ + grid-column: 1 / -1; + + + + &-title{ + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: #fff; + } + + &-information{ + + & h3{ + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + font-weight: 700; + opacity: .5; + } + + & p{ + margin: 0; + font-size: 24px; + font-weight: 600; + } + + &:nth-of-type(-n + 2) p{ + margin-bottom: 40px; + } + + &-image{ + object-fit: contain; + object-position: center; + width: 32px; + height: 32px; + margin-right: 32px; + } + } + } + + &__menu{ + display: flex; + flex-direction: column; + margin-top: 80px; + grid-column: span 2; + + @include on-tablet{ + margin-top: 139px; + grid-column: 1 / -1; + } + + @include on-small-desktop{ + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + &-logo{ + display: block; + width: 48px; + height: 28px; + } + + &-list{ + margin-top: 48px; + padding: 0; + width: 100%; + display: flex; + flex-direction: column; + justify-content: start; + + @include on-tablet{ + flex-direction: row; + + + & :not(:last-child){ + margin-right: 64px; + } + } + + @include on-small-desktop{ + justify-content: end; + } + + } + + &-link{ + color: #fff; + text-decoration: none; + } + + &-item{ + list-style: none; + size: 13px; + line-height: 150%; + letter-spacing: 3px; + font-weight: 700; + margin:0 0 24px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 72ecb090f8..0331deae2c 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -25,7 +25,7 @@ } &-text{ - font-family: sans-serif; + font-family: "open sans", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 18px; line-height: 150%; diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss index d2a2445f12..242b9175d0 100644 --- a/src/styles/blocks/testimonials.scss +++ b/src/styles/blocks/testimonials.scss @@ -144,7 +144,6 @@ letter-spacing: 3px; font-weight: 700; font-family: poppins, Arial, Helvetica, sans-serif; - } } } diff --git a/src/styles/page.scss b/src/styles/page.scss index ec36172eb7..1afc8ae006 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -1,6 +1,7 @@ .page{ min-width: 320px; font-family: poppins, Arial, Helvetica, sans-serif; + scroll-behavior: smooth; } body { diff --git a/src/styles/style.scss b/src/styles/style.scss index 6991579911..c0a2e06d75 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -9,5 +9,6 @@ @import './blocks/services'; @import './blocks/testimonials'; @import './blocks/components'; +@import './blocks/footer';