diff --git a/src/index.html b/src/index.html index 984f29cc75..abf23e646d 100644 --- a/src/index.html +++ b/src/index.html @@ -15,6 +15,18 @@ rel="preconnect" href="https://fonts.gstatic.com" /> + + + hire us -
-

Strategic Agency

+
+

Strategic Agency

+ +

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

+ + + Learn more + +
+ +
+ slide +
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..aa824a4847 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,19 @@ +.button { + display: block; + height: 50px; + font-family: Poppins, sans-serif; + font-size: 15px; + font-weight: 600; + line-height: 50px; + text-align: center; + color: #fff; + text-decoration: none; + background-color: #2060f6; + border-radius: 8px; + transition: 300ms; + + &:hover { + transition: 300ms; + background-color: #143b96; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 6f67120f8d..50bd8771a4 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -1,8 +1,52 @@ +@use '../utils/mixins' as *; + .header { + position: relative; + overflow-x: hidden; background-color: #2c2c2c; - padding: 20px 20px 48px; + border-radius: 0 0 30px 30px; + + @include page-grid; + + &__info-block { + padding: 0 20px 48px; + grid-column: span 2; + + @include page-grid; + + @include for-tablet { + padding: 0 20px 147px; + grid-column: span 6; + } + + @include for-desktop { + display: block; + padding: 120px 0 0; + grid-column: span 6; + } + } + + &__navigation { + padding: 20px 20px 0; + margin-bottom: 48px; + + grid-column: span 2; + + @include for-tablet { + padding: 20px 0 0; + margin-bottom: 56px; + grid-column: span 6; + } + + @include for-desktop { + padding: 48px 0 0; + margin-bottom: 48px; + grid-column: span 12; + } + } &__title { + margin-bottom: 32px; font-family: Poppins, sans-serif; font-size: 52px; font-weight: 600; @@ -10,9 +54,82 @@ letter-spacing: -2px; text-align: left; color: #fff; + + grid-column: span 2; + + @include for-tablet { + margin-bottom: 24px; + font-size: 64px; + line-height: 68px; + grid-column: span 6; + } + + @include for-desktop { + margin-bottom: 32px; + grid-column: span 4; + } } - &__navigation { - margin-bottom: 48px; + &__paragraph { + margin-bottom: 72px; + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: #fff; + + grid-column: span 2; + + @include for-tablet { + margin-bottom: 56px; + grid-column: span 4; + } + + @include for-desktop { + margin-bottom: 83px; + grid-column: span 5; + } + } + + &__button { + grid-column: span 2; + + @include for-tablet { + grid-column: span 3; + } + + @include for-desktop { + grid-column: span 3; + } + } + + &__slider-block { + overflow: hidden; + width: 100%; + height: 390px; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + height: 680px; + grid-column: span 6; + } + } + + &__slider-image { + position: absolute; + left: 0; + border-radius: 30px; + width: 100%; + height: 390px; + object-fit: cover; + + @include for-desktop { + left: auto; + height: 680px; + } } } diff --git a/src/styles/blocks/hire-us.scss b/src/styles/blocks/hire-us.scss deleted file mode 100644 index e7625017a8..0000000000 --- a/src/styles/blocks/hire-us.scss +++ /dev/null @@ -1,26 +0,0 @@ -.hire-us { - width: 70px; - display: inline-block; - font-family: Poppins, sans-serif; - font-size: 13px; - font-weight: 700; - line-height: 19.5px; - letter-spacing: 3px; - text-align: center; - text-transform: uppercase; - text-decoration: none; - color: #fff; - transition: 300ms; - - &__blue-line { - margin-top: 7px; - width: 67px; - height: 2px; - background-color: #2060f6; - } - - &:hover > &__blue-line { - transition: 300ms; - background-color: #1845ad; - } -} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss index 8c3245c651..99bbe2d62f 100644 --- a/src/styles/blocks/navigation.scss +++ b/src/styles/blocks/navigation.scss @@ -24,5 +24,26 @@ width: 18px; height: 8px; } + + &--hire-us { + display: inline-block; + 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; + text-decoration: none; + padding-bottom: 7px; + border-bottom: 2px solid #2060f6; + transition: 300ms; + + &:hover { + transform: 300ms; + border-bottom: 2px solid #153fa3; + } + } } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 2f861d74ff..f9b188c253 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -3,4 +3,4 @@ @import 'typography'; @import './blocks/header'; @import './blocks/navigation'; -@import './blocks/hire-us'; +@import './blocks/button'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..852cfd63ec 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,42 @@ #{$_property}: $_toValue; } } + +@mixin visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@mixin for-tablet() { + @media (min-width: 640px) and (max-width: 1024px) { + @content; + } +} + +@mixin for-desktop() { + @media (min-width: 1024px) { + @content; + } +} + +@mixin page-grid { + display: grid; + justify-content: center; + grid-template-columns: repeat(2, minmax(130px, 180px)); + column-gap: 20px; + + @include for-tablet { + grid-template-columns: repeat(6, 68px); + column-gap: 30px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 58px); + column-gap: 20px; + } +}