diff --git a/README.md b/README.md index 3a2fb5928..3827c12af 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://DenisGurskiy.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/button.png b/src/images/button.png new file mode 100644 index 000000000..ca913224a Binary files /dev/null and b/src/images/button.png differ diff --git a/src/images/cookie.png b/src/images/cookie.png new file mode 100644 index 000000000..f825d7421 Binary files /dev/null and b/src/images/cookie.png differ diff --git a/src/images/crumbs.png b/src/images/crumbs.png new file mode 100644 index 000000000..f3f0e06af Binary files /dev/null and b/src/images/crumbs.png differ diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie-white.png b/src/images/icons/icon-cookie-white.png new file mode 100644 index 000000000..5beb18c56 Binary files /dev/null and b/src/images/icons/icon-cookie-white.png differ diff --git a/src/images/icons/icon-cookie.png b/src/images/icons/icon-cookie.png new file mode 100644 index 000000000..0c036705c Binary files /dev/null and b/src/images/icons/icon-cookie.png differ diff --git a/src/images/icons/icon-facebook-hover.svg b/src/images/icons/icon-facebook-hover.svg new file mode 100644 index 000000000..62ce14e6a --- /dev/null +++ b/src/images/icons/icon-facebook-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram-hover.svg b/src/images/icons/icon-instagram-hover.svg new file mode 100644 index 000000000..d7aebde9b --- /dev/null +++ b/src/images/icons/icon-instagram-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-phone.svg b/src/images/icons/icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/icons/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter-hover.svg b/src/images/icons/icon-twitter-hover.svg new file mode 100644 index 000000000..362813ede --- /dev/null +++ b/src/images/icons/icon-twitter-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 000000000..c838c4e09 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-reverse.png b/src/images/logo-reverse.png new file mode 100644 index 000000000..00b8807b5 Binary files /dev/null and b/src/images/logo-reverse.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..fc24941d5 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/products/photo-product-01.png b/src/images/products/photo-product-01.png new file mode 100644 index 000000000..a832181a4 Binary files /dev/null and b/src/images/products/photo-product-01.png differ diff --git a/src/images/products/photo-product-02.png b/src/images/products/photo-product-02.png new file mode 100644 index 000000000..aa8a69bdb Binary files /dev/null and b/src/images/products/photo-product-02.png differ diff --git a/src/images/products/photo-product-03.png b/src/images/products/photo-product-03.png new file mode 100644 index 000000000..a08f74505 Binary files /dev/null and b/src/images/products/photo-product-03.png differ diff --git a/src/images/products/photo-product-04.png b/src/images/products/photo-product-04.png new file mode 100644 index 000000000..30401a47d Binary files /dev/null and b/src/images/products/photo-product-04.png differ diff --git a/src/images/products/photo-product-05.png b/src/images/products/photo-product-05.png new file mode 100644 index 000000000..5133bc4ec Binary files /dev/null and b/src/images/products/photo-product-05.png differ diff --git a/src/images/products/photo-product-06.png b/src/images/products/photo-product-06.png new file mode 100644 index 000000000..de5189fe9 Binary files /dev/null and b/src/images/products/photo-product-06.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..d6a959371 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,543 @@ - - + + - Title + Bakerlab + + + + + - -

Hello Mate Academy

- + +
+
+ + + + + + +
+ +
+

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

+ +

Creative bakery

+ + Cookie + + +
+ Learn more + +
+
+ + + +
+
+
+

What we bake

+ +

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

+
+ + + + + + + +
+ +
+
+

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

+
+
+ +
+ crumbs +
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..c1ef8ba0e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,11 @@ 'use strict'; + +window.addEventListener('hashchange', () => { + const targetId = window.location.hash.substring(1); + + if (targetId === 'menu') { + document.body.classList.add('page__body--menu--open'); + } else { + document.body.classList.remove('page__body--menu--open'); + } +}); diff --git a/src/styles/_blocks.scss b/src/styles/_blocks.scss new file mode 100644 index 000000000..3dd45f662 --- /dev/null +++ b/src/styles/_blocks.scss @@ -0,0 +1,10 @@ +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/aside'; +@import 'blocks/button'; +@import 'blocks/nav'; +@import 'blocks/products'; +@import 'blocks/product'; +@import 'blocks/about-us'; +@import 'blocks/footer'; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..ff25be307 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,7 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..74311552e --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,118 @@ +.about-us { + padding-bottom: 72px; + + @include page-grid; + + row-gap: 64px; + + @include on-tablet { + padding-bottom: 152px; + row-gap: 72px; + } + + @include on-desktop-l { + padding-bottom: 56px; + row-gap: 144px; + } + + &__top { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 1 / 2; + } + + @include page-grid; + } + + &__title { + margin-bottom: 32px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + margin-bottom: 0; + } + } + + &__description { + margin: 0; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + } + + &__statistic { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + row-gap: 48px; + + @include page-grid; + + @include on-tablet { + grid-row: 2 / 3; + row-gap: 80px; + } + } + + &__stat { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + grid-column: span 2; + } + } + + &__numeric { + display: block; + margin: 0 0 8px; + font-size: 96px; + line-height: 85%; + letter-spacing: -0.05em; + color: $font-color-pink; + } + + &__indicator { + margin: 0; + } + + &__wrapper { + position: absolute; + left: -16px; + right: -16px; + bottom: 20%; + z-index: -1; + + @include on-tablet { + position: static; + grid-column: 2 / -2; + grid-row: 1 / 3; + display: flex; + align-items: center; + } + + @include on-desktop-l { + grid-column: 3 / -2; + grid-row: 1 / 4; + } + + @include on-desktop-xl { + grid-column: 3 / -3; + grid-row: 1 / 4; + } + } + + &__crumbs { + width: 100%; + } +} diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..e5e5d2d7f --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,8 @@ +.aside { + &__top-bar { + box-sizing: border-box; + position: absolute; + top: 0; + width: 100%; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..425d06d0e --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,50 @@ +.button { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + + border: 2px solid $font-color-pink; + border-radius: 28px; + width: 100%; + height: 56px; + + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + text-decoration: none; + color: $font-color-pink; + + transition: + color 0.3s, + background-color 0.3s; + + &:hover { + background-color: $font-color-pink; + color: #fff; + } + + &:focus { + background-color: #b2341a; + border: none; + outline: none; + color: #fff; + } + + &__icon { + width: 24px; + height: 24px; + margin-right: 4px; + + background-image: url(../images/icons/icon-cookie.png); + background-size: cover; + } + + &:hover .button__icon { + background-image: url(../images/icons/icon-cookie-white.png); + } + + &:focus .button__icon { + background-image: url(../images/icons/icon-cookie-white.png); + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..e858db65d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,146 @@ +.footer { + background-color: $font-color; + + &__content { + @include margin-inline; + + padding: 56px 0; + + @include on-tablet { + padding: 88px 0; + } + + @include page-grid; + } + + &__link { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / 5; + } + } + + &__logo { + width: 168px; + margin-bottom: 40px; + + @include hover(scale, 1.1); + } + + &__menu { + margin-bottom: 64px; + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop-l { + margin-bottom: 48px; + } + } + + &__contacts { + margin-bottom: 40px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 24px; + } + } + + &__contact-us { + margin: 0 0 40px; + font-size: 48px; + font-weight: 400; + line-height: 85%; + letter-spacing: -0.05em; + color: #fff; + text-transform: uppercase; + grid-column: span 2; + + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1 / 2; + } + } + + &__numbers { + margin-bottom: 40px; + + @include on-desktop-l { + grid-row: 1 / -1; + grid-column: span 2; + } + } + + &__email { + @include on-desktop-l { + grid-row: 1 / -1; + grid-column: span 2; + } + } + + &__social { + display: flex; + gap: 32px; + margin-bottom: 40px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + } + + &__icon { + width: 24px; + height: 24px; + transition: all 0.3s; + + @include hover(scale, 1.1); + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + + &:hover { + background-image: url(../images/icons/icon-facebook-hover.svg); + } + } + + &--insta { + background-image: url(../images/icons/icon-instagram.svg); + + &:hover { + background-image: url(../images/icons/icon-instagram-hover.svg); + } + } + + &--twitter { + background-image: url(../images/icons/icon-twitter.svg); + + &:hover { + background-image: url(../images/icons/icon-twitter-hover.svg); + } + } + } + + &__copiright { + font: inherit; + line-height: 150%; + letter-spacing: -0.01em; + color: $font-color-grey; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..859641c4c --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,105 @@ +.header { + &__content { + margin-top: 32px; + margin-bottom: 40px; + + @include margin-inline; + + @include on-tablet { + margin-top: 80px; + margin-bottom: 228px; + } + + @include on-desktop-l { + margin-top: 0; + margin-bottom: 66px; + + &:hover .header__image { + transform: scale(1.1); + } + } + + @include on-desktop-xl { + margin-top: 0; + margin-bottom: 26px; + } + + @include page-grid; + } + + &__text { + margin: 0 0 32px; + text-align: center; + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + grid-column: span 2; + + @include on-tablet { + text-align: left; + grid-column: span 4; + margin-bottom: 16px; + } + + @include on-desktop-l { + grid-column: 1 / 3; + grid-row: 1 / 2; + margin-bottom: 8px; + margin-top: 135px; + } + + @include on-desktop-xl { + grid-column: 1 / 3; + margin-bottom: 40px; + margin-top: 144px; + } + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + display: flex; + justify-content: space-evenly; + align-items: center; + grid-row: 2 / 3; + } + + @include on-desktop-l { + grid-row: 2 / 3; + height: 116px; + } + } + + &__image { + width: 100%; + grid-column: 1 / -1; + transition: transform 0.3s; + + @include on-tablet { + grid-column: 3 / -3; + grid-row: 2 / 3; + z-index: -1; + } + + @include on-desktop-l { + grid-column: 3 / -3; + grid-row: 1 / 5; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / -3; + margin-top: 80px; + } + + @include on-desktop-l { + grid-column: 1 / 3; + grid-row: 3 / 4; + margin-top: 64px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..48d942b66 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,61 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + + @include on-desktop-l { + flex-direction: row; + gap: 64px; + } + + &--footer { + align-items: start; + gap: 16px; + font-size: 16px; + line-height: 100%; + color: $font-color-grey; + + @include on-desktop-l { + flex-direction: column; + } + } + } + + &__list-name { + margin: 0; + text-transform: uppercase; + } + + &__item { + @include hover(scale, 1.15); + } + + &__link { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + text-decoration: none; + color: $font-color; + + &--tel { + font-weight: 500; + display: flex; + align-items: center; + text-transform: uppercase; + color: $font-color-pink; + } + + &--footer { + color: #fff; + } + } + + &__icon { + margin-right: 4px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..fb0bdb71f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,63 @@ +.page { + scroll-behavior: smooth; + + &__header { + margin-bottom: 64px; + } + + &__body { + margin: 0; + font-family: Inter, sans-serif; + font-weight: 400; + background: $c-pink; + + &--menu--open { + overflow: hidden; + + // height: 100vh; + } + } + + &__aside { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100vh; + + transform: translateX(-100%); + transition: transform 0.3s; + + display: flex; + flex-direction: column; + justify-content: center; + + background: $c-pink; + + &:target { + transform: translateX(0); + } + } + + &__main { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + color: $font-color; + + @include margin-inline; + } + + &__products { + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 152px; + } + } + + &__about-us { + position: relative; + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 000000000..be0599a5b --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,47 @@ +.product { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + grid-column: span 3; + } + + &--right { + @include on-desktop-l { + grid-column: 3 / 6; + } + } + + &__image { + width: 100%; + border-radius: 8px; + margin-bottom: 16px; + + @include hover(scale, 1.05); + } + + &__category { + text-transform: uppercase; + text-decoration: none; + color: $font-color-grey; + } + + &__description { + margin: 8px 0 16px; + } + + &__order { + display: flex; + column-gap: 4px; + text-transform: uppercase; + text-decoration: none; + color: $font-color-pink; + font-weight: 500; + letter-spacing: 0.02em; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..e2d95751e --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,21 @@ +.products { + @include page-grid; + + row-gap: 56px; + + @include on-tablet { + row-gap: 80px; + } + + &__wrapper { + grid-column: 1 / -1; + } + + &__title { + margin-bottom: 24px; + } + + &__text { + margin: 0; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..23ba15338 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,44 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 16px; + + @include on-desktop-l { + padding: 28px 32px; + } + + &__logo { + width: 136px; + + @include hover(scale, 1.1); + } + + &__icon { + width: 24px; + height: 24px; + + @include hover(scale, 1.2); + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } + + @include on-desktop-l { + display: none; + } + } + + &__nav { + display: none; + + @include on-desktop-l { + display: block; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..845346873 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,3 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..9879a91f6 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,47 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; font-weight: 400; + font-size: 64px; + color: $font-color-pink; + text-align: center; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: 68px; + } + + @include on-tablet-768 { + font-size: 80px; + } + + @include on-desktop-l { + font-size: 110px; + } + + @include on-desktop-xl { + font-size: 144px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 48px; + color: $font-color-pink; + text-align: left; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop-l { + font-size: 72px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..c71ff0ae2 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,54 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-tablet-768 { + @media (min-width: 768px) { + @content; + } +} + +@mixin on-desktop-l { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-desktop-xl { + @media (min-width: 1200px) { + @content; + } +} + +@mixin margin-inline { + margin-inline: 16px; + + @include on-tablet { + margin-inline: 44px; + } + + @include on-desktop-xl { + margin-inline: auto; + max-width: 1192px; + } +} + +@mixin page-grid { + --count-columns: 2; + + display: grid; + column-gap: 16px; + grid-template-columns: repeat(var(--count-columns), 1fr); + + @include on-tablet { + --count-columns: 8; + + column-gap: 24px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..b81f8d5ca 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ -$c-gray: #eee; +$c-pink: #ffeefc; +$font-color: #1c1a26; +$font-color-pink: #f9512e; +$font-color-grey: #7f8096;