diff --git a/README.md b/README.md index 93d9738cc4..d5dc965fcd 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Adapt the page to the following screens: 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). + [DEMO LINK](https://moskkat40.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. 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 deleted file mode 100644 index 26ed3e89b0..0000000000 Binary files a/src/images/Shapes.png and /dev/null differ diff --git a/src/images/blue-theme-vision.jpg b/src/images/blue-theme-vision.jpg new file mode 100644 index 0000000000..a9f3fa466c Binary files /dev/null and b/src/images/blue-theme-vision.jpg differ diff --git a/src/images/burger.svg b/src/images/burger.svg new file mode 100644 index 0000000000..48fc38e477 --- /dev/null +++ b/src/images/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/expertise/expertise-1.png b/src/images/expertise/expertise-1.png new file mode 100644 index 0000000000..5fc636993b Binary files /dev/null and b/src/images/expertise/expertise-1.png differ diff --git a/src/images/expertise/expertise-2.png b/src/images/expertise/expertise-2.png new file mode 100644 index 0000000000..c4dc919d1a Binary files /dev/null and b/src/images/expertise/expertise-2.png differ diff --git a/src/images/expertise/expertise-3.png b/src/images/expertise/expertise-3.png new file mode 100644 index 0000000000..b327689a28 Binary files /dev/null and b/src/images/expertise/expertise-3.png differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/icon-blue.svg b/src/images/icon-blue.svg new file mode 100644 index 0000000000..743f109c3e --- /dev/null +++ b/src/images/icon-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-red.svg b/src/images/icon-red.svg new file mode 100644 index 0000000000..2746bae722 --- /dev/null +++ b/src/images/icon-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-yellow.svg b/src/images/icon-yellow.svg new file mode 100644 index 0000000000..cda67af32b --- /dev/null +++ b/src/images/icon-yellow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons-close.svg b/src/images/icons-close.svg new file mode 100644 index 0000000000..fa82d8de07 --- /dev/null +++ b/src/images/icons-close.svg @@ -0,0 +1 @@ + \ No newline at end of file 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/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/people/people-1.jpg b/src/images/people/people-1.jpg new file mode 100644 index 0000000000..3a89ddb6c4 Binary files /dev/null and b/src/images/people/people-1.jpg differ diff --git a/src/images/people/people-2.jpg b/src/images/people/people-2.jpg new file mode 100644 index 0000000000..ed64451143 Binary files /dev/null and b/src/images/people/people-2.jpg differ diff --git a/src/images/people/people-3.jpg b/src/images/people/people-3.jpg new file mode 100644 index 0000000000..d2cf447a79 Binary files /dev/null and b/src/images/people/people-3.jpg differ diff --git a/src/images/people/person-blue.png b/src/images/people/person-blue.png new file mode 100644 index 0000000000..df1ed74b2b Binary files /dev/null and b/src/images/people/person-blue.png differ diff --git a/src/images/people/person-red.png b/src/images/people/person-red.png new file mode 100644 index 0000000000..7a55179de1 Binary files /dev/null and b/src/images/people/person-red.png differ diff --git a/src/images/people/person-yellow.png b/src/images/people/person-yellow.png new file mode 100644 index 0000000000..10c5f3b05d Binary files /dev/null and b/src/images/people/person-yellow.png differ diff --git a/src/images/review-icon-blue.svg b/src/images/review-icon-blue.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/review-icon-blue.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/services-arrow.svg b/src/images/services-arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/services-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg deleted file mode 100644 index 66daed19a5..0000000000 --- a/src/images/slider/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg deleted file mode 100644 index e9ddf85873..0000000000 --- a/src/images/slider/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/slider/slider-arrow-left.svg b/src/images/slider/slider-arrow-left.svg new file mode 100644 index 0000000000..2055a17bbc --- /dev/null +++ b/src/images/slider/slider-arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/slider-arrow-right.svg b/src/images/slider/slider-arrow-right.svg new file mode 100644 index 0000000000..71e16adb61 --- /dev/null +++ b/src/images/slider/slider-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/slider-photo-1.png b/src/images/slider/slider-photo-1.png new file mode 100644 index 0000000000..27b3990590 Binary files /dev/null and b/src/images/slider/slider-photo-1.png differ diff --git a/src/images/slider/slider-photo-2.png b/src/images/slider/slider-photo-2.png new file mode 100644 index 0000000000..b913944507 Binary files /dev/null and b/src/images/slider/slider-photo-2.png differ diff --git a/src/images/slider/slider-photo-3.png b/src/images/slider/slider-photo-3.png new file mode 100644 index 0000000000..3ae7ec660a Binary files /dev/null and b/src/images/slider/slider-photo-3.png differ diff --git a/src/images/slider/slider-pink-1.png b/src/images/slider/slider-pink-1.png new file mode 100644 index 0000000000..69806fcebc Binary files /dev/null and b/src/images/slider/slider-pink-1.png differ diff --git a/src/images/social-icons/facebook.svg b/src/images/social-icons/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/social-icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/instagram.svg b/src/images/social-icons/instagram.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/social-icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/twitter.svg b/src/images/social-icons/twitter.svg new file mode 100644 index 0000000000..e8e4c4839f --- /dev/null +++ b/src/images/social-icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sub-title/sub-title-icon-dark.svg b/src/images/sub-title/sub-title-icon-dark.svg deleted file mode 100644 index 9fcdfa10cd..0000000000 --- a/src/images/sub-title/sub-title-icon-dark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/images/sub-title/sub-title-icon-light.svg b/src/images/sub-title/sub-title-icon-light.svg deleted file mode 100644 index 5ec041c15e..0000000000 --- a/src/images/sub-title/sub-title-icon-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - 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/vision-background.jpg b/src/images/vision-background.jpg new file mode 100644 index 0000000000..9e6d7e910e Binary files /dev/null and b/src/images/vision-background.jpg differ diff --git a/src/images/what-we-do/what-we-do-1.jpg b/src/images/what-we-do/what-we-do-1.jpg deleted file mode 100644 index 9481d8eeb2..0000000000 Binary files a/src/images/what-we-do/what-we-do-1.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-2.jpg b/src/images/what-we-do/what-we-do-2.jpg deleted file mode 100644 index 724e65566f..0000000000 Binary files a/src/images/what-we-do/what-we-do-2.jpg and /dev/null differ diff --git a/src/images/what-we-do/what-we-do-3.jpg b/src/images/what-we-do/what-we-do-3.jpg deleted file mode 100644 index 7a69cc03f1..0000000000 Binary files a/src/images/what-we-do/what-we-do-3.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..f521162fd0 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,645 @@ content="width=device-width, initial-scale=1.0" /> Dia + + + + + - -

Dia

+ + + + + +
+
+
+
+
+

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 +
+
+ +
+
+
002
+
+ Сontent Production +
+ Graphic Design +
+ Video Production +
+ Post Production +
+
+ +
+
+
003
+
+ Marketing Strategy +
+ Email Marketing +
+ Paid Advertising +
+ Blog Content & SEO +
+
+ +
+
+
004
+
+ Digital Communications +
+ Influencer Marketing +
+ Product Placements +
+ Strategic Partnerships +
+
+ +
+
+
+
+
+ +
+
+
+
+
Testimonials
+
What people say
+
+
+
+
+ 1 +
+ icon +
+ 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
+
+ +
+
+ 2 +
+ icon +
+ AIR is an exceptional agency that leads with creative + talent, first-class account servicing. +
+
Azadeh Hawkins
+
Hawkins Consulting
+
+ +
+
+ 3 +
+ icon +
+ AIR is an exceptional agency that leads with creative + talent, first-class account servicing. +
+
Azadeh Hawkins
+
Hawkins Consulting
+
+
+
+
+
+ +
+
+
+
Vision, Passion, Results
+
+ We are sure that first-rate job is possible only if all three + components are united. +
+ + + +
+
+
+ +
+
+
+
+
Send us a message
+
+ + + + +
+
+
+
Contact us
+
+
Call us
+ + 654 321 987 + +
+
+
Visit us
+ + 2905 West Drive, Buffalo Grove + +
+ +
+
+
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..5f4a606820 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,132 @@ 'use strict'; +let img = ['/slider-photo-1.eba8c588.png', '/slider-photo-2.9bbb1b4c.png', '/slider-photo-3.d777f5e4.png'] +const sliderItem = document.querySelector('.slider__item') +const arrowPrev = document.querySelector('.slider__arrow-left'); +const arrowNext = document.querySelector('.slider__arrow-right'); +let num = 0; + +//slider +function next() { + num++; + + if (num >= img.length) { + num = 0; + } + sliderItem.src = img[num]; +} + +function prev() { + num--; + + if (num < 0) { + num = img.length - 1; + } + + sliderItem.src = img[num]; +} + +arrowPrev.addEventListener('click', () => { + prev(); +}); + +arrowNext.addEventListener('click', () => { + next(); +}); + +// +//burger-menu + +const burgerBtn = document.querySelector('#burger'); +const burgerClose = document.querySelector('.burger__close'); +const burgerOpen = document.querySelector('.top-bar__open'); +const burgerMenu = document.querySelector('.burger'); +const topBarIcon = document.querySelector('.burger__logo'); +const topBarHire = document.querySelector('.top-bar__hire'); +const page = document.querySelector('.page__body'); + +burgerOpen.addEventListener('click', () => { + burgerMenu.style.display = 'block'; + page.style.overflow = 'hidden'; +}); + +burgerClose.addEventListener('click', () => { + burgerMenu.style.display = 'none'; + page.style.overflow = 'auto'; +}); + +burgerMenu.addEventListener('click', (event) => { + if(event.target) { + burgerMenu.style.display = 'none'; + topBarIcon.style.display = 'block'; + topBarHire.style.display = 'block'; + page.style.overflow = 'auto'; + } +}); + + +//change theme +const switchers = document.querySelectorAll('.switcher') +//header + +const header = document.querySelector('.header'); +const headerButton = document.querySelector('.header__button'); +const hire = document.querySelector('.top-bar__hire') + +//services +const servicesButton = document.querySelectorAll('.services__button'); +const servisesNumbers = document.querySelectorAll('.services__number'); + +//reviews +const persons = document.querySelectorAll('.reviews__img'); +const icons = document.querySelectorAll('.reviews__icon'); + +//vision +const vision = document.querySelector('.vision'); +const visionButton = document.querySelector('.vision__button'); + +//contactUs +const contactUs = document.querySelector('.contactUs'); +const contactUsButton = document.querySelector('.contactUs__button'); +const contactUsInputs = document.querySelectorAll('.contactUs__form_input') + +//burger + +const menus = document.querySelectorAll('.page__menu'); +const footerPage = document.querySelector('.footer'); + + +function toggleTheme() { + header.classList.toggle('blue-theme'); + headerButton.classList.toggle('blue-theme'); + hire.classList.toggle('blue-theme'); + sliderItem.classList.toggle('blue-theme'); + burgerMenu.classList.toggle('blue-theme'); + + servicesButton.forEach((button) => button.classList.toggle('blue-theme')); + servisesNumbers.forEach((number) => number.classList.toggle('blue-theme')); + persons.forEach((person) => person.classList.toggle('blue-theme')); + icons.forEach((icon) => icon.classList.toggle('blue-theme')); + vision.classList.toggle('blue-theme'); + visionButton.classList.toggle('blue-theme'); + contactUs.classList.toggle('blue-theme'); + contactUsButton.classList.toggle('blue-theme'); + contactUsInputs.forEach((input) => input.classList.toggle('blue-theme')); + menus.forEach((menu) => menu.classList.toggle('blue-theme')); + footerPage.classList.toggle('blue-theme'); + + + const isBlueTheme = header.classList.contains('blue-theme'); + localStorage.setItem('theme', isBlueTheme ? 'blue' : 'default'); +} + +window.addEventListener('load', () => { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'blue') { + toggleTheme(); + } +}); + + +switchers.forEach((switcher) => { + switcher.addEventListener('click', toggleTheme); +}); 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.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000000..fc6cc1bfe8 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,33 @@ +.about { + padding-block: 120px; + background-color: #f2f6fa; + + @include big-phone { + padding-block: 148px; + } + &__wrapper { + display: grid; + row-gap: 24px; + justify-content: center; + align-items: center; + } + &__title { + color: $text-color-black; + font-weight: 600; + font-size: 32px; + text-align: center; + } + &__text { + color: #6c788b; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 22px; + text-align: center; + line-height: 33px; + + @include big-phone { + font-size: 24px; + line-height: 36px; + } + } +} diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 0000000000..ec1993d44a --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,59 @@ +.burger { + display: none; + padding-top: 30px; + position: fixed; + width: 100%; + top: 0; + z-index: 2; + height: 100%; + background-color: $header-background-color-dark; + + @include small-desktop { + position: absolute; + height: 0; + z-index: 0; + margin-top: 107px; + } + + @include small-desktop { + grid-auto-flow: column; + width: 720px; + margin: 0 auto; + margin-top: 50px; + gap: 40px; + } + &__icons { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + } + &__close { + &--img { + width: 25px; + height: 25px; + } + } + &__list { + list-style-type: none; + display: grid; + row-gap: 24px; + + @include small-desktop { + gap: 50px; + display: flex; + } + } + &__link { + text-decoration: none; + font-weight: 700; + font-size: 13px; + line-height: 20px; + letter-spacing: 3px; + color: $text-color-white; + text-transform: uppercase; + } + &.blue-theme { + background-color: $header-background-color-blue; + display: none; + } +} diff --git a/src/styles/blocks/contactUs.scss b/src/styles/blocks/contactUs.scss new file mode 100644 index 0000000000..cbfb860512 --- /dev/null +++ b/src/styles/blocks/contactUs.scss @@ -0,0 +1,156 @@ +.contactUs { + margin-top: 120px; + padding-block: 75px; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + background-color: $header-background-color-dark; + &.blue-theme { + background-color: $header-background-color-blue; + } + + @include big-phone { + margin-top: 0; + padding: 180px 0 139px; + } + + @include small-desktop { + padding: 180px 0 104px; + } + &__wrapper { + display: grid; + row-gap: 80px; + + @include big-phone { + row-gap: 120px; + } + + @include small-desktop { + grid-auto-flow: column; + gap: 98px; + } + } + &__title { + font-weight: 600; + font-size: 32px; + line-height: 41px; + color: $text-color-white; + margin-bottom: 48px; + + @include big-phone { + margin-bottom: 56px; + } + } + &__form { + display: grid; + &_input { + margin-bottom: 40px; + width: 280px; + height: 41px; + border: none; + background: transparent; + border-bottom: 1px solid $text-color-white; + color: $text-color-white; + &--textarea { + resize: none; + } + &::placeholder { + font-weight: 600; + font-size: 15px; + line-height: 22px; + color: $text-color-white; + &:focus { + color: transparent; + } + } + &:focus { + border-bottom-color: $dark-blue-color; + outline: none; + &::placeholder { + color: transparent; + } + } + &.blue-theme { + border-bottom-color: $text-color-white; + } + + @include big-phone { + margin-bottom: 48px; + width: 362px; + } + } + } + &__button { + width: 280px; + height: 56px; + border-radius: 8px; + background-color: $dark-blue-color; + border: none; + font-size: 15px; + font-weight: 600; + line-height: 22px; + text-align: center; + color: $text-color-white; + + @include hover(transform, scale(1.1)); + &.blue-theme { + background-color: $pink-color; + border-radius: 64px; + } + + @include big-phone { + margin-top: 32px; + width: 264px; + } + } + &__call { + margin-bottom: 40px; + + @include hover(transform, scale(1.1)); + + @include big-phone { + margin-bottom: 48px; + } + } + &__adress { + margin-bottom: 40px; + + @include hover(transform, scale(1.1)); + + @include big-phone { + margin-bottom: 48px; + } + } + &__subtitle { + margin-bottom: 8px; + font-weight: 700; + font-size: 13px; + line-height: 19px; + letter-spacing: 3px; + color: #c0cdd7; + } + &__text { + font-family: 'Open Sans', sans-serif; + margin-bottom: 8px; + font-weight: 600; + font-size: 24px; + line-height: 36px; + color: $text-color-white; + text-decoration: none; + } + &__icons { + width: 160px; + display: grid; + grid-auto-flow: column; + align-items: center; + } + &__icon { + width: 32px; + height: 32px; + + @include hover(transform, scale(1.1)); + &-instagram { + margin-top: 5px; + margin-left: 5px; + } + } +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..6fd7b492c9 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,65 @@ +.expertise { + padding-block: 72px; + background-color: $text-color-white; + border-radius: 30px; + + @include big-phone { + padding-block: 128px; + } + &__wrapper { + display: grid; + grid-auto-flow: row; + gap: 56px; + + @include big-phone { + gap: 72px; + } + + @include small-desktop { + gap: 137px; + grid-auto-flow: column; + } + } + &__item { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + &__title { + margin-bottom: 58px; + font-weight: 600; + font-size: 44px; + text-align: center; + line-height: 62px; + + @include big-phone { + margin-bottom: 64px; + font-size: 52px; + line-height: 78px; + } + } + &__img { + width: 166px; + height: 166px; + border-radius: 18px; + object-fit: cover; + + @include hover(transform, scale(1.1)); + } + &__subtitle { + margin-top: 32px; + font-weight: 600; + font-size: 20px; + color: $text-color-black; + } + &__text { + margin-top: 16px; + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #6c788b; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..a8e2f37389 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,42 @@ +.footer { + background-color: $header-background-color-dark; + padding-bottom: 80px; + &__content { + @include small-desktop { + display: flex; + justify-content: space-between; + align-items: center; + } + } + &__list { + margin-top: 48px; + list-style-type: none; + display: grid; + row-gap: 24px; + + @include big-phone { + grid-auto-flow: column; + gap: 40px; + margin-top: 24px; + } + + @include small-desktop { + margin-top: 30px; + } + } + &__item { + @include hover(transform, scale(1.2)); + } + &__link { + text-decoration: none; + font-weight: 700; + font-size: 13px; + line-height: 20px; + letter-spacing: 3px; + color: $text-color-white; + text-transform: uppercase; + } + &.blue-theme { + background-color: $header-background-color-blue; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..afa059a0c6 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,90 @@ +.header { + background-color: $header-background-color-dark; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + &__text { + color: $text-color-white; + display: grid; + row-gap: 32px; + padding-inline: 20px; + + @include big-phone { + row-gap: 24px; + padding-inline: 41px; + } + + @include small-desktop { + width: 362px; + padding-left: 54px; + height: 490px; + } + + @include desktop { + padding-left: 227px; + } + + @include big-desktop { + padding-left: 707px; + } + } + &__title { + margin-top: 48px; + font-weight: 600; + font-size: 52px; + line-height: 62px; + + @include big-phone { + font-size: 64px; + line-height: 68px; + margin-top: 56px; + } + + @include small-desktop { + margin-top: 168px; + } + } + &__subtitle { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 27px; + } + &__button { + margin-top: 72px; + display: block; + width: 100%; + height: 50px; + background-color: $dark-blue-color; + border-radius: 8px; + text-align: center; + text-decoration: none; + color: $text-color-white; + font-size: 15px; + line-height: 50px; + font-weight: 600; + + @include hover(transform, scale(1.1)); + + @include big-phone { + margin-top: 56px; + width: 264px; + } + &.blue-theme { + background-color: $pink-color; + border-radius: 64px; + } + } + &__content { + @include small-desktop { + display: grid; + grid-auto-flow: column; + gap: 106px; + } + } +} + +.header.blue-theme { + background-color: $header-background-color-blue; + border-bottom-left-radius: 200px; + border-bottom-right-radius: 200px; +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..3b6f5ec4d2 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,29 @@ +.nav { + display: none; + + @include small-desktop { + display: block; + } + &__list { + list-style-type: none; + display: grid; + row-gap: 24px; + + @include small-desktop { + gap: 50px; + display: flex; + } + } + &__item { + @include hover(transform, scale(1.2)); + } + &__link { + text-decoration: none; + font-weight: 700; + font-size: 13px; + line-height: 20px; + letter-spacing: 3px; + color: $text-color-white; + text-transform: uppercase; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..9f68075e52 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,18 @@ +.page { + &__body { + background-color: #f2f6fa; + font-family: Poppins, sans-serif; + box-sizing: border-box; + } + &__menu { + background-color: $header-background-color-dark; + padding-bottom: 80px; + &.blue-theme { + background-color: $header-background-color-blue; + } + + @include small-desktop { + background-color: transparent; + } + } +} diff --git a/src/styles/blocks/reviews.scss b/src/styles/blocks/reviews.scss new file mode 100644 index 0000000000..41d4a6423e --- /dev/null +++ b/src/styles/blocks/reviews.scss @@ -0,0 +1,132 @@ +.reviews { + &__titles { + display: grid; + row-gap: 16px; + } + &__topic { + font-weight: 700; + font-size: 13px; + line-height: 19px; + letter-spacing: 3px; + text-transform: uppercase; + color: $gray-color; + } + &__title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + color: $text-color-black; + + @include big-phone { + width: 263px; + } + } + &__cards { + margin: 48px 0 120px; + display: grid; + row-gap: 24px; + + @include big-phone { + margin: 56px 0 148px; + row-gap: 30px; + } + + @include small-desktop { + grid-auto-flow: column; + gap: 20px; + margin: 85px 0 186px; + } + } + &__card { + padding: 0 42px 32px; + background-color: $text-color-white; + border-radius: 16px; + + @include hover(transform, scale(0.9)); + + @include big-phone { + padding: 0 98px 32px; + } + + @include small-desktop { + padding: 0 32px 48px; + } + } + &__photo { + position: relative; + } + &__img { + position: relative; + margin: auto; + margin-top: 73px; + margin-bottom: 24px; + width: 196px; + height: 196px; + display: block; + border-radius: 50%; + object-fit: cover; + z-index: 1; + &.blue-theme.person-1 { + content: url('/images/people/person-blue.png'); + } + &.blue-theme.person-2 { + content: url('/images/people/person-yellow.png'); + } + &.blue-theme.person-3 { + content: url('/images/people/person-red.png'); + } + + @include big-phone { + margin-top: 32px; + width: 250px; + height: 250px; + } + + @include small-desktop { + margin-top: 32px; + width: 196px; + height: 196px; + } + } + &__icon { + display: block; + margin: 0 auto; + margin-bottom: 8px; + &.blue-theme.icon-blue { + content: url('/images/icon-blue.svg'); + } + &.blue-theme.icon-yellow { + content: url('/images/icon-yellow.svg'); + } + &.blue-theme.icon-red { + content: url('/images/icon-red.svg'); + } + } + &__descr { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + line-height: 19.5px; + text-align: center; + font-weight: 600; + margin-bottom: 16px; + color: $dark-gray-color; + } + &__name { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + line-height: 19.5px; + text-align: center; + font-weight: 600; + margin-bottom: 4px; + color: $text-color-black; + } + &__position { + font-size: 13px; + line-height: 19.5px; + font-weight: 700; + text-transform: uppercase; + text-align: center; + color: #c0cdd7; + letter-spacing: 3px; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..a69282f4e4 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,173 @@ +.services { + display: grid; + padding-block: 120px; + + @include big-phone { + padding-block: 148px; + } + + @include small-desktop { + padding: 251px 0 151px; + } + &__wrapper { + display: grid; + row-gap: 48px; + + @include big-phone { + row-gap: 56px; + } + + @include small-desktop { + grid-auto-flow: column; + } + } + &__titles { + display: grid; + + @include big-phone { + grid-template-columns: repeat(6, 1fr); + } + + @include small-desktop { + display: block; + width: 294px; + } + } + &__topic { + font-size: 13px; + letter-spacing: 3px; + font-weight: 700; + text-transform: uppercase; + color: $gray-color; + } + &__title { + font-size: 32px; + font-weight: 600; + line-height: 41px; + color: $text-color-black; + margin-top: 16px; + + @include big-phone { + grid-column: 1 / 4; + } + } + &__subtitle { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $dark-gray-color; + margin-top: 24px; + + @include big-phone { + grid-column: 1 / 4; + } + } + &__space { + display: block; + height: 25px; + width: 100%; + opacity: 0; + } + &__items { + display: grid; + row-gap: 24px; + + @include big-phone { + grid-template-columns: repeat(6, 1fr); + column-gap: 28px; + } + } + &__item { + position: relative; + padding: 32px 0 32px 32px; + background-color: $text-color-white; + border-radius: 16px; + &:nth-child(1) { + .services__button.blue-theme { + background-color: #56ccf2; + } + } + + &:nth-child(2) { + .services__button.blue-theme { + background-color: #fcc91d; + } + } + + &:nth-child(3) { + .services__button.blue-theme { + background-color: #15d850; + } + } + + &:nth-child(4) { + .services__button.blue-theme { + background-color: #f36363; + } + } + + @include big-phone { + grid-column: 1 / 4; + &:nth-child(3) { + grid-column: 4 / 7; + transform: translateY(-132px); + } + &:nth-child(4) { + grid-column: 4 / 7; + transform: translateY(-132px); + } + } + } + &__number { + width: 46px; + height: 24px; + border-radius: 23px; + background-color: #f2f6fa; + color: $dark-blue-color; + font-weight: 600; + font-size: 13px; + text-align: center; + line-height: 24px; + &:nth-child(1) { + &.blue-theme { + background-color: #56ccf2 10%; + color: #56ccf2; + } + } + &:nth-child(2) { + &.blue-theme { + background-color: #fcc91d 10%; + color: #fcc91d; + } + } + } + &__names { + margin-top: 24px; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 19px; + color: $dark-gray-color; + } + &__button { + display: block; + width: 40px; + height: 40px; + background-color: $dark-blue-color; + background-image: url('/images/services-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + margin-top: 32px; + &::after { + content: 'Learn more'; + position: absolute; + left: 90px; + top: 197px; + font-weight: 600; + font-size: 15px; + color: #334563; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..e94b3d7165 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,87 @@ +.slider { + margin-top: 40px; + position: relative; + bottom: -8px; + + @include big-phone { + margin-top: 144px; + } + + @include small-desktop { + margin-top: 48px; + } + &__item { + object-fit: cover; + width: 100%; + border-radius: 30px; + height: 390px; + &.blue-theme { + content: url('/images/slider/slider-pink-1.png'); + } + + @include small-desktop { + height: 680px; + } + } + &__arrows { + position: absolute; + display: flex; + gap: 16px; + bottom: 126px; + left: 20px; + + @include big-phone { + bottom: 140px; + } + + @include small-desktop { + left: 78px; + } + } + &__arrow { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: $text-color-white; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + @include hover(transform, scale(1.1)); + &-left { + background-image: url('/images/slider/slider-arrow-left.svg'); + } + &-right { + background-image: url('/images/slider/slider-arrow-right.svg'); + } + } + &__text { + position: absolute; + display: grid; + row-gap: 8px; + color: $text-color-white; + bottom: 24px; + left: 20px; + margin-bottom: 25px; + + @include big-phone { + margin-bottom: 32px; + } + + @include small-desktop { + bottom: 93px; + left: 175px; + } + } + &__title { + letter-spacing: 3px; + font-weight: 700; + text-transform: uppercase; + font-size: 13px; + } + &__descr { + font-family: 'Open Sans', sans-serif; + font-weight: 400; + font-size: 14px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..fe58dc3ce7 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,47 @@ +.top-bar { + padding-top: 20px; + display: flex; + justify-content: space-between; + + @include small-desktop { + padding-top: 50px; + } + &__icons { + display: flex; + gap: 32px; + } + &__hire { + position: relative; + text-decoration: none; + color: $text-color-white; + font-weight: 700; + text-transform: uppercase; + font-size: 13px; + line-height: 19px; + + @include hover(transform, scale(1.2)); + &::before { + content: ''; + width: 100%; + height: 2px; + background-color: $dark-blue-color; + position: absolute; + bottom: 0; + } + &.blue-theme { + &::before { + background-color: $pink-color; + } + } + } + &__logo { + position: relative; + + @include hover(transform, scale(1.2)); + } + &__open { + @include small-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..d818f88517 --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,68 @@ +.vision { + padding-block: 72px; + background-color: $text-color-white; + + @include big-phone { + background-image: url('/images/vision-background.jpg'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + padding-block: 200px; + &.blue-theme { + background-image: url('/images/blue-theme-vision.jpg'); + } + } + &__title { + font-weight: 600; + font-size: 44px; + line-height: 52px; + text-align: center; + margin-bottom: 24px; + + @include big-phone { + font-size: 52px; + line-height: 62px; + } + } + &__subtitle { + font-weight: 600; + font-size: 22px; + line-height: 33px; + text-align: center; + margin-bottom: 56px; + color: $dark-gray-color; + + @include big-phone { + font-size: 24px; + line-height: 36px; + margin-bottom: 64px; + } + } + &__link { + text-decoration: none; + } + &__button { + display: block; + width: 280px; + height: 56px; + border-radius: 8px; + background-color: $dark-blue-color; + border: none; + font-size: 15px; + font-weight: 600; + line-height: 22px; + text-align: center; + color: $text-color-white; + margin: 0 auto; + + @include hover(transform, scale(1.1)); + &.blue-theme { + background-color: $pink-color; + border-radius: 64px; + } + + @include big-phone { + width: 264px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..8261bf2ec2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,40 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/slider'; +@import 'blocks/about'; +@import 'blocks/expertise'; +@import 'blocks/services'; +@import 'blocks/reviews'; +@import 'blocks/vision'; +@import 'blocks/contactUs'; +@import 'blocks/nav'; +@import 'blocks/burger'; +@import 'blocks/footer'; -body { - background: $c-gray; +* { + margin: 0; + padding: 0; + scroll-behavior: smooth; +} + +.container { + padding-inline: 20px; + + @include big-phone { + padding-inline: 41px; + } + + @include small-desktop { + padding-inline: 54px; + } + + @include desktop { + padding-inline: 227px; + } + + @include big-desktop { + padding-inline: 707px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..1ea7465692 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,27 @@ #{$_property}: $_toValue; } } + +@mixin big-phone { + @media (min-width: $big-phone-min-width) { + @content; + } +} + +@mixin small-desktop { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin big-desktop { + @media (min-width: $big-desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..4a84a5dc47 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ -$c-gray: #eee; +$header-background-color-dark: #2c2c2c; +$text-color-white: #fff; +$dark-blue-color: #2060f6; +$text-color-black: #253757; +$gray-color: #c0cdd7; +$dark-gray-color: #6c788b; +$header-background-color-blue: #008aff; +$pink-color: #ff9c8e; +$big-phone-min-width: 639px; +$small-desktop-min-width: 1023px; +$desktop-min-width: 1599px; +$big-desktop-min-width: 2459px;