diff --git a/README.md b/README.md index 93d9738cc4..948b09f5ac 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Adapt the page to the following screens: 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_dia/). + [DEMO LINK](https://MannyShussan.github.io/layout_dia/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/burger-menu.png b/src/images/burger-menu.png new file mode 100644 index 0000000000..13432252ed Binary files /dev/null and b/src/images/burger-menu.png differ diff --git a/src/images/contact-us/facebook-logo.png b/src/images/contact-us/facebook-logo.png new file mode 100644 index 0000000000..0c16fc4152 Binary files /dev/null and b/src/images/contact-us/facebook-logo.png differ 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/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/header-photo-block/header-hand-watch.png b/src/images/header-photo-block/header-hand-watch.png new file mode 100644 index 0000000000..80e0ab4874 Binary files /dev/null and b/src/images/header-photo-block/header-hand-watch.png differ diff --git a/src/images/logo/air-logo.png b/src/images/logo/air-logo.png new file mode 100644 index 0000000000..1573d0db64 Binary files /dev/null and b/src/images/logo/air-logo.png differ diff --git a/src/images/our-expertise/image 1.png b/src/images/our-expertise/image 1.png new file mode 100644 index 0000000000..164a7e1a4d Binary files /dev/null and b/src/images/our-expertise/image 1.png differ diff --git a/src/images/our-expertise/image 2.png b/src/images/our-expertise/image 2.png new file mode 100644 index 0000000000..0304787c66 Binary files /dev/null and b/src/images/our-expertise/image 2.png differ diff --git a/src/images/our-expertise/image 3.png b/src/images/our-expertise/image 3.png new file mode 100644 index 0000000000..f7c75582ee Binary files /dev/null and b/src/images/our-expertise/image 3.png differ diff --git a/src/images/services/learn-more.png b/src/images/services/learn-more.png new file mode 100644 index 0000000000..fb2e3785cf Binary files /dev/null and b/src/images/services/learn-more.png differ diff --git a/src/images/slider/arrow-left.png b/src/images/slider/arrow-left.png new file mode 100644 index 0000000000..8cbfd81638 Binary files /dev/null and b/src/images/slider/arrow-left.png differ diff --git a/src/images/slider/arrow-right.png b/src/images/slider/arrow-right.png new file mode 100644 index 0000000000..5c26fad5dd Binary files /dev/null and b/src/images/slider/arrow-right.png differ diff --git a/src/images/testimonials/Rectangle-blue.png b/src/images/testimonials/Rectangle-blue.png new file mode 100644 index 0000000000..0c0eb1fa03 Binary files /dev/null and b/src/images/testimonials/Rectangle-blue.png differ diff --git "a/src/images/testimonials/\342\200\234.png" "b/src/images/testimonials/\342\200\234.png" new file mode 100644 index 0000000000..48e3264991 Binary files /dev/null and "b/src/images/testimonials/\342\200\234.png" differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..bc2933ee01 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + Dia + + + + + -

Dia

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

Strategic Agency

+

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

+ +
+
+
+ hand watch +
+
+ + previous photo + + + next photo + +
+
+

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

+
+
+
+ image 1 +
+

Branding

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

Communication

+

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

+
+ +
+
+ image 1 +
+

Strategy

+

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

+
+
+
+
+ + +
+
+
+

Services

+

+ Air is a full service creative agency +

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

001

+
+
+ Brand Development +
+ Copywriting +
+ Logo & Webite Design +
+ Packaging +
+
+
+ learn-more +
+ +
+
+
+
+

002

+
+
+ Сontent Production +
+ Graphic Design +
+ Video Production +
+ Post Production +
+
+
+ learn-more +
+ +
+
+
+
+

003

+
+
+ Marketing Strategy +
+ Email Marketing +
+ Paid Advertising +
+ Blog Content & SEO +
+
+
+ learn-more +
+ +
+
+
+
+

004

+
+
+ Digital Communications +
+ Influencer Marketing +
+ Product Placements +
+ Strategic Partnerships +
+
+
+ learn-more +
+ +
+
+
+
+
+ + +
+
+

Testimonials

+
What people say
+
+
+
+ avatar +
+
+ image + 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 +
+
+
+
+
+ avatar +
+
+ image + AIR is an exceptional agency that leads with creative talent, + first-class account servicing. +
+
+
Azadeh Hawkins
+
+ Hawkins Consulting +
+
+
+
+
+ avatar +
+
+ image + 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 index 45cdd54008..9a2424e2f3 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -4,3 +4,4 @@ font-weight: normal; font-style: normal; } + diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..b35aab2727 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,49 @@ +.about-us{ +@include page-grid; + +text-align: center; + +padding-block: 120px; + +@include on-tablet { + padding-block: 148px; +} + + &__title{ + margin-bottom: 24px; + grid-column: 1 / -1; + + @include on-small-desktop{ + grid-column: 2 / -2; + } + + @include on-large-desktop{ + grid-column: 3 / -3; + } + + & h2{ + color: #253757; + font-family: poppins, Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 150%; + } + } + + &__information{ + font-family: "open sans", Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 24px; + line-height: 150%; + color: #6C788B; + grid-column: 1 / -1; + + @include on-small-desktop{ + grid-column: 2 / -2; + } + + @include on-large-desktop{ + grid-column: 3 / -3; + } + } +} diff --git a/src/styles/blocks/components.scss b/src/styles/blocks/components.scss new file mode 100644 index 0000000000..1a5f166d3d --- /dev/null +++ b/src/styles/blocks/components.scss @@ -0,0 +1,69 @@ +.components{ + font-weight: 600; + padding-block: 72px; + justify-items: center; + + &--background{ + background: url('../images/Shapes.png') no-repeat center center; + background-color: #fff; + } + + @include page-grid; + + @include on-tablet{ + padding-block: 200px; + } + + &__title{ + font-size: 44px; + line-height: 120%; + text-align: center; + color: #253757; + grid-column: 1 / -1; + margin-bottom: 24px; + + @include on-tablet{ + font-size: 52px; + + } + + @include on-small-desktop{ + line-height: 150%; + grid-column: 3 / -3; + } + } + + &__information{ + font-family: "open sans", Arial, Helvetica, sans-serif; + font-size: 22px; + line-height: 150%; + text-align: center; + color: #6C788B; + margin-bottom: 56px; + grid-column: 1 / -1; + + @include on-tablet{ + font-size: 24px; + margin-bottom: 64px; + } + + @include on-small-desktop{ + grid-column: 3 / -3; + } + } + + & button{ + @extend %button; + + grid-column: 1 / -1; + + @include on-tablet{ + grid-column: 2 / -2; + } + + @include on-small-desktop{ + grid-column: 3 / -3; + } + + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..95843e635b --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,153 @@ +.footer { + &__wrapper { + height: 100%; + padding: 72px 0 80px; + background-color: #2c2c2c; + border-radius: 20px 20px 0 0; + color: #fff; + } + + @include page-grid; + + &__message { + display: flex; + flex-direction: column; + + grid-column: 1 /-1; + + & button { + @extend %button; + } + + &-title { + font-size: 32px; + font-weight: 600; + line-height: 150%; + } + + &-input { + background-color: #2c2c2c; + height: 41px; + width: 100%; + box-sizing: border-box; + margin-bottom: 44px; + border: hidden; + border-bottom: 1px solid white; + color: white; + font-size: 15px; + line-height: 150%; + font-weight: 600; + outline: 0; + + &::placeholder { + color: white; + opacity: 0.7; + } + + &:hover { + border-bottom: 1px solid #144ed4; + } + } + } + + &__contact { + grid-column: 1 / -1; + + &-title { + font-size: 32px; + font-weight: 600; + line-height: 150%; + color: #fff; + } + + &-information { + & h3 { + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + font-weight: 700; + opacity: 0.5; + } + + & a, + & p { + margin: 0; + text-decoration: none; + font-size: 24px; + color: #fff; + font-weight: 600; + } + + &:nth-of-type(-n + 2) p { + margin-bottom: 40px; + } + + &-image { + object-fit: contain; + object-position: center; + width: 32px; + height: 32px; + margin-right: 32px; + } + } + } + + &__menu { + display: flex; + flex-direction: column; + margin-top: 80px; + grid-column: span 2; + + @include on-tablet { + margin-top: 139px; + grid-column: 1 / -1; + } + + @include on-small-desktop { + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + &-logo { + display: block; + width: 48px; + height: 28px; + } + + &-list { + margin-top: 48px; + padding: 0; + width: 100%; + display: flex; + flex-direction: column; + justify-content: start; + + @include on-tablet { + flex-direction: row; + + & :not(:last-child) { + margin-right: 64px; + } + } + + @include on-small-desktop { + justify-content: end; + } + } + + &-link { + color: #fff; + text-decoration: none; + } + + &-item { + list-style: none; + size: 13px; + line-height: 150%; + letter-spacing: 3px; + font-weight: 700; + margin: 0 0 24px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..0331deae2c --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,141 @@ +.header { + // display: none !important; + width: 100%; + height: 893px; + background-color: $bg-header; + border-radius: 0 0 30px 30px ; + position: relative; + + &__information{ + margin-block: 48px; + color: white; + + @include on-small-desktop{ + margin-block: 164px; + max-width: 490px; + } + + &-title{ + font-size: 53px; + line-height: 120%; + font-weight: 600; + letter-spacing: -2px; + font-family: poppins, arial, sans-serif; + margin-bottom: 32px; + } + + &-text{ + font-family: "open sans", Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + max-width: 362px; + margin-bottom: 72px; + } + + &-learn-more{ + height: 50px; + width: 280px; + background-color: #2060F6; + border-radius: 8px; + color: white; + } + } + + &__photo-block{ + position: absolute; + height: 390px; + width: 100%; + bottom: 0; + border-radius: 30px ; + right: 0; + overflow: hidden; + + @include on-small-desktop{ + height: 680px; + width: 49%; + border-radius: 30px 0; + } + + @include on-large-desktop{ + width: 43%; + } + } + + &__photo{ + object-fit: cover; + height: 390px; + width: 100%; + position: relative; + + &-change{ + position: absolute; + display: flex; + flex-direction: column; + left: 20px; + bottom: 24px; + + @include on-small-desktop{ + flex-direction: row; + } + + &--text{ + color: #fff; + margin-top: 16px; + font-size: 14px; + font-family: sans-serif; + font-weight: 400; + line-height: 140%; + + @include on-small-desktop{ + margin-left: 24px; + } + + & span{ + font-family: poppins, Arial, Helvetica, sans-serif; + font-size: 13px; + line-height: 150%; + letter-spacing: 3px; + font-weight: 700; + text-transform: uppercase; + + } + } + + &--wrapper{ + display: flex; + gap: 18px; + align-items: center; + + } + + &--decoration{ + display: flex; + align-items: center; + justify-content: center; + height: 32px; + width: 32px; + background-color: #fff; + border-radius: 50%; + } + + // &--left{ + + // } + + // &--right{ + + // } + } + + @include on-small-desktop{ + height: 680px; + + } + + + } + + + +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..5ca360b51c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,70 @@ +.nav{ + + &__burger-menu{ + display: block; + left: 101px; + position: absolute; + top: 50%; + + @include on-small-desktop{ + display: none; + + } + } + + + &__wrapper { + padding-top: 21px; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + } + + &__logo { + width: 46px; + height: 28px; + } + + &__list { + display: none; + justify-content: space-between; + list-style: none; + + @include on-small-desktop{ + display: flex; + } + } + + &__item{ + &:not(:first-child){ + padding-left: 48px; + } + + &--hire-us{ + position: relative; + } + + &--hire-us::after{ + position: absolute; + content: ''; + left: 0; + right: 0; + bottom: -8px; + border-bottom: 2px solid #2060F6; + border-radius: 4px; + } + } + + &__link { + text-decoration: none; + color: #FFF; + text-transform: uppercase; + font-size: 13px; + line-height: 150%; + } + +} + + + diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..8ec78e5ed8 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,80 @@ +.our-expertise { + text-align: center; + font-size: 44px; + font-weight: 600; + grid-column: 1 / -1; + + &__wrapper { + background-color: #fff; + border-radius: 30px; + + padding: 72px 0; + + @include on-tablet { + padding-top: 128px 0 128px; + } + } + + &__category { + @include page-grid; + + justify-items: center; + + &--align-left { + justify-self: left; + } + + &--align-right { + justify-self: right; + } + + &--wrapper { + grid-column: span 2; + display: flex; + align-items: center; + flex-direction: column; + cursor: pointer; + @include hover(scale, 1.1); + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-small-desktop { + width: 214px; + grid-column: span 4; + } + + @include on-large-desktop { + width: 264px; + grid-column: span 4; + } + } + + &--photo { + margin: 56px 0 32px; + border-radius: 16px; + overflow: hidden; + width: 166px; + height: 166px; + } + + &--title { + font-family: poppins, Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 20px; + line-height: 150%; + margin-bottom: 16px; + color: #253757; + } + + &--information { + color: #6c788b; + font-family: 'open sans', Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + text-align: center; + } + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..26287b06a4 --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,148 @@ + + +.service{ + @include page-grid; + + padding-top: 120px; + font-family: poppins, Arial, Helvetica, sans-serif; + + @include on-tablet{ + padding-top: 148px; + } + + @include on-small-desktop{ + padding-top: 251px; + } + + & p{ + font-size: 13px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + color: #C0CDD7; + } + + + &__title{ + font-size: 32px; + line-height: 130%; + font-weight: 600; + color: #253757; + + &--column{ + grid-column: 1 / -1; + + @include on-tablet{ + grid-column: span 3; + } + + @include on-small-desktop{ + grid-column: span 4; + } + } + } + + &__information{ + font-size: 14px; + line-height: 150%; + font-weight: 400; + font-family: "open sans", Arial, Helvetica, sans-serif; + color: #6C788B; + padding-bottom: 48px; + } + + &--items-subgrid{ + grid-column: 1 / -1; + display: grid; + grid-template-columns: subgrid; + + @include on-tablet{ + grid-column: 1 / -1; + + &>:nth-child(2n){ + transform: translateY(-50%); + } + } + + @include on-small-desktop{ + grid-column: 7 / -1; + } + + + } + + @each $number in '1' '2' '3' '4'{ + &__item-#{$number} { + grid-column: 1 / -1; + + @include on-tablet{ + grid-column: span 3; + } + + box-sizing: border-box; + background-color: #fff; + border-radius: 16px; + padding: 32px; + margin: 24px 0; + filter: drop-shadow(#25293108 0 9px 18px); + + + } + } + + &__item--number{ + display: flex; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba(32, 96, 246, .1); + + & p{ + color: #2060F6; + font-size: 13px; + line-height: 150%; + font-weight: 600; + align-content: center; + margin: auto; + } + } + + &__item--jobs{ + padding-top: 24px; + padding-bottom: 32px; + font-size: 13px; + line-height: 150%; + font-weight: 600; + font-family: "open sans", Arial, Helvetica, sans-serif; + color: #6C788B; + } + + &__item--learn-more{ + display: flex; + align-items: center; + + &-button{ + width: 40px; + height: 40px; + background-color: #2060F6; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + + & img{ + width: 16px; + height: 16px; + } + + } + + & label{ + padding-left: 16px; + font-size: 15px; + line-height: 150%; + font-weight: 600; + color: #334563; + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 0000000000..f03e46f3bf --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,143 @@ +.testimonials { + & p { + font-size: 13px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + color: #c0cdd7; + } + + &__title { + color: #253757; + font-size: 32px; + line-height: 150%; + font-weight: 600; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + } + + @include on-small-desktop { + margin-bottom: 85px; + } + } + + &__cards { + @include page-grid; + } + + &__card { + height: 456px; + background-color: #fff; + border-radius: 16px; + padding: 0 42px 32px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + font-family: 'open sans', Arial, Helvetica, sans-serif; + font-weight: 600; + font-size: 13px; + line-height: 150%; + text-align: center; + grid-column: 1 / -1; + margin: 24px 0; + cursor: pointer; + @include hover(scale, 1.1); + + @include on-tablet { + padding: 32px 98px; + margin: 30px 0; + } + + @include on-small-desktop { + grid-column: span 4; + padding: 32px 45px; + } + + @include on-large-desktop { + padding: 32px 56px; + } + + &-photo { + margin: 75px 67px; + position: relative; + z-index: 1; + + @include on-tablet { + padding-bottom: 75px 67px; + } + + & img { + width: 110px; + height: 110px; + border-radius: 50%; + object-fit: cover; + object-position: center top; + + @include on-tablet { + width: 140px; + height: 140px; + } + + @include on-small-desktop { + width: 110px; + height: 110px; + } + + @include on-large-desktop { + width: 140px; + height: 140px; + } + } + + &::before { + position: absolute; + content: ''; + display: block; + z-index: -1; + left: -25px; + top: -40px; + background: url(../images/testimonials/Rectangle-blue.png) no-repeat; + width: 90px; + height: 109px; + } + + &::after { + position: absolute; + content: ''; + display: block; + z-index: -1; + right: -25px; + bottom: -40px; + background: url(../images/testimonials/Rectangle-blue.png) no-repeat; + width: 90px; + height: 109px; + } + } + + &-comment { + display: flex; + flex-direction: column; + align-items: center; + + color: #6c788b; + + & img { + padding-bottom: 8px; + } + } + + &-name { + color: #253757; + } + + &-profession { + color: #c0cdd7; + letter-spacing: 3px; + font-weight: 700; + font-family: poppins, Arial, Helvetica, sans-serif; + } + } +} 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/page.scss b/src/styles/page.scss new file mode 100644 index 0000000000..1afc8ae006 --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,10 @@ +.page{ + min-width: 320px; + font-family: poppins, Arial, Helvetica, sans-serif; + scroll-behavior: smooth; +} + +body { + background: $c-gray; + margin: 0; +} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..c0a2e06d75 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,14 @@ +@import 'utils'; +@import 'fonts'; +@import 'typography'; +@import './page'; +@import './blocks/header'; +@import './blocks/nav'; +@import './blocks/about-us'; +@import './blocks/our-expertise'; +@import './blocks/services'; +@import './blocks/testimonials'; +@import './blocks/components'; +@import './blocks/footer'; + + diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3e..9710bb61e8 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -2,3 +2,12 @@ font-family: Roboto, sans-serif; font-weight: 400; } + +%button{ + width: 264px; + height: 56px; + border-radius: 8px; + background-color: #2060F6; + color: #fff; + border: 0; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..1386246558 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,76 @@ #{$_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-large-desktop { + @media (min-width: $large-desktop-min-width){ + @content; + } +} + +@mixin page-grid { + --column: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--column), 1fr); + + @include on-tablet { + --column: 6; + + column-gap: 30px; + } + + @include on-small-desktop { + --column: 12; + + column-gap: 20px; + } + + @include on-large-desktop { + --column: 12; + + column-gap: 30px; + } +} + +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 41px; + } + + @include on-small-desktop { + padding-inline: 54px; + margin-inline: auto; + max-width: 1200px; + } + + @include on-large-desktop { + padding-inline: 227px; + + } + +} + +.block-margin{ + margin-block: 120px; + + @include on-tablet { + margin-block: 148px; + } + +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..946caf5da7 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,5 @@ $c-gray: #eee; +$bg-header: #2C2C2C; +$tablet-min-width: 640px; +$small-desktop-min-width: 1024px; +$large-desktop-min-width: 1600px;