diff --git a/src/images/footer-svg/fasebook.svg b/src/images/footer-svg/fasebook.svg new file mode 100644 index 0000000000..a148dbac37 --- /dev/null +++ b/src/images/footer-svg/fasebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-svg/instagram.png b/src/images/footer-svg/instagram.png new file mode 100644 index 0000000000..8d8bb76762 Binary files /dev/null and b/src/images/footer-svg/instagram.png differ diff --git a/src/images/footer-svg/instagram.svg b/src/images/footer-svg/instagram.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/images/footer-svg/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-svg/tviter.svg b/src/images/footer-svg/tviter.svg new file mode 100644 index 0000000000..baee0f5fab --- /dev/null +++ b/src/images/footer-svg/tviter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Menu.png b/src/images/icons/Menu.png new file mode 100644 index 0000000000..ca83b07f12 Binary files /dev/null and b/src/images/icons/Menu.png differ diff --git a/src/images/icons/Vector.png b/src/images/icons/Vector.png new file mode 100644 index 0000000000..60cd5e35dd Binary files /dev/null and b/src/images/icons/Vector.png differ diff --git a/src/images/logo/dia-logo.svg b/src/images/logo/dia-logo.svg index a81933296e..70e90d9356 100644 --- a/src/images/logo/dia-logo.svg +++ b/src/images/logo/dia-logo.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/src/images/slider/arrow-left.png b/src/images/slider/arrow-left.png new file mode 100644 index 0000000000..695abbd211 Binary files /dev/null and b/src/images/slider/arrow-left.png differ diff --git a/src/images/slider/header-photo-2.png b/src/images/slider/header-photo-2.png new file mode 100644 index 0000000000..755a0b2959 Binary files /dev/null and b/src/images/slider/header-photo-2.png differ diff --git a/src/images/slider/header_photo.jpeg b/src/images/slider/header_photo.jpeg new file mode 100644 index 0000000000..fb3966479b Binary files /dev/null and b/src/images/slider/header_photo.jpeg differ diff --git a/src/images/what-people-say-1.png b/src/images/what-people-say-1.png new file mode 100644 index 0000000000..b6bb5578c6 Binary files /dev/null and b/src/images/what-people-say-1.png differ diff --git a/src/images/what-people-say-2.png b/src/images/what-people-say-2.png new file mode 100644 index 0000000000..d29b9ddae4 Binary files /dev/null and b/src/images/what-people-say-2.png differ diff --git a/src/images/what-people-say-3.png b/src/images/what-people-say-3.png new file mode 100644 index 0000000000..acac495cde Binary files /dev/null and b/src/images/what-people-say-3.png differ diff --git a/src/images/what-people-say-thing.png b/src/images/what-people-say-thing.png new file mode 100644 index 0000000000..d3b5448f6c Binary files /dev/null and b/src/images/what-people-say-thing.png differ diff --git a/src/images/what-we-do/image 1.png b/src/images/what-we-do/image 1.png new file mode 100644 index 0000000000..bbeadf1bf2 Binary files /dev/null and b/src/images/what-we-do/image 1.png differ diff --git a/src/images/what-we-do/image 2.png b/src/images/what-we-do/image 2.png new file mode 100644 index 0000000000..6a7111328c Binary files /dev/null and b/src/images/what-we-do/image 2.png differ diff --git a/src/images/what-we-do/image 3.png b/src/images/what-we-do/image 3.png new file mode 100644 index 0000000000..96b4d6da7f Binary files /dev/null and b/src/images/what-we-do/image 3.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..d75f5e6ed0 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,655 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Dia + + + + + Air + + -

Dia

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

Strategic Agency

+

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

+ + + +
+
+
+ +
+
+
+
+
+
+ icon-left +
+
+ icon-left +
+
+
+

Intro

+

+ By the same illusion which lifts the horizon. +

+
+
+
+ img-1 +
+
+
+
+
+
+
+
+
+

Who we are

+

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

+
+
+
+ +
+
+
+

Our expertise

+
+
+ expertise-image-1 +

Branding

+

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

+
+ +
+ expertise-image-1 +

Communication

+

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

+
+ +
+ expertise-image-1 +

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

+
+
+ people1 + + what-people-say-thing + +

+ 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

+
+ +
+ people2 + + what-people-say-thing + +

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

+ +

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+ people3 + + what-people-say-thing + +

+ 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/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 0000000000..7bc779e7a7 --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,40 @@ +.about-us { + &__content { + padding-block: 120px; + + @include on-tablet { + padding-block: 148px; + } + } + + &__title { + color: $sections-title-color; + font-weight: 600; + font-size: 32px; + line-height: 48px; + text-align: center; + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 16px; + } + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + margin: 0 auto; + color: #6c788b; + + @include on-small-desktop { + max-width: 652px; + } + + @include on-desktop { + max-width: 686px; + } + } +} diff --git a/src/styles/blocks/_contact-us.scss b/src/styles/blocks/_contact-us.scss new file mode 100644 index 0000000000..643addcf23 --- /dev/null +++ b/src/styles/blocks/_contact-us.scss @@ -0,0 +1,62 @@ +.contact { + &__title { + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: $main-color; + } + + &__items { + margin-top: 48px; + margin-bottom: 80px; + } + + &__item { + margin-bottom: 40px; + + &:last-child { + margin-bottom: 0; + } + } + + &__item--title { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #757575; + margin-bottom: 8px; + } + + &__item--title-socials { + margin-bottom: 16px; + } + + &__item--link { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + color: $main-color; + } + + &__items--socials { + display: flex; + gap: 32px; + } + + &__item--link-svg { + width: 32px; + height: 32px; + } + + &__item--link-svg-hover { + fill: $main-color; + transition: fill 0.3s; + } + + &__item--link-svg:hover .contact__item--link-svg-hover { + fill: #2060f6; + } +} diff --git a/src/styles/blocks/_expertise.scss b/src/styles/blocks/_expertise.scss new file mode 100644 index 0000000000..5634e506fa --- /dev/null +++ b/src/styles/blocks/_expertise.scss @@ -0,0 +1,74 @@ +.expertise { + background-color: $main-color; + border-radius: 30px; + &__content { + padding-block: 72px; + } + + &__cards { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 56px; + margin-top: 64px; + + @include on-tablet { + gap: 72px; + } + + @include on-small-desktop { + gap: 137px; + flex-direction: row; + } + + @include on-desktop { + gap: 177px; + } + } + + &__card { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: $sections-title-color; + } + + &__img { + width: 100%; + max-width: 166px; + max-height: 166px; + border-radius: 16px; + } + + &__title-card { + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: $sections-title-color; + padding-top: 32px; + padding-bottom: 16px; + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #6c788b; + + @include on-tablet { + max-width: 362px; + } + } +} diff --git a/src/styles/blocks/_footer-menu.scss b/src/styles/blocks/_footer-menu.scss new file mode 100644 index 0000000000..20a5d9ebd0 --- /dev/null +++ b/src/styles/blocks/_footer-menu.scss @@ -0,0 +1,30 @@ +.footer__menu { + &--list-footer { + margin-top: 48px; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 40px; + margin-top: 24px; + } + + @include on-small-desktop { + margin-top: 0; + align-items: center; + } + } + + &--link { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-decoration: none; + text-transform: uppercase; + color: $main-color; + cursor: pointer; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 0000000000..ad0c49a5ac --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,61 @@ +.footer { + background-color: $dark-backgraund; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + margin-top: -30px; + + &__content { + padding-top: 72px; + padding-bottom: 80px; + } + + &__top { + @include on-small-desktop { + @include page-grid; + } + } + + &__form { + @include on-small-desktop { + grid-column: 1 / 5; + } + } + + &__contact { + @include on-small-desktop { + grid-column: 7 / 11; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + color: $main-color; + max-width: 200px; + + @include on-tablet { + max-width: 100%; + } + } + + &__bottom { + margin-top: 80px; + + @include on-tablet { + margin-top: 139px; + } + + @include on-small-desktop { + display: flex; + justify-content: space-between; + align-items: center; + + margin-top: 104px; + } + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 0000000000..e814a76a11 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,50 @@ +.form { + margin-top: 48px; + margin-bottom: 52px; + &__inputs { + display: flex; + flex-direction: column; + gap: 40px; + margin-bottom: 56px; + } + + &__input { + background-color: $dark-backgraund; + border: none; + padding-bottom: 17px; + border-bottom: 1px solid $main-color; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: $main-color; + max-width: 460px; + + &:hover { + border-bottom: 2px solid #144ed4; + } + + &:focus { + outline: none; + border-bottom: 2px solid #144ed4; + box-shadow: none; + } + + @include on-tablet { + max-width: 362px; + } + + @include on-small-desktop { + max-width: 370px; + } + + @include on-desktop { + min-width: 460px; + } + } + + &__input--textarea { + height: 39px; + padding-bottom: 0; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 0000000000..57dd82946a --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,70 @@ +.header { + background-color: $blue-backgraund; + position: relative; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + + &__content { + @include on-small-desktop { + @include page-grid; + } + } + + &__main { + @include on-small-desktop { + min-height: 680px; + grid-column: 1 / 5; + } + } + + &__title { + font-weight: 600; + font-size: 52px; + letter-spacing: -2px; + line-height: 62.4px; + margin: 48px 0 32px; + color: $main-color; + max-width: 280px; + + @include on-tablet { + max-width: 558px; + font-size: 64px; + line-height: 68px; + } + + @include on-small-desktop { + max-width: 410px; + margin: 168px 0 32px; + } + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 27px; + margin-bottom: 72px; + max-width: 362px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 83px; + } + } + + &__button { + margin-bottom: 48px; + + @include on-tablet { + max-width: 264px; + margin-bottom: 147px; + } + } +} + +.header-dark-thems { + background-color: $dark-backgraund; +} diff --git a/src/styles/blocks/_icons.scss b/src/styles/blocks/_icons.scss new file mode 100644 index 0000000000..c0d98140a1 --- /dev/null +++ b/src/styles/blocks/_icons.scss @@ -0,0 +1,17 @@ +.icon { + background-position: 50%; + background-size: cover; + transition: transform 0.3s; + display: block; +} + +.icon--menu { + background-image: url('/src/images/icons/Menu.png'); + display: block; + width: 24px; + height: 24px; + + @include on-small-desktop { + display: none; + } +} diff --git a/src/styles/blocks/_nav-menu.scss b/src/styles/blocks/_nav-menu.scss new file mode 100644 index 0000000000..7f3142eb05 --- /dev/null +++ b/src/styles/blocks/_nav-menu.scss @@ -0,0 +1,37 @@ +.menu { + display: none; + + @include on-small-desktop { + display: block; + } + + &__list { + list-style: none; + display: flex; + } + + &__link { + text-decoration: none; + font-weight: 700; + font-size: 13px; + color: $main-color; + text-transform: uppercase; + letter-spacing: 3px; + padding-right: 48px; + } + + &__link--hire-us { + position: relative; + padding-right: 0; + &::after { + content: ''; + display: block; + position: absolute; + bottom: -8px; + width: 100%; + height: 2px; + background-color: #2060f6; + border-radius: 4px; + } + } +} diff --git a/src/styles/blocks/_service.scss b/src/styles/blocks/_service.scss new file mode 100644 index 0000000000..f9eba6f246 --- /dev/null +++ b/src/styles/blocks/_service.scss @@ -0,0 +1,164 @@ +.service { + padding-block: 120px; + margin: 0 auto; + &__content { + @include page-grid; + + @include on-tablet { + padding-top: 148px; + } + } + + &__block-texts { + margin-bottom: 48px; + grid-column: 1 / -1; + + @include on-tablet { + max-width: 266px; + } + + @include on-small-desktop { + max-width: 336px; + grid-column: 1 / 5; + } + } + + &__carts { + display: flex; + flex-direction: column; + justify-content: end; + gap: 24px; + grid-column: 1 / -1; + + @include on-tablet { + flex-flow: row wrap; + } + + @include on-small-desktop { + grid-column: 6 / -1; + } + } + + &__text-service { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: #c0cdd7; + margin-bottom: 16px; + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + color: $sections-title-color; + margin-bottom: 24px; + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #6c788b; + } + + &__card { + background-color: $main-color; + border-radius: 16px; + padding: 24px 24px 28px; + width: 280px; + box-sizing: border-box; + transition: transform 0.3s; + box-shadow: 0 9px 18px 0 #25293108; + + @include on-tablet { + width: 264px; + &:nth-child(even) { + transform: translateY(-50%); + } + } + + @include on-small-desktop { + width: 214px; + } + + @include on-desktop { + width: 264px; + } + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + &:nth-child(even):hover { + transform: translateY(-50%) scale(0.9); + } + } + } + + &__nummer { + color: #2060f6; + width: 46px; + height: 24px; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 23px; + margin-bottom: 24px; + background-color: #2060f61a; + } + + &__card--list { + list-style: none; + padding: 0; + margin: 0 0 32px; + } + + &__card--item { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: #6c788b; + } + + &__card--unit { + display: flex; + align-items: center; + gap: 16px; + } + + &__button { + background-color: $buttons-color; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + + @include hover(transform, scale(1.2)); + } + + &__icon-button { + width: 16px; + height: 16px; + } + + &__text-unit { + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: #334563; + } +} diff --git a/src/styles/blocks/_slide.scss b/src/styles/blocks/_slide.scss new file mode 100644 index 0000000000..ec1019bf0e --- /dev/null +++ b/src/styles/blocks/_slide.scss @@ -0,0 +1,74 @@ +.slide { + &__content { + position: relative; + } + + &__container-buttons-text { + position: absolute; + bottom: 24px; + left: 20px; + + @include on-tablet { + bottom: 32px; + left: 41px; + } + + @include on-small-desktop { + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + left: 78px; + bottom: 81px; + } + } + + &__text-title { + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + margin-bottom: 8px; + text-transform: uppercase; + } + + &__text-discription { + font-family: 'Open Sans', Arial, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19.6px; + max-width: 280px; + } + + &__buttons { + display: flex; + gap: 16px; + } + + &__button { + background-color: $main-color; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background-position: 50%; + cursor: pointer; + border: none; + margin-bottom: 16px; + + @include on-small-desktop { + margin-bottom: 0; + } + } + + &__icon-in-button { + width: 18px; + height: 18px; + } + + &__button-right { + transform: rotate(180deg); + } +} diff --git a/src/styles/blocks/_slider.scss b/src/styles/blocks/_slider.scss new file mode 100644 index 0000000000..07214d89d6 --- /dev/null +++ b/src/styles/blocks/_slider.scss @@ -0,0 +1,33 @@ +.slider { + border-radius: 30px; + overflow: hidden; + + @include on-small-desktop { + position: absolute; + height: auto; + border-radius: 30px 0; + right: 0; + bottom: 0; + top: 120px; + width: 45%; + } + + &__imgs { + z-index: 1; + width: 100%; + height: 390px; + display: flex; + + @include on-small-desktop { + height: 100%; + height: 680px; + } + } + + &__img { + object-fit: cover; + opacity: 1; + width: 100%; + height: 100%; + } +} diff --git a/src/styles/blocks/_testimonials.scss b/src/styles/blocks/_testimonials.scss new file mode 100644 index 0000000000..2dec60c7ff --- /dev/null +++ b/src/styles/blocks/_testimonials.scss @@ -0,0 +1,46 @@ +.testimonials { + background-color: $main-color; + padding-top: 72px; + padding-bottom: calc(72px + 40px); + margin-bottom: 120px; + + @include on-tablet { + background-image: url('../images/Shapes.png'); + background-position: center; + background-repeat: no-repeat; + padding-block: 290px; + margin-bottom: 0; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: $sections-title-color; + margin-bottom: 24px; + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: #6c788b; + margin-bottom: 56px; + max-width: 724px; + } + + &__button { + @include on-tablet { + max-width: 264px; + } + } +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 0000000000..3590210687 --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,20 @@ +.top-bar { + &__content { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; + + @include on-small-desktop { + padding-top: 48px; + } + } + + &__left { + display: flex; + align-items: center; + } + &__logo { + padding-right: 32px; + } +} diff --git a/src/styles/blocks/_what-people-say.scss b/src/styles/blocks/_what-people-say.scss new file mode 100644 index 0000000000..12e658c5a1 --- /dev/null +++ b/src/styles/blocks/_what-people-say.scss @@ -0,0 +1,103 @@ +.what-people-say { + &__content { + margin-bottom: 148px; + } + + &__title { + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: $sections-title-color; + margin-bottom: 48px; + + @include on-tablet { + max-width: 205px; + } + } + + &__cards { + @include on-small-desktop { + display: flex; + gap: 20px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__card { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + box-sizing: border-box; + box-shadow: 0 9px 18px 0 #25293108; + padding: 32px 42px; + background-color: $main-color; + border-radius: 16px; + margin-bottom: 24px; + + max-width: 558px; + &:last-child { + margin-bottom: 0; + } + + @include on-small-desktop { + max-width: 292px; + margin-bottom: 0; + } + + @include on-desktop { + max-width: 362px; + } + + @include hover(transform, scale(0.9)); + } + + &__img { + width: 100%; + margin-bottom: 24px; + max-width: 196px; + + @include on-tablet { + max-width: 250px; + } + } + + &__decoration { + width: 24px; + height: 24px; + margin-bottom: 8px; + } + + &__discription { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: #6c788b; + text-align: center; + margin-bottom: 16px; + max-width: 362px; + } + + &__name { + font-family: 'Open Sans', Arial, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + color: #253757; + margin-bottom: 4px; + } + + &__specialty { + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #c0cdd7; + text-transform: uppercase; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..ed9acde5de 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,51 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/nav-menu'; +@import './blocks/icons'; +@import './blocks/slider'; +@import './blocks/slide'; +@import './blocks/about-us'; +@import './blocks/expertise'; +@import './blocks/service'; +@import './blocks/what-people-say'; +@import './blocks/testimonials'; +@import './blocks/footer'; +@import './blocks/form'; +@import './blocks/contact-us'; +@import './blocks/footer-menu'; body { background: $c-gray; + margin: 0; + color: $main-color; + font-family: Poppins, sans-serif; +} + +html { + scroll-behavior: smooth; +} + +.button { + font-family: Poppins, sans-serif; + background-color: $buttons-color; + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + text-align: center; + width: 100%; + max-width: 300px; + height: 50px; + border-radius: 8px; + border: none; + color: $main-color; + cursor: pointer; + + @include on-tablet { + max-width: 264px; + } + + @include hover(background-color, #144ed4); } diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000000..95393d5907 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,105 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +main, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + text-decoration: none; +} + +/* HTML5 display-role reset for older browsers */ + +ol, +ul { + list-style: none; +} + +textarea { + resize: none; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..cb348f00f5 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,65 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin large-screen { + @media (min-width: 2560px) { + @content; + } +} + +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-desktop { + padding-inline: 227px; + } + + @include large-screen { + padding-inline: 707px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 24px; + } + + @include on-small-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..5fda9b9597 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ -$c-gray: #eee; +$c-gray: #f2f6fa; +$blue-backgraund: #008aff; +$dark-backgraund: #2c2c2c; +$main-color: #fff; +$buttons-color: #2060f6; +$sections-title-color: #253757;