diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Shapes.png b/src/images/Shapes.png index 26ed3e89b0..f43ca26b5f 100644 Binary files a/src/images/Shapes.png and b/src/images/Shapes.png differ diff --git a/src/images/expertise/image-1.png b/src/images/expertise/image-1.png new file mode 100644 index 0000000000..13276acbde Binary files /dev/null and b/src/images/expertise/image-1.png differ diff --git a/src/images/expertise/image-2.png b/src/images/expertise/image-2.png new file mode 100644 index 0000000000..bdbb10401f Binary files /dev/null and b/src/images/expertise/image-2.png differ diff --git a/src/images/expertise/image-3.png b/src/images/expertise/image-3.png new file mode 100644 index 0000000000..4420926026 Binary files /dev/null and b/src/images/expertise/image-3.png differ diff --git a/src/images/icon/icon-arrow.svg b/src/images/icon/icon-arrow.svg new file mode 100644 index 0000000000..abcb7f51b8 --- /dev/null +++ b/src/images/icon/icon-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-burger-menu.svg b/src/images/icon/icon-burger-menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icon/icon-burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 0000000000..5546739d1e --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1 @@ + diff --git a/src/images/icon/icon-facebook-hover.svg b/src/images/icon/icon-facebook-hover.svg new file mode 100644 index 0000000000..f7702f1a7f --- /dev/null +++ b/src/images/icon/icon-facebook-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-facebook.svg b/src/images/icon/icon-facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/icon/icon-facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-instagram-hover.svg b/src/images/icon/icon-instagram-hover.svg new file mode 100644 index 0000000000..5254f81d89 --- /dev/null +++ b/src/images/icon/icon-instagram-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-instagram.svg b/src/images/icon/icon-instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/icon/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-quotes.svg b/src/images/icon/icon-quotes.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/icon/icon-quotes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-x-hover.svg b/src/images/icon/icon-x-hover.svg new file mode 100644 index 0000000000..dbbad8e877 --- /dev/null +++ b/src/images/icon/icon-x-hover.svg @@ -0,0 +1 @@ + diff --git a/src/images/icon/icon-x.svg b/src/images/icon/icon-x.svg new file mode 100644 index 0000000000..b43a9ff168 --- /dev/null +++ b/src/images/icon/icon-x.svg @@ -0,0 +1 @@ + diff --git a/src/images/logo/air-logo.svg b/src/images/logo/air-logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/air-logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg deleted file mode 100644 index a81933296e..0000000000 --- a/src/images/logo/dia-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/logo/favicon.svg b/src/images/logo/favicon.svg new file mode 100644 index 0000000000..c699b3f1fe --- /dev/null +++ b/src/images/logo/favicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git "a/src/images/slider/arrow-left \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" "b/src/images/slider/arrow-left \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" new file mode 100644 index 0000000000..f410785350 --- /dev/null +++ "b/src/images/slider/arrow-left \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..2055a17bbc 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,3 @@ - - + + diff --git "a/src/images/slider/arrow-right \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" "b/src/images/slider/arrow-right \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" new file mode 100644 index 0000000000..c28b323ddb --- /dev/null +++ "b/src/images/slider/arrow-right \342\200\223 \320\272\320\276\320\277\321\226\321\217.svg" @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..71e16adb61 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/slider-image-1.png b/src/images/slider/slider-image-1.png new file mode 100644 index 0000000000..3e37de9795 Binary files /dev/null and b/src/images/slider/slider-image-1.png differ diff --git a/src/images/slider/slider-image-2.png b/src/images/slider/slider-image-2.png new file mode 100644 index 0000000000..939ac5d418 Binary files /dev/null and b/src/images/slider/slider-image-2.png differ diff --git a/src/images/slider/slider-image-3.png b/src/images/slider/slider-image-3.png new file mode 100644 index 0000000000..6828c6aba3 Binary files /dev/null and b/src/images/slider/slider-image-3.png differ diff --git a/src/images/slider/slider-image-4.png b/src/images/slider/slider-image-4.png new file mode 100644 index 0000000000..9070ba7809 Binary files /dev/null and b/src/images/slider/slider-image-4.png differ diff --git a/src/images/slider/slider-image-5.png b/src/images/slider/slider-image-5.png new file mode 100644 index 0000000000..10e4acf944 Binary files /dev/null and b/src/images/slider/slider-image-5.png differ diff --git a/src/images/slider/slider-image-6.png b/src/images/slider/slider-image-6.png new file mode 100644 index 0000000000..2f7e0facbe Binary files /dev/null and b/src/images/slider/slider-image-6.png differ diff --git a/src/images/testimonials/photo-1.png b/src/images/testimonials/photo-1.png new file mode 100644 index 0000000000..aad8998c07 Binary files /dev/null and b/src/images/testimonials/photo-1.png differ diff --git a/src/images/testimonials/photo-2.png b/src/images/testimonials/photo-2.png new file mode 100644 index 0000000000..52b8bc9b6c Binary files /dev/null and b/src/images/testimonials/photo-2.png differ diff --git a/src/images/testimonials/photo-3.png b/src/images/testimonials/photo-3.png new file mode 100644 index 0000000000..ca03e1fc88 Binary files /dev/null and b/src/images/testimonials/photo-3.png differ diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..9ac91e48b7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,763 @@ - + - Dia + Strategic Agency + + + + + + + + + + - -

Dia

- + +
+
+
+
+ + + + +
+ +
+ +
+ +
+ + Hire us + +
+
+
+ + +
+ +
+
+
+
+

Strategic Agency

+

+ We believe in the power of bold ideas that +
+ can solve business challenges. +

+ + Learn more + +
+ +
+
+
+ slide + slide + slide + slide + slide + slide +
+ +
+
+
+
+
+
+
+
INtro
+
+ By the same illusion which lifts the +
+ horizon. +
+
+
+
+
+
+
+
+
+ +
+
+
+

Who we are

+

+ We embrace a strategic approach to creative ideas. We are interested + in people and human relationships. This is the main thing you need + to know about us. We believe in the power of bold ideas that can + solve business challenges. +

+
+
+ +
+
+
+

Our expertise

+
+
+ branding +

Branding

+

+ We create additional value for companies, products, services + as well as verbal and visual waysto deliver it to the + audience. +

+
+ +
+ communication +

Communication

+

+ We strive to create communications that can increase media + performance. We use everything — words, meanings, stories, + art, movies. +

+
+ +
+ strategy +

Strategy

+ +

+ We create business growth strategies, from the moment of its + birth to the achievement of thenecessary business indicators. +

+
+
+
+
+
+
+ +
+
+
+
+
+
Services
+ +
+ Air is a full service creative agency +
+ +
+

+ Deep analytics, strong strategy and bright creative ideas. +

+ +

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

+
+
+
+ +
+
001
+ +
    +
  • Brand Development
    • +
  • Copywriting
    • +
  • Logo & Webite Design
    • +
  • Packaging
    • +
+ + + + Learn more + +
+ +
+
002
+ +
    +
  • Сontent Production
    • +
  • Graphic Design
    • +
  • Video Production
    • +
  • Post Production
    • +
+ + + + Learn more + +
+ +
+
003
+ +
    +
  • Marketing Strategy
    • +
  • Email Marketing
    • +
  • Paid Advertising
    • +
  • Blog Content & SEO
    • +
+ + + + Learn more + +
+ +
+
004
+ +
    +
  • Digital Communications
    • +
  • Influencer Marketing
    • +
  • Product Placements
    • +
  • StrategicPartnerships
    • +
+ + + + Learn more + +
+
+
+
+ +
+
+
+
+
+
Testimonials
+
+ What +
+ people say +
+
+
+ +
+
+
+ photo +
+
+ +
+ +

+ AIR’s ideas are refreshing and out of the box. Authentic team that + focuses on the important path of the brand. +

+ + Tal Gilad + + + Teach for America + +
+ +
+
+
+ photo +
+
+ +
+ +

+ AIR is an exceptional agency that leads with creative talent, + first-class account servicing. +

+ + + Azadeh Hawkins + + + + Hawkins Consulting + +
+ +
+
+
+ photo +
+
+ +
+ +

+ AIR raises the agency bar to stratospheric heights on both + creative output and client service. +

+ + Michel Grover + + Hulu +
+
+
+
+ +
+
+
+
+

Vision, Passion, Results

+

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

+ + Send + +
+
+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..9bdf3d56ea 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,36 @@ 'use strict'; + +const slider = document.querySelector('.slides'); +const arrowLeft = document.querySelector('.slider__arrow--left'); +const arrowRight = document.querySelector('.slider__arrow--right'); +const slides = Array.from(slider.querySelectorAll('img')); +const slideCount = slides.length; +let slideIndex = 0; + +arrowLeft.addEventListener('click', showPreviousSlide); +arrowRight.addEventListener('click', showNextSlide); + +function showPreviousSlide() { + slideIndex = (slideIndex - 1 + slideCount) % slideCount; + + updateSlider(); +} + +function showNextSlide() { + slideIndex = (slideIndex + 1) % slideCount; + updateSlider(); +} + +function updateSlider() { + slides.forEach((slide, index) => { + if (index === slideIndex) { + slide.style.display = 'block'; + slide.style.display = 'block'; + } else { + slide.style.display = 'none'; + } + }); +} + +updateSlider(); + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..61af0ed76b --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,37 @@ +.about-us { + padding-top: 120px; + + @include tablet { + padding-top: 148px; + } + + &__content { + @include page-grid; + } + + // &__wrapper { + // @include page-grid; + + // grid-column: 1 / -1; + // } + + &__heading { + grid-column: 1/-1; + margin-bottom: 24px; + text-align: center; + } + + &__subtitle { + grid-column: 1/-1; + margin-bottom: 120px; + text-align: center; + + @include tablet { + margin-bottom: 128px; + } + + @include desktop { + grid-column: 3/-3; + } + } +} diff --git a/src/styles/blocks/button-secondary.scss b/src/styles/blocks/button-secondary.scss new file mode 100644 index 0000000000..0f0893b79d --- /dev/null +++ b/src/styles/blocks/button-secondary.scss @@ -0,0 +1,28 @@ +.button-secondary { + display: flex; + text-decoration: none; + cursor: pointer; + align-items: center; + gap: 16px; + align-self: start; + + @include hover( + background-color, + $color-dark-blue, + '.button-secondary__arrow' + ); + + &__arrow { + background-color: $color-blue; + height: 40px; + width: 40px; + border-radius: 50%; + background-image: url(../images/icon/icon-arrow.svg); + background-position: center; + background-repeat: no-repeat; + } + + &__text { + color: $text-color-black; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..803d788d05 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,27 @@ +.button { + padding: 0; + margin: 0; + display: block; + color: #fff; + text-align: center; + background-color: $color-blue; + border-radius: 8px; + border: none; + cursor: pointer; + line-height: 56px; + width: 100%; + + &--center { + margin-inline: auto; + } + + &--height-small { + line-height: 50px; + } + + @include hover(background-color, $color-dark-blue); + + @include tablet { + width: 264px; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..d7916389d2 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,16 @@ +.contact-us { + &__heading { + color: #fff; + margin-bottom: 48px; + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 40px; + + @include tablet { + gap: 48px; + } + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..3ec0f177e4 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,27 @@ +.contact { + &__link { + text-decoration: none; + } + + &__label { + margin-bottom: 8px; + color: rgba(255, 255, 255, 0.5); + + &--socials { + margin-bottom: 16px; + } + } + + &__text { + margin: 0; + padding: 0; + font-family: $font-open-sans; + font-size: 24px; + line-height: 36px; + font-weight: 600; + color: #ffff; + text-decoration: none; + + @include hover(color, $color-blue); + } +} diff --git a/src/styles/blocks/cta.scss b/src/styles/blocks/cta.scss new file mode 100644 index 0000000000..2c570c5471 --- /dev/null +++ b/src/styles/blocks/cta.scss @@ -0,0 +1,56 @@ +.cta { + padding-bottom: 120px; + + @include tablet { + padding-bottom: 0; + } + + &__content-wrapper { + background-color: #fff; + + @include tablet { + background-image: url(../images/Shapes.png); + background-repeat: no-repeat; + background-position: center; + background-size: 950px; + } + + @include desktop { + background-size: 1300px; + } + + @include large-desktop { + background-size: 1450px; + } + } + + &__content { + padding-block: 72px; + text-align: center; + + @include page-grid; + + @include tablet { + padding-block: 200px; + } + } + + &__heading { + grid-column: 1/-1; + margin-bottom: 24px; + } + + &__description { + grid-column: 1/-1; + margin: 0 auto 56px; + + @include desktop { + width: 754px; + } + } + + &__button { + line-height: 56px; + grid-column: 1/-1; + } +} diff --git a/src/styles/blocks/expertise-card.scss b/src/styles/blocks/expertise-card.scss new file mode 100644 index 0000000000..5517a73baa --- /dev/null +++ b/src/styles/blocks/expertise-card.scss @@ -0,0 +1,35 @@ +.expertise-card { + display: flex; + flex-direction: column; + align-items: center; + user-select: none; + + @include hover(transform, scale(1.05), '.expertise-card__photo'); + + &__photo { + width: 166px; + height: 166px; + border-radius: 30px; + margin-bottom: 32px; + + @include desktop { + margin-bottom: 40px; + } + } + + &__label { + margin: 0; + padding: 0; + font-family: $font-poppins; + font-size: 20px; + line-height: 28px; + font-weight: 600; + color: $text-color-dark; + text-align: center; + margin-bottom: 16px; + } + + &__description { + text-align: center; + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..e75752e3eb --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,44 @@ +.expertise { + padding-block: 72px; + background-color: #fff; + border-radius: 30px; + + @include tablet { + padding-block: 128px; + } + + &__heading { + text-align: center; + margin-bottom: 56px; + + @include tablet { + margin-bottom: 72px; + } + } + + &__expertise-cards { + @include page-grid; + + row-gap: 56px; + + @include tablet { + gap: 72px; + } + + @include desktop { + column-gap: 12.5%; + } + } + + &__expertise-card { + grid-column: 1/-1; + + @include tablet { + grid-column: 2/-2; + } + + @include desktop { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..8376c6d5a0 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,54 @@ +.footer { + background-color: $bg-color-dark; + border-radius: 30px 30px 0 0; + + &__content { + padding: 72px 0 80px; + + @include page-grid; + + row-gap: 80px; + + @include tablet { + padding-top: 180px; + row-gap: 120px; + } + } + + &__send-message { + grid-column: 1/-1; + + @include tablet { + grid-column: span 4; + } + + @include desktop { + grid-column: 1/6; + } + } + + &__contact-us { + grid-column: 1/-1; + + @include desktop { + grid-column: 7/-2; + } + } + + &__navigation { + grid-column: 1/-1; + + display: flex; + flex-direction: column; + gap: 50px; + + @include tablet { + gap: 25px; + } + + @include desktop { + flex-direction: row; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..9da591e3dc --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,33 @@ +.form { + &__input { + @include autofill; + + position: relative; + box-sizing: border-box; + padding-bottom: 16px; + border: none; + border-bottom: 1px solid #fff; + margin-bottom: 1px; + color: #fff; + background-color: $bg-color-dark; + + &::placeholder { + color: rgba(255, 255, 255, 0.7); + } + + &:hover { + border-bottom: 2px solid $color-dark-blue; + margin-bottom: 0; + } + + &:focus-visible { + outline: none; + border-bottom: 2px solid $color-dark-blue; + margin-bottom: 0; + } + } + + &__button { + line-height: 56px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..034e536ee0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,42 @@ +.header { + background-color: $bg-color-dark; + + &__left { + display: flex; + align-items: center; + gap: 32px; + } + + &__center { + display: none; + + @include desktop { + display: flex; + } + } + + &__right-button { + position: relative; + display: flex; + color: #fff; + transform: translateY(-8px); + + @include hover(color, $color-dark-blue); + + &::after { + content: ''; + position: absolute; + display: block; + bottom: -8px; + left: 0; + right: $text-uppercase-letter-spasing; + height: 2px; + border-radius: 4px; + background-color: $color-blue; + } + + @include desktop { + transform: translateY(0); + } + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 0000000000..51a586aa4e --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,54 @@ +.hero { + background-color: $bg-color-dark; + position: relative; + border-radius: 0 0 30px 30px; + + &__wrapper { + padding-bottom: 390px; + + @include page-grid; + + @include desktop { + padding-bottom: 0; + } + } + + &__content { + grid-column: 1/-1; + padding-block: 48px; + + @include tablet { + padding: 56px 0 147px; + } + + @include desktop { + padding: 120px 0 205px; + } + + @include desktop { + grid-column: span 5; + } + } + + &__description { + padding: 0; + font-family: $font-open-sans; + font-size: 18px; + line-height: 150%; + font-weight: 400; + color: #fff; + margin: 32px 0 72px; + + @include tablet { + margin-top: 24px; + } + + @include desktop { + margin: 32px 0 83px; + } + } + + &__button { + line-height: 50px; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..6e7fafced3 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,22 @@ +.icon { + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + + &--burger-menu { + background-image: url(../images/icon/icon-burger-menu.svg); + + @include desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icon/icon-close.svg); + } + + &--quotes { + background-image: url(../images/icon/icon-quotes.svg); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..1d9b987f29 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,9 @@ +.menu { + background-color: $bg-color-dark; + height: 100vh; + z-index: 10; + + &__top { + margin-bottom: 48px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..d932ce7d73 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,37 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 24px; + + &--header { + @include desktop { + flex-direction: row; + gap: 48px; + } + } + + &--footer { + @include tablet { + flex-direction: row; + gap: 40px; + } + } + } + + &__link { + color: #fff; + white-space: nowrap; + display: inline-block; + + &--header { + line-height: 50px !important; + } + + @include hover(color, #2060f6); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..62af254a64 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,51 @@ +.page { + scroll-behavior: smooth; + background-color: $bg-color-light; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + } + + &__container { + @include container; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + transform: translateX(-100%); + transition: all; + transition-duration: 0.3s; + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &__mobile-hidden { + display: none; + + @include tablet { + display: inline-block; + } + } + + &__tablet-hidden { + display: inline-block; + + @include tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/send-message.scss b/src/styles/blocks/send-message.scss new file mode 100644 index 0000000000..b8e75d8aed --- /dev/null +++ b/src/styles/blocks/send-message.scss @@ -0,0 +1,16 @@ +.send-message { + &__heading { + color: #fff; + margin-bottom: 48px; + + @include tablet { + margin-bottom: 56px; + } + } + + &__form { + display: flex; + flex-direction: column; + row-gap: 40px; + } +} diff --git a/src/styles/blocks/services-card.scss b/src/styles/blocks/services-card.scss new file mode 100644 index 0000000000..466453e137 --- /dev/null +++ b/src/styles/blocks/services-card.scss @@ -0,0 +1,29 @@ +.services-card { + @include card-style; + + &--translate { + @include tablet { + transform: translateY(-50%); + } + } + + &__number { + padding: 0; + margin: 0; + background-color: $bg-color-light; + border-radius: 30px; + width: 46px; + height: 24px; + font-family: $font-poppins; + font-size: 13px; + font-weight: 600; + color: $color-blue; + line-height: 24px; + text-align: center; + } + + &__text { + margin: 24px 0 32px; + list-style: none; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..4322e36f28 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,72 @@ +.services { + padding-top: 120px; + + @include tablet { + padding-top: 146px; + } + + @include desktop { + padding-top: 251px; + } + + &__content { + @include page-grid; + + row-gap: 24px; + } + + &__header { + @include page-grid; + + grid-column: 1/-1; + + @include tablet { + grid-column: span 6; + grid-row: span 2; + } + } + + &__header-wrapper { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 8; + } + } + + &__lable { + color: $text-color-light-grey; + margin-bottom: 16px; + } + + &__heading { + margin-bottom: 24px; + } + + &__description-wrapper { + display: flex; + flex-direction: column; + gap: 24px; + margin-bottom: 24px; + + @include tablet { + margin-bottom: 56px; + } + } + + &__description { + color: $text-color-dark-grey; + } + + &__services-card { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..bff50a035f --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,96 @@ +.slider { + height: 390px; + width: 100%; + overflow: hidden; + border-radius: 30px; + position: absolute; + right: 0; + bottom: 0; + + @include desktop { + width: 50%; + height: 100%; + border-radius: 30px 0; + } + + @include large-desktop { + width: 43%; + } + + &__img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__wrapper { + position: relative; + width: 100%; + height: 100%; + } + + &__content { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: end; + padding: 20px 24px; + box-sizing: border-box; + + @include tablet { + padding: 32px 41px; + } + + @include desktop { + padding: 48px 78px; + } + } + + &__content-position { + display: flex; + flex-direction: column; + + @include desktop { + flex-direction: row; + justify-content: start; + align-items: center; + gap: 24px; + } + } + + &__nav { + display: flex; + gap: 16px; + margin-bottom: 18px; + cursor: pointer; + } + + &__arrow { + background-color: #ebebeb; + border-radius: 50%; + height: 32px; + width: 32px; + background-position: center; + background-repeat: no-repeat; + + @include hover(background-color, #fff); + + &--left { + background-image: url(../images/slider/arrow-left.svg); + } + + &--right { + background-image: url(../images/slider/arrow-right.svg); + } + } + + &__label { + color: #fff; + margin-bottom: 8px; + } + &__description { + color: #fff; + } +} diff --git a/src/styles/blocks/socials.scss b/src/styles/blocks/socials.scss new file mode 100644 index 0000000000..94dac9e429 --- /dev/null +++ b/src/styles/blocks/socials.scss @@ -0,0 +1,54 @@ +.socials { + &__list { + margin: 0; + padding: 0; + list-style: none; + align-items: center; + display: flex; + gap: 32px; + } + + &__icon-wrapper { + position: relative; + + @include hover(opacity, 0, '.socials__icon--static'); + @include hover(opacity, 1, '.socials__icon--hover'); + } + + &__icon { + display: block; + height: 32px; + width: 32px; + background-size: cover; + background-position: center; + + &--facebook { + background-image: url(../images/icon/icon-facebook.svg); + } + + &--facebook-hover { + @include accent(url(../images/icon/icon-facebook-hover.svg)); + } + + &--x { + background-image: url(../images/icon/icon-x.svg); + height: 24px; + width: 24px; + } + + &--x-hover { + @include accent(url(../images/icon/icon-x-hover.svg)); + + height: 24px; + width: 24px; + } + + &--instagram { + background-image: url(../images/icon/icon-instagram.svg); + } + + &--instagram-hover { + @include accent(url(../images/icon/icon-instagram-hover.svg)); + } + } +} diff --git a/src/styles/blocks/testimonials-card.scss b/src/styles/blocks/testimonials-card.scss new file mode 100644 index 0000000000..c2b7df268e --- /dev/null +++ b/src/styles/blocks/testimonials-card.scss @@ -0,0 +1,149 @@ +.testimonials-card { + @include card-style; + + align-items: center; + + &__photo-wrapper { + width: 196px; + height: 196px; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 24px; + + @include tablet { + height: 250px; + width: 250px; + } + + @include desktop { + width: 196px; + height: 196px; + } + + @include large-desktop { + height: 250px; + width: 250px; + } + } + + &__photo-content { + position: relative; + height: 110px; + width: 110px; + + @include tablet { + height: 140px; + width: 140px; + } + + @include desktop { + height: 110px; + width: 110px; + } + + @include large-desktop { + height: 140px; + width: 140px; + } + + &::before { + content: ' '; + position: absolute; + display: block; + height: 44px; + width: 110px; + background-color: $color-blue; + border-radius: 12px; + rotate: 120deg; + right: 35%; + + @include tablet { + height: 56px; + width: 139px; + } + + @include desktop { + height: 44px; + width: 110px; + } + + @include large-desktop { + height: 56px; + width: 139px; + } + } + + &::after { + content: ' '; + position: absolute; + display: block; + height: 44px; + width: 110px; + background-color: $color-blue; + border-radius: 12px; + rotate: 120deg; + left: 40%; + top: 65%; + + @include tablet { + height: 56px; + width: 139px; + } + + @include desktop { + height: 44px; + width: 110px; + } + + @include large-desktop { + height: 56px; + width: 139px; + } + } + } + + &__photo { + width: 100%; + height: 100%; + border-radius: 50%; + position: absolute; + z-index: 10; + } + + &__quotes-sign { + margin-bottom: 8px; + + @include tablet { + margin-bottom: 16px; + } + } + + &__quote { + margin-bottom: 16px; + text-align: center; + max-width: 196px; + + @include tablet { + max-width: 362px; + } + + @include desktop { + max-width: 196px; + min-height: 80px; + } + + @include large-desktop { + max-width: 250px; + } + } + + &__name { + color: $text-color-dark; + margin-bottom: 4px; + } + + &__company { + color: $text-color-light-grey; + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..ce9ba374b6 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,54 @@ +.testimonials { + padding-block: 120px; + + &__content { + @include page-grid; + + row-gap: 24px; + + @include tablet { + row-gap: 30px; + } + } + + &__header { + grid-column: 1/-1; + } + + &__header-wrapper { + grid-column: 1/-1; + + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 8; + } + } + + &__lable { + color: $text-color-light-grey; + margin-bottom: 16px; + } + + &__heading { + margin-bottom: 24px; + + @include tablet { + margin-bottom: 26px; + } + + @include desktop { + margin-bottom: 55px; + } + } + + &__testimonials-card { + grid-column: 1/-1; + + @include desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/texts.scss b/src/styles/blocks/texts.scss new file mode 100644 index 0000000000..74434688d3 --- /dev/null +++ b/src/styles/blocks/texts.scss @@ -0,0 +1,92 @@ +.heading-1 { + margin: 0; + padding: 0; + font-family: $font-poppins; + font-size: 52px; + line-height: 120%; + font-weight: 800; + letter-spacing: -2px; + color: #fff; + + @include tablet { + font-size: 64px; + line-height: 68px; + } +} + +.heading-2 { + margin: 0; + padding: 0; + font-family: $font-poppins; + font-size: 44px; + line-height: 120%; + font-weight: 600; + color: $text-color-dark; + + @include tablet { + font-size: 52px; + line-height: 78px; + } +} + +.heading-3 { + margin: 0; + padding: 0; + font-family: $font-poppins; + font-size: 32px; + line-height: 48px; + font-weight: 600; + color: $text-color-dark; +} + +.text-uppercase { + margin: 0; + padding: 0; + font-family: $font-poppins; + text-transform: uppercase; + text-decoration: none; + font-size: 13px; + line-height: 150%; + font-weight: 700; + letter-spacing: $text-uppercase-letter-spasing; +} + +.text-button, +.text-form { + margin: 0; + padding: 0; + font-family: $font-poppins; + font-size: 15px; + line-height: 150%; + font-weight: 600; + text-decoration: none; +} + +.text { + margin: 0; + padding: 0; + font-family: $font-open-sans; + font-size: 14px; + line-height: 150%; + font-weight: 400; +} + +.text-card { + margin: 0; + padding: 0; + font-family: $font-open-sans; + font-size: 13px; + line-height: 150%; + font-weight: 600; + color: $text-color-dark-grey; +} + +.text-subtitle { + margin: 0; + padding: 0; + font-family: $font-open-sans; + font-size: 22px; + line-height: 33px; + font-weight: 600; + color: $text-color-dark-grey; +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..c892e4d7ab --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,19 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: end; + height: 48px; + + @include desktop { + align-items: center; + height: 120px; + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 28px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..379d1c6191 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,26 @@ +@import 'utils'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/texts'; +@import 'blocks/hero'; +@import 'blocks/button'; +@import 'blocks/slider'; +@import 'blocks/about-us'; +@import 'blocks/expertise'; +@import 'blocks/expertise-card'; +@import 'blocks/services'; +@import 'blocks/services-card'; +@import 'blocks/button-secondary'; +@import 'blocks/testimonials'; +@import 'blocks/testimonials-card'; +@import 'blocks/cta'; +@import 'blocks/footer'; +@import 'blocks/send-message'; +@import 'blocks/form'; +@import 'blocks/contact-us'; +@import 'blocks/contact'; +@import 'blocks/socials'; diff --git a/src/styles/_utils.scss b/src/styles/utils.scss similarity index 64% rename from src/styles/_utils.scss rename to src/styles/utils.scss index 3280c3fe10..f1078dced5 100644 --- a/src/styles/_utils.scss +++ b/src/styles/utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..e17c9b1482 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,103 @@ +@mixin tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin large-desktop { + @media (min-width: $large-desktop-min-width) { + @content; + } +} + +@mixin hover($property, $toValue, $element: false) { + @if $element { + #{$element} { + transition: #{$property} 0.3s; + } + &:hover #{$element} { + #{$property}: $toValue; + } + } @else { + transition: #{$property} 0.3s; + &:hover { + #{$property}: $toValue; + } + } +} + +@mixin container { + padding-inline: 21px; + margin: 0 auto; + + @include tablet { + padding-inline: 41px; + } + + @include desktop { + padding-inline: 54px; + } + + @include large-desktop { + max-width: 1148px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include tablet { + --columns: 6; + + column-gap: 30px; + } + + @include desktop { + --columns: 12; + + column-gap: 20px; + } + + @include large-desktop { + column-gap: 30px; + } +} + +@mixin card-style { + display: flex; + flex-direction: column; + background-color: #fff; + padding: 32px; + border-radius: 16px; + box-shadow: 0 9px 18px rgba(37, 41, 49, 0.03); + user-select: none; + + @include hover(box-shadow, 0 9px 18px #2529312e); +} + +@mixin accent($bg-image) { + position: absolute; + top: 0; + background-image: $bg-image; + opacity: 0; +} + +@mixin autofill { + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px $bg-color-dark inset; + -webkit-text-fill-color: #fff; + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 0000000000..8c44b22f88 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,14 @@ +$tablet-min-width: 640px; +$desktop-min-width: 1024px; +$large-desktop-min-width: 1600px; +$font-poppins: 'Poppins', sans-serif; +$font-open-sans: 'Open Sans', sans-serif; +$bg-color-dark: #2c2c2c; +$bg-color-light: #f2f6fa; +$color-dark-blue: #144ed4; +$color-blue: #2060f6; +$text-color-dark: #253757; +$text-color-light-grey: #c0cdd7; +$text-color-dark-grey: #6c788b; +$text-color-black: #334563; +$text-uppercase-letter-spasing: 3px;