diff --git a/README.md b/README.md index 93d9738cc4..6e8e825a3d 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://Anya-Laban.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/expertise/branding.png b/src/images/expertise/branding.png new file mode 100644 index 0000000000..7ed03dba87 Binary files /dev/null and b/src/images/expertise/branding.png differ diff --git a/src/images/expertise/communication.png b/src/images/expertise/communication.png new file mode 100644 index 0000000000..b49e817ada Binary files /dev/null and b/src/images/expertise/communication.png differ diff --git a/src/images/expertise/strategy.png b/src/images/expertise/strategy.png new file mode 100644 index 0000000000..b5b97c957a Binary files /dev/null and b/src/images/expertise/strategy.png differ diff --git a/src/images/icons/arrow-card-serv--hover.svg b/src/images/icons/arrow-card-serv--hover.svg new file mode 100644 index 0000000000..d32469c02a --- /dev/null +++ b/src/images/icons/arrow-card-serv--hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/arrow-card-serv.svg b/src/images/icons/arrow-card-serv.svg new file mode 100644 index 0000000000..abcb7f51b8 --- /dev/null +++ b/src/images/icons/arrow-card-serv.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 0000000000..bc6f5230e9 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook--hover.svg b/src/images/icons/facebook--hover.svg new file mode 100644 index 0000000000..940aaee261 --- /dev/null +++ b/src/images/icons/facebook--hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 0000000000..b6bc5a936d --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/instagram--hover.svg b/src/images/icons/instagram--hover.svg new file mode 100644 index 0000000000..5254f81d89 --- /dev/null +++ b/src/images/icons/instagram--hover.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/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/quote-card-person.svg b/src/images/icons/quote-card-person.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/icons/quote-card-person.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter--hover.svg b/src/images/icons/twitter--hover.svg new file mode 100644 index 0000000000..4cc8aff98d --- /dev/null +++ b/src/images/icons/twitter--hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 0000000000..74cbdbf5d4 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + 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/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/arrow.svg b/src/images/slider/arrow.svg new file mode 100644 index 0000000000..7272b2b4a9 --- /dev/null +++ b/src/images/slider/arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/slider/img-1.png b/src/images/slider/img-1.png new file mode 100644 index 0000000000..eb5018c69b Binary files /dev/null and b/src/images/slider/img-1.png differ diff --git a/src/images/slider/img-2.png b/src/images/slider/img-2.png new file mode 100644 index 0000000000..47f3c9fc1a Binary files /dev/null and b/src/images/slider/img-2.png differ diff --git a/src/images/slider/img-3.png b/src/images/slider/img-3.png new file mode 100644 index 0000000000..9fdeaf26c8 Binary files /dev/null and b/src/images/slider/img-3.png differ diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg index d487a51ddf..44dcb348ba 100644 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and b/src/images/testimonials/testimonial-ava-1.jpg differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg index 04288940f3..fd0544d397 100644 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and b/src/images/testimonials/testimonial-ava-2.jpg differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg index 24c0f2b94b..d07f385cde 100644 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and b/src/images/testimonials/testimonial-ava-3.jpg differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..8b365bb8cc 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,633 @@ + - + - Dia + Air + + + + + + + + + - -

Dia

+ + + + + + +
+
+
+
+ + + +
+ + + + + Hire us + +
+
+ +
+
+

Strategic Agency

+

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

+ + Learn more + +
+
+ +
+
+ slide-img-1 + + slide-img-2 + + slide-img-3 +
+ +
+
+
+
+
+

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

+
+
+ Person photo +
+ +

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

+ +

Tal Gilad

+ +

+ Teach for America +

+
+ +
+
+ Person photo +
+ +

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

+ +

Azadeh Hawkins

+ +

+ Hawkins Consulting +

+
+ +
+
+ Person photo +
+ +

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

+ +

Michel Grover

+ +

Hulu

+
+
+
+
+ +
+
+
+

Vision, Passion, Results

+

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

+ + Apply + +
+
+
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..1686a036c8 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,45 @@ 'use strict'; + +// Slider +let sliderImgNum = 0; + +const btnBack = document.querySelector('.slider__button--back'); +const btnForward = document.querySelector('.slider__button--forward'); +const sliderList = document.querySelector('.slider__list'); +const countSliderImg = sliderList.children.length - 1; + + + +btnBack.addEventListener('click', ()=>{ + if(sliderImgNum <= 0){ + sliderImgNum = countSliderImg; + sliderList.children[0].classList.remove('slider__photo--active'); + }else{ + sliderList.children[sliderImgNum].classList.remove('slider__photo--active'); + sliderImgNum--; + } + + sliderList.children[sliderImgNum].classList.add('slider__photo--active'); +}) + +btnForward.addEventListener('click', ()=>{ + if(sliderImgNum >= countSliderImg){ + sliderImgNum = 0; + sliderList.children[countSliderImg].classList.remove('slider__photo--active'); + } + else{ + sliderList.children[sliderImgNum].classList.remove('slider__photo--active'); + sliderImgNum++; + } + + sliderList.children[sliderImgNum].classList.add('slider__photo--active'); +}) + +// Form + +const formMessage = document.getElementById('form-message'); + +formMessage.addEventListener('submit', (event)=>{ + event.preventDefault(); + event.target.reset(); +}) 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.scss b/src/styles/blocks.scss new file mode 100644 index 0000000000..163e0d61f0 --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,20 @@ +@import './blocks/page'; +@import 'blocks/container'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/logo'; +@import 'blocks/icon'; +@import 'blocks/nav'; +@import 'blocks/button'; +@import 'blocks/slider'; +@import 'blocks/menu'; +@import 'blocks/about-us'; +@import 'blocks/expertise'; +@import 'blocks/services'; +@import 'blocks/card-service'; +@import 'blocks/sub-title'; +@import 'blocks/testimonials'; +@import 'blocks/card-person'; +@import 'blocks/vision'; +@import 'blocks/footer'; +@import 'blocks/form'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..c50712fd35 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,58 @@ +.about-us { + padding-block: 120px; + text-align: center; + + @include on-tablet { + padding-block: 148px; + } + + &__content { + @include grid-layout; + + row-gap: 24px; + + @include on-tablet { + row-gap: 16px; + } + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: $c-section-title; + + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } + + &__text { + font-family: $font-family-secondary; + font-size: 22px; + font-weight: 600; + line-height: 33px; + color: $c-section-text; + + grid-column: 1 / -1; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..fc17f81652 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,21 @@ +.button { + border-radius: 8px; + padding-top: 14px; + padding-bottom: 13px; + background-color: $c-blue; + color: $c-text-light; + border: none; + text-decoration: none; + + font-family: $font-family-main; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + + display: flex; + align-items: center; + justify-content: center; + + @include hover(background-color, $c-dark-blue); + @include hover(scale, 1.01); +} diff --git a/src/styles/blocks/card-person.scss b/src/styles/blocks/card-person.scss new file mode 100644 index 0000000000..935107866c --- /dev/null +++ b/src/styles/blocks/card-person.scss @@ -0,0 +1,104 @@ +.card-person { + box-sizing: border-box; + padding: 32px 42px; + background-color: $c-white; + border-radius: 16px; + + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + font-family: $font-family-secondary; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + + @include hover(box-shadow, 0 0 30px $c-sub-title); + @include hover(scale, 1.05); + + @include on-tablet { + padding-inline: 98px; + } + + @include on-small-desktop { + padding-inline: 48px; + } + + @include on-desktop { + padding-inline: 56px; + } + + &__photo-box { + position: relative; + display: flex; + justify-content: center; + align-items: center; + height: 196px; + width: 196px; + margin-bottom: 24px; + + @include on-tablet { + height: 250px; + width: 250px; + } + + @include on-small-desktop { + height: 196px; + width: 196px; + } + + @include on-desktop { + height: 250px; + width: 250px; + } + + &::after, + &::before { + content: ''; + position: absolute; + width: 55.6%; + height: 22.4%; + border-radius: 12px; + background-color: $c-blue; + transform: rotate(-60deg); + } + + &::before { + top: 22%; + left: 3%; + } + + &::after { + bottom: 22%; + right: 3%; + } + } + + &__photo { + width: 56%; + height: 56%; + border-radius: 50%; + z-index: 1; + } + + &__comment { + flex-grow: 1; + color: $c-section-text; + margin-bottom: 16px; + + &::before { + content: ''; + display: block; + margin: 0 auto 8px; + width: 24px; + height: 24px; + background-image: url('../images/icons/quote-card-person.svg'); + } + } + + &__name { + color: $c-section-title; + margin-bottom: 4px; + } +} diff --git a/src/styles/blocks/card-service.scss b/src/styles/blocks/card-service.scss new file mode 100644 index 0000000000..b1bdcd97cc --- /dev/null +++ b/src/styles/blocks/card-service.scss @@ -0,0 +1,69 @@ +.card-service { + background-color: $c-white; + border-radius: 16px; + padding: 32px; + box-sizing: border-box; + + @include hover(box-shadow, 0 0 30px $c-sub-title); + @include hover(scale, 1.05); + + &__number { + position: relative; + width: fit-content; + padding: 2px 12px; + color: $c-blue; + font-size: 13px; + font-weight: 600; + + margin-bottom: 24px; + + &::after { + content: ''; + position: absolute; + inset: 0; + background-color: $c-blue; + opacity: 10%; + border-radius: 23px; + } + } + + &__list { + color: $c-section-text; + font-family: $font-family-secondary; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + + margin-bottom: 32px; + } + + &__link { + display: flex; + align-items: center; + column-gap: 16px; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: $c-dark-grey; + text-decoration: none; + + &::before { + content: ''; + box-sizing: border-box; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: $c-blue; + background-repeat: no-repeat; + background-position: center; + background-image: url('../images/icons/arrow-card-serv.svg'); + transition: all $transition-duration; + } + + &:hover::before { + border: 1px solid $c-blue; + background-color: $c-white; + background-image: url('../images/icons/arrow-card-serv--hover.svg'); + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..98abeb52e3 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,6 @@ +.container { + max-width: 1600px; + margin-inline: auto; + + @include content-padding-inline; +} diff --git a/src/styles/blocks/expertise.scss b/src/styles/blocks/expertise.scss new file mode 100644 index 0000000000..1a9fb56fc3 --- /dev/null +++ b/src/styles/blocks/expertise.scss @@ -0,0 +1,89 @@ +.expertise { + background-color: $c-white; + padding-block: 72px; + + @include on-tablet { + padding-block: 128px; + } + + &__content { + text-align: center; + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + + color: $c-section-title; + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 64px; + font-size: 52px; + line-height: 78px; + } + } + + &__cards { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 56px; + + @include on-tablet { + row-gap: 72px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + align-items: start; + } + } + + &__card { + width: 100%; + max-width: 264px; + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + width: 64.6%; + } + + @include on-small-desktop { + width: 23.3%; + } + + @include on-desktop { + width: 23%; + } + } + + &__card-img { + width: 166px; + height: 166px; + border-radius: 16px; + margin-bottom: 32px; + + @include hover(scale, 1.2); + } + + &__card-title { + font-size: 20px; + font-weight: 600; + line-height: 28px; + color: $c-section-title; + margin-bottom: 16px; + } + + &__card-text { + font-family: $font-family-secondary; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $c-section-text; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..1772dbda32 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,146 @@ +.footer { + background-color: $c-bg-header; + color: $c-white; + border-radius: 40px 40px 0 0; + padding-top: 72px; + padding-bottom: 80px; + + @include on-tablet { + padding-top: 180px; + } + + &__content { + @include grid-layout; + + @include on-small-desktop { + row-gap: 104px; + } + } + + &__send-message { + grid-column: 1 / -1; + margin-bottom: 80px; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 120px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + margin-bottom: 0; + } + } + + &__contact-us { + grid-column: 1 / -1; + margin-bottom: 80px; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 139px; + } + + @include on-small-desktop { + grid-column: 7 / 12; + margin-bottom: 0; + } + } + + &__bottom { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + row-gap: 48px; + + @include on-tablet { + row-gap: 24px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + } + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 48px; + + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + + &--send-message { + line-height: 41.6px; + + @include on-tablet { + line-height: 48px; + } + } + } + + &__contact-box { + display: flex; + flex-direction: column; + row-gap: 8px; + + &:not(:last-child) { + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + } + } + + &__link-title { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + opacity: 0.5; + color: inherit; + text-transform: uppercase; + } + + &__link { + text-decoration: none; + width: fit-content; + color: inherit; + font-family: $font-family-secondary; + font-size: 24px; + font-weight: 600; + line-height: 36px; + + position: relative; + + &::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + bottom: -8px; + background-color: $c-blue; + border-radius: 4px; + transform: scale(0); + transition-duration: $transition-duration; + transform-origin: left; + } + + &:hover::after { + transform: scale(100%); + transform-origin: left; + } + } + + &__socials { + display: flex; + column-gap: 32px; + margin-top: 8px; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..ee6803156c --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,75 @@ +.form { + // доробити + display: flex; + flex-direction: column; + + row-gap: 40px; + + @include on-tablet { + row-gap: 48px; + } + + &__field { + border: none; + outline: none; + resize: none; + overflow-y: auto; + + height: 41px; + width: 100%; + padding: 0 0 16px; + box-sizing: border-box; + background-color: inherit; + border-bottom: 1px solid $c-white; + + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: inherit; + + @include hover(border-bottom, 2px solid $c-blue); + + &::placeholder { + font-family: inherit; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: inherit; + opacity: 0.7; + } + + &:focus { + border-bottom: 1px solid $c-blue; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover { + border: inherit; + border-bottom: 1px solid $c-white; + -webkit-text-fill-color: $c-white; + background-color: inherit; + transition: background-color 5000s ease-in-out 0s; + } + + &:-webkit-autofill:focus { + border-bottom: 1px solid $c-blue; + } + } + + &__button { + margin-top: 16px; + + @include on-tablet { + margin-top: 32px; + max-width: 73%; + } + + @include on-small-desktop { + max-width: 71.4%; + } + + @include on-desktop { + max-width: 57.4%; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..ac50ad3400 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,101 @@ +.header { + position: relative; + background-color: $c-bg-header; + color: $c-text-light; + height: 893px; + border-radius: 0 0 40px 40px; + + @include on-small-desktop { + height: 800px; + } + + &__content { + margin-top: 48px; + + @include grid-layout; + + @include on-tablet { + margin-top: 56px; + } + + @include on-small-desktop { + margin-top: 164px; + } + } + + &__title { + grid-column: 1 / -1; + + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + + @include on-small-desktop { + grid-column: 1 / 5; + line-height: 68px; + } + } + + &__description { + grid-column: 1 /-1; + font-family: $font-family-secondary; + font-size: 18px; + font-weight: 400; + line-height: 27px; + + margin-top: 32px; + + @include on-tablet { + grid-column: 1 / 5; + margin-top: 24px; + } + + @include on-small-desktop { + grid-column: 1 / 6; + margin-top: 32px; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__button { + grid-column: 1 / -1; + + margin-top: 72px; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 5; + margin-top: 83px; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &__slider { + position: absolute; + left: 0; + right: 0; + bottom: 0; + + @include on-small-desktop { + left: 50%; + bottom: 0; + margin-top: 83px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..843c3b7d40 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,38 @@ +.icon { + width: 24px; + height: 24px; + text-decoration: none; + background-position: center; + background-repeat: no-repeat; + + @include hover(scale, 1.2); + + &--burger-menu { + background-image: url(../images/icons/menu.svg); + + @include on-small-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/close.svg); + } + + &--facebook { + background-image: url(../images/icons/facebook.svg); + + @include hover(background-image, url(../images/icons/facebook--hover.svg)); + } + + &--twitter { + background-image: url(../images/icons/twitter.svg); + + @include hover(background-image, url(../images/icons/twitter--hover.svg)); + } + &--instagram { + background-image: url(../images/icons/instagram.svg); + + @include hover(background-image, url(../images/icons/instagram--hover.svg)); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 0000000000..1291e13523 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,13 @@ +.logo { + display: block; + text-decoration: none; + width: 46px; + height: 28px; + + @include hover(scale, 1.2); + + &__img { + width: 100%; + height: 100%; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..e33e9a15f4 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,19 @@ +.menu { + height: 100vh; + background-color: $c-bg-header; + color: $c-text-light; + + &__nav { + margin-top: 48px; + + @include grid-layout; + + @include on-tablet { + margin-top: 56px; + } + + @include on-small-desktop { + margin-top: 164px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..261d6d41ef --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,56 @@ +.nav { + &__list { + display: flex; + flex-direction: row; + column-gap: 48px; + + &--aside { + flex-direction: column; + row-gap: 24px; + } + + &--footer { + flex-direction: column; + row-gap: 24px; + + @include on-tablet { + flex-direction: row; + column-gap: 40px; + } + } + } + + &__item { + width: max-content; + font-size: 13px; + line-height: 19.5px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + + &::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + bottom: -8px; + background-color: $c-blue; + border-radius: 4px; + transform: scale(0); + transition-duration: $transition-duration; + transform-origin: left; + } + + &:hover::after { + transform: scale(100%); + transform-origin: left; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..6b12c0c456 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + font-family: $font-family-main; + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + background: $c-gray; + } + + &__menu { + overflow-y: auto; + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + pointer-events: none; + + transition: all $transition-duration; + transform: translateY(-100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translateY(0); + + & ~ .header, + & ~ .main, + & ~ .footer { + display: none; + } + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..b9aa525751 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,93 @@ +.services { + padding-top: 120px; + + @include on-tablet { + padding-top: 148px; + } + + @include on-small-desktop { + padding-top: 251px; + } + + @include on-desktop { + padding-top: 280px; + } + + &__content { + @include grid-layout; + } + + &__text-box { + position: relative; + grid-column: 1 / -1; + margin-bottom: 48px; + + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 56px; + } + + @include on-small-desktop { + grid-column: 1 / 5; + } + } + + &__sub-title { + position: absolute; + top: -32px; + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + color: $c-section-title; + margin-bottom: 24px; + } + + &__paragraph { + font-family: $font-family-secondary; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $c-section-text; + } + + &__text-box > &__paragraph:not(:last-child) { + margin-bottom: 16px; + } + + &__card { + grid-column: 1 / -1; + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-small-desktop { + margin-bottom: 20px; + } + + &:nth-child(even) { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 7 / 10; + } + } + + &:nth-child(odd) { + @include on-tablet { + transform: translateY(-50%); + grid-column: -1 / -4; + } + + @include on-small-desktop { + grid-column: 10 / 13; + } + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..bb09351d3e --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,87 @@ +.slider { + &__list { + height: 390px; + + @include on-small-desktop { + height: 680px; + } + } + + &__photo { + display: none; + position: relative; + object-fit: cover; + height: 100%; + width: 100%; + border-radius: 40px; + + @include on-small-desktop { + border-radius: 40px 0 0 40px; + } + + &--active { + display: block; + } + } + + &__content { + position: absolute; + left: 0; + bottom: 0; + padding-block: 24px; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 78px; + } + + @include on-desktop { + padding-inline: 48px; + } + } + + &__buttons { + margin-bottom: 16px; + display: flex; + column-gap: 16px; + } + + &__button { + height: 32px; + width: 32px; + border-radius: 50%; + background-color: $c-text-light; + background-repeat: no-repeat; + background-position: center; + background-image: url(../images/slider/arrow.svg); + + @include hover(scale, 1.2); + + &--forward { + transform: rotate(180deg); + } + } + + &__title { + margin-top: 16px; + + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__text { + margin-top: 8px; + + font-family: $font-family-secondary; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + } +} diff --git a/src/styles/blocks/sub-title.scss b/src/styles/blocks/sub-title.scss new file mode 100644 index 0000000000..4161280cc6 --- /dev/null +++ b/src/styles/blocks/sub-title.scss @@ -0,0 +1,9 @@ +.sub-title { + font-family: $font-family-main; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $c-sub-title; + text-transform: uppercase; +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..3f2d294abf --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,61 @@ +.testimonials { + padding-block: 120px; + + @include on-tablet { + padding-block: 148px; + } + + @include on-small-desktop { + padding-top: 151px; + padding-bottom: 186px; + } + + @include on-desktop { + padding-block: 148px; + } + + &__content { + @include grid-layout; + } + + &__sub-title { + grid-column: 1 / -1; + margin-bottom: 16px; + } + + &__title { + grid-column: 1 / -1; + margin-bottom: 48px; + font-size: 32px; + font-weight: 600; + line-height: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 85px; + } + } + + &__card { + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: span 4; + } + + &:not(:last-child) { + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-small-desktop { + margin-bottom: 0; + } + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..56059c4fe6 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,50 @@ +.top-bar { + font-weight: 400; + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 21px; + + @include on-small-desktop { + padding-top: 49px; + } + + &__left-side { + display: flex; + align-items: center; + column-gap: 32px; + } + + &__nav { + display: none; + + @include on-small-desktop { + display: block; + } + } + + &__hire-us { + position: relative; + + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-decoration: none; + text-transform: uppercase; + color: inherit; + + @include hover(scale, 1.2); + + &::after { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 2px; + bottom: -8px; + background-color: $c-blue; + border-radius: 4px; + } + } +} diff --git a/src/styles/blocks/vision.scss b/src/styles/blocks/vision.scss new file mode 100644 index 0000000000..455446eb5b --- /dev/null +++ b/src/styles/blocks/vision.scss @@ -0,0 +1,84 @@ +.vision { + background-color: $c-white; + padding-block: 72px; + + @include on-tablet { + padding-block: 200px; + + background-image: url('../images/Shapes.png'); + background-position: center; + background-repeat: no-repeat; + } + + &__content { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + color: $c-section-title; + + margin-bottom: 24px; + + @include on-tablet { + font-size: 52px; + line-height: 62.4px; + } + + @include on-small-desktop { + line-height: 78px; + + max-width: 83%; + } + + @include on-desktop { + max-width: 60%; + } + } + + &__text { + font-family: $font-family-secondary; + font-size: 22px; + font-weight: 600; + line-height: 33px; + color: $c-section-text; + + margin-bottom: 56px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + + margin-bottom: 64px; + } + + @include on-small-desktop { + max-width: 83%; + } + + @include on-desktop { + max-width: 60%; + } + } + + &__button { + width: 100%; + + @include on-tablet { + width: 47.3%; + } + + @include on-small-desktop { + width: 28.9%; + } + + @include on-desktop { + width: 23.1%; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..ee03148dca 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,2 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks'; diff --git a/src/styles/_utils.scss b/src/styles/utils.scss similarity index 64% rename from src/styles/_utils.scss rename to src/styles/utils.scss index 3280c3fe10..71b422441e 100644 --- a/src/styles/_utils.scss +++ b/src/styles/utils.scss @@ -1,3 +1,3 @@ +@import 'utils/reset'; @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..32b90d8dcb --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,69 @@ +@mixin hover( + $_property, + $_toValue, + $transition-duration: $transition-duration +) { + transition: #{$_property} $transition-duration; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $min-width-tablet) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $min-width-small-desktop) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $min-width-desktop) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + max-width: 1260px; + margin-inline: auto; + } +} + +@mixin grid-layout { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + + column-gap: 20px; + } + + @include on-small-desktop { + column-gap: 30px; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..2bc0f5562b --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,50 @@ +html, +body, +div, +span, +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +ul, +li, +form, +article, +aside, +footer, +header, +menu, +nav, +section { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +footer, +header, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 0000000000..e84a083848 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,16 @@ +$min-width-tablet: 640px; +$min-width-small-desktop: 1024px; +$min-width-desktop: 1280px; +$font-family-main: Poppins, sans-serif; +$font-family-secondary: 'Open Sans', sans-serif; +$c-gray: #eee; +$c-blue: #2060f6; +$c-white: #fff; +$c-dark-blue: #144ed4; +$c-dark-grey: #334563; +$c-text-light: #fff; +$c-sub-title: #c0cdd7; +$c-section-title: #253757; +$c-section-text: #6c788b; +$c-bg-header: #2c2c2c; +$transition-duration: 0.3s;