diff --git a/index.html b/index.html index d339e6856..d441158cb 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,345 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title - Creative Bakery + + + + + + + + + + + + + - -

Hello Mate Academy

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

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

+
+

creative bakery

+
+
+
+
+ Contact us +
+
+
+
+

What we bake

+

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

+
+
+
+
+ Cake image +
+

Cakes

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ order +
+ +
+
+ Cake image +
+

Cakes

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ order +
+ +
+
+ Donut image +
+

Donuts

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ order +
+ +
+
+ Donut image +
+

Donuts

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ order +
+ +
+
+ Cookie image +
+

Cookies

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ order +
+ +
+
+ Cookie image +
+

Cookies

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ 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/images/Cookie.png b/src/images/Cookie.png new file mode 100644 index 000000000..ad8860805 Binary files /dev/null and b/src/images/Cookie.png differ diff --git a/src/images/Vector.svg b/src/images/Vector.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/background/crumbs.png b/src/images/background/crumbs.png new file mode 100644 index 000000000..16ec97e37 Binary files /dev/null and b/src/images/background/crumbs.png differ diff --git a/src/images/bakerlab-logo.svg b/src/images/bakerlab-logo.svg new file mode 100644 index 000000000..29872d73c --- /dev/null +++ b/src/images/bakerlab-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/burger-menu.svg b/src/images/burger-menu.svg new file mode 100644 index 000000000..b02c39bf8 --- /dev/null +++ b/src/images/burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/close.svg b/src/images/close.svg new file mode 100644 index 000000000..65ae950c8 --- /dev/null +++ b/src/images/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/hero_icon-cookie.svg b/src/images/hero_icon-cookie.svg new file mode 100644 index 000000000..5bf16c613 --- /dev/null +++ b/src/images/hero_icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/products/cake1.jpg b/src/images/products/cake1.jpg new file mode 100644 index 000000000..68906a7cc Binary files /dev/null and b/src/images/products/cake1.jpg differ diff --git a/src/images/products/cake2.jpg b/src/images/products/cake2.jpg new file mode 100644 index 000000000..1cee7bdef Binary files /dev/null and b/src/images/products/cake2.jpg differ diff --git a/src/images/products/cookie1.jpg b/src/images/products/cookie1.jpg new file mode 100644 index 000000000..4c2aedb46 Binary files /dev/null and b/src/images/products/cookie1.jpg differ diff --git a/src/images/products/cookie2.jpg b/src/images/products/cookie2.jpg new file mode 100644 index 000000000..2724a9538 Binary files /dev/null and b/src/images/products/cookie2.jpg differ diff --git a/src/images/products/donut1.jpg b/src/images/products/donut1.jpg new file mode 100644 index 000000000..95e2e1a36 Binary files /dev/null and b/src/images/products/donut1.jpg differ diff --git a/src/images/products/donut2.jpg b/src/images/products/donut2.jpg new file mode 100644 index 000000000..a9d03aad9 Binary files /dev/null and b/src/images/products/donut2.jpg differ diff --git a/src/images/right-arrow.svg b/src/images/right-arrow.svg new file mode 100644 index 000000000..139e70319 --- /dev/null +++ b/src/images/right-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media-icon/facebook.svg b/src/images/social-media-icon/facebook.svg new file mode 100644 index 000000000..268bb1039 --- /dev/null +++ b/src/images/social-media-icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media-icon/instagram.svg b/src/images/social-media-icon/instagram.svg new file mode 100644 index 000000000..cbda47cc7 --- /dev/null +++ b/src/images/social-media-icon/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media-icon/twitter.svg b/src/images/social-media-icon/twitter.svg new file mode 100644 index 000000000..cf9a9fbbe --- /dev/null +++ b/src/images/social-media-icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..e13f1fc44 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; +html { + font-family: Inter, Arial, Helvetica, sans-serif; + font-weight: 400; font-style: normal; + scroll-behavior: smooth; } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..09667c88e 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,61 @@ h1 { @extend %h1; + + font-style: normal; + font-weight: normal; + font-size: 64px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + + @include on-tablet { + font-style: normal; + font-weight: normal; + font-size: 80px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + } + + @include on-desktop-1024 { + font-style: normal; + font-weight: normal; + font-size: 144px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + } +} + +h2 { + font-style: normal; + font-weight: normal; + font-size: 48px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + + @include on-tablet { + font-style: normal; + font-weight: normal; + font-size: 56px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + } + + @include on-desktop-1024 { + font-style: normal; + font-weight: normal; + font-size: 72px; + line-height: 85%; + + letter-spacing: -0.05em; + text-transform: uppercase; + } } diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..1d6f97d5f --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,84 @@ +.about-us { + --grid-column: span 2; + --font-size-title: 48px; + + background-image: url(../images/background/crumbs.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + margin-top: 72px; + padding-bottom: 72px; + + @include on-tablet { + --grid-column: span 4; + --font-size-title: 56px; + + margin-top: 152px; + padding-bottom: 152px; + } + + @include on-desktop-1024 { + --font-size-title: 72px; + + margin-top: 178px; + padding-bottom: 350px; + } + + &__top { + row-gap: 32px; + + @include page-grid; + } + + &__bottom { + margin-top: 64px; + row-gap: 48px; + + @include page-grid; + + @include on-tablet { + margin-top: 72px; + row-gap: 80px; + } + + @include on-desktop-1024 { + margin-top: 144px; + } + } + + &__title { + display: inline-block; + color: $accent-orange; + + letter-spacing: -5%; + text-transform: uppercase; + font-size: var(--font-size-title); + grid-column: var(--grid-column); + } + + &__description { + font-size: 16px; + display: inline-block; + grid-column: var(--grid-column); + } + + &__stat-block { + grid-column: var(--grid-column); + + @include on-desktop-1024 { + grid-column: span 2; + } + + &-value { + text-transform: uppercase; + letter-spacing: -5%; + font-size: 96px; + color: $accent-orange; + } + + &-label { + font-size: 16px; + } + } +} diff --git a/src/styles/blocks/buttons.scss b/src/styles/blocks/buttons.scss new file mode 100644 index 000000000..00fa11916 --- /dev/null +++ b/src/styles/blocks/buttons.scss @@ -0,0 +1,86 @@ +.button-first { + display: flex; + font-weight: 500; + color: $accent-orange; + gap: 7px; + text-transform: uppercase; + letter-spacing: 2%; + text-decoration: none; + transition: + color 0.3s, + transform 0.3s; + @include hover-underline; + + @include icon-button('../images/Vector.svg', $accent-orange); + + &:focus::before { + background-color: $dark-orange; + } + + &:focus { + color: $dark-orange; + } + + &:hover { + transform: scale(1.1); + } + + &:hover::before { + transform: scale(1.2); + } + + &--order { + @include icon-button('../images/right-arrow.svg', $accent-orange); + + width: fit-content; + } +} + +.button-second { + display: flex; + justify-content: center; + font-weight: 500; + color: $accent-orange; + gap: 7px; + background-color: transparent; + padding: 20px; + border-radius: 32px; + border: 2px solid $accent-orange; + text-transform: uppercase; + letter-spacing: 2%; + text-decoration: none; + transition: + color $translition-duration, + transform $translition-duration, + background-color $translition-duration; + + @include icon-button('../images/Vector.svg', $accent-orange) { + transition: $translition-duration; + } + + &:focus { + background-color: $dark-orange; + border-color: $dark-orange; + color: $white; + &::before { + background-color: $white; + } + } + &:hover { + border-color: $accent-orange; + background-color: $accent-orange; + color: $white; + &::before { + background-color: $white; + } + } + + &:disabled { + color: $light-orange; + background-color: transparent; + border-color: $light-orange; + &::before { + background-color: $light-orange; + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..86b13a554 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,35 @@ +.card { + &__image-wrapper { + display: block; + overflow: hidden; + cursor: pointer; + border-radius: 8px; + margin-bottom: 16px; + } + &__image { + width: 100%; + transition: transform $translition-duration; + &:hover { + transform: scale(1.2); + } + } + + &__name { + color: $grey; + font-size: 16px; + margin-top: 0; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 2%; + font-weight: 500; + } + + &__paragraph { + letter-spacing: -1%; + font-weight: 400; + font-size: 16px; + line-height: 150%; + margin-top: 0; + margin-bottom: 16px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..521d4834a --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,137 @@ +.footer { + background-color: $black; + @include page-grid; + + padding-block: 56px; + @include on-tablet { + padding-block: 88px; + } + &__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 16px; + + &-title { + color: $grey; + text-transform: uppercase; + } + &-link { + text-decoration: none; + color: $white; + transition: color $translition-duration; + + &:hover { + color: $accent-orange; + } + } + } + + &__logo-link { + display: flex; + align-content: center; + height: 40px; + width: 168px; + margin-bottom: 40px; + } + + &__logo { + display: flex; + align-items: center; + align-content: center; + color: $white; + + transition: color $translition-duration; + &:hover { + color: $accent-orange; + } + } + + &__menu { + grid-column: span 2; + margin-block: 0 64px; + + @include on-tablet { + grid-column: span 4; + } + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 40px; + grid-column: span 2; + margin-bottom: 40px; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-1024 { + display: grid; + grid-template-columns: repeat(4, 1fr); + &--container { + grid-column: span 2; + } + } + + &-title { + font-size: 48px; + text-transform: uppercase; + color: $white; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop-1024 { + grid-column: span 4; + font-size: 72px; + } + } + } + + &__social-media { + grid-column: span 2; + display: flex; + gap: 32px; + justify-content: start; + padding: 0; + list-style: none; + + @include on-tablet { + grid-column: span 4; + } + + &-icon { + display: block; + width: 24px; + height: 24px; + color: $accent-orange; + transition: color $translition-duration; + &:hover { + color: $white; + } + } + + &-icon-link { + display: block; + text-decoration: none; + } + } + + &__copyright { + display: inline-block; + align-self: center; + font-size: 16px; + color: $grey; + grid-column: span 2; + margin-top: 40px; + @include on-tablet { + margin-top: 0; + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..dacbf8163 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,4 @@ +.header { + margin: 0; + padding: 0; +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..339cbe054 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,93 @@ +.hero { + @include page-grid; + + @include on-desktop-1024 { + grid-template-rows: 0.6fr 1fr 0.4fr 1fr; + } + + &__paragraph { + text-align: center; + display: block; + grid-column: span 2; + margin-block: 32px; + @include on-tablet { + grid-column: span 4; + text-align: start; + margin-block: 80px 16px; + } + + @include on-desktop-1024 { + grid-column: span 2; + grid-row: 2; + margin: 0; + } + } + + &__h1-container { + grid-column: span 2; + display: flex; + flex-direction: column; + font-size: 50px; + position: relative; + align-items: center; + + @include on-tablet { + grid-column: 3 / -3; + } + + @include on-desktop-1024 { + grid-row: 1 / -1; + margin-bottom: 66px; + } + @include on-desktop-1200 { + margin-bottom: 26px; + } + } + + &__h1 { + color: $accent-orange; + font-size: 13cqw; + text-align: center; + margin: 0; + pointer-events: none; + + @include on-tablet { + margin: 0; + height: 100%; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + font-size: 11.4cqw; + width: 100vw; + + @include on-desktop-1200 { + font-size: 144px; + } + } + } + + &__image { + background-position: center; + background-repeat: no-repeat; + width: 100%; + background-size: contain; + aspect-ratio: 1 / 1; + background-image: url(../images/Cookie.png); + } + + &__button { + grid-column: span 2; + margin-bottom: 40px; + @include on-tablet { + grid-column: 3 / -3; + margin-block: 80px 228px; + } + @include on-desktop-1024 { + grid-column: 1 / 3; + grid-row: 4; + margin: 0; + height: fit-content; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..f1f5e4ec4 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,27 @@ +.menu { + &__nav { + align-items: center; + pointer-events: none; + position: absolute; + inset: 0; + display: flex; + justify-content: center; + } + + &__button-close { + color: #f9512e; + display: inline-block; + width: 16px; + height: 16px; + background-color: $black; + transition: background-color $translition-duration; + transition: transform $translition-duration; + -webkit-mask: url(../images/close.svg) no-repeat center / contain; + mask: url(../images/close.svg) no-repeat center / contain; + + &:hover { + transform: scale(1.2); + background-color: $accent-orange; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..567fd3767 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,39 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + gap: 64px; + display: flex; + } + + &__item { + display: block; + } + + &__link { + display: flex; + align-items: center; + font-size: 16px; + color: $black; + text-decoration: none; + position: relative; + letter-spacing: -1%; + transition: + color 0.3s, + transform 0.3s; + + &:hover { + color: $accent-orange; + } + + @include hover-underline; + } + &__list--column { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + pointer-events: all; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..7d36aa3c9 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,23 @@ +.page { + position: relative; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: absolute; + top: 0; + width: 100%; + height: 100vh; + pointer-events: none; + opacity: 0; + background-color: $light-pink; + + &:target { + opacity: 1; + pointer-events: all; + z-index: 1; + } + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 000000000..bedc63c42 --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,44 @@ +.products { + &__title-container { + @include page-grid; + } + + &__h2 { + color: $accent-orange; + grid-column: 1 / -1; + margin-block: 0 24px; + } + + &__paragraph { + grid-column: 1 / -1; + margin-block: 0 80px; + } + + &__card-container { + row-gap: 54px; + + @include page-grid; + + @include on-tablet { + row-gap: 80px; + } + + .card { + grid-column: -1 / 1; + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-1024 { + grid-column: span 3; + &:nth-child(4n - 1) { + grid-column: 3 / 6; + } + } + + @include on-desktop-1024 { + grid-column: span 3; + } + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..a2fcdc871 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,56 @@ +.top-bar { + align-items: center; + box-sizing: border-box; + display: flex; + height: 64px; + justify-content: space-between; + background-color: $light-pink; + padding: 16px; + + @include on-desktop-1024 { + padding: 28px 32px; + + height: 88px; + } + + &__logo { + display: block; + height: 32px; + width: 136px; + object-fit: fill; + color: #1c1a26; + transition-property: color; + transition-duration: $translition-duration; + &:hover { + color: #f9512e; + } + } + + &__nav { + display: none; + @include on-desktop-1024 { + display: inline-block; + } + } + + &__open-menu { + color: #f9512e; + display: inline-block; + width: 24px; + height: 24px; + background-color: $black; + transition: background-color $translition-duration; + transition: transform $translition-duration; + -webkit-mask: url(../images/burger-menu.svg) no-repeat center / contain; + mask: url(../images/burger-menu.svg) no-repeat center / contain; + + &:hover { + transform: scale(1.2); + background-color: $accent-orange; + } + + @include on-desktop-1024 { + display: none; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..84c0ea59d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'utils/normalize'; +@import 'blocks/page'; +@import 'blocks/menu'; +@import 'blocks/buttons'; +@import 'blocks/nav'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/hero'; +@import 'blocks/product'; +@import 'blocks/card'; +@import 'blocks/about-us'; +@import 'blocks/footer'; body { - background: $c-gray; + background: $light-pink; + margin: 0; +} + +.main { + display: flex; + flex-direction: column; + justify-content: center; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..41a5a5e3a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,103 @@ #{$_property}: $_toValue; } } + +@mixin on-desktop-1200 { + @media (min-width: 1200px) { + @content; + } +} + +@mixin on-desktop-1024 { + @media (min-width: 1024px) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + column-gap: 16px; + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + justify-content: center; + padding: 0 16px; + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + padding: 0 44px; + } + + @include on-desktop-1024 { + grid-template-columns: repeat(var(--columns), 1fr); + } + + @include on-desktop-1200 { + --columns: 8; + + column-gap: 24px; + grid-template-columns: repeat(var(--columns), minmax(0, 128px)); + padding: 0 44px; + } +} + +@mixin hover-underline { + position: relative; + &:hover { + transform: scale(1); + } + + &::after { + background: #f9512e; + bottom: -8px; + color: aliceblue; + content: ''; + transition-duration: $translition-duration; + position: absolute; + height: 2px; + left: 50%; + width: 0; + } + + &:focus::after { + background: $dark-orange; + left: 0; + width: calc(100% + 4px); + transform: translateX(-1px); + } + + &:hover::after { + left: 0; + width: calc(100% + 4px); + transform: translateX(-1px); + } +} + +@mixin icon-button($link_image, $color) { + &::before { + background-color: $color; + content: ''; + + transform: translateY(12); + transform: translateX(-12); + + display: inline-block; + + width: 18px; + height: 18px; + + -webkit-mask: url($link_image) no-repeat center / contain; + mask: url($link_image) no-repeat center / contain; + + transition-duration: $translition-duration; + @content; + } +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..38e610f5a --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,8 @@ +h1, +h2, +h3, +p, +main, +body { + margin: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..d84c9d942 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ +// color +$dark-orange: #b2341a; +$accent-orange: #f9512e; +$light-orange: #fba28f; +$light-pink: #ffeefc; +$light-blue: #eef7ff; +$black: #1c1a26; +$grey: #7f8096; +$white: #fff; $c-gray: #eee; +$light-pink: #ffeefc; +$translition-duration: 300ms;