diff --git a/src/Roboto-Regular-webfont.woff b/src/Roboto-Regular-webfont.woff new file mode 100644 index 0000000000..6ff6afd8c8 Binary files /dev/null and b/src/Roboto-Regular-webfont.woff differ diff --git a/src/fonts.scss b/src/fonts.scss new file mode 100644 index 0000000000..5171f4088d --- /dev/null +++ b/src/fonts.scss @@ -0,0 +1,6 @@ +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + src: url('/src/Roboto-Regular-webfont.woff'); + font-weight: normal; + font-style: normal; +} diff --git a/src/imagens/001.png b/src/imagens/001.png new file mode 100644 index 0000000000..411edbd946 Binary files /dev/null and b/src/imagens/001.png differ diff --git a/src/imagens/002.png b/src/imagens/002.png new file mode 100644 index 0000000000..94135ee21d Binary files /dev/null and b/src/imagens/002.png differ diff --git a/src/imagens/003.png b/src/imagens/003.png new file mode 100644 index 0000000000..dbd81833b1 Binary files /dev/null and b/src/imagens/003.png differ diff --git a/src/imagens/004.png b/src/imagens/004.png new file mode 100644 index 0000000000..2c5529007a Binary files /dev/null and b/src/imagens/004.png differ diff --git a/src/imagens/arrow-left1.png b/src/imagens/arrow-left1.png new file mode 100644 index 0000000000..73bdc2963b Binary files /dev/null and b/src/imagens/arrow-left1.png differ diff --git a/src/imagens/arrow-right1.png b/src/imagens/arrow-right1.png new file mode 100644 index 0000000000..ce587b9fce Binary files /dev/null and b/src/imagens/arrow-right1.png differ diff --git a/src/imagens/arrow1.png b/src/imagens/arrow1.png new file mode 100644 index 0000000000..e42415fed1 Binary files /dev/null and b/src/imagens/arrow1.png differ diff --git a/src/imagens/facebook-hover.svg b/src/imagens/facebook-hover.svg new file mode 100644 index 0000000000..a148dbac37 --- /dev/null +++ b/src/imagens/facebook-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/facebook.svg b/src/imagens/facebook.svg new file mode 100644 index 0000000000..53c6cae0b9 --- /dev/null +++ b/src/imagens/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/imagens/foto1.png b/src/imagens/foto1.png new file mode 100644 index 0000000000..2a594d9be5 Binary files /dev/null and b/src/imagens/foto1.png differ diff --git a/src/imagens/foto2.png b/src/imagens/foto2.png new file mode 100644 index 0000000000..7034cfeb99 Binary files /dev/null and b/src/imagens/foto2.png differ diff --git a/src/imagens/foto3.png b/src/imagens/foto3.png new file mode 100644 index 0000000000..e39cf30355 Binary files /dev/null and b/src/imagens/foto3.png differ diff --git a/src/imagens/icon-close1.png b/src/imagens/icon-close1.png new file mode 100644 index 0000000000..c21cfea248 Binary files /dev/null and b/src/imagens/icon-close1.png differ diff --git a/src/imagens/instagram-hover.svg b/src/imagens/instagram-hover.svg new file mode 100644 index 0000000000..769fcd5763 --- /dev/null +++ b/src/imagens/instagram-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/instagram.svg b/src/imagens/instagram.svg new file mode 100644 index 0000000000..76a83d304d --- /dev/null +++ b/src/imagens/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/logo1.png b/src/imagens/logo1.png new file mode 100644 index 0000000000..efd23b2096 Binary files /dev/null and b/src/imagens/logo1.png differ diff --git a/src/imagens/logo2.svg b/src/imagens/logo2.svg new file mode 100644 index 0000000000..e26dfea4ae --- /dev/null +++ b/src/imagens/logo2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/imagens/menu1.png b/src/imagens/menu1.png new file mode 100644 index 0000000000..34c940139b Binary files /dev/null and b/src/imagens/menu1.png differ diff --git a/src/imagens/quot.png b/src/imagens/quot.png new file mode 100644 index 0000000000..48e3264991 Binary files /dev/null and b/src/imagens/quot.png differ diff --git a/src/imagens/shapes1.png b/src/imagens/shapes1.png new file mode 100644 index 0000000000..2fd37ab96c Binary files /dev/null and b/src/imagens/shapes1.png differ diff --git a/src/imagens/slide1.png b/src/imagens/slide1.png new file mode 100644 index 0000000000..b6570a647f Binary files /dev/null and b/src/imagens/slide1.png differ diff --git a/src/imagens/slide2.png b/src/imagens/slide2.png new file mode 100644 index 0000000000..3d8d0409c0 Binary files /dev/null and b/src/imagens/slide2.png differ diff --git a/src/imagens/slide3.png b/src/imagens/slide3.png new file mode 100644 index 0000000000..18b4890110 Binary files /dev/null and b/src/imagens/slide3.png differ diff --git a/src/imagens/testemunha.png b/src/imagens/testemunha.png new file mode 100644 index 0000000000..529fd07b58 Binary files /dev/null and b/src/imagens/testemunha.png differ diff --git a/src/imagens/testemunha1.png b/src/imagens/testemunha1.png new file mode 100644 index 0000000000..22e6e5877e Binary files /dev/null and b/src/imagens/testemunha1.png differ diff --git a/src/imagens/testemunha2.png b/src/imagens/testemunha2.png new file mode 100644 index 0000000000..9b79b5acfa Binary files /dev/null and b/src/imagens/testemunha2.png differ diff --git a/src/imagens/twitter-hover.svg b/src/imagens/twitter-hover.svg new file mode 100644 index 0000000000..c2c172c833 --- /dev/null +++ b/src/imagens/twitter-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/twitter.svg b/src/imagens/twitter.svg new file mode 100644 index 0000000000..15d1cb33af --- /dev/null +++ b/src/imagens/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..93c6f4b547 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,612 @@ - + - Dia + Air + + + + - -

Dia

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

Strategic Agency

+

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

+ + Learn more + +
+
+
+
+ + icon arrow left + + + icon arrow right + +
+
+

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

+
+
+ Our expertise branding +

Branding

+

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

+
+
+ Our expertise communication +

Communication

+

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

+
+
+ Our expertise strategy +

Strategy

+

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

+
+
+
+
+
+

Services

+

Air is a full service creative agency

+

+ Deep analytics, strong strategy and bright creative ideas. +
+
+ We are sure that first-rate job is possible only if all three + components are united. +

+
+
+
+ Process 001 +

+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +

+ + process-arrow + Learn more + +
+
+ Process 002 +

+ Content Production +
+ Graphic Design +
+ Video Production +
+ Post Production +

+ + process-arrow + Learn more + +
+
+ Process 003 +

+ Marketing Strategy +
+ Email Marketing +
+ Paid Advertising +
+ Blog Content & SEO +

+ + process-arrow + Learn more + +
+
+ Process 004 +

+ Digital Communications +
+ Influencer Marketing +
+ Product Placements +
+ Strategic Partnerships +

+ + process-arrow + Learn more + +
+
+
+
+
+

Testimonials

+

+ What +
+ people say +

+
+
+
+
+ testimonials photo 1 + testimonials mark +

+ 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

+
+
+
+
+ testimonials photo 2 + testimonials mark +

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

+
+
+

Azadeh Hawkins

+

Hawkins Consulting

+
+
+
+
+ testimonials photo 3 + testimonials mark +

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

Send us a message

+
+ + + + +
+
+
+

Contact us

+
+
+

Call us

+ + 654 321 987 + +
+
+

Visit us

+ + 2905 West Drive, Buffalo Grove + +
+
+

our socials

+
+ + + +
+
+
+
+
+
+ diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 0000000000..036f26c625 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,25 @@ +@import '/src/styles/utils/variables'; +@import '/src/styles/utils/extends'; +@import '/src/styles/utils/mixin'; +@import '/src/fonts'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/top-bar'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/strategic-agency'; +@import '/src/styles/blocks/button'; +@import '/src/styles/blocks/slider'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/who-we-are'; +@import '/src/styles/blocks/our-expertise'; +@import '/src/styles/blocks/card'; +@import '/src/styles/blocks/process'; +@import '/src/styles/blocks/card-job'; +@import '/src/styles/blocks/testimonials'; +@import '/src/styles/blocks/card-feedback'; +@import '/src/styles/blocks/vision-passion-results'; +@import '/src/styles/blocks/section'; +@import '/src/styles/blocks/send-us-a-message'; +@import '/src/styles/blocks/input'; +@import '/src/styles/blocks/contact-us'; +@import '/src/styles/blocks/footer'; diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..be156c8341 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,19 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + background-color: $color-background-second; + border-radius: 8px; + height: 50px; + width: 100%; + text-decoration: none; + font-size: 15px; + color: $color-text; + font-weight: 600; + cursor: pointer; + transition-duration: $time-duration; + + @include on-tablet { + width: 264px; + } +} diff --git a/src/styles/blocks/card-feedback.scss b/src/styles/blocks/card-feedback.scss new file mode 100644 index 0000000000..7219b6e803 --- /dev/null +++ b/src/styles/blocks/card-feedback.scss @@ -0,0 +1,79 @@ +.card-feedback { + background-color: $color-text; + padding: 32px 42px; + border-radius: 16px; + display: flex; + flex-direction: column; + justify-content: space-between; + cursor: pointer; + + @include on-tablet { + padding: 32px 98px; + } + + @include on-small-desktop { + padding: 32px 42px; + } + + &__img { + display: block; + margin: 0 auto; + height: 196px; + width: 196px; + + @include on-tablet { + height: 250px; + width: 250px; + } + + @include on-small-desktop { + height: 196px; + width: 196px; + } + + @include on-the-design { + height: 250px; + width: 250px; + } + } + + &__icon { + display: block; + height: 24px; + width: 24px; + text-align: center; + margin: 24px auto 8px; + } + + &__description { + color: $color-text-third; + text-align: center; + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + margin-bottom: 16px; + } + + &__name { + color: $color-text-second; + text-align: center; + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + margin-bottom: 4px; + } + + &__profession { + color: $color-text-fourth; + text-align: center; + font-size: 13px; + font-weight: 700; + line-height: normal; + letter-spacing: 3px; + text-transform: uppercase; + } + + @include hover(transform, scale(1.07)); +} diff --git a/src/styles/blocks/card-job.scss b/src/styles/blocks/card-job.scss new file mode 100644 index 0000000000..175f7065f8 --- /dev/null +++ b/src/styles/blocks/card-job.scss @@ -0,0 +1,44 @@ +.card-job { + background-color: $color-text; + padding: 32px; + box-sizing: border-box; + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + border-radius: 16px; + + &--to-up { + @include on-tablet { + transform: translateY(-50%); + } + } + + &__description { + color: $color-text-third; + font-family: 'Open Sans', sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 150%; + margin: 26px 0 32px; + } + + &__link { + text-decoration: none; + display: flex; + gap: 16px; + justify-content: start; + + @include hover(transform, scale(1.05)); + } + + &__button1 { + display: block; + height: 40px; + width: 40px; + } + + &__label { + color: $color-text-button; + font-size: 15px; + font-weight: 600; + line-height: 40px; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..98aea06bd2 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,40 @@ +.card { + box-sizing: border-box; + border-radius: 16px; + box-shadow: 0 9px 18px 0 rgba(37, 41, 49, 0.03); + cursor: pointer; + + @include on-small-desktop { + width: 264px; + } + + &__img { + display: block; + margin-bottom: 32px; + margin-inline: auto; + + @include on-small-desktop { + margin-bottom: 40px; + } + } + + &__title { + color: $color-text-second; + text-align: center; + font-size: 20px; + font-weight: 600; + line-height: 140%; + margin-bottom: 16px; + } + + &__description { + color: $color-text-third; + text-align: center; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + } + + @include hover(transform, scale(1.1)); +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..d34ca38b4d --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,74 @@ +.contact-us { + &__title { + color: $color-text; + font-size: 32px; + font-weight: 600; + line-height: 150%; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__date { + display: flex; + flex-direction: column; + gap: 40px; + } + + &__label { + color: $color-text; + font-size: 13px; + font-weight: 700; + line-height: normal; + letter-spacing: 3px; + text-transform: uppercase; + opacity: 0.5; + margin-bottom: 8px; + } + + &__link { + text-decoration: none; + color: $color-text; + font-family: 'Open Sans', sans-serif; + font-size: 24px; + font-weight: 600; + line-height: 150%; + + @include hover(color, $color-background-second); + } + + &__wrapper-icon { + display: flex; + gap: 32px; + } + &__icon { + display: block; + height: 32px; + width: 32px; + background-image: url('/src/imagens/facebook.svg'); + background-size: cover; + transition-duration: $time-duration; + + &:hover { + background-image: url('/src/imagens/facebook-hover.svg'); + } + + &--twitter { + background-image: url('/src/imagens/twitter.svg'); + + &:hover { + background-image: url('/src/imagens/twitter-hover.svg'); + } + } + + &--instagram { + background-image: url('/src/imagens/instagram.svg'); + + &:hover { + background-image: url('/src/imagens/instagram-hover.svg'); + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..9357a93f8c --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,39 @@ +.footer { + background-color: $color-background; + padding-block: 80px; + + @include on-tablet { + padding-block: 140px 80px; + } + + @include on-small-desktop { + display: flex; + justify-content: space-between; + padding-block: 0 80px; + } + + &__logo { + display: block; + + @include hover(transform, scale(1.1)); + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 48px; + + @include on-tablet { + justify-content: space-between; + flex-direction: row; + gap: 40px; + margin-top: 24px; + } + + @include on-small-desktop { + gap: 64px; + margin-top: 0; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..c515d81229 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,35 @@ +.header { + background-color: $color-background; + padding-block: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + + @include on-small-desktop { + padding-block: 48px; + } + + &__link { + position: relative; + text-decoration: none; + color: $color-text; + font-size: 13px; + font-weight: 700; + line-height: 28px; + letter-spacing: 3px; + text-transform: uppercase; + + &::after { + position: absolute; + content: ''; + height: 2px; + border-radius: 4px; + width: 100%; + background-color: $color-background-second; + left: 0; + bottom: -8px; + } + + @include hover(color, $color-background-second); + } +} diff --git a/src/styles/blocks/input.scss b/src/styles/blocks/input.scss new file mode 100644 index 0000000000..022718a1d1 --- /dev/null +++ b/src/styles/blocks/input.scss @@ -0,0 +1,38 @@ +.input { + box-sizing: border-box; + height: 41px; + padding-bottom: 17px; + background-color: $color-background; + border: none; + border-bottom: 1px solid $color-text; + color: $color-text; + font-size: 15px; + font-weight: 600; + line-height: normal; + + &__opacity::placeholder { + opacity: 0.7; + } + + &__textarea { + resize: none; + } + + &:hover { + border-bottom: 2px solid $color-background-second; + } + + &:focus { + border-bottom: 2px solid $color-background-second; + color: $color-text; + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + box-shadow: 0 0 0 30px $color-background inset; + -webkit-text-fill-color: $color-text; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..226207825d --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,21 @@ +.menu { + box-sizing: border-box; + height: 100vh; + padding-block: 20px; + background-color: $color-background; + + @include on-small-desktop { + display: none; + } + + &__list { + display: flex; + flex-direction: column; + gap: 30; + margin-top: 50px; + } + + &__link { + font-size: 20px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..662ffad0bd --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,34 @@ +.nav { + &__list { + display: none; + flex-direction: row; + justify-content: center; + margin: 0; + padding: 0; + gap: 48px; + list-style: none; + + @include on-small-desktop { + display: flex; + } + + &--aside { + display: flex; + flex-direction: column; + gap: 30; + margin-top: 50px; + } + } + + &__link { + text-decoration: none; + color: $color-text; + font-size: 13px; + font-weight: 700; + line-height: 28px; + letter-spacing: 3px; + text-transform: uppercase; + + @include hover(color, $color-background-second); + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..2974c0dc88 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,46 @@ +.our-expertise { + background-color: $color-text; + border-radius: 30px; + padding-block: 72px; + text-align: center; + + @include on-tablet { + padding-block: 128px; + } + + &__title { + color: $color-text-second; + text-align: center; + font-size: 44px; + font-weight: 600; + line-height: 120%; + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &__cards { + @include page-grid; + + row-gap: 56px; + + @include on-tablet { + row-gap: 72px; + } + + @include on-small-desktop { + display: flex; + justify-content: space-between; + } + } + + &__card { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..66106f903b --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,27 @@ +.page { + font-family: Poppins, sans-serif; + background-color: $color-background-third; + font-size: 12px; + color: $color-text; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transition: all $time-duration; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/process.scss b/src/styles/blocks/process.scss new file mode 100644 index 0000000000..f87ddeb582 --- /dev/null +++ b/src/styles/blocks/process.scss @@ -0,0 +1,72 @@ +.process { + padding-block: 120px; + + @include on-small-desktop { + padding-block: 251px 151px; + } + + @include page-grid; + + &__content { + grid-column: 1/ -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: span 4; + } + } + + &__sub-title { + color: $color-text-fourth; + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + color: $color-text-second; + font-size: 32px; + font-weight: 600; + line-height: 130%; + margin: 16px 0 24px; + } + + &__description { + color: $color-text-third; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 150%; + margin-bottom: 12px; + } + + &__wrapper { + grid-column: 1/ -1; + margin-top: 36px; + + display: grid; + gap: 24px 30px; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + row-gap: 30px; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + } + + &__card-job { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 1; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..8b2f6accc3 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,39 @@ +.section { + background-color: $color-background; + border-radius: 30px 30px 0 0; + padding-top: 72px; + + @include on-tablet { + padding-top: 180px; + } + + @include page-grid; + + &__send-us-a-message { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 4; + } + + @include on-small-desktop { + grid-column: 1 / span 5; + } + } + + &__contact-us { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 4; + } + + @include on-small-desktop { + grid-column: 7 / span 5; + } + + @include on-the-design { + grid-column: 8 / span 5; + } + } +} diff --git a/src/styles/blocks/send-us-a-message.scss b/src/styles/blocks/send-us-a-message.scss new file mode 100644 index 0000000000..f0c2bbceab --- /dev/null +++ b/src/styles/blocks/send-us-a-message.scss @@ -0,0 +1,46 @@ +.send-us-a-message { + &__title { + font-size: 32px; + font-weight: 600; + line-height: 130%; + margin-bottom: 48px; + + @include on-tablet { + line-height: 150%; + margin-bottom: 56px; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: 40px; + } + + &__button { + box-sizing: border-box; + text-align: center; + height: 50px; + width: 100%; + font-size: 15px; + color: $color-text; + font-weight: 600; + line-height: normal; + border: 1px solid $color-background-second; + background-color: $color-background-second; + border-radius: 8px; + cursor: pointer; + margin: 16px 0 80px; + transition-duration: $time-duration; + + @include on-tablet { + margin-bottom: 120px; + } + + &:hover { + border-color: $color-text; + background-color: $color-text; + color: $color-background; + } + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..3989e5cd7a --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,55 @@ +.slider { + display: flex; + align-items: end; + + &__content { + margin-left: 20px; + margin-bottom: 24px; + display: flex; + flex-direction: column; + gap: 16px; + + @include on-tablet { + margin: 0 0 32px 41px; + } + + @include on-small-desktop { + flex-direction: row; + gap: 24px; + align-items: center; + margin: 0 0 66px 78px; + } + + @include on-the-design { + margin-left: 48px; + } + } + + &__icons { + display: flex; + gap: 16px; + } + + &__icon { + display: block; + height: 32px; + width: 32px; + + @include hover(transform, scale(1.05)); + } + + &__title { + font-size: 13px; + font-weight: 700; + letter-spacing: 3px; + text-transform: uppercase; + margin-bottom: 8px; + } + + &__desc { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + } +} diff --git a/src/styles/blocks/strategic-agency.scss b/src/styles/blocks/strategic-agency.scss new file mode 100644 index 0000000000..f982934b1d --- /dev/null +++ b/src/styles/blocks/strategic-agency.scss @@ -0,0 +1,93 @@ +.strategic-agency { + background-color: $color-background; + border-radius: 0 0 30px 30px; + + @include page-grid; + + @include on-small-desktop { + height: 680px; + position: relative; + } + + &__content { + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__title { + font-size: 52px; + font-weight: 600; + line-height: 120%; + letter-spacing: -2px; + margin-top: 48px; + + @include on-tablet { + margin-top: 56px; + font-size: 64px; + line-height: 106%; + } + + @include on-small-desktop { + margin-top: 120px; + } + } + + &__description { + font-family: 'Open Sans', sans-serif; + margin-top: 32px; + font-size: 18px; + font-weight: 400; + line-height: 150%; + + @include on-tablet { + margin-top: 24px; + } + + @include on-small-desktop { + margin-top: 32px; + } + } + + &__button { + margin-top: 72px; + margin-bottom: 48px; + + @include on-tablet { + margin-top: 56px; + margin-bottom: 147px; + } + + @include on-small-desktop { + margin-top: 83px; + margin-bottom: 205px; + } + + &:hover { + background-color: $color-text; + color: $color-background; + } + } + + &__slider { + background-image: url('/src/imagens/slide1.png'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + grid-column: 1 / -1; + width: 100%; + height: 390px; + border-radius: 30px; + display: flex; + transition: transform 0.5s ease; + + @include on-small-desktop { + grid-column: 7; + position: absolute; + height: 680px; + border-radius: 30px 0; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..e558589776 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,53 @@ +.testimonials { + padding-bottom: 120px; + + @include on-tablet { + padding-bottom: 148px; + } + + @include on-small-desktop { + padding-bottom: 186px; + } + + &__sub-title { + color: $color-text-fourth; + font-size: 13px; + font-weight: 700; + line-height: normal; + letter-spacing: 3px; + text-transform: uppercase; + } + + &__title { + color: $color-text-second; + font-size: 32px; + font-weight: 600; + line-height: 150%; + margin: 16px 0 48px; + } + + &__wrapper { + @include page-grid; + + row-gap: 24px; + + @include on-tablet { + row-gap: 30px; + justify-content: center; + } + + @include on-small-desktop { + display: flex; + justify-content: space-between; + } + } + + &__card { + grid-column: 1 / -1; + + @include on-tablet { + margin: 0 auto; + max-width: 360px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..f652209f07 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,34 @@ +.top-bar { + display: flex; + align-items: center; + + &__logo { + display: block; + height: 28px; + width: 46px; + margin-right: 22px; + + @include hover(transform, scale(1.1)); + } + + &__icon { + display: block; + margin-left: 12px; + height: 24px; + width: 24px; + background-image: url('/src/imagens/logo1.png'); + background-size: cover; + + @include on-small-desktop { + display: none; + } + + &--close { + background-image: url('/src/imagens/icon-close1.png'); + } + } + + &__link--line { + display: block; + } +} diff --git a/src/styles/blocks/vision-passion-results.scss b/src/styles/blocks/vision-passion-results.scss new file mode 100644 index 0000000000..8c3775906c --- /dev/null +++ b/src/styles/blocks/vision-passion-results.scss @@ -0,0 +1,72 @@ +.vision-passion-results { + background-color: $color-text; + padding-block: 72px; + + @include page-grid; + + @include on-tablet { + background-image: url('/src/imagens/shapes1.png'); + background-size: cover; + background-position: center; + padding-block: 200px; + } + + &__title { + grid-column: 1 / -1; + color: $color-text-second; + text-align: center; + font-size: 44px; + font-weight: 600; + line-height: 120%; + margin-bottom: 24px; + + @include on-tablet { + tab-size: 52px; + } + + @include on-small-desktop { + line-height: 150%; + grid-column: 2 / -2; + } + + @include on-the-design { + grid-column: 3 / -3; + } + } + + &__description { + grid-column: 1 / -1; + color: $color-text-third; + text-align: center; + font-family: 'Open Sans', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 150%; + + @include on-tablet { + tab-size: 24px; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-the-design { + grid-column: 3 / -3; + } + } + + &__button { + grid-column: 1 / -1; + margin-top: 56px; + height: 56px; + + @include on-tablet { + margin: 64px auto 0; + } + + &:hover { + background-color: $color-background; + } + } +} diff --git a/src/styles/blocks/who-we-are.scss b/src/styles/blocks/who-we-are.scss new file mode 100644 index 0000000000..5e3e335466 --- /dev/null +++ b/src/styles/blocks/who-we-are.scss @@ -0,0 +1,44 @@ +.who-we-are { + background-color: $color-background-third; + padding-block: 120px; + + @include on-tablet { + padding-block: 148px; + } + + @include page-grid; + + &__title { + grid-column: 1 / -1; + text-align: center; + color: $color-text-second; + font-size: 32px; + font-weight: 600; + line-height: 150%; + } + + &__description { + grid-column: 1 / -1; + text-align: center; + font-family: 'Open Sans', sans-serif; + color: $color-text-third; + font-size: 22px; + font-weight: 600; + line-height: 150%; + margin-top: 24px; + width: 100%; + + @include on-tablet { + margin-top: 16px; + font-size: 24px; + } + + @include on-small-desktop { + grid-column: 2 / -2; + } + + @include on-the-design { + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/utils/extends.scss b/src/styles/utils/extends.scss new file mode 100644 index 0000000000..0bb04c4915 --- /dev/null +++ b/src/styles/utils/extends.scss @@ -0,0 +1,10 @@ +%h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +* { + margin: 0; + padding: 0; + scroll-behavior: smooth; +} diff --git a/src/styles/utils/mixin.scss b/src/styles/utils/mixin.scss new file mode 100644 index 0000000000..74bbd5da64 --- /dev/null +++ b/src/styles/utils/mixin.scss @@ -0,0 +1,78 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} $time-duration; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-the-design { + @media (min-width: $the-design-min-width) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: $large-screens-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + } + + @include on-the-design { + padding-inline: 227px; + } + + @include on-large-screens { + padding-inline: 707px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --columns: 12; + } +} + +.container { + @include content-padding-inline; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..d28584b55c --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,14 @@ +$color-background: #2c2c2c; +$color-background-second: #2060f6; +$color-background-third: #f2f6fa; +$color-text: #fff; +$color-text-second: #253757; +$color-text-third: #6c788b; +$color-text-fourth: #c0cdd7; +$color-text-button: #334563; +$tablet-min-width: 640px; +$small-desktop-min-width: 1024px; +$desktop-min-width: 1280px; +$the-design-min-width: 1600px; +$large-screens-min-width: 2560px; +$time-duration: 0.3s;