diff --git a/src/images/Photo-slider-320.png b/src/images/Photo-slider-320.png new file mode 100644 index 0000000000..c8a833b953 Binary files /dev/null and b/src/images/Photo-slider-320.png differ diff --git a/src/images/Photo-slider.png b/src/images/Photo-slider.png new file mode 100644 index 0000000000..4fcdc6c67e Binary files /dev/null and b/src/images/Photo-slider.png differ diff --git a/src/images/expertise-img1.png b/src/images/expertise-img1.png new file mode 100644 index 0000000000..2a594d9be5 Binary files /dev/null and b/src/images/expertise-img1.png differ diff --git a/src/images/expertise-img2.png b/src/images/expertise-img2.png new file mode 100644 index 0000000000..7034cfeb99 Binary files /dev/null and b/src/images/expertise-img2.png differ diff --git a/src/images/expertise-img3.png b/src/images/expertise-img3.png new file mode 100644 index 0000000000..e39cf30355 Binary files /dev/null and b/src/images/expertise-img3.png differ diff --git a/src/images/icons/Menu.png b/src/images/icons/Menu.png new file mode 100644 index 0000000000..7f38365c55 Binary files /dev/null and b/src/images/icons/Menu.png differ diff --git a/src/images/icons/arrow-right.png b/src/images/icons/arrow-right.png new file mode 100644 index 0000000000..c1e8f088c9 Binary files /dev/null and b/src/images/icons/arrow-right.png differ diff --git a/src/images/icons/cross.png b/src/images/icons/cross.png new file mode 100644 index 0000000000..d8a821d318 Binary files /dev/null and b/src/images/icons/cross.png differ diff --git a/src/images/icons/facebook-logo-blue.png b/src/images/icons/facebook-logo-blue.png new file mode 100644 index 0000000000..83acc36886 Binary files /dev/null and b/src/images/icons/facebook-logo-blue.png differ diff --git a/src/images/icons/facebook-logo.png b/src/images/icons/facebook-logo.png new file mode 100644 index 0000000000..7c6d7de07f Binary files /dev/null and b/src/images/icons/facebook-logo.png differ diff --git a/src/images/icons/instagram-logo-blue.png b/src/images/icons/instagram-logo-blue.png new file mode 100644 index 0000000000..d00e9c38d9 Binary files /dev/null and b/src/images/icons/instagram-logo-blue.png differ diff --git a/src/images/icons/instagram-logo.png b/src/images/icons/instagram-logo.png new file mode 100644 index 0000000000..be88c33213 Binary files /dev/null and b/src/images/icons/instagram-logo.png differ diff --git a/src/images/icons/quotes.png b/src/images/icons/quotes.png new file mode 100644 index 0000000000..9cf3030870 Binary files /dev/null and b/src/images/icons/quotes.png differ diff --git a/src/images/icons/twitter-logo-blue.png b/src/images/icons/twitter-logo-blue.png new file mode 100644 index 0000000000..b73f1eb6b5 Binary files /dev/null and b/src/images/icons/twitter-logo-blue.png differ diff --git a/src/images/icons/twitter-logo.png b/src/images/icons/twitter-logo.png new file mode 100644 index 0000000000..7d498b231a Binary files /dev/null and b/src/images/icons/twitter-logo.png differ diff --git a/src/images/logo/Air.png b/src/images/logo/Air.png new file mode 100644 index 0000000000..9a6bb904be Binary files /dev/null and b/src/images/logo/Air.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..bda47b2bb2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,9 @@ + - + Dia + + + + + + + + - -

Dia

+ + +
+
+
+ + + + +
+ +
+ +
+ +
+ + hire us + +
+
+ +
+
+

Strategic Agency

+

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

+ + Learn more + +
+ +
+
+
+ + +
+

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

Branding

+

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

+
+
+ communication img +

Communication

+

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

+
+
+ Strategy img +

Strategy

+

+ We create business growth strategies, from the moment of its birth + to the achievement of the necessary business indicators. +

+
+
+
+ +
+
+
+

servicess

+

+ 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

+
+
+
+ testimonials img +
+ quotes + +

Tal Gilad

+

Teach for America

+
+ +
+
+ testimonials img +
+ quotes + +

Azadeh Hawkins

+

Hawkins Consulting

+
+ +
+
+ testimonials img +
+ quotes + +

Michel Grover

+

Hulu

+
+
+
+
+ +
+
+
+

Vission, Passion, Results

+

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

+ + Apply + +
+
+
+
+ + + diff --git a/src/styles/blocks.scss b/src/styles/blocks.scss new file mode 100644 index 0000000000..903f2fcbe4 --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,26 @@ +@import './utils/mixins'; +@import './blocks/header'; +@import './blocks/body'; +@import './blocks/nav'; +@import './blocks/menu'; +@import './blocks/page'; +@import './blocks/who-we-are'; +@import './blocks/our-expertise'; +@import './blocks/main'; +@import './blocks/article'; +@import './blocks/card'; +@import './blocks/pre-title'; +@import './blocks/process'; +@import './blocks/testimonials'; +@import './blocks/vis-pas-res'; +@import './blocks/footer'; +@import './blocks/form'; +@import './blocks/contact-us'; +@import './blocks/call-us'; +@import './blocks/visit-us'; +@import './blocks/socials'; +@import './blocks/contacts-title'; +@import './blocks/top-bar'; +@import './blocks/aside'; +@import './blocks/hire-us'; +@import './blocks/slider'; diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss new file mode 100644 index 0000000000..bf125e24a6 --- /dev/null +++ b/src/styles/blocks/article.scss @@ -0,0 +1,25 @@ +.article { + &__title { + font-family: Poppins, sans-serif; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: #253757; + margin-bottom: 16px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #6c788b; + } + + &__img { + display: block; + margin-bottom: 32px; + } +} diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 0000000000..4a68733081 --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,67 @@ +.aside { + height: 100vh; + background-color: #2c2c2c; + display: flex; + justify-content: space-between; + box-sizing: border-box; + + @include on-small-desktop { + display: none; + } + + &__list { + display: flex; + flex-direction: column; + gap: 35px; + list-style: none; + margin: 0; + padding: 0; + + &::after { + display: block; + } + } + + &__link { + position: relative; + text-decoration: none; + margin: 0; + padding: 0; + + font-family: Poppins, sans-serif; + font-size: 35px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #fff; + + &::after { + position: absolute; + bottom: -8px; + + left: 0; + display: block; + content: ''; + height: 2px; + width: 100%; + background-color: #2060f6; + transform: scale(0); + transition: transform 0.3s; + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__icon-close { + display: block; + height: 14px; + width: 14px; + + background-image: url(../images/icons/cross.png); + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..8c1559fc9e --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,15 @@ +body { + margin: 0; + min-width: 320px; +} + +h1, +h2, +h3, +h4 { + margin: 0; +} + +p { + margin: 0; +} diff --git a/src/styles/blocks/call-us.scss b/src/styles/blocks/call-us.scss new file mode 100644 index 0000000000..01c4bec738 --- /dev/null +++ b/src/styles/blocks/call-us.scss @@ -0,0 +1,18 @@ +.call-us { + &__title { + margin-bottom: 8px; + } + + &__number-link { + text-decoration: none; + } + + &__number { + color: #fff; + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..0018df4508 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,76 @@ +.card { + background-color: #fff; + padding: 32px 0 28px 32px; + border-radius: 16px; + height: 264px; + box-sizing: border-box; + + &__number { + background: rgba(32, 96, 246, 0.1); + width: 46px; + height: 24px; + border-radius: 23px; + color: #2060f6; + line-height: 24px; + margin-bottom: 24px; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 600; + text-align: center; + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + margin-bottom: 32px; + } + + &__item { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: #6c788b; + margin-bottom: 3px; + } + + &__link { + display: flex; + align-items: center; + gap: 16px; + text-decoration: none; + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50%; + border: none; + background-color: #2060f6; + padding: 0; + cursor: pointer; + transition: all 0.3s; + } + + &__bottom { + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + } + + &__learn-more { + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #334563; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..8c0c28509f --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,18 @@ +.contact-us { + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: left; + color: #fff; + + margin-bottom: 48px; + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 40px; + } +} diff --git a/src/styles/blocks/contacts-title.scss b/src/styles/blocks/contacts-title.scss new file mode 100644 index 0000000000..5dd595d43d --- /dev/null +++ b/src/styles/blocks/contacts-title.scss @@ -0,0 +1,11 @@ +.contacts-title { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: #fff; + opacity: 50%; + text-transform: uppercase; +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..6df6626723 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,97 @@ +.footer { + background-color: #2c2c2c; + padding-block: 72px 80px; + border-radius: 30px 30px 0 0; + + &__content { + @include page-grid; + + row-gap: 80px; + + @include padding-inline; + } + + &__form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__contact-us { + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 7 / -1; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__logo-link { + display: block; + margin-bottom: 48px; + + @include on-small-desktop { + margin: 0; + } + } + + &__logo { + height: 28px; + width: 46px; + } + + &__menu { + grid-column: 1 / -1; + + @include on-small-desktop { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &__nav { + &-list { + display: flex; + flex-direction: column; + gap: 24px; + list-style: none; + margin: 0; + padding: 0; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + gap: 40px; + } + + @include on-small-desktop { + gap: 64; + } + + text-decoration: none; + text-transform: uppercase; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #fff; + } + + &-link { + text-decoration: none; + color: #fff; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..64ac9f9c87 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,124 @@ +.form { + &__fields { + display: flex; + flex-direction: column; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: #fff; + + margin-bottom: 48px; + } + + &__email { + box-sizing: border-box; + margin-bottom: 40px; + background-color: #2c2c2c; + border: none; + border-bottom: 2px solid #fff; + padding-bottom: 17px; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: #fff; + cursor: pointer; + transition: all 0.3s; + + &:focus { + border-bottom: 2px solid #144ed4; + outline: none; + } + + &:hover { + border-bottom: 2px solid #144ed4; + } + + &::placeholder { + color: #fff; + opacity: 70%; + } + } + + &__name { + position: relative; + margin-bottom: 40px; + background-color: #2c2c2c; + border: none; + border-bottom: 2px solid #fff; + padding-bottom: 17px; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: #fff; + cursor: pointer; + transition: all 0.3s; + + &:focus { + border-bottom: 2px solid #144ed4; + outline: none; + } + + &:hover { + border-bottom: 2px solid #144ed4; + } + + &::placeholder { + color: #fff; + opacity: 70%; + } + } + + &__message { + margin-bottom: 56px; + background-color: #2c2c2c; + border: none; + border-bottom: 2px solid #fff; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + color: #fff; + cursor: pointer; + transition: all 0.3s; + resize: none; + + &:focus { + border-bottom: 2px solid #144ed4; + outline: none; + } + + &:hover { + border-bottom: 2px solid #144ed4; + } + + &::placeholder { + color: #fff; + opacity: 70%; + } + } + + &__button { + width: 280px; + height: 56px; + background-color: #144ed4; + border-radius: 8px; + border: none; + cursor: pointer; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #fff; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..a70f48876e --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,103 @@ +.header { + position: relative; + background-color: #2c2c2c; + border-radius: 0 0 30px 30px; + height: 893px; + + @include on-small-desktop { + height: 800px; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + text-align: left; + color: #fff; + + margin-block: 48px 32px; + + @include on-small-desktop { + margin-block: 164px 0; + } + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: #fff; + + margin-bottom: 72px; + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + width: 280px; + height: 50px; + border-radius: 8px; + background-color: #2060f6; + border: none; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #fff; + + cursor: pointer; + } + + &__main { + @include page-grid; + + row-gap: 48px; + + @include padding-inline; + + @include on-tablet { + row-gap: 147px; + } + } + + &__content { + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__slider { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + @include on-small-desktop { + position: absolute; + right: 0; + left: 51%; + top: 120px; + + height: 680px; + } + + background-image: url(../images/Photo-slider.png); + background-position: center; + background-size: cover; + border-radius: 30px; + } +} diff --git a/src/styles/blocks/hire-us.scss b/src/styles/blocks/hire-us.scss new file mode 100644 index 0000000000..da931a9e74 --- /dev/null +++ b/src/styles/blocks/hire-us.scss @@ -0,0 +1,26 @@ +.hire-us { + &__button { + position: relative; + 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; + + padding-bottom: 10px; + + &::after { + content: ''; + position: absolute; + bottom: 0; + right: 0; + height: 2px; + width: 100%; + background-color: #2060f6; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..8250e8658c --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,5 @@ +.main { + display: flex; + flex-direction: column; + gap: 120px; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..df4414be9c --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,28 @@ +.menu { + display: none; + + @include on-small-desktop { + display: flex; + } + + &__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + 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; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..0734965188 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,23 @@ +.nav { + &__list { + display: flex; + gap: 48px; + list-style: none; + + padding: 0; + margin: 0; + } + + &__link { + text-decoration: none; + text-transform: uppercase; + + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: #fff; + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..f8ec21fabe --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,54 @@ +.our-expertise { + padding-block: 72px; + background-color: #fff; + border-radius: 30px; + + @include padding-inline; + + @include on-small-desktop { + margin-bottom: 121px; + } + + &__articles { + @include page-grid; + + row-gap: 56px; + } + + &__article { + grid-column: 1 / -1; + place-items: center; + + max-width: 362px; + + @include on-tablet { + grid-column: 2 / -2; + } + + &--1 { + @include on-small-desktop { + grid-column: 1 / 4; + } + } + &--2 { + @include on-small-desktop { + grid-column: 5 / 9; + } + } + &--3 { + @include on-small-desktop { + grid-column: 10 / -1; + } + } + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: #253757; + margin-bottom: 56px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..95bf5ac8fe --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,31 @@ +.page { + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + display: flex; + flex-direction: column; + gap: 120px; + background-color: #f2f6fa; + } + + &__menu { + padding: 20px 20px 0; + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: 0.3s all; + opacity: 0; + transform: translateX(-100%); + + &:target { + transform: translateX(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/pre-title.scss b/src/styles/blocks/pre-title.scss new file mode 100644 index 0000000000..70bcd01e66 --- /dev/null +++ b/src/styles/blocks/pre-title.scss @@ -0,0 +1,11 @@ +.pre-title { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #c0cdd7; + text-transform: uppercase; + + margin-bottom: 16px; +} diff --git a/src/styles/blocks/process.scss b/src/styles/blocks/process.scss new file mode 100644 index 0000000000..fff4949ca8 --- /dev/null +++ b/src/styles/blocks/process.scss @@ -0,0 +1,86 @@ +.process { + @include padding-inline; + + &__content { + @include page-grid; + + gap: 24px; + } + + &__top { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 5; + } + } + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: #253757; + margin-bottom: 24px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #6c788b; + + &--1 { + margin-bottom: 24px; + } + &--2 { + margin-bottom: 24px; + } + } + + &__card { + transition: all 0.3s; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 7 / 10; + } + + &--right { + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + grid-column: 4 / -1; + transform: translateY(-50%); + + &:hover { + transform: translateY(-50%) scale(1.1); + box-shadow: 0 9px 18px 0 #25293108; + } + } + + @include on-small-desktop { + grid-column: 10 / -1; + } + } + + &--left { + &:hover { + box-shadow: 0 9px 18px 0 #25293108; + transform: scale(1.1); + } + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..3ace1740b9 --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,46 @@ +.slider { + &__content { + @include padding-inline; + + padding-block: 250px 24px; + + @include on-small-desktop { + padding: 564px 54px 48px 78px; + } + } + + &__arrows { + display: flex; + gap: 16px; + margin-bottom: 16px; + } + + &__arrow { + height: 32px; + width: 32px; + border-radius: 50%; + border: none; + } + + &__intro { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: #fff; + text-transform: uppercase; + + margin-bottom: 8px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: #fff; + } +} diff --git a/src/styles/blocks/socials.scss b/src/styles/blocks/socials.scss new file mode 100644 index 0000000000..2b50c72719 --- /dev/null +++ b/src/styles/blocks/socials.scss @@ -0,0 +1,45 @@ +.socials { + &__title { + margin-bottom: 16px; + } + + &__icons { + display: flex; + gap: 32px; + } + + &__icon { + display: block; + height: 32px; + width: 32px; + transition: all 0.3s; + + &--facebook { + background-image: url(../images/icons/facebook-logo.png); + background-repeat: no-repeat; + background-position: center; + transition: all 0.3s; + + &:hover { + background-image: url(../images/icons/facebook-logo-blue.png); + background-size: cover; + } + } + + &--twitter { + background-image: url(../images/icons/twitter-logo.png); + + &:hover { + background-image: url(../images/icons/twitter-logo-blue.png); + } + } + + &--inst { + background-image: url(../images/icons/instagram-logo.png); + + &:hover { + background-image: url(../images/icons/instagram-logo-blue.png); + } + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..c30d3a0295 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,173 @@ +.what-people-say { + @include padding-inline; + + &__title { + font-family: Poppins, sans-serif; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: left; + color: #253757; + + @include on-tablet { + width: 180px; + } + + margin-bottom: 48px; + } + + &__cards { + @include page-grid; + + gap: 24px; + } + + &__card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + grid-column: 1 / -1; + padding: 36px 39px 32px; + border-radius: 16px; + + @include on-small-desktop { + grid-column: span 4; + } + + box-sizing: border-box; + background-color: #fff; + + &:hover { + box-shadow: 0 9px 18px 0 #25293108; + } + } + + &__testimonial { + margin-bottom: 27px; + box-sizing: border-box; + + &::before { + position: relative; + left: -40px; + bottom: -40px; + z-index: 0; + display: block; + content: ''; + height: 43.9px; + width: 108.98px; + background-color: #2060f6; + border: none; + border-radius: 12px; + transform: rotate(-60deg); + + @include on-tablet { + height: 56px; + width: 139px; + } + + @include on-small-desktop { + height: 43.9px; + width: 108.98px; + } + + @include on-desktop { + height: 56px; + width: 139px; + } + } + + &::after { + position: relative; + left: 40px; + bottom: 40px; + z-index: 0; + display: block; + content: ''; + height: 43.9px; + width: 108.98px; + background-color: #2060f6; + border: none; + border-radius: 12px; + transform: rotate(-60deg); + + @include on-tablet { + height: 56px; + width: 139px; + } + + @include on-small-desktop { + height: 43.9px; + width: 108.98px; + } + + @include on-desktop { + height: 56px; + width: 139px; + } + } + } + + &__img { + position: relative; + z-index: 1; + display: block; + object-fit: cover; + object-position: top; + height: 109.76px; + width: 109.76px; + border-radius: 50%; + margin-inline: auto; + + @include on-tablet { + height: 140px; + width: 140px; + } + + @include on-small-desktop { + height: 109.76px; + width: 109.76px; + } + + @include on-desktop { + height: 140px; + width: 140px; + } + } + + &__quotes { + margin-bottom: 8px; + } + + &__feedback { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: #6c788b; + + margin-bottom: 16px; + } + + &__name { + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: center; + color: #253757; + margin-bottom: 4px; + } + + &__company { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: #c0cdd7; + text-transform: uppercase; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..bd60bbf3a4 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,35 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 18px; + + @include on-small-desktop { + padding-top: 48px; + } + + @include padding-inline; + + &__logo { + width: 46px; + height: 28px; + } + + &__left-side { + display: flex; + align-items: center; + gap: 32px; + } + + &__icon-menu { + display: block; + + @include on-small-desktop { + display: none; + } + + height: 24px; + width: 24px; + background-image: url(../images/icons/Menu.png); + } +} diff --git a/src/styles/blocks/vis-pas-res.scss b/src/styles/blocks/vis-pas-res.scss new file mode 100644 index 0000000000..23e6054f68 --- /dev/null +++ b/src/styles/blocks/vis-pas-res.scss @@ -0,0 +1,59 @@ +.vis-pas-res { + padding-block: 72px; + background-color: #fff; + + @include on-small-desktop { + background-image: url(../images/Shapes.png); + background-position: center; + background-size: cover; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + + @include padding-inline; + } + + &__title { + font-family: Poppins, sans-serif; + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + color: #253757; + margin-bottom: 24px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: #6c788b; + margin-bottom: 56px; + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + + text-decoration: none; + + width: 280px; + height: 56px; + border-radius: 8px; + border: none; + background-color: #2060f6; + color: #fff; + + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + } +} diff --git a/src/styles/blocks/visit-us.scss b/src/styles/blocks/visit-us.scss new file mode 100644 index 0000000000..0209b28fca --- /dev/null +++ b/src/styles/blocks/visit-us.scss @@ -0,0 +1,18 @@ +.visit-us { + &__title { + margin-bottom: 8px; + } + + &__addres-link { + text-decoration: none; + } + + &__addres { + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 36px; + text-align: left; + color: #fff; + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..cde55225fe --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,29 @@ +.who-we-are { + &__title { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 48px; + text-align: center; + color: #253757; + + margin-bottom: 24px; + } + + &__description { + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: #6c788b; + + padding-inline: 20px; + max-width: 716px; + margin-inline: auto; + + @include on-tablet { + padding-inline: 41px; + } + } +} 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/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..a885c0fe6d 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,85 @@ #{$_property}: $_toValue; } } + +@mixin pre-title-style { + font-family: Poppins, sans-serif; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + color: #c0cdd7; +} + +@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 the-design { + @media (min-width: 1600px) { + @content; + } +} + +@mixin large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin page-grid { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + } + + @include on-small-desktop { + --columns: 12; + } + + @include on-desktop { + --columns: 12; + } + + @include large-screens { + --columns: 12; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + max-width: 1148px; + margin-inline: auto; +} + +@mixin padding-block { + padding-block: 120px; +}