diff --git a/README.md b/README.md index 3a2fb5928..2e0714d8f 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY 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_creativeBakery/). + [DEMO LINK](https://Reaffith.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/header--background.png b/src/images/header--background.png new file mode 100644 index 000000000..144c4a276 Binary files /dev/null and b/src/images/header--background.png differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..2217805c9 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/coockie--hover.svg b/src/images/icons/coockie--hover.svg new file mode 100644 index 000000000..381801cdf --- /dev/null +++ b/src/images/icons/coockie--hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/coockie.svg b/src/images/icons/coockie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/coockie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-hover.svg b/src/images/icons/facebook-hover.svg new file mode 100644 index 000000000..232d47187 --- /dev/null +++ b/src/images/icons/facebook-hover.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.jpg b/src/images/icons/favicon.jpg new file mode 100644 index 000000000..c16f186ef Binary files /dev/null and b/src/images/icons/favicon.jpg differ diff --git a/src/images/icons/instagram-hover.svg b/src/images/icons/instagram-hover.svg new file mode 100644 index 000000000..418d79422 --- /dev/null +++ b/src/images/icons/instagram-hover.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/phone.svg b/src/images/icons/phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/icons/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter-hover.svg b/src/images/icons/twitter-hover.svg new file mode 100644 index 000000000..4370bdf69 --- /dev/null +++ b/src/images/icons/twitter-hover.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..e5d8f1e81 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo--footer.svg b/src/images/logo--footer.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/logo--footer.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..bf23011c1 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/main-background.png b/src/images/main-background.png new file mode 100644 index 000000000..b0e486727 Binary files /dev/null and b/src/images/main-background.png differ diff --git a/src/images/pic1.png b/src/images/pic1.png new file mode 100644 index 000000000..72f8edd05 Binary files /dev/null and b/src/images/pic1.png differ diff --git a/src/images/pic2.png b/src/images/pic2.png new file mode 100644 index 000000000..54f9c9e3a Binary files /dev/null and b/src/images/pic2.png differ diff --git a/src/images/pic3.png b/src/images/pic3.png new file mode 100644 index 000000000..68164327f Binary files /dev/null and b/src/images/pic3.png differ diff --git a/src/images/pic4.png b/src/images/pic4.png new file mode 100644 index 000000000..1de026dbc Binary files /dev/null and b/src/images/pic4.png differ diff --git a/src/images/pic5.png b/src/images/pic5.png new file mode 100644 index 000000000..8dc00db07 Binary files /dev/null and b/src/images/pic5.png differ diff --git a/src/images/pic6.png b/src/images/pic6.png new file mode 100644 index 000000000..479c8d14f Binary files /dev/null and b/src/images/pic6.png differ diff --git a/src/index.html b/src/index.html index 5d357bd69..7673d53c6 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,423 @@ - + - Title + Creative Bakery! + + + + - - -

Hello Mate Academy

+ + +
+
+
+ + + + + + menu + +
+ +
+

+ We bake your fantasies — croissants, cakes, cookies, and cupcakes. +

+ +

+ Creative bakery +

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

+ What we bake +

+ +

+ We can customize our cookies right for your needs. Just imagine it +

+ +
+
+
+ main picture + +

+ Cakes +

+ +

+ Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+ + + arrow + +

+ Order +

+ +
+ +
+ main picture + +

+ Cakes +

+ +

+ Chocolate biscuit coffee cake topped with a buttercream and powder +

+ + + arrow + +

+ Order +

+ +
+
+ +
+
+ main picture + +

+ Donuts +

+ +

+ Light multi-layered croissant strewn with cinammon and almond “petals” +

+ + + arrow + +

+ Order +

+ +
+ +
+ main picture + +

+ Donuts +

+ +

+ Light multi-layered croissant strewn with coconut and nuts +

+ + + arrow + +

+ Order +

+ +
+
+ +
+
+ main picture + +

+ Cakes +

+ +

+ Cake with chocolate salted caramel, Vanilla frutti pebbles inside +

+ + + arrow + +

+ Order +

+ +
+ +
+ main picture + +

+ Cookies +

+ +

+ Oatmeal cookies with golden raisins, orange zest and chocolate chips +

+ + + arrow + +

+ Order +

+ +
+
+
+
+ +
+

+ Few words About us +

+ +

+ Like many design teams, Onfido + made the transition from Abstract + + Sketch, to Figma in the last couple + of years. One of the common resistance + points internally before making that + switch, was Figma’s lack of Git-style + branching that Abstract enabled. The design + team had come to rely on branching and had + built a lot of our processes around it. +

+ +
+

+ 2015 +

+ +

+ Foundation year +

+
+ +
+

+ 23 +

+ +

+ Stores +

+
+ +
+

+ 155 +

+ +

+ Companies +

+
+ +
+

+ 10k+ +

+ +

+ Clients +

+
+ +
+
+ + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 1366a06aa..0f86e0e45 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,3 @@ @import "utils/vars"; @import "utils/mixins"; -@import "utils/extends"; + diff --git a/src/styles/blocks/body-main.scss b/src/styles/blocks/body-main.scss new file mode 100644 index 000000000..36085a622 --- /dev/null +++ b/src/styles/blocks/body-main.scss @@ -0,0 +1,638 @@ +@include on-desktop { + .main { + display: grid; + grid-template-columns: repeat(8, 128px); + gap: 0 24px; + justify-content: center; + } + + .section1 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 128px); + gap: 0 24px; + margin-bottom: 180px; + + &__header { + grid-column: span 8; + color: $header-text-color; + font-size: 72px; + line-height: 85%; + font-weight: 400; + letter-spacing: -3.6px; + text-transform: uppercase; + margin: 0 0 24px; + } + + &__text { + grid-column: span 8; + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__cover { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 128px); + gap: 0 24px; + + &--container { + margin-top: 80px; + grid-column: span 6; + display: grid; + grid-template-columns: repeat(6, 128px); + gap: 0 24px; + + + &--box { + grid-column: span 3; + display: flex; + gap: 16px; + flex-direction: column; + border-radius: 8px; + transition: all $transition-duration; + padding-bottom: 5px; + + &--name { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--description { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link { + display: flex; + gap: 4px; + margin: 0; + text-decoration: none; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + color: $orange-color; + border-radius: 3px; + transition: all $transition-duration; + border-bottom: 3px solid $background-color; + width: 86px; + + &--text { + margin: 0 0 5px; + display: inline-block; + } + } + + &--link:hover { + border-bottom: 3px solid $orange-color; + } + } + + &--box:hover { + transform: scale(1.04); + box-shadow: 12px 15px 8px 2px $gray-color; + } + } + + &--container:nth-child(2) { + grid-column: 3 / span 6; + } + } + } + + .section2 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 128px); + gap: 146px 24px; + background-image: url(../images/main-background.png); + background-position: center; + background-size: 718px 673px; + height: 673px; + margin-bottom: 56px; + + &__header { + margin: 0; + grid-column: span 4; + color: $header-text-color; + font-size: 72px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &__text { + margin: 0; + grid-column: span 4; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__info { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 8px; + + &--header { + color: $orange-color; + margin: 0; + font-size: 96px; + font-style: normal; + font-weight: 400; + line-height: 85%; + letter-spacing: -4.8px; + text-transform: uppercase; + } + + &--text { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + } + } +} + +@include on-desktop-small { + .main { + display: grid; + grid-template-columns: repeat(8, 96px); + gap: 0 24px; + justify-content: center; + } + + .section1 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 96px); + gap: 0 24px; + margin-bottom: 180px; + + &__header { + grid-column: span 8; + color: $header-text-color; + font-size: 72px; + line-height: 85%; + font-weight: 400; + letter-spacing: -3.6px; + text-transform: uppercase; + margin: 0 0 24px; + } + + &__text { + grid-column: span 8; + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__cover { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 96px); + gap: 0 24px; + + &--container { + margin-top: 80px; + grid-column: span 6; + display: grid; + grid-template-columns: repeat(6, 96px); + gap: 0 24px; + + + &--box { + grid-column: span 3; + display: flex; + gap: 16px; + flex-direction: column; + border-radius: 8px; + transition: all $transition-duration; + padding-bottom: 5px; + + &--name { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--description { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link { + display: flex; + gap: 4px; + margin: 0; + text-decoration: none; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + color: $orange-color; + border-radius: 3px; + transition: all $transition-duration; + border-bottom: 3px solid $background-color; + width: 86px; + + &--text { + margin: 0 0 5px; + display: inline-block; + } + } + + &--link:hover { + border-bottom: 3px solid $orange-color; + } + } + + &--box:hover { + transform: scale(1.04); + box-shadow: 12px 15px 8px 2px $gray-color; + } + } + + &--container:nth-child(2) { + grid-column: 3 / span 6; + } + } + } + + .section2 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 96px); + gap: 146px 24px; + background-image: url(../images/main-background.png); + background-position: center; + background-size: 718px 673px; + height: 673px; + margin-bottom: 56px; + + &__header { + margin: 0; + grid-column: span 4; + color: $header-text-color; + font-size: 72px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &__text { + margin: 0; + grid-column: span 4; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__info { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 8px; + + &--header { + color: $orange-color; + margin: 0; + font-size: 96px; + font-weight: 400; + line-height: 85%; + letter-spacing: -4.8px; + text-transform: uppercase; + } + + &--text { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + } + } +} + +@include on-tablet { + .main { + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 0 24px; + justify-content: center; + } + + .section1 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 0 24px; + margin-bottom: 180px; + + &__header { + grid-column: span 8; + color: $header-text-color; + font-size: 72px; + line-height: 85%; + font-weight: 400; + letter-spacing: -3.6px; + text-transform: uppercase; + margin: 0 0 24px; + } + + &__text { + grid-column: span 8; + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__cover { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 0 24px; + + &--container { + margin-top: 80px; + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 0 24px; + + + &--box { + grid-column: span 4; + display: flex; + gap: 16px; + flex-direction: column; + border-radius: 8px; + transition: all $transition-duration; + padding-bottom: 5px; + + &--name { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--description { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link { + display: flex; + gap: 4px; + margin: 0; + text-decoration: none; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + color: $orange-color; + border-radius: 3px; + transition: all $transition-duration; + border-bottom: 3px solid $background-color; + width: 86px; + + &--text { + margin: 0 0 5px; + display: inline-block; + } + } + + &--link:hover { + border-bottom: 3px solid $orange-color; + } + } + + &--box:hover { + transform: scale(1.04); + box-shadow: 12px 15px 8px 2px $gray-color; + } + } + + } + } + + .section2 { + grid-column: span 8; + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 146px 24px; + background-image: url(../images/main-background.png); + background-position: center; + background-size: 526px 493px; + background-repeat: no-repeat; + margin-bottom: 56px; + + &__header { + margin: 0; + grid-column: span 4; + color: $header-text-color; + font-size: 56px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &__text { + margin: 0; + grid-column: span 4; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__info { + grid-column: span 4; + display: flex; + flex-direction: column; + gap: 8px; + + &--header { + color: $orange-color; + margin: 0; + font-size: 96px; + font-style: normal; + font-weight: 400; + line-height: 85%; + letter-spacing: -4.8px; + text-transform: uppercase; + } + + &--text { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + } + } +} + +@include on-phone { + .main { + padding-inline: 16px; + display: flex; + flex-direction: column; + justify-content: center; + } + + .section1 { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0 24px; + margin-bottom: 180px; + + &__header { + width: 100%; + color: $header-text-color; + font-size: 48px; + line-height: 85%; + font-weight: 400; + letter-spacing: -3.6px; + text-transform: uppercase; + margin: 0 0 24px; + } + + &__text { + width: 100%; + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__cover { + width: 100%; + display: flex; + flex-direction: column; + + &--container { + margin-top: 56px; + display: flex; + flex-direction: column; + gap: 56px; + + + &--box { + display: flex; + gap: 16px; + flex-direction: column; + border-radius: 8px; + transition: all $transition-duration; + padding-bottom: 5px; + + &--name { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--pic { + width: 100%; + } + + &--description { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link { + display: flex; + gap: 4px; + margin: 0; + text-decoration: none; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + color: $orange-color; + border-radius: 3px; + transition: all $transition-duration; + border-bottom: 3px solid $background-color; + width: 86px; + + &--text { + margin: 0 0 5px; + display: inline-block; + } + } + + &--link:hover { + border-bottom: 3px solid $orange-color; + } + } + + &--box:hover { + transform: scale(1.04); + box-shadow: 12px 15px 8px 2px $gray-color; + } + } + + } + } + + .section2 { + display: flex; + flex-direction: column; + background-image: url(../images/main-background.png); + background-position: center; + background-size: 320px 300px; + background-repeat: no-repeat; + margin-bottom: 72px; + + &__header { + margin: 0; + color: $header-text-color; + font-size: 48px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &__text { + margin: 35px 0 30px; + line-height: 150%; + letter-spacing: -0.16px; + } + + &__info { + margin: 48px 0 0; + display: flex; + flex-direction: column; + gap: 8px; + + &--header { + color: $orange-color; + margin: 0; + font-size: 96px; + font-style: normal; + font-weight: 400; + line-height: 85%; + letter-spacing: -4.8px; + text-transform: uppercase; + } + + &--text { + margin: 0; + line-height: 150%; + letter-spacing: -0.16px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..c9cee9d8d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,672 @@ +@include on-desktop { + .footer { + background-color: $text-color; + display: grid; + grid-template-columns: repeat(8, 128px); + gap: 0 24px; + justify-content: center; + padding-top: 88px; + + &__part1 { + grid-column: span 2; + display: flex; + flex-direction: column; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + margin: 0 0 70px; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + flex-direction: column; + gap: 16px; + + &--link { + text-decoration: none; + margin: 0; + color: $footer-text; + transition: all $transition-duration; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link:hover { + transform: scale(1.1); + } + + &--text { + margin: 0; + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + } + } + + &--socials { + display: flex; + flex-direction: row; + gap: 32px; + margin: 48px 0 88px; + + &--link { + height: 24px; + width: 24px; + transition: all $transition-duration; + } + + &--link:nth-child(1) { + background-image: url(../images/icons/facebook.svg); + } + + &--link:nth-child(2) { + background-image: url(../images/icons/instagram.svg); + } + + &--link:nth-child(3) { + background-image: url(../images/icons/twitter.svg); + } + + &--link:nth-child(1):hover { + background-image: url(../images/icons/facebook-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(2):hover { + background-image: url(../images/icons/instagram-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(3):hover { + background-image: url(../images/icons/twitter-hover.svg); + transform: scale(1.2); + } + } + } + + &__part2 { + grid-column: 5 / -1; + display: flex; + gap: 40px; + flex-direction: column; + + &--header { + margin: 0; + color: $footer-text; + font-size: 72px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &--cover { + display: grid; + gap: 0 24px; + grid-template-rows: auto; + grid-template-columns: repeat(4, 128px); + + + &--call { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + + &--mail { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + } + } + } +} + +@include on-desktop-small { + .footer { + background-color: $text-color; + display: grid; + grid-template-columns: repeat(8, 96px); + gap: 0 24px; + justify-content: center; + padding-top: 88px; + + &__part1 { + grid-column: span 2; + display: flex; + flex-direction: column; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + margin: 0 0 70px; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + flex-direction: column; + gap: 16px; + + &--link { + text-decoration: none; + margin: 0; + color: $footer-text; + transition: all $transition-duration; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link:hover { + transform: scale(1.1); + } + + &--text { + margin: 0; + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + } + } + + &--socials { + display: flex; + flex-direction: row; + gap: 32px; + margin: 48px 0 88px; + + &--link { + height: 24px; + width: 24px; + transition: all $transition-duration; + } + + &--link:nth-child(1) { + background-image: url(../images/icons/facebook.svg); + } + + &--link:nth-child(2) { + background-image: url(../images/icons/instagram.svg); + } + + &--link:nth-child(3) { + background-image: url(../images/icons/twitter.svg); + } + + &--link:nth-child(1):hover { + background-image: url(../images/icons/facebook-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(2):hover { + background-image: url(../images/icons/instagram-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(3):hover { + background-image: url(../images/icons/twitter-hover.svg); + transform: scale(1.2); + } + } + } + + &__part2 { + grid-column: 5 / -1; + display: flex; + gap: 40px; + flex-direction: column; + + &--header { + margin: 0; + color: $footer-text; + font-size: 72px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &--cover { + display: grid; + gap: 0 24px; + grid-template-rows: auto; + grid-template-columns: repeat(4, 96px); + + + &--call { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + + &--mail { + grid-column: span 2; + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + } + } + } +} + +@include on-tablet { + .footer { + background-color: $text-color; + display: grid; + grid-template-columns: repeat(8, 48px); + gap: 0 24px; + justify-content: center; + padding-top: 88px; + + &__part1 { + grid-column: span 3; + display: flex; + flex-direction: column; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + margin: 0 0 107px; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + flex-direction: column; + gap: 16px; + + &--link { + text-decoration: none; + margin: 0; + color: $footer-text; + transition: all $transition-duration; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link:hover { + transform: scale(1.1); + } + + &--text { + margin: 0; + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + } + } + + &--socials { + display: flex; + flex-direction: row; + gap: 32px; + margin: 48px 0 88px; + + &--link { + height: 24px; + width: 24px; + transition: all $transition-duration; + } + + &--link:nth-child(1) { + background-image: url(../images/icons/facebook.svg); + } + + &--link:nth-child(2) { + background-image: url(../images/icons/instagram.svg); + } + + &--link:nth-child(3) { + background-image: url(../images/icons/twitter.svg); + } + + &--link:nth-child(1):hover { + background-image: url(../images/icons/facebook-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(2):hover { + background-image: url(../images/icons/instagram-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(3):hover { + background-image: url(../images/icons/twitter-hover.svg); + transform: scale(1.2); + } + } + } + + &__part2 { + grid-column: 5 / -1; + display: flex; + gap: 40px; + flex-direction: column; + + &--header { + margin: 0; + color: $footer-text; + font-size: 56px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &--cover { + display: flex; + flex-direction: column; + gap: 40px; + + &--call { + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + + &--mail { + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + } + } + } +} + +@include on-phone { + .footer { + background-color: $text-color; + display: flex; + flex-direction: column; + gap: 30px; + justify-content: center; + padding: 56px 16px 130px; + + &__part1 { + display: flex; + flex-direction: column; + height: 275px; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + margin: 0 0 40px; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + flex-direction: column; + gap: 16px; + + &--link { + text-decoration: none; + margin: 0; + color: $footer-text; + transition: all $transition-duration; + line-height: 150%; + letter-spacing: -0.16px; + } + + &--link:hover { + transform: scale(1.1); + } + + &--text { + margin: 0; + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + } + } + + &--socials { + display: flex; + flex-direction: row; + gap: 32px; + margin: 0; + position: relative; + top: 423px; + + &--link { + height: 24px; + width: 24px; + transition: all $transition-duration; + } + + &--link:nth-child(1) { + background-image: url(../images/icons/facebook.svg); + } + + &--link:nth-child(2) { + background-image: url(../images/icons/instagram.svg); + } + + &--link:nth-child(3) { + background-image: url(../images/icons/twitter.svg); + } + + &--link:nth-child(1):hover { + background-image: url(../images/icons/facebook-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(2):hover { + background-image: url(../images/icons/instagram-hover.svg); + transform: scale(1.2); + } + + &--link:nth-child(3):hover { + background-image: url(../images/icons/twitter-hover.svg); + transform: scale(1.2); + } + } + } + + &__part2 { + display: flex; + gap: 40px; + flex-direction: column; + + &--header { + margin: 0; + color: $footer-text; + font-size: 56px; + font-weight: 400; + line-height: 85%; + letter-spacing: -3.6px; + text-transform: uppercase; + } + + &--cover { + display: flex; + flex-direction: column; + gap: 40px; + + &--call { + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + + &--mail { + display: flex; + flex-direction: column; + gap: 16px; + + &--text { + color: $gray-color; + font-weight: 500; + letter-spacing: 0.32px; + text-transform: uppercase; + margin: 0; + } + + &--link { + text-decoration: none; + color: $footer-text; + transition: all $transition-duration; + } + + &--link:hover { + transform: scale(1.1); + } + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..49c4c4b30 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,612 @@ +@include on-desktop { + .header { + color: $text-color; + &__cover { + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 178px; + + &--top { + margin-inline: auto; + max-width: 1300px; + min-width: 1200px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 32px 28px ; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + gap: 64px; + box-sizing: border-box; + + &--top { + display: none; + } + + &--link { + text-decoration: none; + color: $text-color; + transition: all $transition-duration; + border-radius: 2px; + height: 26px; + font-size: 16px; + box-sizing: border-box; + line-height: 26px; + letter-spacing: -0.16px; + border-bottom: 3px solid $background-color; + } + + &--link:hover { + transform: scale(1.1); + border-bottom: 3px solid $orange-color; + + } + + &--link:last-child { + color: $orange-color; + background-image: url(../images/icons/phone.svg); + background-size: 24px; + background-repeat: no-repeat; + padding-left: 28px; + } + } + + &--menu { + display: none; + } + } + + &--bottom { + display: grid; + grid-template-columns: repeat(8, 128px); + grid-template-rows: 215px 116px auto; + gap: 0 24px; + justify-content: center; + background-image: url(../images/header--background.png); + background-position: center; + background-repeat: no-repeat; + background-size: 586px; + height: 586px; + + &--text { + grid-column: span 2; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.16px; + margin: 135px 0 0; + height: 72px; + } + + &--header { + margin: 0; + grid-column: span 8; + text-align: center; + color: $header-text-color; + font-size: 144px; + line-height: 85%; + letter-spacing: -6.8px; + text-transform: uppercase; + width: 1192px; + font-weight: 400; + } + + &--link { + grid-column: span 2; + background-image: url(../images/icons/coockie.svg); + background-repeat: no-repeat; + background-position: 71px 18px; + padding: 20px 71px 20px 100px; + text-align: center; + align-items: center; + text-decoration: none; + font-size: 16px; + font-style: normal; + font-weight: 500; + text-transform: uppercase; + height: 16px; + border-radius: 32px; + color: $orange-color; + border: 2px solid $orange-color; + margin: 64px 0 0; + transition: all $transition-duration; + } + + &--link:hover { + background-color: $orange-color; + background-image: url(../images/icons/coockie--hover.svg); + color: #fff; + } + } + } + } +} + +@include on-desktop-small { + .header { + color: $text-color; + &__cover { + display: flex; + flex-direction: column; + margin-bottom: 178px; + + &--top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 32px 28px ; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + display: flex; + gap: 64px; + box-sizing: border-box; + + &--top { + display: none; + } + + &--link { + text-decoration: none; + color: $text-color; + transition: all $transition-duration; + border-radius: 2px; + height: 26px; + font-size: 16px; + box-sizing: border-box; + line-height: 26px; + letter-spacing: -0.16px; + border-bottom: 3px solid $background-color; + } + + &--link:hover { + transform: scale(1.1); + border-bottom: 3px solid $orange-color; + + } + + &--link:last-child { + color: $orange-color; + background-image: url(../images/icons/phone.svg); + background-size: 24px; + background-repeat: no-repeat; + padding-left: 28px; + } + } + + &--menu { + display: none; + } + } + + &--bottom { + display: grid; + grid-template-columns: repeat(8, 96px); + grid-template-rows: 215px 116px auto; + gap: 0 24px; + justify-content: center; + background-image: url(../images/header--background.png); + background-position: center; + background-repeat: no-repeat; + background-size: 586px; + height: 586px; + + &--text { + grid-column: span 2; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.16px; + margin: 115px 0 0; + height: 72px; + } + + &--header { + margin: 0; + grid-column: span 8; + text-align: center; + color: $header-text-color; + font-size: 136px; + line-height: 85%; + letter-spacing: -6.8px; + text-transform: uppercase; + width: 100%; + font-weight: 400; + position: relative; + top: -58px; + } + + &--link { + grid-column: span 3; + background-image: url(../images/icons/coockie.svg); + background-repeat: no-repeat; + background-position: 71px 18px; + padding: 20px 71px 20px 100px; + text-align: center; + align-items: center; + text-decoration: none; + font-size: 16px; + width: 106px; + font-style: normal; + font-weight: 500; + text-transform: uppercase; + height: 16px; + border-radius: 32px; + color: $orange-color; + border: 2px solid $orange-color; + margin: 64px 0 0; + transition: all $transition-duration; + } + + &--link:hover { + background-color: $orange-color; + background-image: url(../images/icons/coockie--hover.svg); + color: #fff; + } + } + } + } +} + +@include on-tablet { + .header { + color: $text-color; + &__cover { + display: flex; + flex-direction: column; + margin-bottom: 178px; + + &--top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 32px 28px ; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + height: 100vh; + display: flex; + flex-direction: column; + gap: 24px; + box-sizing: border-box; + position: fixed; + top: -110vh; + background-color: $background-color; + width: 95%; + transition: all $transition-duration; + + z-index: 10; + + &--link { + text-align: center; + text-decoration: none; + color: $text-color; + transition: all $transition-duration; + border-radius: 2px; + height: 26px; + font-size: 16px; + box-sizing: border-box; + line-height: 26px; + letter-spacing: -0.16px; + border-bottom: 3px solid $background-color; + margin: 0; + } + + &--link:hover { + transform: scale(1.1); + border-bottom: 3px solid $orange-color; + + } + + &--link:last-child { + color: $orange-color; + background-image: url(../images/icons/phone.svg); + background-size: 24px; + background-repeat: no-repeat; + padding-left: 28px; + background-position-x: 43%; + } + + &--top { + padding: 44px 30px; + display: flex; + justify-content: space-between; + margin-bottom: 10%; + + &--logo { + width: 140px; + height: 40px; + } + + &--close { + text-decoration: none; + font-weight: 600px; + color: $text-color; + } + } + } + + + &--menu { + display: block; + } + + &--nav:target { + top: 0; + overflow: hidden; + } + + + } + + &--bottom { + display: grid; + grid-template-columns: repeat(8, 48px); + grid-template-rows: 265px 75px auto; + gap: 0 24px; + justify-content: center; + background-image: url(../images/header--background.png); + background-position: center; + background-repeat: no-repeat; + background-size: 327px; + height: 586px; + + &--text { + grid-column: span 4; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.16px; + margin: 52px 0 0; + height: 72px; + } + + &--header { + margin: 0; + grid-column: span 8; + text-align: center; + color: $header-text-color; + font-size: 80px; + line-height: 85%; + letter-spacing: -4px; + text-transform: uppercase; + width: 100%; + + font-weight: 400; + position: relative; + } + + &--link { + grid-column: 3 / -3; + background-image: url(../images/icons/coockie.svg); + background-repeat: no-repeat; + background-position: 71px 18px; + padding: 20px 57px 20px 100px; + text-align: center; + align-items: center; + text-decoration: none; + font-size: 16px; + font-style: normal; + font-weight: 500; + text-transform: uppercase; + height: 16px; + border-radius: 32px; + color: $orange-color; + border: 2px solid $orange-color; + margin: 164px 0 0; + transition: all $transition-duration; + } + + &--link:hover { + background-color: $orange-color; + background-image: url(../images/icons/coockie--hover.svg); + color: #fff; + } + } + } + } +} + +@include on-phone { + .header { + color: $text-color; + padding-inline: 16px; + + &__cover { + display: flex; + flex-direction: column; + margin-bottom: 178px; + + &--top { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 32px 0 ; + + &--logo { + width: 136px; + height: 32px; + transition: all $transition-duration; + } + + &--logo:hover { + transform: scale(1.1); + } + + &--nav { + height: 100vh; + display: flex; + flex-direction: column; + gap: 24px; + box-sizing: border-box; + position: fixed; + top: -110vh; + background-color: $background-color; + width: 95%; + transition: all $transition-duration; + + z-index: 10; + + &--link { + text-align: center; + text-decoration: none; + color: $text-color; + transition: all $transition-duration; + border-radius: 2px; + height: 26px; + font-size: 16px; + box-sizing: border-box; + line-height: 26px; + letter-spacing: -0.16px; + border-bottom: 3px solid $background-color; + margin: 0; + } + + &--link:hover { + transform: scale(1.1); + border-bottom: 3px solid $orange-color; + + } + + &--link:last-child { + color: $orange-color; + background-image: url(../images/icons/phone.svg); + background-size: 24px; + background-repeat: no-repeat; + padding-left: 28px; + background-position-x: 35%; + } + + &--top { + padding: 44px 0; + display: flex; + justify-content: space-between; + margin-bottom: 10%; + + &--logo { + width: 140px; + height: 40px; + } + + &--close { + text-decoration: none; + font-weight: 600px; + position: relative; + right: 16px; + color: $text-color; + } + } + } + + + &--menu { + display: block; + } + + &--nav:target { + top: 0; + overflow: hidden; + } + + + } + + &--bottom { + display: flex; + flex-direction: column; + gap: 0; + justify-content: center; + + &--text { + text-align: center; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.16px; + margin: 32px 0; + height: 72px; + } + + &--background { + background-image: url(../images/header--background.png); + background-position: center; + background-repeat: no-repeat; + background-size: 290px; + width: 100%; + height: 290px; + } + + &--header { + margin: 0; + text-align: center; + color: $header-text-color; + font-size: 64px; + line-height: 85%; + letter-spacing: -4px; + text-transform: uppercase; + width: 100%; + + font-weight: 400; + position: relative; + } + + &--link { + grid-column: 3 / -3; + background-image: url(../images/icons/coockie.svg); + background-repeat: no-repeat; + background-position: 71px 18px; + padding: 20px 57px 20px 100px; + text-align: center; + align-items: center; + text-decoration: none; + font-size: 16px; + font-style: normal; + font-weight: 500; + text-transform: uppercase; + height: 16px; + border-radius: 32px; + color: $orange-color; + border: 2px solid $orange-color; + margin:0; + transition: all $transition-duration; + } + + &--link:hover { + background-color: $orange-color; + background-image: url(../images/icons/coockie--hover.svg); + color: #fff; + } + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d..e66e39109 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import "utils"; @import "fonts"; -@import "typography"; +@import "blocks/header"; +@import "blocks/body-main"; +@import "blocks/footer"; -body { - background: $c-gray; +.page{ + background: $background-color; + scroll-behavior: smooth; + + + &__body { + font-family: Inter, sans-serif; + font-weight: 400; + margin: 0; + color: $text-color; + } +} + +.page:has(.header__cover--top--nav:target) { + overflow: hidden; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: "Roboto", sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..98d6deed3 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,27 @@ #{$_property}: $_toValue; } } + +@mixin on-phone { + @media(max-width : 639px) { + @content; + } +} + +@mixin on-tablet { + @media(min-width : 640px) and (max-width: 1023px) { + @content; + } +} + +@mixin on-desktop { + @media(min-width : 1200px) { + @content; + } +} + +@mixin on-desktop-small { + @media(min-width : 1024px) and (max-width: 1199px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..9eed1a11f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,20 @@ -$c-gray: #eee; +// for blue version of site + +// $background-color: #eef7ff; +// $text-color: #1c1a26; +// $header-text-color: #1c1a26; +// $footer-text: #fff; +// $orange-color: #f9512e; + +// for pink version of site + +$background-color: #ffeefc; +$text-color: #1c1a26; +$header-text-color: #f9512e; +$footer-text: #fff; +$orange-color: #f9512e; + +// independent + +$transition-duration: 400ms; +$gray-color: #7f8096;