From 6ee4db09452bfd40f3b34dfbbb239692096a937c Mon Sep 17 00:00:00 2001 From: Marian Date: Fri, 11 Oct 2024 21:06:57 +0300 Subject: [PATCH] layout --- src/images/Menu.svg | 3 + src/images/expertise/image 1.svg | 9 + src/images/expertise/image 2.svg | 9 + src/images/expertise/image 3.svg | 9 + src/images/icons/Layer 2.svg | 3 + src/images/icons/instagram.svg | 3 + src/images/icons/twitter 1.svg | 10 + src/images/logo/Logo.svg | 5 + src/images/mdi_arrow_forward.svg | 10 + src/images/people-say/Photo Mask (1).svg | 14 + src/images/people-say/Photo Mask (2).svg | 14 + src/images/people-say/Photo Mask.svg | 14 + src/images/people-say/braces.svg | 3 + src/images/slider/GwVmBgpP-PQ.svg | 9 + src/images/slider/mdi_chevron_left.svg | 10 + src/images/slider/mdi_chevron_right.svg | 10 + src/images/slider/qPojqUji_y4.svg | 9 + src/index.html | 470 ++++++++++++++++++++++- src/scripts/menu.js | 19 + src/scripts/slider.js | 46 +++ src/styles/components/assurance.scss | 60 +++ src/styles/components/bottom-bar.scss | 49 +++ src/styles/components/contact-us.scss | 41 ++ src/styles/components/expertise.scss | 65 ++++ src/styles/components/footer.scss | 50 +++ src/styles/components/form.scss | 73 ++++ src/styles/components/header.scss | 89 +++++ src/styles/components/phone-menu.scss | 43 +++ src/styles/components/services.scss | 165 ++++++++ src/styles/components/slider.scss | 81 ++++ src/styles/components/top_bar.scss | 89 +++++ src/styles/components/what-they-say.scss | 130 +++++++ src/styles/components/who_we.scss | 28 ++ src/styles/main.scss | 38 +- src/styles/utils/_mixins.scss | 59 +++ src/styles/utils/_vars.scss | 12 + 36 files changed, 1748 insertions(+), 3 deletions(-) create mode 100644 src/images/Menu.svg create mode 100644 src/images/expertise/image 1.svg create mode 100644 src/images/expertise/image 2.svg create mode 100644 src/images/expertise/image 3.svg create mode 100644 src/images/icons/Layer 2.svg create mode 100644 src/images/icons/instagram.svg create mode 100644 src/images/icons/twitter 1.svg create mode 100644 src/images/logo/Logo.svg create mode 100644 src/images/mdi_arrow_forward.svg create mode 100644 src/images/people-say/Photo Mask (1).svg create mode 100644 src/images/people-say/Photo Mask (2).svg create mode 100644 src/images/people-say/Photo Mask.svg create mode 100644 src/images/people-say/braces.svg create mode 100644 src/images/slider/GwVmBgpP-PQ.svg create mode 100644 src/images/slider/mdi_chevron_left.svg create mode 100644 src/images/slider/mdi_chevron_right.svg create mode 100644 src/images/slider/qPojqUji_y4.svg create mode 100644 src/scripts/menu.js create mode 100644 src/scripts/slider.js create mode 100644 src/styles/components/assurance.scss create mode 100644 src/styles/components/bottom-bar.scss create mode 100644 src/styles/components/contact-us.scss create mode 100644 src/styles/components/expertise.scss create mode 100644 src/styles/components/footer.scss create mode 100644 src/styles/components/form.scss create mode 100644 src/styles/components/header.scss create mode 100644 src/styles/components/phone-menu.scss create mode 100644 src/styles/components/services.scss create mode 100644 src/styles/components/slider.scss create mode 100644 src/styles/components/top_bar.scss create mode 100644 src/styles/components/what-they-say.scss create mode 100644 src/styles/components/who_we.scss diff --git a/src/images/Menu.svg b/src/images/Menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/expertise/image 1.svg b/src/images/expertise/image 1.svg new file mode 100644 index 0000000000..074117ff43 --- /dev/null +++ b/src/images/expertise/image 1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/expertise/image 2.svg b/src/images/expertise/image 2.svg new file mode 100644 index 0000000000..e5530626e3 --- /dev/null +++ b/src/images/expertise/image 2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/expertise/image 3.svg b/src/images/expertise/image 3.svg new file mode 100644 index 0000000000..1981900d47 --- /dev/null +++ b/src/images/expertise/image 3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/Layer 2.svg b/src/images/icons/Layer 2.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/icons/Layer 2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter 1.svg b/src/images/icons/twitter 1.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/icons/twitter 1.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo/Logo.svg b/src/images/logo/Logo.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/images/logo/Logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/mdi_arrow_forward.svg b/src/images/mdi_arrow_forward.svg new file mode 100644 index 0000000000..b754e9e94b --- /dev/null +++ b/src/images/mdi_arrow_forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/people-say/Photo Mask (1).svg b/src/images/people-say/Photo Mask (1).svg new file mode 100644 index 0000000000..1cd2c69c71 --- /dev/null +++ b/src/images/people-say/Photo Mask (1).svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/people-say/Photo Mask (2).svg b/src/images/people-say/Photo Mask (2).svg new file mode 100644 index 0000000000..f4d7de180f --- /dev/null +++ b/src/images/people-say/Photo Mask (2).svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/people-say/Photo Mask.svg b/src/images/people-say/Photo Mask.svg new file mode 100644 index 0000000000..3082aca057 --- /dev/null +++ b/src/images/people-say/Photo Mask.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/people-say/braces.svg b/src/images/people-say/braces.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/people-say/braces.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/GwVmBgpP-PQ.svg b/src/images/slider/GwVmBgpP-PQ.svg new file mode 100644 index 0000000000..20b9d2b016 --- /dev/null +++ b/src/images/slider/GwVmBgpP-PQ.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider/mdi_chevron_left.svg b/src/images/slider/mdi_chevron_left.svg new file mode 100644 index 0000000000..7272b2b4a9 --- /dev/null +++ b/src/images/slider/mdi_chevron_left.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/mdi_chevron_right.svg b/src/images/slider/mdi_chevron_right.svg new file mode 100644 index 0000000000..6ff406d8fe --- /dev/null +++ b/src/images/slider/mdi_chevron_right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/qPojqUji_y4.svg b/src/images/slider/qPojqUji_y4.svg new file mode 100644 index 0000000000..5639e4338a --- /dev/null +++ b/src/images/slider/qPojqUji_y4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..e4aa56a79c 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,480 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + Strategic Agency + + -

Dia

+ + +
+
+
+
+ + menu +
+ +
+ +
+ +
+ Hire us +
+
+
+ +
+
+

Strategic Agency

+

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

+ Learn more +
+ +
+
+ slide +
+
+ control + control +
+

Intro

+

By the same illusion which lifts the horizon.

+
+
+ +
+ slide +
+
+ control + control +
+

Intro 2

+

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

+ +
+
+ expertise +

Branding

+

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

+
+ +
+ expertise +

Communication

+

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

+
+ +
+ expertise +

Strategy

+

+ We create business growth strategies, from the moment of its birth to the achievement of the necessary 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
+

+
+ + arrow + + learn more +
+
+ +
+

002

+

+ Сontent Production
+ Graphic Design
+ Video Production
+ Post Production
+

+
+ + arrow + + learn more +
+
+ +
+

003

+

+ Marketing Strategy
+ Email Marketing
+ Paid Advertising
+ Blog Content & SEO
+

+
+ + arrow + + learn more +
+
+ +
+

004

+

+ Digital Communications
+ Influencer Marketing
+ Product Placements
+ Strategic Partnerships
+

+
+ + arrow + + learn more +
+
+
+
+
+ +
+
+

Testimonials

+

What people say

+ +
+
+
+ person +
+ braces +

+ 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

+
+ +
+
+ person +
+ braces +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+
+ person +
+ braces +

+ 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. +

+ Apply +
+
+
+
+ + + + + diff --git a/src/scripts/menu.js b/src/scripts/menu.js new file mode 100644 index 0000000000..76b16f2fa7 --- /dev/null +++ b/src/scripts/menu.js @@ -0,0 +1,19 @@ +'use strict'; + +const body = document.querySelector('body'); +const menuBtn = document.getElementById('menu-btn'); +const menu = document.getElementById('menu'); +const links = document.querySelectorAll('.phone-menu_list_link'); + +menuBtn.addEventListener('click', function () { + menu.classList.add('phone-menu--visible'); + + body.style.overflow = 'hidden'; +}); + +links.forEach(link => { + link.addEventListener('click', function () { + menu.classList.remove('phone-menu--visible'); + body.style.overflow = ''; + }); +}); diff --git a/src/scripts/slider.js b/src/scripts/slider.js new file mode 100644 index 0000000000..cc72cf1c9a --- /dev/null +++ b/src/scripts/slider.js @@ -0,0 +1,46 @@ +'use strict'; + +const aSlides = document.querySelectorAll('.slider_slide'); +const nextSlideBtns = document.querySelectorAll('.slider_slide_extra_control--right'); +const prevSlideBtns = document.querySelectorAll('.slider_slide_extra_control--left'); + +let slideIndex = 0; +let intervalId = null; + +nextSlideBtns.forEach(button => { + button.addEventListener('click', nextSlide); +}); + +prevSlideBtns.forEach(button => { + button.addEventListener('click', prevSlide); +}); + +document.addEventListener('DOMContentLoaded', function () { + aSlides[slideIndex].classList.add('slider_slide--visible'); + intervalId = setInterval(nextSlide, 5000); +}); + +function showSlide(index) { + if (index >= aSlides.length) { + slideIndex = 0; + } else if (index < 0) { + slideIndex = aSlides.length - 1; + } else { + slideIndex = index; + } + + aSlides.forEach(slide => { + slide.classList.remove('slider_slide--visible'); + }); + + aSlides[slideIndex].classList.add('slider_slide--visible'); +} + +function prevSlide() { + showSlide(slideIndex - 1); + clearTimeout(intervalId); +} + +function nextSlide() { + showSlide(slideIndex + 1); +} diff --git a/src/styles/components/assurance.scss b/src/styles/components/assurance.scss new file mode 100644 index 0000000000..014e507c38 --- /dev/null +++ b/src/styles/components/assurance.scss @@ -0,0 +1,60 @@ +.assurance { + background-color: $c-white; + padding: 72px 0; + text-align: center; + + @include on-small-desktop { + padding: 200px 0; + } + + &_wrapper { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + @include on-small-desktop { + padding: 0 135px; + } + } + + &_title { + font-size: 44px; + line-height: 52.8px; + color: $c-title-gray; + margin-bottom: 24px; + } + + &_text { + font-family: Open Sans; + font-size: 22px; + line-height: 33px; + color: $c-text-gray; + margin-bottom: 56px; + } + + &_btn { + font-size: 15px; + line-height: 22.5px; + color: $c-white; + background-color: $c-blue; + border-radius: 8px; + height: 56px; + display: flex; + justify-content: center; + align-items: center; + transition: $transition; + width: 100%; + + @include on-tablet { + width: 264px; + text-align: center; + } + + &:hover { + -webkit-box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + -moz-box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + } + } +} diff --git a/src/styles/components/bottom-bar.scss b/src/styles/components/bottom-bar.scss new file mode 100644 index 0000000000..3cff317639 --- /dev/null +++ b/src/styles/components/bottom-bar.scss @@ -0,0 +1,49 @@ +.bottom-bar { + &_wrapper { + @include on-small-desktop { + display: flex; + justify-content: space-between; + } + } + + &_list { + display: flex; + flex-direction: column; + padding: 0; + gap: 24px; + + @include on-tablet { + flex-direction: row; + } + + @include on-small-desktop { + gap: 64px; + } + + &_link { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-white; + text-transform: uppercase; + position: relative; + width: max-content; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 0; + height: 2px; + background-color: $c-blue; + transition: width $transition ease-in-out; + } + + &:hover::after { + width: 100%; + } + } + } +} diff --git a/src/styles/components/contact-us.scss b/src/styles/components/contact-us.scss new file mode 100644 index 0000000000..bbce1af404 --- /dev/null +++ b/src/styles/components/contact-us.scss @@ -0,0 +1,41 @@ +.contact-us { + &_wrapper { + &_title { + font-size: 32px; + line-height: 48px; + color: $c-white; + margin-bottom: 48px; + } + + &_title-small { + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-white; + opacity: 0.5; + text-transform: uppercase; + margin-bottom: 8px; + } + + + &_text { + font-family: Open Sans; + font-size: 24px; + font-weight: 600; + line-height: 36px; + color: $c-white; + display: block; + padding-bottom: 48px; + } + + &_images { + display: flex; + gap: 32px; + padding-top: 16px; + + &_img { + cursor: pointer; + } + } + } +} diff --git a/src/styles/components/expertise.scss b/src/styles/components/expertise.scss new file mode 100644 index 0000000000..cc6470e6a2 --- /dev/null +++ b/src/styles/components/expertise.scss @@ -0,0 +1,65 @@ +.expertise { + background-color: $c-white; + border-radius: 30px; + padding: 72px 0; + + @include on-small-desktop { + padding: 128px 0; + } + + &_title { + text-align: center; + font-size: 44px; + line-height: 52.8px; + color: $c-title-gray; + margin-bottom: 56px; + } + + &_items { + @include page-grid; + + gap: 56px; + text-align: center; + + &_item { + grid-column: 1 / -1; + + &--1 { + @include on-small-desktop { + grid-column: 1 / 5; + } + } + + &--2 { + @include on-small-desktop { + grid-column: 5 / 9; + } + } + + &--3 { + @include on-small-desktop { + grid-column: 9 / -1; + } + } + + &_img { + margin-bottom: 32px; + border-radius: 30px; + } + + &_title { + font-size: 20px; + line-height: 28px; + color: $c-title-gray; + margin-bottom: 16px; + } + + &_text { + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 21px; + } + } + } +} diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss new file mode 100644 index 0000000000..f02dc6408d --- /dev/null +++ b/src/styles/components/footer.scss @@ -0,0 +1,50 @@ +.footer { + background-color: $c-dark-gray; + border-radius: 20px 20px 0 0; + + &_wrapper { + @include page-grid; + gap: 24px; + + &_form { + grid-column: 1 / -1; + padding-top: 72px; + padding-bottom: 80px; + + @include on-small-desktop { + padding-top: 180px; + } + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &_contact-us { + grid-column: 1/ -1; + padding-bottom: 80px; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 7 / -1; + padding-top: 180px; + } + + @include on-desktop { + grid-column: 8 / 12; + } + } + + &_bottom-bar { + grid-column: 1 / -1; + padding-bottom: 80px; + } + } +} diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss new file mode 100644 index 0000000000..2bf68630fb --- /dev/null +++ b/src/styles/components/form.scss @@ -0,0 +1,73 @@ +.form { + &_title { + font-size: 32px; + line-height: 48px; + color: $c-white; + margin-bottom: 48px; + } + + &_input { + height: 41px; + background: none; + border: none; + border-bottom: 1px solid $c-white; + outline: none; + text-decoration: none; + width: 100%; + margin-bottom: 48px; + transition: $transition; + color: $c-white; + font-family: Poppins, sans-serif; + + &:hover { + border-bottom: 1px solid $c-blue; + } + + &::placeholder { + color: $c-white; + opacity: 0.5; + } + + &:is(:-webkit-autofill, :-moz-autofill, :-ms-autofill) { + background-color: transparent !important; + -webkit-text-fill-color: $c-white !important; + } + + &:-webkit-autofill { + transition: background-color 5000s ease-in-out 0s !important; + color: $c-white !important; + } + + &:-moz-autofill { + background-color: transparent !important; + color: $c-white !important; + } + } + + &_btn { + font-size: 15px; + line-height: 22.5px; + background-color: $c-blue; + border-radius: 8px; + padding: 13px 88px; + width: 100%; + outline: none; + border: none; + color: $c-white; + margin-top: 8px; + height: 56px; + transition: $transition; + font-family: Poppins, sans-serif; + cursor: pointer; + + @include on-tablet { + width: 264px; + } + + &:hover { + -webkit-box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + -moz-box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + box-shadow: 0 0 45px -18px rgba(32, 96, 246, 1); + } + } +} diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss new file mode 100644 index 0000000000..1af804607e --- /dev/null +++ b/src/styles/components/header.scss @@ -0,0 +1,89 @@ +.header { + background-color: $c-dark-gray; + + @include on-small-desktop { + border-radius: 0 0 30px 30px; + } + + &_menu { + padding-top: 20px; + + @include on-small-desktop { + margin-bottom: 38px; + } + } + + &_content { + @include page-grid; + + align-items: center; + + &_agency { + grid-column: 1 / -1; + color: $c-white; + margin-bottom: 56px; + + @include on-small-desktop { + grid-column: 1 / 7; + } + + &_title { + font-size: 52px; + line-height: 62.4px; + letter-spacing: -2px; + margin-bottom: 32px; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + } + + &_text { + font-family: Open Sans; + font-size: 18px; + font-weight: 400; + line-height: 27px; + margin-bottom: 72px; + + &--br { + @include on-tablet { + display: block; + } + } + } + + &_btn { + font-size: 15px; + line-height: 22.5px; + color: $c-white; + background-color: $c-blue; + border-radius: 8px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + transition: $transition; + + &:hover { + -webkit-box-shadow: 0 0 39px -18px rgba(32, 96, 246, 1); + -moz-box-shadow: 0 0 39px -18px rgba(32, 96, 246, 1); + box-shadow: 0 0 39px -18px rgba(32, 96, 246, 1); + } + + @include on-tablet { + width: 264px; + text-align: center; + } + } + } + + &_slider { + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 7 / -1; + } + } + } +} diff --git a/src/styles/components/phone-menu.scss b/src/styles/components/phone-menu.scss new file mode 100644 index 0000000000..ef60182b9b --- /dev/null +++ b/src/styles/components/phone-menu.scss @@ -0,0 +1,43 @@ +.phone-menu { + background-color: $c-dark-gray; + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + z-index: 999; + display: none; + justify-content: center; + align-items: center; + + &--visible { + display: flex; + } + + &_list { + display: flex; + flex-direction: column; + gap: 24px; + + &_link { + color: $c-white; + position: relative; + width: max-content; + + &::after{ + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 0; + height: 2px; + background-color: $c-blue; + transition: width $transition ease-in-out; + } + + &:hover::after { + width: 100%; + } + } + } +} diff --git a/src/styles/components/services.scss b/src/styles/components/services.scss new file mode 100644 index 0000000000..ff1d7fa74b --- /dev/null +++ b/src/styles/components/services.scss @@ -0,0 +1,165 @@ +.services { + background-color: $c-gray; + + &_items { + @include page-grid; + + padding: 120px 0; + gap: 24px; + + @include on-small-desktop { + padding: 140px 0; + } + + &_item { + grid-column: 1 / -1; + + @include on-tablet { + &--0 { + grid-column: 1 / 4; + grid-row: 1 / 3; + } + + &--1 { + grid-column: 4 / -1; + grid-row: 2 / 4; + } + + &--2 { + grid-column: 1 / 4; + grid-row: 3 / 5; + } + + &--3 { + grid-column: 4 / -1; + grid-row: 4 / 6; + } + + &--4 { + grid-column: 1 / 4; + grid-row: 5 / 7; + } + } + + @include on-small-desktop { + &--0 { + grid-column: 1 / 5; + grid-row: 2 / 5; + } + + &--1 { + grid-column: 7 / 10; + grid-row: 2 / 4; + } + + &--2 { + grid-column: 10 / -1; + grid-row: 1 / 3; + } + + &--3 { + grid-column: 7 / 10; + } + + &--4 { + grid-column: 10 / -1; + grid-row: 3 / 5; + } + } + + &_head { + &_title { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-small-title-gray; + text-transform: uppercase; + margin-bottom: 16px; + } + + &_second-title { + font-size: 32px; + line-height: 41.6px; + color: $c-title-gray; + margin-bottom: 24px; + } + + &_text { + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $c-text-gray; + } + } + + &_body { + background-color: $c-white; + padding: 32px; + border-radius: 16px; + + &_number { + font-size: 13px; + line-height: 19.5px; + color: $c-blue; + background-color: $c-gray; + width: 46px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 23px; + margin-bottom: 24px; + } + + &_text { + font-family: Open Sans; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: $c-title-gray; + margin-bottom: 32px; + } + + &_learn-more { + display: flex; + align-items: center; + + &_btn { + margin-right: 16px; + width: 40px; + height: 40px; + background-color: $c-blue; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + transition: $transition; + + &:hover { + -webkit-box-shadow: 0 0 24px 1px rgba(32, 96, 246, 1); + -moz-box-shadow: 0 0 24px 1px rgba(32, 96, 246, 1); + box-shadow: 0 0 24px 1px rgba(32, 96, 246, 1); + } + + &_img { + width: 16px; + height: 16px; + } + } + + &_text { + font-size: 15px; + line-height: 22.5px; + color: #334563; + transition: $transition; + + &:hover { + text-shadow: 0 8px 7px rgba(0, 69, 255, 1); + } + } + } + } + } + } +} diff --git a/src/styles/components/slider.scss b/src/styles/components/slider.scss new file mode 100644 index 0000000000..5cae3dc820 --- /dev/null +++ b/src/styles/components/slider.scss @@ -0,0 +1,81 @@ +.slider { + &_slide { + position: relative; + display: none; + background: linear-gradient(to bottom, $c-dark-gray 50%, $c-gray 50%); + align-items: center; + justify-content: center; + height: 100%; + + &--visible { + display: flex; + } + + &_img { + width: 100%; + border-radius: 30px; + animation: fade-effect; + animation-duration: $transition; + + @include on-small-desktop { + border-radius: 30px 0 30px 0; + } + } + + &_extra { + position: absolute; + bottom: 24; + left: 20; + color: $c-white; + + @include on-tablet { + bottom: 38; + left: 44; + } + + &_control { + padding: 7px; + background-color: $c-white; + width: 32px; + height: 32px; + border-radius: 50%; + transition: .8s; + + &:hover { + -webkit-box-shadow: 0 0 24px -3px rgba(0, 0, 0, 1); + -moz-box-shadow: 0 0 24px -3px rgba(0, 0, 0, 1); + box-shadow: 0 0 24px -3px rgba(0, 0, 0, 1); + } + + &--left { + margin-right: 16px; + } + } + + &_title { + margin-top: 16px; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &_text { + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + } + } + } +} + +@keyframes fade-effect { + from { + transform: scale(0.9); + } + + to { + transform: scale(1); + } +} diff --git a/src/styles/components/top_bar.scss b/src/styles/components/top_bar.scss new file mode 100644 index 0000000000..2d8060923e --- /dev/null +++ b/src/styles/components/top_bar.scss @@ -0,0 +1,89 @@ +.top_bar { + &_container { + display: flex; + justify-content: space-between; + align-items: center; + } + + &_left { + display: flex; + align-items: center; + + &_img { + cursor: pointer; + + &-logo { + margin-right: 32px; + } + + &-burger_btn { + width: 24px; + height: 24px; + + @include on-small-desktop { + display: none; + } + } + } + } + + &_center { + display: none; + + @include on-small-desktop { + display: block; + } + } + + &_list { + display: flex; + gap: 48px; + padding: 0; + + &_link { + text-transform: uppercase; + color: $c-white; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + width: max-content; + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 0; + height: 2px; + background-color: $c-blue; + transition: width $transition ease-in-out; + } + + &:hover::after { + width: 100%; + } + } + } + + &_right { + &_hire_us { + color: $c-white; + text-transform: uppercase; + font-weight: 700; + font-size: 13px; + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -8px; + width: 100%; + height: 2px; + background-color: $c-blue; + } + } + } +} diff --git a/src/styles/components/what-they-say.scss b/src/styles/components/what-they-say.scss new file mode 100644 index 0000000000..b0b7a763ee --- /dev/null +++ b/src/styles/components/what-they-say.scss @@ -0,0 +1,130 @@ +.what-they-say { + background-color: $c-gray; + padding-bottom: 120px; + + &_title { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-small-title-gray; + margin-top: 0; + margin-bottom: 16px; + text-transform: uppercase; + } + + &_second-title { + font-size: 32px; + line-height: 48px; + color: $c-title-gray; + margin-bottom: 48px; + } + + &_cards { + @include page-grid; + + gap: 24px; + + &_card { + text-align: center; + grid-column: 1 / -1; + display: flex; + align-items: center; + flex-direction: column; + padding: 32px 42px; + border-radius: 16px; + background-color: $c-white; + + &--1 { + @include on-small-desktop { + grid-column: 1 / 5; + } + } + &--2 { + @include on-small-desktop { + grid-column: 5 / 9; + } + } + &--3 { + @include on-small-desktop { + grid-column: 9 / 13; + } + } + + &_person { + width: 110px; + height: 110px; + margin-bottom: 67px; + position: relative; + margin-top: 40px; + z-index: 1; + + &_img { + width: 100%; + } + + &::after { + content: ''; + display: block; + position: absolute; + width: 44px; + height: 110px; + background-color: $c-blue; + border-radius: 12px; + right: 0; + top: 35px; + transform: rotate(30deg); + z-index: -1; + } + + &::before { + content: ''; + display: block; + position: absolute; + width: 44px; + height: 110px; + background-color: $c-blue; + border-radius: 12px; + left: 0; + top: -35px; + transform: rotate(30deg); + z-index: -1; + } + } + + &_braces { + width: 24px; + height: 24px; + margin-bottom: 24px; + } + + &_text { + font-family: Open Sans; + font-size: 13px; + line-height: 19.5px; + color: $c-text-gray; + margin-bottom: 16px; + } + + &_name { + font-size: 13px; + line-height: 19.5px; + color: $c-title-gray; + margin-bottom: 4px; + } + + &_position { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-small-title-gray; + text-transform: uppercase; + } + } + } +} + +.new-line { + display: block; +} diff --git a/src/styles/components/who_we.scss b/src/styles/components/who_we.scss new file mode 100644 index 0000000000..5fb5c96a7d --- /dev/null +++ b/src/styles/components/who_we.scss @@ -0,0 +1,28 @@ +.who_we { + background-color: $c-gray; + padding-top: 120px; + padding-bottom: 120px; + text-align: center; + + &_wrapper { + @include on-desktop { + padding: 148px 154px; + } + } + + &_title { + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: $c-title-gray; + margin-bottom: 24px; + } + + &_text { + font-family: Open Sans; + font-size: 22px; + font-weight: 600; + line-height: 33px; + color: $c-text-gray; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..84c7a1f14a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,43 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './components/header'; +@import './components/phone-menu'; +@import './components/top_bar'; +@import './components/slider'; +@import './components/who_we'; +@import './components/expertise'; +@import './components/services'; +@import './components/what-they-say'; +@import './components/assurance'; +@import './components/footer'; +@import './components/form'; +@import './components/contact-us'; +@import './components/bottom-bar'; +@import 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + background: linear-gradient(180deg, $c-gray 70%, $c-white 30%); + margin: 0; + padding: 0; + font-family: Poppins, sans-serif; + font-weight: 600; + font-style: normal; +} + +a { + text-decoration: none; +} + +li { + list-style: none; +} + +p { + margin: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..8e67bb645a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,62 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin on-large-screen { + @media (min-width: $large-screen-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 227px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + } + + @include on-small-desktop { + --columns: 12; + } +} + +.container { + @include content-padding-inline; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..1dda27a685 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ +$large-screen-width: 2560px; +$desktop-width: 1280px; +$small-desktop-width: 1024px; +$tablet-width: 640px; +$mobile-width: 320px; $c-gray: #eee; +$c-dark-gray: #2C2C2C; +$c-title-gray: #253757; +$c-text-gray: #6C788B; +$c-small-title-gray: #C0CDD7; +$c-white: #FFF; +$c-blue: #2060F6; +$transition: 0.3s;