diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 0000000000..c35c6b4d51 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/footer/facebook-hover.png b/src/images/footer/facebook-hover.png new file mode 100644 index 0000000000..547354ff37 Binary files /dev/null and b/src/images/footer/facebook-hover.png differ diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram-hover.png b/src/images/footer/instagram-hover.png new file mode 100644 index 0000000000..3c6b3e9fde Binary files /dev/null and b/src/images/footer/instagram-hover.png differ diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter-hover.svg b/src/images/footer/twitter-hover.svg new file mode 100644 index 0000000000..d3cbe423e7 --- /dev/null +++ b/src/images/footer/twitter-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter.svg b/src/images/footer/twitter.svg new file mode 100644 index 0000000000..1506dd4af0 --- /dev/null +++ b/src/images/footer/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo/Menu.svg b/src/images/logo/Menu.svg new file mode 100644 index 0000000000..374d372c5a --- /dev/null +++ b/src/images/logo/Menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu-close.png b/src/images/menu-close.png new file mode 100644 index 0000000000..5871d647d8 Binary files /dev/null and b/src/images/menu-close.png differ diff --git a/src/images/our-expertise/01.jpg b/src/images/our-expertise/01.jpg new file mode 100644 index 0000000000..d05381fba6 Binary files /dev/null and b/src/images/our-expertise/01.jpg differ diff --git a/src/images/our-expertise/02.jpg b/src/images/our-expertise/02.jpg new file mode 100644 index 0000000000..8b2cec022a Binary files /dev/null and b/src/images/our-expertise/02.jpg differ diff --git a/src/images/our-expertise/03.jpg b/src/images/our-expertise/03.jpg new file mode 100644 index 0000000000..5b0daa5956 Binary files /dev/null and b/src/images/our-expertise/03.jpg differ diff --git a/src/images/results/bg.png b/src/images/results/bg.png new file mode 100644 index 0000000000..26ed3e89b0 Binary files /dev/null and b/src/images/results/bg.png differ diff --git a/src/images/service/Arrow.svg b/src/images/service/Arrow.svg new file mode 100644 index 0000000000..14283291fa --- /dev/null +++ b/src/images/service/Arrow.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..ed235fafc6 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..315ac0baf4 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/images/slider/slide-img-desktop.jpg b/src/images/slider/slide-img-desktop.jpg new file mode 100644 index 0000000000..bd791df97c Binary files /dev/null and b/src/images/slider/slide-img-desktop.jpg differ diff --git a/src/images/slider/slide-img-mobile.jpg b/src/images/slider/slide-img-mobile.jpg new file mode 100644 index 0000000000..c418899983 Binary files /dev/null and b/src/images/slider/slide-img-mobile.jpg differ diff --git a/src/images/slider/slide-img-tablet.jpg b/src/images/slider/slide-img-tablet.jpg new file mode 100644 index 0000000000..27913d9293 Binary files /dev/null and b/src/images/slider/slide-img-tablet.jpg differ diff --git a/src/images/testimonial/01.jpg b/src/images/testimonial/01.jpg new file mode 100644 index 0000000000..1459a45442 Binary files /dev/null and b/src/images/testimonial/01.jpg differ diff --git a/src/images/testimonial/02.jpg b/src/images/testimonial/02.jpg new file mode 100644 index 0000000000..9eda7eb639 Binary files /dev/null and b/src/images/testimonial/02.jpg differ diff --git a/src/images/testimonial/03.jpg b/src/images/testimonial/03.jpg new file mode 100644 index 0000000000..ff4f748d42 Binary files /dev/null and b/src/images/testimonial/03.jpg differ diff --git a/src/images/testimonial/mark.svg b/src/images/testimonial/mark.svg new file mode 100644 index 0000000000..b1a5abb623 --- /dev/null +++ b/src/images/testimonial/mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/testimonials/testimonial-ava-1.jpg b/src/images/testimonials/testimonial-ava-1.jpg deleted file mode 100644 index d487a51ddf..0000000000 Binary files a/src/images/testimonials/testimonial-ava-1.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-2.jpg b/src/images/testimonials/testimonial-ava-2.jpg deleted file mode 100644 index 04288940f3..0000000000 Binary files a/src/images/testimonials/testimonial-ava-2.jpg and /dev/null differ diff --git a/src/images/testimonials/testimonial-ava-3.jpg b/src/images/testimonials/testimonial-ava-3.jpg deleted file mode 100644 index 24c0f2b94b..0000000000 Binary files a/src/images/testimonials/testimonial-ava-3.jpg and /dev/null differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..138a1dde88 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,352 @@ - - - - Dia - - - -

Dia

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

Strategic Agency

+

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

+ +
+ +
+ +
+
+ + +
+
+ +
+
+ + +
+
+

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

Branding

+

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

+
+ +
+ Communication photo +

Communication

+

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

+
+ +
+ Strategy photo +

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

+

Content 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

+ +
+ +
+
+ + +

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

+
+
+ +
+
+ + +

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

+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+ +
+
+ + +

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 +
+
+
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles/blocks/aside-menu.scss b/src/styles/blocks/aside-menu.scss new file mode 100644 index 0000000000..2a52f55df1 --- /dev/null +++ b/src/styles/blocks/aside-menu.scss @@ -0,0 +1,60 @@ +.menu { + box-sizing: border-box; + height: 100vh; + z-index: 5; + padding: 25px 0; + + background-color: #2c2c2c; + font-weight: 600; + text-transform: uppercase; + + overflow-y: auto; + + &-page { + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: all 0.3s; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + &:has(&__menu:target) { + overflow-y: hidden; + } + + &__top { + display: flex; + gap: 32px; + justify-content: flex-start; + align-items: center; + } + + &__nav { + margin-top: 50px; + display: block; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 30px; + } + + &__nav-item:hover { + text-decoration: underline; + } + + &__nav-link { + color: #fff; + text-decoration: none; + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..79f45d4c82 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,70 @@ +.contact { + display: flex; + flex-direction: column; + gap: 40px; + color: #fff; + + @include onTablet { + gap: 48px; + } + + &__title { + margin: 0; + margin-bottom: 8px; + font-weight: 600; + font-size: 32px; + line-height: 48px; + + @include onTablet { + margin-bottom: 16px; + } + } + + &__info { + &-name { + margin: 0; + margin-bottom: 8px; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + opacity: 0.5; + text-transform: uppercase; + } + + &-text { + font-family: + Open Sans, + serif; + font-weight: 600; + font-size: 24px; + line-height: 36px; + color: #fff; + text-decoration: none; + + transition: all 0.3s ease; + } + + &-text:hover { + color: #2060f6; + } + + &-icons { + display: flex; + gap: 32px; + } + + &-icon { + transition: all 0.5s ease; + position: relative; + } + + &-icon:hover { + background-color: #2060f6; + border-radius: 50%; + height: 30px; + width: 30px; + transform: rotate(360deg); + } + } +} diff --git a/src/styles/blocks/footer-bottom.scss b/src/styles/blocks/footer-bottom.scss new file mode 100644 index 0000000000..46a6d00980 --- /dev/null +++ b/src/styles/blocks/footer-bottom.scss @@ -0,0 +1,63 @@ +.bottom{ + + @include onDesktop{ + display: flex; + justify-content: space-between; + align-items: center; + } + + + &__logo{ + margin: 0; + margin-bottom: 48px; + + @include onTablet{ + margin-bottom: 24px; + } + + @include onDesktop{ + margin: 0; + } + } + + + &__list{ + display: flex; + flex-direction: column; + gap: 24px; + + @include onTablet{ + flex-direction: row; + } + } + + &__list--link{ + position: relative; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + color: #fff; + text-decoration: none; + + &::after { + content: ''; + display: block; + width: 100%; + position: absolute; + bottom: -8px; + height: 2px; + background-color: #2060F6; + border-radius: 4px; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..f47cd2fa1d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,33 @@ +.footer{ + margin-top: 120px; + padding: 72px 0 80px 0; + background-color: #2C2C2C; + border-radius: 30px 30px 0 0; + + @include onTablet{ + margin: 0; + padding: 180px 0 80px 0; + } + + + &__top{ + display: flex; + flex-direction: column; + gap: 80px; + margin-bottom: 80px; + + @include onTablet{ + gap: 120px; + margin-bottom: 140px; + } + + @include onDesktop{ + flex-direction: row; + justify-content: space-between; + gap: 98px; + margin-bottom: 104px; + } + } + + +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..0bc899cc73 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,71 @@ +.form{ + display: flex; + flex-direction: column; + width: 100%; + gap: 40px; + + @include onTablet{ + max-width: 365px; + } + + + + + + &__title{ + margin: 0; + color: #fff; + font-weight: 600; + font-size: 32px; + line-height: 41.6px; + } + + &__button{ + display: block; + box-sizing: border-box; + margin-top: 16px; + height: 56px; + cursor: pointer; + + background-color: #144ED4; + border-radius: 8px; + border: 1px solid #144ED4; + + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + color: #fff; + + transition: all 0.3s ease; + + @include onTablet{ + max-width: 264px; + } + } + + &__button:hover{ + background-color: #2c2c2c; + } +} + +input{ + text-decoration: none; + background-color: #2c2c2c; + border: none; + border-bottom: 1px solid #fff; + + font-family: Poppins, serif; + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + opacity: 0.7; + height: 41px; + color: #fff; + + transition: all 0.3s ease; +} + +input:focus{ + outline: none; + border-bottom: 2px solid #144ED4; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..c774ae65a1 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,134 @@ +.header{ + + background-color: #2C2C2C; + color: #fff; + + @include onDesktop{ + position: relative; + border-radius: 0 0 30px 30px; + overflow: hidden; + + &__wrapper{ + display: grid; + gap: 30px; + grid-template-columns: repeat(12, 1fr); + } + &__bottom{ + grid-column: 1 / 5; + } + + &__slider-position{ + position: absolute; + top: 20%; + right: 0; + width: 50%; + height: calc(80vh - 20%); + max-height: 100vh; + object-fit: cover; + } + + &__content{ + margin-top: 120px; + } + + &__title{ + margin-bottom: 32px; + } + &__button{ + margin-bottom: 83px; + } + } + + + &__icons{ + display: flex; + gap: 32px; + align-items: center; + } + + &__top{ + padding: 20px 0 ; + display: flex; + justify-content: space-between; + align-items: center; + + @include onDesktop{ + padding: 0; + } + } + + &__title{ + margin: 0; + margin: 32px 0 ; + font-weight: 600; + font-size: 52px; + line-height: 62.4px; + letter-spacing: -2px; + + @include onTablet{ + margin-bottom: 24px; + font-size: 64px; + } + } + + &__text{ + margin: 0; + margin-bottom: 72px; + font-family: 'Open Sans', serif; + font-weight: 400; + font-size: 18px; + line-height: 28px; + + @include onTablet{ + margin-bottom: 56px; + } + } + + &__button{ + cursor: pointer; + font-family: Poppins, serif; + box-sizing: border-box; + margin-bottom: 20px; + width: 100%; + height: 50px; + background-color: #2060F6; + border-radius: 8px; + border: 1px solid #2060F6; + + color: #fff; + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + align-items: center; + + transition: all 0.3s ease; + + @include onTablet{ + width: 264px; + margin-bottom: 127px; + } + + &:hover{ + background-color: #2C2C2C; + border: 1px solid #2060F6; + } + } + + + + @include onDesktop{ + &__top{ + height: 120px; + display: flex; + gap: 20px; + justify-content: space-between; + align-items: center; + } + &__menu{ + display: none; + } + } + + + +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..8d5cc9f445 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,18 @@ +.icon { + display: block; + width: 24px; + height: 24px; + background-size: cover; + + @include onDesktop { + display: none; + } + + &--open { + background-image: url('./../images/logo/Menu.svg'); + } + + &--close { + background-image: url('./../images/menu-close.png'); + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..b0a402fe96 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,70 @@ +.nav { + display: none; + + &__button { + padding: 10px 0; + position: relative; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + color: #fff; + text-decoration: none; + text-transform: uppercase; + } + &__button::after { + position: absolute; + content: ''; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background-color: #2060f6; + border-radius: 4px; + } + + @include onDesktop { + display: block; + &__list { + display: flex; + flex-wrap: wrap; + gap: 48px; + + &--item { + height: 20px; + padding: 10px; + cursor: pointer; + } + + &--link { + position: relative; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + color: #fff; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + display: block; + width: 100%; + position: absolute; + bottom: -8px; + height: 2px; + background-color: #2060f6; + border-radius: 4px; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + } + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..e6a8924fc7 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,99 @@ +.our-expertise{ + background-color: #FFF; + padding: 72px 0; + border-radius: 30px; + + @include onTablet{ + padding: 128px 0; + } + + &__title{ + margin: 0; + margin-bottom: 56px; + text-align: center; + font-weight: 600; + font-size: 44px; + line-height: 52.8px; + color: #253757; + + @include onTablet{ + margin-bottom: 64px; + font-size: 52px; + line-height: 78px; + } + } + + &__items{ + display: flex; + flex-direction: column; + align-items: center; + justify-items: center; + gap: 56px; + + @include onTablet{ + column-gap: 72px; + } + + @include onDesktop{ + flex-direction: row; + justify-content: space-between; + + &:not(:last-child){ + row-gap: 137px; + } + } + + + } + + &__item{ + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include onTablet{ + max-width: 370px; + } + + @include onDesktop{ + max-width: 220px; + } + + + &-img{ + width: 166px; + height: 166px; + border-radius: 16px; + + transition: all 0.3s ease; + } + + &-img:hover{ + transform: scale(1.1); + } + + &-title{ + margin: 0; + margin: 32px 0 16px 0; + color: #253757; + font-weight: 600; + font-size: 20px; + line-height: 28px; + + @include onDesktop{ + margin-top: 40px; + } + } + + &-desc{ + margin: 0; + font-family: Open Sans, serif; + color: #6C788B; + font-weight: 400; + font-size: 14px; + line-height: 21px; + } + } +} diff --git a/src/styles/blocks/pages.scss b/src/styles/blocks/pages.scss new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/styles/blocks/pages.scss @@ -0,0 +1 @@ + diff --git a/src/styles/blocks/results.scss b/src/styles/blocks/results.scss new file mode 100644 index 0000000000..0d36bfb632 --- /dev/null +++ b/src/styles/blocks/results.scss @@ -0,0 +1,59 @@ +.results{ + padding: 72px 0; + text-align: center; + background-color: #fff; + + @include onTablet{ + padding: 200px 0; + background-image: url('./../images/results/bg.png'); + background-size: cover; + } + + + &__title{ + margin: 0; + margin-bottom: 24px; + color: #253757; + font-weight: 600; + font-size: 44px; + line-height: 52.8px; + } + + &__text{ + margin: 0; + margin-bottom: 56px; + font-family: Open Sans, serif; + color: #6C788B; + font-weight: 600; + font-size: 22px; + line-height: 33px; + max-width: 720px; + margin: 0 auto; + + @include onTablet{ + margin-bottom: 64px; + } + } + + &__button{ + display: inline-block; + box-sizing: border-box; + border: 1px solid #2060F6; + padding: 17px 115px; + background-color: #2060F6; + border-radius: 6px; + + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + + transition: all 0.3s ease; + } + &__button:hover{ + background-color: #fff; + color: #2060F6; + } + +} diff --git a/src/styles/blocks/service.scss b/src/styles/blocks/service.scss new file mode 100644 index 0000000000..bcaa1fdd59 --- /dev/null +++ b/src/styles/blocks/service.scss @@ -0,0 +1,148 @@ +.service { + background-color: #f2f6fa; + padding: 120px 0; + + @include onTablet { + padding: 148px 0; + } + + @include onDesktop { + padding-top: 287px; + } + + // @include onTablet{ + // display: grid; + // grid-template-columns: repeat(6, 1fr); + // } + + &__wrapper { + @include onDesktop { + display: flex; + justify-content: space-between; + } + } + + &__header { + @include onTablet { + max-width: 263px; + } + } + + &__label { + margin: 0; + margin-bottom: 16px; + color: #c0cdd7; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + margin: 0; + margin-bottom: 24px; + color: #253757; + font-weight: 600; + font-size: 32px; + line-height: 41.6px; + } + + &__text { + font-family: + Open Sans, + serif; + margin: 0; + margin-bottom: 48px; + color: #6c788b; + font-weight: 400; + font-size: 14px; + line-height: 21px; + } + + &__cards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + + @include onTablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + + @include onDesktop { + width: 60%; + } + } + + &__card { + box-sizing: border-box; + border: 1px solid #fff; + background-color: #fff; + border-radius: 16px; + width: 100%; + height: auto; + + transition: all 0.3s ease; + + &:hover { + border: 1px solid rgba(17, 38, 144, 0.5); + } + + &--top { + @include onTablet { + transform: translateY(-50%); + } + } + + &-content { + padding: 32px; + } + + &-number { + display: inline-block; + color: #2060f6; + font-weight: 600; + font-size: 13px; + line-height: 19.5px; + padding: 2px 12px; + border-radius: 23px; + background-color: #f2f6fa; + } + + &-desc { + margin: 0; + margin-bottom: 32px; + margin-top: 24px; + font-family: + Open Sans, + serif; + color: #6c788b; + font-weight: 600; + font-size: 13px; + line-height: 19.5px; + } + + &-title { + position: relative; + cursor: pointer; + text-decoration: none; + color: #334563; + padding-left: 56px; + font-weight: 600; + font-size: 15px; + line-height: 22.5px; + + &::before { + position: absolute; + left: 0; + bottom: -8px; + height: 40px; + width: 40px; + content: url('./../images/service/Arrow.svg'); + } + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..6b3fbebbe8 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,97 @@ +.slider { + position: relative; + + height: 390px; + width: 100%; + background-image: url('./../images/slider/slide-img-mobile.jpg'); + background-size: cover; + background-position: center; + border-radius: 30px; + bottom: -28px; + + @include onTablet{ + background-image: url('./../images/slider/slide-img-tablet.jpg'); + } + + @include onDesktop{ + width: 100%; + height: 680px; + bottom: 0; + background-image: url('./../images/slider/slide-img-desktop.jpg'); + border-radius: 30px 0 30px 0; + } + + + &__overlay { + position: absolute; + bottom: 24px; + left: 20px; + max-width: 280px; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: left; + color: #fff; + + @include onTablet{ + bottom: 32px; + left: 41px; + } + + @include onDesktop{ + max-width: 300px; + display: flex; + flex-direction: row; + gap: 24px; + align-items: center; + + bottom: 200px; + } + + + + } + + &__navigation { + display: flex; + gap: 16px; + margin-bottom: 16px; + + @include onDesktop{ + margin-bottom: 0; + } + } + + &__title{ + margin: 0; + margin-bottom: 8px; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__text{ + margin: 0; + font-weight: 400; + font-size: 14px; + line-height: 19.6px; + } + + &__arrow { + cursor: pointer; + font-size: 24px; + cursor: pointer; + } + + .left::before { + content: url('./../images/slider/arrow-left.svg'); + } + + .right::before { + content: url('./../images/slider/arrow-right.svg'); + } + +} diff --git a/src/styles/blocks/testimonial.scss b/src/styles/blocks/testimonial.scss new file mode 100644 index 0000000000..c1d6317bf1 --- /dev/null +++ b/src/styles/blocks/testimonial.scss @@ -0,0 +1,128 @@ +.testimonial { + padding-bottom: 120px; + + @include onTablet { + padding-bottom: 148px; + } + + &__label { + margin: 0; + margin-bottom: 16px; + color: #c0cdd7; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + margin: 0; + margin-bottom: 48px; + color: #253757; + font-weight: 600; + font-size: 32px; + line-height: 48px; + + @include onTablet { + max-width: 200px; + margin-bottom: 56px; + } + + @include onDesktop { + margin-bottom: 85px; + } + } + + &__cards { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 24px; + + @include onTablet { + gap: 30px; + } + + @include onDesktop { + flex-direction: row; + } + } + + &__card { + background-color: #fff; + border-radius: 16px; + + transition: all 0.3s ease; + + &:hover { + transform: scale(1.05); + box-shadow: 5px 5px 10px rgba(48, 80, 222, 0.5); + } + + @include onDesktop { + width: 362px; + } + + &-content { + padding: 32px 42px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + } + + &-img { + width: 100%; + max-width: 250px; + height: 100%; + object-fit: cover; + } + + &-mark { + width: 24px; + height: 24px; + margin-bottom: 8px; + + @include onTablet { + margin-bottom: 16px; + } + } + + &-info { + margin: 0; + margin-bottom: 16px; + font-family: + Open Sans, + serif; + color: #6c788b; + font-weight: 600; + font-size: 13px; + line-height: 19.5px; + } + + &-name { + margin: 0; + margin-bottom: 4px; + font-family: + Open Sans, + serif; + font-weight: 600; + font-size: 13px; + line-height: 19.5px; + color: #253757; + } + + &-desc { + margin: 0; + color: #c0cdd7; + font-weight: 700; + font-size: 13px; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + } + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..3d54c88332 --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,23 @@ +.who-we-are{ + padding: 120px 0 120px 0; + font-weight: 600; + text-align: center; + background-color: #f2f6fa; + + + &__title{ + margin: 0; + margin-bottom: 24px; + color: #253757; + font-size: 32px; + line-height: 48px; + } + + &__text{ + font-family: Open Sans, serif; + margin: 0; + color: #6C788B; + font-size: 22px; + line-height: 33px; + } +} diff --git a/src/styles/container.scss b/src/styles/container.scss new file mode 100644 index 0000000000..9722b519ed --- /dev/null +++ b/src/styles/container.scss @@ -0,0 +1,9 @@ +.container{ + max-width: 1180px; + margin: 0 auto; + padding: 0 20px; + + @include onTablet{ + padding: 0 40px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..36214d6b60 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,39 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './container'; +@import './blocks/header'; +@import './blocks/icon'; +@import './blocks/nav'; +@import './blocks/aside-menu'; +@import './blocks/slider'; +@import './blocks/pages'; +@import './blocks/who-we-are'; +@import './blocks/our-expertise'; +@import './blocks/service'; +@import './blocks/testimonial'; +@import './blocks/results'; +@import './blocks/footer'; +@import './blocks/form'; +@import './blocks/contact'; +@import './blocks/footer-bottom'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + font-family: 'Poppins', sans-serif; + font-weight: 400; + font-style: normal; + + margin: 0; + padding: 0; + background-color: #f2f6fa; +} + +ul { + list-style: none; + margin: 0; + padding: 0; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..79a6ba249f 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,5 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: "Poppins", sans-serif; font-weight: 400; + font-style: normal; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..0dad3a75e8 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,15 @@ #{$_property}: $_toValue; } } + +@mixin onTablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop() { + @media (min-width: $desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..2430f27568 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1024px;