diff --git a/src/images/Icon-close.png b/src/images/Icon-close.png new file mode 100644 index 0000000000..f366896469 Binary files /dev/null and b/src/images/Icon-close.png differ diff --git a/src/images/Icon-close.svg b/src/images/Icon-close.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/images/Icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/burger-menu.png b/src/images/burger-menu.png new file mode 100644 index 0000000000..7f38365c55 Binary files /dev/null and b/src/images/burger-menu.png differ diff --git a/src/images/buttons/button-next.png b/src/images/buttons/button-next.png new file mode 100644 index 0000000000..eaaac67ca2 Binary files /dev/null and b/src/images/buttons/button-next.png differ diff --git a/src/images/buttons/button-prev.png b/src/images/buttons/button-prev.png new file mode 100644 index 0000000000..b0b17a7688 Binary files /dev/null and b/src/images/buttons/button-prev.png differ diff --git a/src/images/contact-us/facebook.png b/src/images/contact-us/facebook.png new file mode 100644 index 0000000000..0c16fc4152 Binary files /dev/null and b/src/images/contact-us/facebook.png differ diff --git a/src/images/contact-us/facebook.svg b/src/images/contact-us/facebook.svg new file mode 100644 index 0000000000..edd7a48714 --- /dev/null +++ b/src/images/contact-us/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact-us/instagram.png b/src/images/contact-us/instagram.png new file mode 100644 index 0000000000..8c5a66da6b Binary files /dev/null and b/src/images/contact-us/instagram.png differ diff --git a/src/images/contact-us/instagram.svg b/src/images/contact-us/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/images/contact-us/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/contact-us/twitter.png b/src/images/contact-us/twitter.png new file mode 100644 index 0000000000..108523cc6b Binary files /dev/null and b/src/images/contact-us/twitter.png differ diff --git a/src/images/contact-us/twitter.svg b/src/images/contact-us/twitter.svg new file mode 100644 index 0000000000..1506dd4af0 --- /dev/null +++ b/src/images/contact-us/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/favicon/favicon.png b/src/images/favicon/favicon.png new file mode 100644 index 0000000000..086cca66f9 Binary files /dev/null and b/src/images/favicon/favicon.png differ diff --git a/src/images/features/features-bg.jpg b/src/images/features/features-bg.jpg deleted file mode 100644 index 36b7a748d3..0000000000 Binary files a/src/images/features/features-bg.jpg and /dev/null differ diff --git a/src/images/features/features-item-icon-1.svg b/src/images/features/features-item-icon-1.svg deleted file mode 100644 index 2eb2ee14c3..0000000000 --- a/src/images/features/features-item-icon-1.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/images/features/features-item-icon-2.svg b/src/images/features/features-item-icon-2.svg deleted file mode 100644 index 194e788e11..0000000000 --- a/src/images/features/features-item-icon-2.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/images/features/features-item-icon-3.svg b/src/images/features/features-item-icon-3.svg deleted file mode 100644 index b278d8d16f..0000000000 --- a/src/images/features/features-item-icon-3.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/images/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.png b/src/images/logo/logo.png new file mode 100644 index 0000000000..912258f6ac Binary files /dev/null and b/src/images/logo/logo.png differ diff --git a/src/images/menu-logo.png b/src/images/menu-logo.png new file mode 100644 index 0000000000..4d99a7ddff Binary files /dev/null and b/src/images/menu-logo.png differ diff --git a/src/images/our-expertise/branding1.png b/src/images/our-expertise/branding1.png new file mode 100644 index 0000000000..164a7e1a4d Binary files /dev/null and b/src/images/our-expertise/branding1.png differ diff --git a/src/images/our-expertise/communication2.png b/src/images/our-expertise/communication2.png new file mode 100644 index 0000000000..736cb3af6b Binary files /dev/null and b/src/images/our-expertise/communication2.png differ diff --git a/src/images/our-expertise/strategy3.png b/src/images/our-expertise/strategy3.png new file mode 100644 index 0000000000..e39cf30355 Binary files /dev/null and b/src/images/our-expertise/strategy3.png differ diff --git a/src/images/services/button.png b/src/images/services/button.png new file mode 100644 index 0000000000..c1e8f088c9 Binary files /dev/null and b/src/images/services/button.png differ diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg deleted file mode 100644 index 66daed19a5..0000000000 --- a/src/images/slider/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg deleted file mode 100644 index e9ddf85873..0000000000 --- a/src/images/slider/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/slider/slide-img-1.jpg b/src/images/slider/slide-img-1.jpg deleted file mode 100644 index 98c4188508..0000000000 Binary files a/src/images/slider/slide-img-1.jpg and /dev/null differ diff --git a/src/images/slider/slide1.png b/src/images/slider/slide1.png new file mode 100644 index 0000000000..f95e074939 Binary files /dev/null and b/src/images/slider/slide1.png differ diff --git a/src/images/slider/slide2.png b/src/images/slider/slide2.png new file mode 100644 index 0000000000..eecd2d3c2e Binary files /dev/null and b/src/images/slider/slide2.png differ diff --git a/src/images/slider/slide3.png b/src/images/slider/slide3.png new file mode 100644 index 0000000000..262d0d0dd9 Binary files /dev/null and b/src/images/slider/slide3.png differ diff --git a/src/images/testimonials/people1.png b/src/images/testimonials/people1.png new file mode 100644 index 0000000000..4fe0a0969f Binary files /dev/null and b/src/images/testimonials/people1.png differ diff --git a/src/images/testimonials/people2.png b/src/images/testimonials/people2.png new file mode 100644 index 0000000000..4570127dc6 Binary files /dev/null and b/src/images/testimonials/people2.png differ diff --git a/src/images/testimonials/people3.png b/src/images/testimonials/people3.png new file mode 100644 index 0000000000..1a52f216e1 Binary files /dev/null and b/src/images/testimonials/people3.png differ diff --git a/src/images/testimonials/quote.png b/src/images/testimonials/quote.png new file mode 100644 index 0000000000..e17d4e7499 Binary files /dev/null and b/src/images/testimonials/quote.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..5ace9eea79 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,345 @@ 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.

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

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

+

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

+
+
+
+
+ +

Communication

+

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

+
+
+
+
+ +

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 & Website 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.

+ +
+
+
+
+ +
+ 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/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe10..0000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..57c7434e0e --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,21 @@ +.about-us { + padding-top: 120px; + padding-bottom: 120px; + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + color: #253757; + } + + &__text { + font-family: Open Sans, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: center; + color: #6C788B; + } +} \ No newline at end of file diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 0000000000..8669259e82 --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,82 @@ +body { + overflow: auto; + + &.no-scroll { + overflow: hidden; + } +} +.aside { + position: fixed; + top: 0; + left: 0; + right: 0; + box-sizing: border-box; + background-color: #f8f4fc;; + opacity: 0; + pointer-events: none; + height: 100vh; + z-index: 3; + padding-top: 20px; + transition: opacity 0.3s ease, transform 0.3s ease; + transform: translateX(-100%); + + &__logo { + @include hover(transform, scale(1.15)); + width: 46px; + height: 28px; + } + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + + &__img { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__icon-close { + background-image: url(../images/Icon-close.svg); + background-size: cover; + display: block; + height: 24px; + width: 24px; + cursor: pointer; + @include hover(transform, scale(1.15)); + } + + &-menu { + &-nav { + &__list { + list-style: none; + display: flex; + flex-direction: column; + gap: 28px; + align-items: center; + padding: 0; + padding-top: 20px; + + } + + &__item { + @include hover(transform, scale(1.05)); + } + + &__link { + + text-decoration: none; + color: #292929; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + } + } + } +} diff --git a/src/styles/blocks/cards.scss b/src/styles/blocks/cards.scss new file mode 100644 index 0000000000..50f19ac78c --- /dev/null +++ b/src/styles/blocks/cards.scss @@ -0,0 +1,133 @@ +.cards { + flex: 1; + display: flex; + flex-direction: column; + gap: 24px; + width: 100%; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / -1; + } + + @include onSmallDesktop { + grid-column: 7 / 12; + grid-row: 1; + align-self: center; + padding-top: 287px; + } + + @include onDesktop { + padding-top: 280px; + } + + .cards__wrapper { + @include pageGrid; + gap: 30px; + } +} + +.card { + background-color: #fff; + height: 264px; + width: 100%; + border-radius: 16px; + padding-left: 32px; + padding-top: 32px; + box-sizing: border-box; + grid-column: 1 / -1; + + + @include onTablet { + width: 264px; + } + + @include onSmallDesktop { + width: 214px; + } + + @include onDesktop { + width: 234px; + } + + @include onLargeDesktop { + width: 264px; + } + + &-down { + @include onTablet { + grid-column: 1 / 4; + } + } + + &-up { + @include onTablet { + grid-column: 4 / 7; + transform: translateY(-50%); + } + } + + &-number { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: #2060F6; + @include hover(transform, scale(1.3)); + + + &__wrapper { + width: 46px; + height: 24px; + border-radius: 23px; + background-color: #f8f4fc; + display: flex; + align-items: center; + justify-content: center; + } + } + + &__description { + font-family: Open Sans; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + padding-top: 24px; + padding-bottom: 32px; + } + + &__learn-more { + background-image: url(../images/services/button.png); + background-color: #2060F6; + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + @include hover(transform, scale(1.1)); + + &__container { + display: flex; + gap: 70px; + + } + + &-button { + cursor: pointer; + border: none; + + } + + &-description { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + white-space: nowrap; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..6e37e322e3 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,253 @@ +.footer-send-us__input:-webkit-autofill, +.footer-send-us__input:-webkit-autofill:hover, +.footer-send-us__input:-webkit-autofill:focus, +.footer-send-us__input:-webkit-autofill:active { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: #fff; + background-color: #2C2C2C; + border: none; + border-bottom: 2px solid #fff; + -webkit-text-fill-color: #fff; + -webkit-box-shadow: 0 0 0px 1000px #2C2C2C inset; +} + +.footer { + background-color: #2C2C2C; + border-top-left-radius: 30px; + border-top-right-radius: 30px; + + &__container { + @include pageGrid; + } + + &-send-us { + grid-column: 1 / -1; + + @include onTablet { + grid-column: span 4; + } + + @include onSmallDesktop { + grid-column: span 5; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + color: #fff; + padding-top: 72px; + + @include onTablet { + padding-top: 180px; + } + } + + &__inputs { + display: flex; + flex-direction: column; + gap: 40px; + padding-top: 48px; + padding-bottom: 56px; + } + + &__input { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-decoration: none; + color: #fff; + background-color: #2C2C2C; + border: none; + padding-bottom: 17px; + border-bottom: 2px solid #fff; + + &:focus { + outline: none; + border-bottom: 2px solid #144ED4; + } + + } + + &__button { + cursor: pointer; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #fff; + background-color: #144ED4; + width: 280px; + height: 56px; + border: none; + border-radius: 8px; + + @include hover(background-color, gray); + @include hover(transform, scale(1.1)); + + @include onTablet { + width: 264px; + } + } + } + + + + &-contact-us { + display: flex; + flex-direction: column; + gap: 40px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: span 4; + + } + + @include onSmallDesktop { + grid-column: 7 / 12; + } + + @include onLargeDesktop { + grid-column: 8 / 12; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + color: #fff; + padding-top: 80px; + + @include onSmallDesktop { + padding-top: 180px; + } + } + + &__container { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__name { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $name-color; + text-transform: uppercase; + } + + &__link { + font-family: Open Sans, sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + text-decoration: none; + color: #fff; + @include hover(transform, scale(1.05)); + } + + &__socials { + display: flex; + gap: 32px; + + } + + &__social-facebook { + background-image: url(../images/contact-us/facebook.svg); + } + + &__social-twitter { + background-image: url(../images/contact-us/twitter.svg); + } + + &__social-instagram { + background-image: url(../images/contact-us/instagram.svg); + } + } + + &__logo { + padding-top: 80px; + padding-bottom: 48px; + + @include onSmallDesktop { + padding: 0; + } + } + + &-menu { + + @include onSmallDesktop { + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: 80px; + padding-top: 104px; + } + + &-nav { + padding-bottom: 80px; + + @include onSmallDesktop { + padding-bottom: 0; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + + @include onTablet { + flex-direction: row; + gap: 40px; + } + + @include onSmallDesktop { + gap: 64px; + } + } + + &__link { + text-decoration: none; + color: #fff; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + + } + + &__item { + @include hover(transform, scale(1.2)); + } + + } + + } +} +.footer-contact-us__social-facebook, +.footer-contact-us__social-twitter, +.footer-contact-us__social-instagram { + display: inline-block; + width: 32px; + height: 32px; + + @include hover(transform, scale(1.6)); +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..cf0c0a14d0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,8 @@ +body { + margin: 0; +} + +.header { + background-color: #2C2C2C; + position: relative; +} \ No newline at end of file diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 0000000000..8c1d1f7a89 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,79 @@ +.hero { + background-color: #2C2C2C; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + @include pageGrid; + + @include onSmallDesktop { + height: 100vh; + } + &__top { + grid-column: 1 / -1; + + @include onSmallDesktop { + grid-column: 1 / 7; + padding-top: 164px; + } + } + &__bottom { + + grid-column: 1 / -1; + + @include onSmallDesktop { + grid-column: 7 / -1; + padding-top: 48px; + } + + @include onDesktop { + grid-column: 8 / -1; + + } + } + &__content { + padding-top: 48px; + padding-bottom: 48px; + @include onSmallDesktop { + width: 355px; + } + } + + &__title { + margin: 0; + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62px; + letter-spacing: -2px; + color: #fff; + padding-bottom: 32px; + } + + &__text { + margin: 0; + color: #fff; + font-family: Open Sans,sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + padding-bottom: 72px; + } + + &__button { + background-color: #2060F6; + width: 100%; + height: 50px; + color: #fff; + border: none; + border-radius: 8px; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + cursor: pointer; + @include hover(background-color, gray); + @include hover(transform, scale(1.1)); + + @include onSmallDesktop { + width: 264px; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..622f883b90 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,7 @@ +* { + margin: 0; +} + +.main { + background-color: #f8f4fc; +} \ No newline at end of file diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..dce575623b --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,57 @@ +.menu { + position: relative; + + &__icon { + background-image: url(../images/burger-menu.png); + height: 24px; + width: 24px; + display: inline-block; + cursor: pointer; + + @include onSmallDesktop { + display:none; + } + } + + &-nav { + display: none; + position: absolute; + + &__list { + list-style: none; + display: flex; + padding: 20px; + flex-direction: row; + gap: 48px; + } + + &__link { + text-decoration: none; + color: #fff; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + text-transform: uppercase; + + } + + &__item { + @include hover(transform, scale(1.15)); + } + + @include onSmallDesktop { + + position: static; + display: flex; + align-items: center; + padding-left: 136px; + } + + @include onDesktop { + padding-left: 251px; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..8017a2b1aa --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,80 @@ +.our-expertise { + background-color: #ffffff; + border-radius: 30px; + padding-bottom: 72px; + + &__wrapper { + display: flex; + gap: 56px; + @include pageGrid; + + @include onSmallDesktop { + display: flex; + justify-content: space-between; + } + + } + + &__container { + grid-column: 1 / -1; + + @include onSmallDesktop { + grid-column: span 3; + } + } + + &__content { + display: flex; + flex-direction: column; // Впевнюємось, що елементи розташовані вертикально + align-items: center; + } + + &__img { + border-radius: 10%; + @include hover(transform, scale(1.1)); + + } + + &__text { + font-family: Open Sans, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #6C788B; + @include hover(transform, scale(1.1)); + + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: #253757; + padding-top: 72px; + padding-bottom: 56px; + + @include onTablet { + padding-bottom: 64px; + } + } + + &__name { + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: #253757; + padding-bottom: 16px; + padding-top: 32px; + @include hover(transform, scale(1.1)); + + + @include onSmallDesktop { + padding-top: 40px; + } + } +} \ No newline at end of file diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..a943f5a0a4 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,62 @@ +.services { + display: flex; + align-items: center; + width: 100%; + + &__container { + width: 100%; + } + + .grid-wrapper { + @include pageGrid; + align-items: center; + width: 100%; + } + + &__description { + grid-column: 1 / -1; + padding-top: 120px; + + @include onTablet { + padding-top: 148px; + grid-column: 1 / 4; + } + + @include onSmallDesktop { + + grid-column: 1 / 5; + grid-row: 1; + align-self: center; + } + } + + &__name { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #C0CDD7; + padding-bottom: 16px; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: #253757; + padding-bottom: 24px; + } + + &__text { + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #6C788B; + padding-bottom: 48px; + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..cb0a8d9e2d --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,136 @@ + +.slider { + position: relative; + width: 100%; + overflow: hidden; + + + &__controls { + position: absolute; + bottom: 24px; + left: 20px; + display: flex; + flex-direction: column; + z-index: 2; + + + @include onTablet { + left: 41px; + bottom: 32px; + } + + @include onSmallDesktop { + left: 78px; + bottom: 48px; + flex-direction: row; + gap: 24px; + align-items: center; + } + + @include onDesktop { + left: 48px; + bottom: 48px; + } + } + + &__intro { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + padding-bottom: 8px; + color: #fff; + margin: 0; + } + + &__text { + font-family: Open Sans; + font-size: 14px; + font-weight: 400; + text-align: left; + color: #fff; + margin: 0; + } +} + +.slides { + display: flex; + transition: transform 0.5s ease; /* Анімація переходу між слайдами */ +} + +.slide { + flex: 0 0 100%; /* Кожен слайд займає всю ширину контейнера */ + height: 390px; /* Висота слайдів (замініть на потрібну) */ + background-size: cover; + background-position: center; + border-radius: 30px; + + @include onSmallDesktop { + height: calc(100vh - 48px); + border-bottom-left-radius: 0; + border-top-right-radius: 0; + } + +} + +.slide1 { + background-image: url(../images/slider/slide1.png); /* URL першого зображення */ +} + +.slide2 { + background-image: url(../images/slider/slide2.png); /* URL другого зображення */ +} + + + +.slider__input { + display: none; +} + +.slides { + transform: translateX(0); +} + +.button { + width: 32px; + height: 32px; + background-color:#fff; + border: none; + border-radius: 50%; + color: white; + cursor: pointer; + + + &__wrapper { + display: flex; + gap: 16px; + padding-bottom: 16px; + } +} + +.prev { + background-size: cover; + background-position: center; + background-image: url(../images/buttons/button-prev.png); +} + +.next { + background-size: cover; + background-position: center; +background-image: url(../images/buttons/button-next.png); +} +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +#slide1:checked ~ .slides { + transform: translateX(0); +} + +#slide2:checked ~ .slides { + transform: translateX(-100%); +} + + + diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..319b3a93aa --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,155 @@ +.testimonials { + padding-top: 120px; + padding-bottom: 120px; + @include onTablet { + padding-top: 148px; + padding-bottom: 148px; + } + + @include onSmallDesktop { + padding-top: 151px; + padding-bottom: 151px; + } + + @include onDesktop { + padding-top: 148px; + padding-bottom: 148px; + } + + &__wrapper { + @include pageGrid; + } + + &__container { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + } + + &__cards { + @include pageGrid; + gap: 24px; + + @include onTablet { + gap: 30px; + } + + @include onSmallDesktop { + gap: 20px; + } + + @include onDesktop { + gap: 30px; + } + } + + &__name { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: $name-color; + padding-bottom: 16px; + text-transform: uppercase; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: left; + color: $title-color; + padding-bottom: 48px; + + @include onTablet { + padding-bottom: 56px; + } + + @include onSmallDesktop { + padding-bottom: 85px; + } + } + + &-card { + display: flex; + align-items: center; + flex-direction: column; + background-color: #fff; + border-radius: 16px; + grid-column: 1 / -1; + @include hover(transform, scale(1.1)); + + @include onSmallDesktop { + grid-column: span 4; + } + + &__people { + width: 196px; + height: 196px; + padding-top: 32px; + + @include onTablet { + width: 250px; + height: 250px; + } + + @include onSmallDesktop { + width: 196px; + height: 196px; + } + + @include onDesktop { + width: 250px; + height: 250px; + } + } + + &__quote { + width: 24px; + height: 24px; + padding-top: 24px; + } + + &__text { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + width: 196px; + color: #6C788B; + padding-top: 8px; + } + + &__people-name { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: $title-color; + padding-top: 16px; + } + + &__people-name2 { + padding-top: 32px; + } + + &__people-description { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: $name-color; + padding-top: 4px; + padding-bottom: 32px; + text-transform: uppercase; + } + } +} diff --git a/src/styles/blocks/topbar.scss b/src/styles/blocks/topbar.scss new file mode 100644 index 0000000000..cd40e3e761 --- /dev/null +++ b/src/styles/blocks/topbar.scss @@ -0,0 +1,44 @@ +.topbar { + display: flex; + align-items: center; + gap: 20px; + position: relative; + justify-content: space-between; + padding-top: 20px; + + @include onSmallDesktop { + padding-top: 0; + } + + &__icons { + display: flex; + align-items: center; + gap: 32px; + + } + + &__logo { + width: 46px; + height: 26px; + @include hover(transform, scale(1.1)); + + } + + &__button { + text-decoration: none; + color: #fff; + border: none; + padding-bottom: 8px; + border-bottom: 2px solid #2060F6; + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + @include hover(transform, scale(1.1)); + + + } +} + diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss new file mode 100644 index 0000000000..bda9d39d6f --- /dev/null +++ b/src/styles/blocks/variables.scss @@ -0,0 +1,9 @@ +$large-screens: 2560px; +$desktop: 1280px; +$small-desktop: 1024px; +$large-desktop: 1600px; +$tablet: 640px; +$mobile: 320px; + +$title-color: #253757; +$name-color: #c0cdd7; \ No newline at end of file diff --git a/src/styles/blocks/vision-passion-result.scss b/src/styles/blocks/vision-passion-result.scss new file mode 100644 index 0000000000..e27803b1ad --- /dev/null +++ b/src/styles/blocks/vision-passion-result.scss @@ -0,0 +1,64 @@ +.vision-passion-result { + + &__container { + display: flex; + align-items: center; + flex-direction: column; + padding-top: 72px; + padding-bottom: 72px; + + @include onTablet { + padding-top: 200px; + padding-bottom: 200px; + } + } + + &__background { + background-image: url(../images/Shapes.png); + block-size: cover; + background-position: center; + background-color: #fff; + width: 100%; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: $title-color; + padding-bottom: 24px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: $name-color; + padding-bottom: 56px; + + @include onTablet { + padding-bottom: 64px; + } + } + + &__button { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #fff; + background-color: #2060F6; + width: 280px; + height: 56px; + border: none; + border-radius: 8px; + @include hover(transform, scale(1.1)); + + @include hover(background-color, gray); + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..8854305cbf --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,16 @@ +@import 'blocks/variables.scss'; +@import './utils/mixins.scss'; +@import 'blocks/header.scss'; +@import 'blocks/menu.scss'; +@import 'blocks/topbar.scss'; +@import 'blocks/slider.scss'; +@import 'blocks/about-us.scss'; +@import 'blocks/main.scss'; +@import 'blocks/our-expertise.scss'; +@import 'blocks/hero.scss'; +@import 'blocks/services.scss'; +@import 'blocks/cards.scss'; +@import 'blocks/testimonials.scss'; +@import 'blocks/vision-passion-result.scss'; +@import 'blocks/footer.scss'; +@import 'blocks/aside.scss'; \ No newline at end of file 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..084e9672b5 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,97 @@ + + +@mixin onTablet { + @media (min-width: $tablet) { + @content; + } +} + +@mixin onSmallDesktop { + @media (min-width: $small-desktop) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop) { + @content; + } +} + +@mixin onLargeDesktop { + @media (min-width: $large-desktop) { + @content; + } +} + +@mixin onLargeScreens { + @media (min-width: $large-screens) { + @content; + } +} + +@mixin contentPaddingInline() { + padding-inline: 20px; + + @include onTablet { + padding-inline: 41px; + } + + @include onSmallDesktop { + padding-inline: 54px; + } + + @include onDesktop { + padding-inline: 125px; + } + + @include onLargeDesktop { + padding-inline: 250px; + } + + @include onLargeScreens { + padding-inline: 707px; + } +} + +.container { + @include contentPaddingInline; +} + +@mixin pageGrid { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include onTablet { + --columns: 6; + column-gap: 30px; + } + + @include onSmallDesktop { + --columns: 12; + column-gap: 20px; + } + + @include onDesktop { + --columns: 12; + column-gap: 30px; + } + + @include onLargeDesktop { + --columns: 12; + column-gap: 30px; + } + @include onLargeScreens { + --columns: 12; + column-gap: 30px; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} 0.3s; + &:hover { + #{$property}: $toValue; + } +} \ No newline at end of file