diff --git a/src/images/Shapes.png b/src/images/apply/shapes.png similarity index 100% rename from src/images/Shapes.png rename to src/images/apply/shapes.png diff --git a/src/images/contacts/facebook.svg b/src/images/contacts/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/contacts/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/contacts/instagram.svg b/src/images/contacts/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/contacts/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contacts/twitter.svg b/src/images/contacts/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/contacts/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/arrow-forward.svg b/src/images/icons/arrow-forward.svg new file mode 100644 index 0000000000..e87fced4cd --- /dev/null +++ b/src/images/icons/arrow-forward.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/burger-menu.png b/src/images/icons/burger-menu.png new file mode 100644 index 0000000000..0bb9b2da09 Binary files /dev/null and b/src/images/icons/burger-menu.png differ diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 0000000000..1918e6f10b Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/logo/favicon-16x16.png b/src/images/logo/favicon-16x16.png new file mode 100644 index 0000000000..aeb93794ae Binary files /dev/null and b/src/images/logo/favicon-16x16.png differ 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.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/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg index 98c4188508..702dc7b8ab 100644 Binary files a/src/images/slider/slide-img-1.jpg and b/src/images/slider/slide-img-1.jpg differ diff --git a/src/images/slider/slide-img-2.jpg b/src/images/slider/slide-img-2.jpg new file mode 100644 index 0000000000..5185a452ed Binary files /dev/null and b/src/images/slider/slide-img-2.jpg differ diff --git a/src/images/slider/slide-img-3.jpg b/src/images/slider/slide-img-3.jpg new file mode 100644 index 0000000000..83dd4fa77d Binary files /dev/null and b/src/images/slider/slide-img-3.jpg differ diff --git a/src/images/slider/slide-img-4.jpg b/src/images/slider/slide-img-4.jpg new file mode 100644 index 0000000000..f3e048c75a Binary files /dev/null and b/src/images/slider/slide-img-4.jpg differ diff --git a/src/images/testimonials/quotes.svg b/src/images/testimonials/quotes.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testimonials/quotes.svg @@ -0,0 +1,3 @@ + + + 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/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonials-photo-1.png b/src/images/testimonials/testimonials-photo-1.png new file mode 100644 index 0000000000..d0f3ae15ba Binary files /dev/null and b/src/images/testimonials/testimonials-photo-1.png differ diff --git a/src/images/testimonials/testimonials-photo-2.png b/src/images/testimonials/testimonials-photo-2.png new file mode 100644 index 0000000000..6b128cbcae Binary files /dev/null and b/src/images/testimonials/testimonials-photo-2.png differ diff --git a/src/images/testimonials/testimonials-photo-3.png b/src/images/testimonials/testimonials-photo-3.png new file mode 100644 index 0000000000..b3dca9d703 Binary files /dev/null and b/src/images/testimonials/testimonials-photo-3.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..9811dcca07 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,683 @@ content="width=device-width, initial-scale=1.0" /> Dia + + + + + + - -

Dia

+ +
+
+
+
+ + + + +
+ + Menu + +
+ + + + Hire us + +
+
+
+ +
+
+

Strategic Agency

+

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

+ +

Learn more

+ +
+ +
+
+ Slider + Slider + Slider + Slider +
+
+
+
+ Arrow right +
+
+ Arrow left +
+
+ +
+

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 ways to 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 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 +

+
+ +

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 +
+ Strategic Partnerships +

+
+ +

Learn more

+
+
+
+
+
+ +
+
+
+

Testimonials

+

+ What +
+ people say +

+
+
+
+ Photo 1 + Quotes +

+ 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 2 + Quotes +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+ Photo 3 + Quotes +

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

+ +
+
+
+ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..a2338375a7 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,35 @@ 'use strict'; + +const slider = document.querySelector('.header__slider-img'); +const prevButton = document.querySelector('.header__slider-buttons-first'); +const nextButton = document.querySelector('.header__slider-buttons-second'); +const slides = Array.from(slider.querySelectorAll('.header__slider-img-design')); +const slideCount = slides.length; +let slideIndex = 0; + + +prevButton.addEventListener('click', showPreviousSlide); +nextButton.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'; + } else { + slide.style.display = 'none'; + } + }); +} + +updateSlider(); diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe10..28108e1d9f 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,15 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/about-us'; +@import 'blocks/expertises'; +@import 'blocks/product'; +@import 'blocks/services'; +@import 'blocks/testimonials'; +@import 'blocks/apply'; +@import 'blocks/contacts'; +@import 'blocks/footer'; +@import 'blocks/menu'; +@import 'blocks/page'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..842bc84ea0 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,37 @@ +.about-us { + margin-top: 213px; + margin-bottom: 148px; + + @include content-padding-inline; + + @include on-tablet { + margin-top: 241px; + } + + @include on-small-desktop { + margin-top: 148px; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + color: $color-for-light-bg; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: $second-color-for-light-bg; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + } +} diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss new file mode 100644 index 0000000000..d79e39321d --- /dev/null +++ b/src/styles/blocks/apply.scss @@ -0,0 +1,103 @@ +.apply { + background-color: $color-for-dark-bg; + + @include on-tablet { + padding-top: 63px; + padding-bottom: 200px; + } + + @include on-small-desktop { + padding-top: 83px; + } + + @include on-desktop { + padding-top: 72px; + } + + &__content { + @include content-padding-inline; + + padding: 72px 20px; + + @include on-tablet { + text-align: center; + background-image: url(../images/apply/shapes.png); + background-size: cover; + background-position: + 0 0, + center; + } + + &-title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: $color-for-light-bg; + margin: 0; + padding-bottom: 24px; + + @include on-tablet { + font-size: 52px; + } + + @include on-small-desktop { + font-size: 52px; + line-height: 78px; + } + } + + &-info { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: $second-color-for-light-bg; + margin: 0; + padding-bottom: 56px; + + @include on-tablet { + font-size: 24px; + padding-bottom: 64px; + } + + @include on-small-desktop { + line-height: 36px; + padding-left: 81px; + padding-right: 81px; + } + + @include on-desktop { + padding-left: 190px; + padding-right: 190px; + } + } + + &-button { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: $color-for-dark-bg; + border: $accent-color; + + box-sizing: border-box; + align-items: center; + width: 100%; + height: 56px; + border-radius: 8px; + background-color: $accent-color; + cursor: pointer; + margin: 0; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + width: 264px; + } + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 0000000000..48cf04fa86 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,310 @@ +.contacts { + background-color: $header-bg-color; + border-top-right-radius: $border-radius-for-img; + border-top-left-radius: $border-radius-for-img; + color: $color-for-dark-bg; + + @include content-padding-inline; + + padding-top: 72px; + padding-bottom: 80px; + + @include on-tablet { + padding-top: 180px; + } + + &__container { + @include on-small-desktop { + display: grid; + + @include page-grid; + + margin-bottom: 120px; + } + } + + &__forms { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + &-title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + margin: 0; + padding-bottom: 48px; + + @include on-tablet { + grid-column: 1 / 5; + padding-bottom: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + } + + &__form { + text-align: left; + cursor: pointer; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + &-input { + width: 100%; + height: 41px; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 1); + box-sizing: border-box; + background-color: $header-bg-color; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; + color: $color-for-dark-bg; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + + &:hover { + border-bottom: 1px solid rgba(20, 78, 212, 1); + } + + &:focus { + outline: none; + } + } + + &-textarea { + width: 100%; + height: 41px; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 1); + box-sizing: border-box; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: left; + color: $color-for-dark-bg; + background-color: $header-bg-color; + margin-bottom: 56px; + resize: none; + + @include on-tablet { + margin-bottom: 80px; + } + + &:hover { + border-bottom: 1px solid rgba(20, 78, 212, 1); + } + + &:focus { + outline: none; + } + } + + &-button { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: $color-for-dark-bg; + border: $accent-color; + + box-sizing: border-box; + align-items: center; + width: 100%; + height: 56px; + border-radius: 8px; + background-color: $accent-color; + cursor: pointer; + margin: 0; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + width: 264px; + } + } + } + + &__information { + margin-top: 80px; + margin-bottom: 80px; + + @include on-tablet { + margin-top: 120px; + margin-bottom: 139px; + } + + @include on-small-desktop { + grid-column: 7 / 12; + margin-top: 0; + flex-direction: column; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 8 / 12; + } + + &-title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: left; + color: $color-for-dark-bg; + margin: 0; + padding-bottom: 8px; + + @include on-small-desktop { + grid-column: 7 / 12; + } + } + + &-info { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: $accent-grey-color; + text-transform: uppercase; + margin: 0; + padding-bottom: 8px; + padding-top: 40px; + + @include on-tablet { + padding-top: 48px; + } + + @include on-small-desktop { + grid-column: 7 / 12; + } + } + + &-details { + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + color: $color-for-dark-bg; + text-decoration: none; + margin: 0; + + @include hover(transform, scale(1.1)); + + @include on-small-desktop { + grid-column: 7 / 12; + } + } + + &-socials { + text-decoration: none; + + @include on-small-desktop { + grid-column: 7 / 12; + } + + &-icon { + padding-right: 32px; + width: 32px; + height: 32px; + padding-top: 8px; + + @include hover(transform, scale(1.1)); + + &:hover { + fill: $accent-color; + } + } + } + } + + &__menu { + @include on-small-desktop { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + &__nav { + &-list { + margin: 0; + padding-top: 48px; + padding-left: 0; + + @include on-tablet { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 24px; + } + + @include on-small-desktop { + padding-top: 0; + gap: 64px; + } + } + + &-item { + list-style-type: none; + padding-bottom: 24px; + + @include hover(transform, scale(1.1)); + + &:last-child { + padding-bottom: 0; + } + + @include on-tablet { + padding-bottom: 0; + } + + @include on-small-desktop { + grid-column: 1 / -1; + } + } + + &-link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: $color-for-dark-bg; + text-decoration: none; + text-transform: uppercase; + } + } + + &__menu-link { + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/expertises.scss b/src/styles/blocks/expertises.scss new file mode 100644 index 0000000000..5efff96975 --- /dev/null +++ b/src/styles/blocks/expertises.scss @@ -0,0 +1,48 @@ +.expertises { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 148px; + } + &__content { + background-color: $color-for-dark-bg; + border-radius: $border-radius-for-img; + padding-top: 72px; + padding-bottom: 72px; + + @include content-padding-inline; + + @include on-tablet { + padding-top: 128px; + padding-bottom: 128px; + } + + @include on-small-desktop { + padding-bottom: 134px; + } + } + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: $color-for-light-bg; + margin: 0; + } + + &__products { + display: flex; + flex-direction: column; + text-align: center; + + @include on-small-desktop { + flex-direction: row; + gap: 137px; + } + + @include on-desktop { + gap: 177px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..4c68c9bc43 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,5 @@ +.footer { + @include on-tablet { + background-color: $color-for-dark-bg; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..0222ae725a --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,252 @@ +.header { + background-color: $header-bg-color; + height: 800px; + color: $color-for-dark-bg; + border-bottom-right-radius: $border-radius-for-img; + border-bottom-left-radius: $border-radius-for-img; + + &__container { + @include page-grid; + @include content-padding-inline; + + @include on-small-desktop { + padding-top: 168px; + padding-right: 0; + display: flex; + justify-content: space-between; + } + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 20px; + padding-bottom: 48px; + + @include on-tablet { + padding-bottom: 56px; + } + + @include on-small-desktop { + padding-top: 48px; + padding-bottom: 38px; + } + } + + &__title { + @include page-grid; + + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 1 / 6; + padding: 0; + width: 490px; + } + + @include on-desktop { + grid-column: 1 / 3; + } + + &-text { + grid-column: 1 / -1; + margin: 0; + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + text-align: left; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + + @include on-small-desktop { + grid-column: 1 / 3; + } + } + + &-description { + grid-column: 1 / -1; + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + margin-top: 32px; + margin-bottom: 72px; + + @include on-tablet { + grid-column: span 4; + margin-top: 24px; + margin-bottom: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 10; + margin-top: 32px; + margin-bottom: 83px; + } + + @include on-desktop { + grid-column: 1 / 10; + } + } + + &-button { + text-decoration: none; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 8; + } + + @include on-desktop { + grid-column: 1 / 8; + } + + &-design { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: $color-for-dark-bg; + + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 50px; + border-radius: 8px; + background-color: $accent-color; + cursor: pointer; + margin: 0; + + @include hover(transform, scale(1.1)); + } + } + } + + &__slider { + display: flex; + position: absolute; + inset: 503px 0 0; + height: 390px; + transition: transform 0.3s ease-in-out; + + @include on-small-desktop { + width: 50%; + height: 680px; + top: 120px; + right: 0; + margin-left: auto; + } + + @include on-desktop { + width: 41.6%; + right: 0; + } + + @include on-large-screens { + right: 0; + } + + &-img { + display: flex; + width: 100%; + border-radius: $border-radius-for-img; + overflow: hidden; + object-fit: fill; + flex-shrink: 0; + + &-design { + border-radius: $border-radius-for-img; + + @include on-tablet { + width: 100%; + } + + @include on-small-desktop { + border-bottom-left-radius: 0; + border-top-right-radius: 0; + } + } + } + + &-info { + display: flex; + flex-direction: column; + position: absolute; + bottom: 24px; + padding-left: 20px; + + @include on-tablet { + bottom: 32px; + padding-left: 41px; + } + + @include on-small-desktop { + flex-direction: row; + align-items: center; + gap: 24px; + padding-left: 78px; + bottom: 48px; + } + } + + &-buttons { + display: flex; + flex-direction: row; + gap: 16px; + + &-design { + display: flex; + background-color: $color-for-dark-bg; + width: 32px; + height: 32px; + border-radius: 50%; + align-items: center; + justify-content: center; + + @include hover(transform, scale(1.1)); + } + } + + &-text { + color: $color-for-dark-bg; + + &-title { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + margin-top: 16px; + margin-bottom: 8px; + + @include on-small-desktop { + margin-top: 0; + } + } + + &-description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + margin: 0; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..81c0163569 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,68 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: $header-bg-color; + font-weight: 600; + text-transform: uppercase; + overflow: auto; + z-index: 999999; + + @include content-padding-inline; + + &__icon-close { + display: block; + height: 24px; + width: 24px; + background-size: cover; + + background-image: url(../images/icons/icon-close.png); + + @include hover(transform, scale(1.1)); + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + &__block { + margin-top: 45px; + margin-bottom: 24px; + position: sticky; + top: 0; + z-index: 1; + } + + &__nav { + &-list { + margin: 0; + padding-top: 48px; + padding-left: 0; + } + + &-item { + list-style-type: none; + padding-bottom: 24px; + } + + &-link { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: $color-for-dark-bg; + text-decoration: none; + text-transform: uppercase; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..5d26fca831 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,20 @@ +.page { + &__menu { + position: fixed; + overflow: hidden; + top: 0; + right: 0; + left: 0; + + transition: all 0.3s; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 0000000000..2c6aebc0d6 --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,47 @@ +.product { + &__photo { + width: 166px; + height: 166px; + object-fit: cover; + border-radius: $border-radius-for-img; + margin-top: 56px; + align-items: center; + + transition: transform 0.3s; + cursor: pointer; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + margin-top: 64px; + } + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: $color-for-light-bg; + padding-top: 32px; + padding-bottom: 16px; + margin: 0; + + @include on-small-desktop { + padding-top: 40px; + } + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: $second-color-for-light-bg; + margin: 0; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..359ce7504e --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,204 @@ +.services { + @include content-padding-inline; + + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 148px; + } + + @include on-small-desktop { + margin-bottom: 151px; + display: flex; + height: 687px; + } + + &__content { + @include page-grid; + } + &__info { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: span 4; + padding-top: 103px; + } + + @include on-desktop { + grid-column: span 4; + } + + &-heading { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: $accent-grey-color; + margin: 0; + } + + &-title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: $color-for-light-bg; + margin: 0; + padding-top: 16px; + padding-bottom: 24px; + } + + &-description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: $second-color-for-light-bg; + margin: 0; + padding-bottom: 48px; + + @include on-tablet { + padding-bottom: 56px; + } + } + } + + &__cards { + grid-column: 1 / -1; + + @include on-tablet { + @include page-grid; + } + + @include on-small-desktop { + position: relative; + top: -45%; + } + } + + &__card { + background-color: $color-for-dark-bg; + border-radius: $border-radius-for-img; + padding: 32px 48px 32px 32px; + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + padding: 32px; + + &-first { + grid-column: 1 / 4; + + @include on-small-desktop { + grid-column: 7 / 10; + } + + @include on-desktop { + grid-column: 7 / 10; + } + } + &-second { + grid-column: 4 / 7; + transform: translateY(-132px); + + @include on-small-desktop { + grid-column: 10 / 13; + transform: translateY(-139px); + } + + @include on-desktop { + grid-column: 10 / 13; + } + } + &-third { + grid-column: 1 / 4; + + @include on-small-desktop { + grid-column: 7 / 10; + } + } + &-fourth { + grid-column: 4 / 7; + transform: translateY(-132px); + + @include on-small-desktop { + grid-column: 10 / 13; + transform: translateY(-139px); + } + } + } + + &-number { + margin: 0; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: $accent-color; + display: flex; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba($accent-color, 0.1); + justify-content: center; + align-items: center; + } + + &-info { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: $second-color-for-light-bg; + margin: 0; + padding-top: 24px; + padding-bottom: 32px; + } + + &-button { + display: flex; + align-items: center; + gap: 16px; + } + + &-button-design { + width: 40px; + height: 40px; + border-radius: 50%; + border: $accent-color; + box-sizing: border-box; + background-color: $accent-color; + transition: transform 0.3s; + cursor: pointer; + + &:hover { + transform: scale(1.1); + } + } + + &-button-additional { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: $additional-color; + } + + @include on-small-desktop { + padding: 32px 30px 32px 32px; + margin-bottom: 20px; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..490b319915 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,171 @@ +.testimonials { + @include content-padding-inline; + + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 148px; + } + + @include on-small-desktop { + margin-bottom: 186px; + } + + @include on-desktop { + margin-bottom: 148px; + } + + &__content { + @include page-grid; + } + + &__info { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 4; + } + + &-heading { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: $accent-grey-color; + margin: 0; + } + + &-title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: $color-for-light-bg; + margin-top: 16px; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 85px; + } + } + } + + &__cards { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-small-desktop { + grid-column: 1 / -1; + flex-direction: row; + column-gap: 20px; + } + + @include on-desktop { + column-gap: 30px; + } + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 24px; + padding: 32px 42px; + background-color: $color-for-dark-bg; + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + border-radius: 16px; + + @include hover(transform, scale(1.1)); + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + padding: 32px 98px; + } + + @include on-small-desktop { + margin-bottom: 0; + padding: 32px 48px; + } + + @include on-desktop { + padding: 32px 56px; + } + + &-photo { + width: 196px; + height: 196px; + + @include on-tablet { + width: 250px; + height: 250px; + } + + @include on-small-desktop { + width: 196px; + height: 196px; + } + + @include on-desktop { + width: 250px; + height: 250px; + } + } + + &-quotes { + width: 24px; + height: 24px; + padding-top: 24px; + padding-bottom: 8px; + } + + &-text { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: $second-color-for-light-bg; + margin: 0; + padding-bottom: 16px; + } + + &-name { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: $color-for-light-bg; + margin: 0; + padding-bottom: 4px; + } + + &-company { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: $accent-grey-color; + margin: 0; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..f7724cc26c --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,97 @@ +.top-bar { + margin: 0; + + display: flex; + justify-content: space-between; + align-items: center; + + &__logo-link { + display: flex; + + @include hover(transform, scale(1.1)); + } + + &__logo { + height: 28px; + } + + &__nav { + font-family: Poppins, sans-serif; + font-weight: 700; + text-transform: uppercase; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + + &-list { + display: none; + + @include on-small-desktop { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; + gap: 48px; + } + } + + &-link { + text-decoration: none; + color: $color-for-dark-bg; + } + + &-item { + @include hover(transform, scale(1.1)); + } + + &-button { + font-family: Poppins, sans-serif; + font-weight: 700; + text-transform: uppercase; + color: $color-for-dark-bg; + text-decoration: none; + list-style-type: none; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + position: relative; + + @include hover(transform, scale(1.1)); + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + width: 100%; + height: 1px; + background-color: $accent-color; + + @include hover(transform, scale(1.1)); + } + } + } + + &__menu { + display: block; + + @include hover(transform, scale(1.1)); + + @include on-small-desktop { + display: none; + } + + @include on-desktop { + display: none; + } + + @include on-large-screens { + display: none; + } + } +} + +.top-bar:has(.top-bar__menu:target) { + overflow: hidden; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..0fd8d73951 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,4 +4,9 @@ body { background: $c-gray; + margin: 0; +} + +html { + scroll-behavior: smooth; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..544f093d90 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,3 +1,77 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: $large-screens-min-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: 66px; + } + + @include on-large-screens { + padding-inline: 707px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; &:hover { diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..2330ebc189 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ +$tablet-min-width: 640px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$large-screens-min-width: 2560px; +$border-radius-for-img: 30px; $c-gray: #eee; +$header-bg-color: rgba(44, 44, 44, 1); +$color-for-dark-bg: rgba(255, 255, 255, 1); +$color-for-light-bg: rgba(37, 55, 87, 1); +$second-color-for-light-bg: rgba(108, 120, 139, 1); +$accent-color: rgba(32, 96, 246, 1); +$additional-color: rgba(51, 69, 99, 1); +$accent-grey-color: rgba(192, 205, 215, 1);