diff --git a/src/images/favicon/favicon.svg b/src/images/favicon/favicon.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/favicon/favicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/Icon-facebook.svg b/src/images/icons/footer/Icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/footer/Icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/Icon-instagram.svg b/src/images/icons/footer/Icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/footer/Icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer/x.svg b/src/images/icons/footer/x.svg new file mode 100644 index 000000000..13881721d --- /dev/null +++ b/src/images/icons/footer/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icons/header/Icon-menu-close.svg b/src/images/icons/header/Icon-menu-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/icons/header/Icon-menu-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header/Icon-menu-open.svg b/src/images/icons/header/Icon-menu-open.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/header/Icon-menu-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header/Icon-phone.svg b/src/images/icons/header/Icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/images/icons/header/Icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/header/Logo.svg b/src/images/icons/header/Logo.svg new file mode 100644 index 000000000..41d4df940 --- /dev/null +++ b/src/images/icons/header/Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/main/icon-arrow.svg b/src/images/icons/main/icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icons/main/icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/main/icon-cookie.svg b/src/images/icons/main/icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/main/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/cakes-one-three.webp b/src/images/main/cakes-one-three.webp new file mode 100644 index 000000000..4bf601086 Binary files /dev/null and b/src/images/main/cakes-one-three.webp differ diff --git a/src/images/main/cakes-one.webp b/src/images/main/cakes-one.webp new file mode 100644 index 000000000..3fca7d08b Binary files /dev/null and b/src/images/main/cakes-one.webp differ diff --git a/src/images/main/cakes-two.webp b/src/images/main/cakes-two.webp new file mode 100644 index 000000000..8e90f6018 Binary files /dev/null and b/src/images/main/cakes-two.webp differ diff --git a/src/images/main/cookie.webp b/src/images/main/cookie.webp new file mode 100644 index 000000000..83679798c Binary files /dev/null and b/src/images/main/cookie.webp differ diff --git a/src/images/main/cookies-two.webp b/src/images/main/cookies-two.webp new file mode 100644 index 000000000..2b880888f Binary files /dev/null and b/src/images/main/cookies-two.webp differ diff --git a/src/images/main/crumbs.png b/src/images/main/crumbs.png new file mode 100644 index 000000000..b314081aa Binary files /dev/null and b/src/images/main/crumbs.png differ diff --git a/src/images/main/crumbs.webp b/src/images/main/crumbs.webp new file mode 100644 index 000000000..299f14452 Binary files /dev/null and b/src/images/main/crumbs.webp differ diff --git a/src/images/main/donuts-one.webp b/src/images/main/donuts-one.webp new file mode 100644 index 000000000..d0788d75c Binary files /dev/null and b/src/images/main/donuts-one.webp differ diff --git a/src/images/main/donuts-two.webp b/src/images/main/donuts-two.webp new file mode 100644 index 000000000..a70d68bb8 Binary files /dev/null and b/src/images/main/donuts-two.webp differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..720a43b89 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,7 @@ -'use strict'; +import Aos from 'aos'; + +window.addEventListener('load', () => { + Aos.init({ + duration: 1200, + }); +}); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..846515278 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,5 @@ +@use 'utils/index' as *; + h1 { @extend %h1; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/aside/_menu.scss b/src/styles/aside/_menu.scss new file mode 100644 index 000000000..3a3a1f58a --- /dev/null +++ b/src/styles/aside/_menu.scss @@ -0,0 +1,12 @@ +.menu { + &__nav { + position: absolute; + inset: 0; + + display: flex; + justify-content: center; + + pointer-events: none; + text-align: center; + } +} diff --git a/src/styles/blocks/_index.scss b/src/styles/blocks/_index.scss new file mode 100644 index 000000000..d69615df8 --- /dev/null +++ b/src/styles/blocks/_index.scss @@ -0,0 +1,4 @@ +@forward 'logo/logo'; +@forward 'top-bar/top-bar'; +@forward 'nav/nav'; +@forward './article/article'; diff --git a/src/styles/blocks/article/_article.scss b/src/styles/blocks/article/_article.scss new file mode 100644 index 000000000..e3888faf6 --- /dev/null +++ b/src/styles/blocks/article/_article.scss @@ -0,0 +1,90 @@ +@use '../../utils/index' as *; + +.article { + display: flex; + flex-direction: column; + gap: 16px; + + &__container-image { + border-radius: 8px; + overflow: hidden; + } + + &__image { + width: 100%; + cursor: pointer; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + aspect-ratio: 328 / 424; + } + + @include on-desktop { + aspect-ratio: 402 / 512; + } + } + + &__h3-title { + @extend %button-text; + + margin-bottom: 8px; + color: $grey; + } + + &__paragraph { + @extend %body-text; + + color: $grey; + } + + &__link-container { + display: flex; + align-items: center; + height: 24px; + } + + &__link { + @extend %button-text; + + position: relative; + display: flex; + align-items: center; + + padding-left: 28px; + + color: $orange; + + &::before { + content: ''; + position: absolute; + display: block; + left: -4px; + width: 24px; + height: 24px; + background-image: url(../images/icons/main/icon-arrow.svg); + background-repeat: no-repeat; + background-size: contain; + } + + &::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + + display: block; + width: 100%; + height: 2px; + background-color: $orange; + + transform: scale(0); + transform-origin: left; + transition: transform $transition; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/logo/_logo.scss b/src/styles/blocks/logo/_logo.scss new file mode 100644 index 000000000..f885e86cb --- /dev/null +++ b/src/styles/blocks/logo/_logo.scss @@ -0,0 +1,22 @@ +@use '../../utils/index' as *; + +.logo-link { + display: block; + + width: 136px; + height: 32px; + + cursor: pointer; + + background-color: $black; + + @include mask('../images/icons/header/Logo.svg'); + + @include hover(background-color, $orange); + + &--footer { + width: 168px; + height: 40px; + background-color: $white; + } +} diff --git a/src/styles/blocks/nav/_nav.scss b/src/styles/blocks/nav/_nav.scss new file mode 100644 index 000000000..71711393f --- /dev/null +++ b/src/styles/blocks/nav/_nav.scss @@ -0,0 +1,69 @@ +@use '../../utils/index' as *; + +.nav { + &__list { + display: flex; + gap: 64px; + + &--menu { + flex-direction: column; + justify-content: center; + gap: 24px; + } + } + + &__link { + @extend %body-text; + + position: relative; + pointer-events: all; + color: $black; + + transition: color $transition; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + left: 0; + + display: block; + width: 100%; + height: 2px; + background-color: $orange; + + transform: scale(0); + transform-origin: left; + transition: transform $transition; + } + + &:hover { + color: $orange; + } + + &:hover::after { + transform: scale(1); + } + + &--contacts { + padding-left: 28px; + text-transform: uppercase; + color: $orange; + letter-spacing: 2%; + + &::before { + content: ''; + + position: absolute; + display: block; + + width: 24px; + height: 24px; + + background-image: url(../images/icons/header/Icon-phone.svg); + background-repeat: no-repeat; + background-size: cover; + } + } + } +} diff --git a/src/styles/blocks/top-bar/_top-bar.scss b/src/styles/blocks/top-bar/_top-bar.scss new file mode 100644 index 000000000..966ada9c4 --- /dev/null +++ b/src/styles/blocks/top-bar/_top-bar.scss @@ -0,0 +1,32 @@ +@use '../../utils/index' as *; + +.top-bar { + display: flex; + align-items: center; + + padding: 20px; + + @include on-desktop { + padding: 28px 32px; + } + + &__menu { + width: 24px; + height: 24px; + margin-left: auto; + + cursor: pointer; + + background-image: url(../images/icons/header/Icon-menu-open.svg); + + @include hover(transform, scale(1.2)); + + @include on-desktop { + display: none; + } + + &--close { + background-image: url(../images/icons/header/Icon-menu-close.svg); + } + } +} diff --git a/src/styles/footer/_footer.scss b/src/styles/footer/_footer.scss new file mode 100644 index 000000000..2a3a55574 --- /dev/null +++ b/src/styles/footer/_footer.scss @@ -0,0 +1,136 @@ +@use '../utils/index' as *; + +.footer { + background-color: $black; + + &__container { + padding-block: 56px; + + @include on-tablet { + row-gap: 48px; + padding-block: 88px; + } + + @include padding-inline; + @include grid-page; + } + + &__menu { + grid-column: 1 / -1; + + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + grid-column: 1 / span 4; + gap: 96px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__contact { + grid-column: 1 / -1; + + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 40px 24px; + + padding-top: 64px; + + @include on-tablet { + grid-column: 5 / span 4; + + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px 24px; + + padding-top: 0; + } + } + + &__title { + @extend %h2; + + color: $white; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 16px; + + &--container-tel, + &--container-email { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: span 2; + } + } + } + + &__item-title { + @extend %button-text; + + color: $grey; + } + + &__link { + @extend %body-text; + + color: $white; + + @include hover(color, $orange); + } + + &__social-madia { + grid-column: 1 / -1; + display: flex; + gap: 32px; + + @include on-tablet { + grid-column: 1 / span 4; + } + } + + &__social-link { + display: block; + width: 24px; + height: 24px; + background-color: $orange; + + &--face { + @include mask('../images/icons/footer/Icon-facebook.svg'); + } + + &--insta { + @include mask('../images/icons/footer/Icon-instagram.svg'); + } + + &--x { + @include mask('../images/icons/footer/x.svg'); + } + + @include hover(background-color, $white); + } + + &__copyright { + @extend %body-text; + + margin-top: 40px; + color: $grey; + + @include on-tablet { + grid-column: 5 / span 4; + margin-top: 0; + } + } +} diff --git a/src/styles/header/_header.scss b/src/styles/header/_header.scss new file mode 100644 index 000000000..a524f5dc9 --- /dev/null +++ b/src/styles/header/_header.scss @@ -0,0 +1,13 @@ +@use '../utils/index' as *; + +.header { + &__nav { + display: none; + height: 100%; + + @include on-desktop { + display: block; + margin-left: auto; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..cab8869f6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,39 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use 'utils' as *; +@use 'typography' as *; +@use 'utils/index' as *; +@use 'blocks/index' as *; +@use 'header/header' as *; +@use 'main/index' as *; +@use 'aside/menu' as *; +@use 'footer/footer' as *; body { - background: $c-gray; + background: $Light-pink; +} + +.page { + position: relative; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + inset: 0; + z-index: 2; + + opacity: 0; + transform: translateY(-100%); + transform-origin: right; + transition: all $transition; + + background: $Light-pink; + + &:target { + opacity: 1; + transform: translateY(0); + } + } } diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss new file mode 100644 index 000000000..478bc8d7e --- /dev/null +++ b/src/styles/main/_index.scss @@ -0,0 +1,6 @@ +@forward 'hero/hero'; +@forward 'products/products'; +@forward 'about/about'; + +@use '../utils/index' as *; + diff --git a/src/styles/main/about/_about.scss b/src/styles/main/about/_about.scss new file mode 100644 index 000000000..3aacad12f --- /dev/null +++ b/src/styles/main/about/_about.scss @@ -0,0 +1,87 @@ +@use '../../utils/index' as *; + +.about-us { + display: flex; + flex-direction: column; + gap: 64px; + padding-block: 72px; + + background-image: url('../images/main/crumbs.webp'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + gap: 72px; + padding-block: 152px; + background-size: 70%; + } + + @include on-desktop { + gap: 144px; + padding-block: 178px 349px; + background-size: 50%; + } + + @include padding-inline; + + &__container-title { + @include grid-page; + + row-gap: 32px; + } + + &__title { + @extend %h2; + + grid-column: 1 / -1; + color: $orange; + + @include on-tablet { + grid-column: 1 / span 4; + } + } + + &__paragraph { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / span 4; + } + } + + &__stat { + @include grid-page; + + row-gap: 48px; + + @include on-tablet { + row-gap: 60px; + } + } + + &__stat-block { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__paragraph, + &__stat-label { + @extend %body-text; + + color: $black; + } + + &__stat-value { + @extend %big-text; + + color: $orange; + } +} diff --git a/src/styles/main/hero/_hero.scss b/src/styles/main/hero/_hero.scss new file mode 100644 index 000000000..87d67dc99 --- /dev/null +++ b/src/styles/main/hero/_hero.scss @@ -0,0 +1,157 @@ +@use '../../utils/index' as *; + +.hero { + padding-block: 32px 40px; + + &__container { + position: relative; + + @include padding-inline; + @include grid-page; + + @include on-desktop { + grid-template-rows: 0.6fr 1fr 0.4fr 1fr; + } + } + + &__paragraph { + @extend %body-text; + + grid-column: 1 / -1; + + text-align: center; + color: $black; + + @include on-tablet { + grid-column: 1 / span 4; + margin-bottom: 16px; + text-align: left; + letter-spacing: 0; + } + + @include on-desktop { + grid-column: 1 / span 2; + grid-row: 2; + } + } + + &__container-title { + grid-column: 1 / -1; + position: relative; + + @include on-tablet { + grid-column: 3 / span 4; + display: flex; + flex-direction: column; + align-items: center; + } + + @include on-desktop { + grid-row: 1 / -1; + } + } + + &__title { + @extend %h1; + + margin-top: 32px; + color: $orange; + pointer-events: none; + + @include on-tablet { + position: absolute; + + display: flex; + justify-content: center; + align-items: center; + + margin-top: 0; + width: calc(100vw - 20px); + height: 100%; + + &[data-aos].aos-animate { + pointer-events: none; + } + } + } + + &__image { + width: 100%; + + background-image: url(../images/main/cookie.webp); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + aspect-ratio: 1 / 1; + } + + &__button { + @extend %button-text; + + grid-column: 1 / -1; + + display: flex; + gap: 4px; + justify-content: center; + align-items: center; + + height: 56px; + border: 2px solid $orange; + border-radius: 32px; + + color: $orange; + &[data-aos].aos-animate { + transition: + opacity 1200ms ease, + transform 1200ms ease, + background-color $transition ease, + color $transition ease !important; + } + + &::before { + content: ''; + display: block; + width: 24px; + height: 24px; + + transition: background-color $transition; + + background-color: $orange; + + mask-image: url(../images/icons/main/icon-cookie.svg); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url(../images/icons/main/icon-cookie.svg); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; + } + + &:hover { + background-color: $orange; + color: $white; + } + + &:hover::before { + background-color: $white; + } + + &:active { + background-color: $dark-orange; + color: $white; + } + + @include on-tablet { + grid-column: 3 / span 4; + margin-block: 80px 228px; + } + + @include on-desktop { + grid-column: 1 / span 2; + grid-row: 4; + margin-block: 0; + } + } +} diff --git a/src/styles/main/products/_products.scss b/src/styles/main/products/_products.scss new file mode 100644 index 000000000..f46a7114e --- /dev/null +++ b/src/styles/main/products/_products.scss @@ -0,0 +1,68 @@ +@use '../../utils/index' as *; + +.products { + &__container { + @include padding-inline; + @include grid-page; + + row-gap: 56px; + + @include on-desktop { + row-gap: 80px; + } + } + + &__title-container { + grid-column: 1 / -1; + + display: flex; + flex-direction: column; + gap: 24px; + } + + &__title { + @extend %h2; + + color: $orange; + } + + &__paragraph { + @extend %body-text; + + color: $black; + } + + &__article { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + &--one, + &--five { + @include on-desktop { + grid-column: 1 / span 3; + } + } + + &--two, + &--six { + @include on-desktop { + grid-column: 4 / span 3; + } + } + + &--three { + @include on-desktop { + grid-column: 3 / span 3; + } + } + + &--four { + @include on-desktop { + grid-column: 6 / span 3; + } + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..a30c6a25f 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,62 @@ +@use './mixins' as *; + %h1 { - font-family: Roboto, sans-serif; + font-size: 64px; + line-height: 85%; + font-family: Inter, Roboto, sans-serif; font-weight: 400; + text-align: center; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 11.4cqw; + } + + @include on-design { + font-size: 144px; + } +} + +%h2 { + font-size: 48px; + line-height: 85%; + font-family: Inter, Roboto, sans-serif; + font-weight: 400; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } +} + +%body-text { + font-family: Inter, Roboto, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: -1%; +} + +%big-text { + font-size: 96px; + line-height: 85%; + font-family: Inter, Roboto, sans-serif; + font-weight: 400; + text-transform: uppercase; + letter-spacing: -5%; +} + +%button-text { + font-family: Inter, Roboto, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 2%; } diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss new file mode 100644 index 000000000..8962e8e00 --- /dev/null +++ b/src/styles/utils/_index.scss @@ -0,0 +1,4 @@ +@forward 'vars'; +@forward 'mixins'; +@forward 'extends'; +@forward 'normalize'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..b78216ed1 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,65 @@ +@use 'vars' as *; + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $transition; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-design { + max-width: $design-min-width; + margin: auto; + } +} + +@mixin grid-page { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 16px; + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } + +} + +@mixin mask($path) { + mask-image: url($path); + mask-repeat: no-repeat; + mask-position: center; + mask-size: cover; + -webkit-mask-image: url($path); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: cover; +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..e77401869 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,16 @@ +* { + box-sizing: border-box; +} + +body, h1, h2, h3, h4, h5, ul, p { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..24ee9f131 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$transition: 0.3s; +$white: #fff; +$Light-pink: #FFEEFC; +$orange: #F9512E; +$dark-orange: #B2341A; +$grey: #7F8096; +$black: #1C1A26; +$tablet-min-width: 640px; +$desktop-min-width: 1024px; +$design-min-width: 1280px;