diff --git a/README.md b/README.md index 93d9738cc4..f677634021 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://VasylPylypchynets.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/logo/Air-log.png b/src/images/logo/Air-log.png new file mode 100644 index 0000000000..db25e66b9e Binary files /dev/null and b/src/images/logo/Air-log.png differ diff --git a/src/images/menu/icon-close.png b/src/images/menu/icon-close.png new file mode 100644 index 0000000000..125771febf Binary files /dev/null and b/src/images/menu/icon-close.png differ diff --git a/src/images/menu/nav__switcher.png b/src/images/menu/nav__switcher.png new file mode 100644 index 0000000000..13432252ed Binary files /dev/null and b/src/images/menu/nav__switcher.png differ diff --git a/src/images/our-expertise/branding.png b/src/images/our-expertise/branding.png new file mode 100644 index 0000000000..ab9d68fb27 Binary files /dev/null and b/src/images/our-expertise/branding.png differ diff --git a/src/images/our-expertise/communication.png b/src/images/our-expertise/communication.png new file mode 100644 index 0000000000..2205726f1c Binary files /dev/null and b/src/images/our-expertise/communication.png differ diff --git a/src/images/our-expertise/strategy.png b/src/images/our-expertise/strategy.png new file mode 100644 index 0000000000..2fb903e377 Binary files /dev/null and b/src/images/our-expertise/strategy.png differ diff --git a/src/images/service/arrow.svg b/src/images/service/arrow.svg new file mode 100644 index 0000000000..c535a27bf9 --- /dev/null +++ b/src/images/service/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/slider/arrow-left.svg b/src/images/slider/arrow-left.svg index 66daed19a5..2055a17bbc 100644 --- a/src/images/slider/arrow-left.svg +++ b/src/images/slider/arrow-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/arrow-right.svg b/src/images/slider/arrow-right.svg index e9ddf85873..71e16adb61 100644 --- a/src/images/slider/arrow-right.svg +++ b/src/images/slider/arrow-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/slider/slider-photo.png b/src/images/slider/slider-photo.png new file mode 100644 index 0000000000..7fc390324c Binary files /dev/null and b/src/images/slider/slider-photo.png differ diff --git a/src/index.html b/src/index.html index 9a8c6db8f9..ad7940b46d 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + -

Dia

+
+
+ + + + nav switcher + + + + + + Hire us + +
+ +
+
+

Strategic Agency

+ +

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

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

+ +
+
+ branding-photo +

Branding

+

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

+
+ +
+ communication-photo +

Branding

+

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

+
+ +
+ strategy-photo +

Branding

+

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

+
+
+
+
+ +
+
+
+

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 +
+
+
+
+
diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..c9b438595c --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,33 @@ +.about-us { + @include content-inline; + + &__content { + display: flex; + flex-direction: column; + row-gap: 16px; + margin-block: 120px; + + @include on-tablet { + margin-block: 148px; + } + + &-title { + margin: 0; + font-size: 32px; + font-weight: 600; + line-height: 48px; + text-align: center; + color: #253757; + } + + &-text { + margin: 0; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 33px; + text-align: center; + color: #6c788b; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..64710ae8d3 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,188 @@ +.header { + position: relative; + background-color: #2c2c2c; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + height: 893px; + + @include on-small-desktop { + height: 800px; + } + + &__container { + @include content-inline; + } + + &__top-bar { + position: relative; + padding-top: 20px; + display: flex; + place-content: center space-between; + align-items: center; + + @include content-inline; + + @include on-small-desktop { + padding-top: 50px; + } + } + + &__logo { + width: 46px; + height: 28px; + } + + &__menu-link { + @include on-small-desktop { + display: none; + } + } + + &__menu-switcher { + position: absolute; + width: 18px; + height: 8px; + left: 80px; + + @include on-small-desktop { + display: none; + } + } + + &__nav { + display: none; + + &-lists { + display: flex; + list-style: none; + justify-content: space-between; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-transform: uppercase; + column-gap: 48px; + color: #fff; + } + + &-link { + position: relative; + text-decoration: none; + cursor: pointer; + + &::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + + &:hover::after { + width: 100%; + } + } + + @include on-small-desktop { + display: block; + } + } + + &__hire-us { + position: relative; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: center; + color: #fff; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + + @include on-small-desktop { + width: 0; + transition-duration: 0.3s; + transition-timing-function: ease-in; + } + } + + @include on-small-desktop { + &:hover::after { + width: 100%; + } + } + } + + &__bottom { + margin-top: 48px; + width: 100%; + + @include on-tablet { + margin-top: 56px; + width: 470px; + } + + @include on-small-desktop { + margin-top: 164px; + } + + @include on-desktop { + width: 490px; + } + + &-title { + margin: 0; + padding: 0; + font-size: 52px; + font-weight: 600; + line-height: 62.4px; + letter-spacing: -2px; + text-align: left; + color: #fff; + + @include on-tablet { + font-size: 64px; + line-height: 68px; + } + } + + &-description { + margin: 0; + padding: 0; + margin-top: 32px; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 27px; + text-align: left; + color: #fff; + } + + &-button { + margin-top: 72px; + + @include on-tablet { + margin-top: 56px; + } + + @include on-small-desktop { + margin-top: 83px; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..d05ec4729f --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,65 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #2c2c2c; + font-weight: 700; + z-index: 1; + overflow: auto; + + &__nav { + margin-bottom: 48px; + } + + &__content { + @include content-inline; + } + + &__top { + margin-bottom: 32px; + + position: sticky; + top: 0; + z-index: 1; + } + + &__bottom { + margin-top: 50px; + } + + &__list { + list-style: none; + padding: 0; + display: flex; + flex-direction: column; + row-gap: 16px; + } + + &__link { + position: relative; + text-decoration: none; + font-family: Poppins, Arial, Helvetica, sans-serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + letter-spacing: 3px; + color: #fff; + cursor: pointer; + + &::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + border-radius: 4px; + top: 28px; + left: 0; + background-color: #2060f6; + transition-duration: 0.3s; + transition-timing-function: ease-out; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/our-expertise.scss b/src/styles/blocks/our-expertise.scss new file mode 100644 index 0000000000..8a2c439972 --- /dev/null +++ b/src/styles/blocks/our-expertise.scss @@ -0,0 +1,79 @@ +.our-expertise { + border-radius: 30px; + background-color: #fff; + + &__container { + @include content-inline; + + display: flex; + flex-direction: column; + row-gap: 56px; + + @include on-tablet { + row-gap: 64px; + } + } + + &__title { + font-size: 44px; + font-weight: 600; + line-height: 52.8px; + text-align: center; + margin-top: 72px; + + @include on-tablet { + margin-top: 128px; + } + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 56px; + margin-bottom: 72px; + + @include on-tablet { + row-gap: 72px; + margin-bottom: 128px; + } + + @include on-small-desktop { + flex-direction: row; + justify-content: space-between; + column-gap: 137px; + } + } + + &__article { + display: flex; + flex-direction: column; + row-gap: 16px; + align-items: center; + transition-duration: 0.3s; + transition-property: all; + + &:hover { + transform: scale(1.1); + } + + &-title { + margin: 0; + font-size: 20px; + font-weight: 600; + line-height: 28px; + text-align: center; + color: #253757; + } + + &-text { + margin: 0; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #6c788b; + text-align: center; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..3929bbbc08 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,36 @@ +.page { + font-family: Manrope, Arial, sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + color: #1b2129; + font-size: 16px; + line-height: 22.4px; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + transition: all 0.3s; + opacity: 0; + pointer-events: none; + transform: translateX(-100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/primary-button.scss b/src/styles/blocks/primary-button.scss new file mode 100644 index 0000000000..a9d942a4c7 --- /dev/null +++ b/src/styles/blocks/primary-button.scss @@ -0,0 +1,29 @@ +.primary-button { + height: 50px; + width: 100%; + border-radius: 8px; + background-color: #2060f6; + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #fff; + border: none; + transition-duration: 0.3s; + + @include on-tablet { + width: 264px; + } + + &:hover { + cursor: pointer; + background-color: #1154f1; + box-shadow: rgba(10, 92, 173, 0.2) 0 -8px -24px; + } + + &:active { + background-color: #0d3594; + transform: scale(0.9); + box-shadow: rgba(11, 11, 215, 0.2) 0 -7px -29px 0; + } +} diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss new file mode 100644 index 0000000000..5ccec45d1b --- /dev/null +++ b/src/styles/blocks/services.scss @@ -0,0 +1,213 @@ +.services { + &__content { + @include content-inline; + + row-gap: 24px; + padding-block: 120px; + + display: grid; + align-content: start; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(6, auto); + + @include on-tablet { + padding-block: 150px; + column-gap: 30px; + grid-template-columns: repeat(6, auto); + grid-template-rows: repeat(3, auto); + } + + @include on-small-desktop { + grid-template-columns: repeat(12, auto); + align-items: start; + } + } + + &__description { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1 / 2; + } + + @include on-small-desktop { + grid-column: 1 / 5; + grid-row: 1 / 2; + transform: translateY(30%); + } + + &-title { + margin-bottom: 16px; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: #c0cdd7; + } + + &-headline { + margin: 0; + font-size: 32px; + font-weight: 600; + line-height: 41.6px; + text-align: left; + color: #253757; + } + + &-text { + margin: 0; + margin-top: 24px; + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #6c788b; + } + } + + &__card { + display: flex; + align-content: flex-start; + flex-direction: column; + row-gap: 24px; + padding: 32px; + border-radius: 16px; + background-color: #fff; + box-shadow: 0 9px 18px 0 #25293108; + grid-column: span 2; + + &-number { + display: flex; + justify-content: center; + color: rgba(32, 96, 246, 1); + align-items: center; + width: 46px; + height: 24px; + border-radius: 23px; + background-color: rgba(32, 96, 246, 0.3); + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + } + + &-content { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 13px; + font-weight: 600; + line-height: 19.5px; + text-align: left; + color: #6c788b; + } + + &-more { + display: flex; + justify-content: space-between; + align-items: center; + } + + &-button { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #2060f6; + border: none; + transition-duration: 0.3s; + + &:hover { + cursor: pointer; + transform: scale(1.1); + background-color: #1154f1; + box-shadow: rgba(10, 92, 173, 0.2) 0 -8px -24px; + } + + &:active { + background-color: #0d3594; + transform: scale(0.9); + box-shadow: rgba(11, 11, 215, 0.2) 0 -7px -29px 0; + } + } + + &-learn-more { + font-size: 15px; + font-weight: 600; + line-height: 22.5px; + text-align: center; + color: #334563; + } + } +} + +.card-001 { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + } + + @include on-small-desktop { + grid-column: 7 / 10; + grid-row: 1; + transform: translateY(43%); + } + + @include on-middle-screens { + transform: translateY(43%); + } +} + +.card-002 { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2 / 2; + transform: translateY(-45%); + } + + @include on-small-desktop { + grid-column: 10 / -1; + grid-row: 1; + transform: translateY(5%); + } + + @include on-middle-screens { + transform: translateY(5%); + } +} + +.card-003 { + @include on-tablet { + grid-column: 1 / 4; + grid-row: 3 / 3; + } + + @include on-small-desktop { + grid-column: 7 / 10; + grid-row: 2; + } + + @include on-middle-screens { + transform: translateY(16%); + } +} + +.card-004 { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 3; + transform: translateY(-42%); + } + + @include on-small-desktop { + grid-column: 10 / -1; + grid-row: 2; + transform: translateY(-35%); + } + + @include on-middle-screens { + transform: translateY(-20%); + } +} diff --git a/src/styles/blocks/slider.scss b/src/styles/blocks/slider.scss new file mode 100644 index 0000000000..14e8deceab --- /dev/null +++ b/src/styles/blocks/slider.scss @@ -0,0 +1,123 @@ +.slider { + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 390px; + border-radius: 30px; + + @include on-tablet { + // width: 50%; + height: 390px; + } + + @include on-small-desktop { + width: 49vw; + height: 680px; + border-radius: 30px 0; + } + + @include on-desktop { + width: 40vw; + } + + @include on-middle-screens { + height: 680px; + } + + @include on-large-screens { + height: 680px; + } + + &-photo { + width: 100%; + height: 100%; + border-radius: 30px; + object-fit: cover; + + @include on-tablet { + width: 100%; + height: 390px; + } + + @include on-small-desktop { + // width: 502px; + height: 680px; + border-radius: 30px 0; + } + + @include on-middle-screens { + // width: 687px; + height: 680px; + } + + @include on-large-screens { + // width: 1167px; + height: 680px; + } + } + + &-arrows { + display: flex; + justify-content: space-between; + align-items: center; + width: 90px; + + &-button { + width: 32px; + height: 32px; + border-radius: 50%; + border: none; + } + } + + &-bottom { + display: flex; + flex-direction: column; + row-gap: 16px; + position: relative; + + // width: 280px; + bottom: 150px; + + // left: 21px; + @include content-inline; + + @include on-tablet { + // left: 41px; + } + + @include on-small-desktop { + margin-inline: 0; + flex-direction: row; + column-gap: 24px; + width: 370px; + left: 48px; + } + } + &-content { + max-width: 280px; + } + + &-intro { + margin: 0; + font-size: 13px; + font-weight: 700; + line-height: 19.5px; + letter-spacing: 3px; + text-align: left; + color: #fff; + text-transform: uppercase; + } + + &-text { + margin: 0; + padding-top: 8px; + font-family: 'Open Sans', Arial, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + color: #fff; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..de314d9099 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,18 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './blocks/header'; +@import './blocks/primary-button'; +@import './blocks/slider'; +@import './blocks/menu'; +@import './blocks/page'; +@import './blocks/about-us'; +@import './blocks/our-expertise'; +@import './blocks/services'; body { background: $c-gray; + font-family: Poppins, Arial, sans-serif; + margin: 0; + padding: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..41ecbcda2a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,64 @@ #{$_property}: $_toValue; } } + +@mixin on-mobile { + @media (min-width: 320px) { + @content; + } +} + +@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 on-middle-screens { + @media (min-width: 1600px) { + @content; + } +} + +@mixin on-large-screens { + @media (min-width: 2560px) { + @content; + } +} + +@mixin content-inline() { + margin-inline: auto; + max-width: 280px; + + @include on-tablet { + max-width: 558px; + } + + @include on-small-desktop { + max-width: 916px; + } + + @include on-desktop { + max-width: 916px; + } + + @include on-middle-screens { + max-width: 1146px; + } + + @include on-large-screens { + max-width: 1146px; + } +}