diff --git a/README.md b/README.md index 3a2fb5928..d794e9cc3 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://nineuito.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package.json b/package.json index aaf3693d4..abf66b545 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.5", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/about-us/crumbs-main-1x.png b/src/images/about-us/crumbs-main-1x.png new file mode 100644 index 000000000..f3f78ae23 Binary files /dev/null and b/src/images/about-us/crumbs-main-1x.png differ diff --git a/src/images/about-us/crumbs-mobile-2x.png b/src/images/about-us/crumbs-mobile-2x.png new file mode 100644 index 000000000..378a7308d Binary files /dev/null and b/src/images/about-us/crumbs-mobile-2x.png differ diff --git a/src/images/favicon/favicon.png b/src/images/favicon/favicon.png new file mode 100644 index 000000000..f12d0fc4a Binary files /dev/null and b/src/images/favicon/favicon.png differ diff --git a/src/images/header-img/cookie-1.5x-desktop.png b/src/images/header-img/cookie-1.5x-desktop.png new file mode 100644 index 000000000..a38415458 Binary files /dev/null and b/src/images/header-img/cookie-1.5x-desktop.png differ diff --git a/src/images/header-img/cookie-1.5x-laptop.png b/src/images/header-img/cookie-1.5x-laptop.png new file mode 100644 index 000000000..2db12e5a2 Binary files /dev/null and b/src/images/header-img/cookie-1.5x-laptop.png differ diff --git a/src/images/header-img/cookie-1.5x-tablet.png b/src/images/header-img/cookie-1.5x-tablet.png new file mode 100644 index 000000000..b435e5fb2 Binary files /dev/null and b/src/images/header-img/cookie-1.5x-tablet.png differ diff --git a/src/images/header-img/cookie-2x-mobile.png b/src/images/header-img/cookie-2x-mobile.png new file mode 100644 index 000000000..f825d7421 Binary files /dev/null and b/src/images/header-img/cookie-2x-mobile.png differ diff --git a/src/images/products-cards/products-card-1.png b/src/images/products-cards/products-card-1.png new file mode 100644 index 000000000..a1ad78a09 Binary files /dev/null and b/src/images/products-cards/products-card-1.png differ diff --git a/src/images/products-cards/products-card-2.png b/src/images/products-cards/products-card-2.png new file mode 100644 index 000000000..da1a413aa Binary files /dev/null and b/src/images/products-cards/products-card-2.png differ diff --git a/src/images/products-cards/products-card-3.png b/src/images/products-cards/products-card-3.png new file mode 100644 index 000000000..0669aa16e Binary files /dev/null and b/src/images/products-cards/products-card-3.png differ diff --git a/src/images/products-cards/products-card-4.png b/src/images/products-cards/products-card-4.png new file mode 100644 index 000000000..6a3ad4103 Binary files /dev/null and b/src/images/products-cards/products-card-4.png differ diff --git a/src/images/products-cards/products-card-5.png b/src/images/products-cards/products-card-5.png new file mode 100644 index 000000000..ee1c58db4 Binary files /dev/null and b/src/images/products-cards/products-card-5.png differ diff --git a/src/images/products-cards/products-card-6.png b/src/images/products-cards/products-card-6.png new file mode 100644 index 000000000..285bd9a98 Binary files /dev/null and b/src/images/products-cards/products-card-6.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..5800e5304 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,797 @@ - + - Title + Creative Bakery + + - -

Hello Mate Academy

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

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

+

Creative bakery

+ + + + + Cookie image + + + + + + +

Learn more

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

What we bake

+

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

+
+
+ product card +
+

Cakes

+

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

+ + + + + + order + +
+
+
+ product card +
+

Cakes

+

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

+ + + + + + order + +
+
+
+ product card +
+

Donuts

+

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

+ + + + + + order + +
+
+
+ product card +
+

Donuts

+

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

+ + + + + + order + +
+
+
+ product card +
+

Cakes

+

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

+ + + + + + order + +
+
+
+ product card +
+

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/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2e49733c4 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,25 @@ 'use strict'; + + function handleScroll() { + const topBar = document.querySelector('.top-bar-header'); + if (window.scrollY > 0) { + topBar.classList.add('scrolled'); + } else { + topBar.classList.remove('scrolled'); + } + } + +window.addEventListener('scroll', handleScroll); + +function changeBackgroundColor() { + const pageBody = document.querySelector('.page__body'); + const currentColor = getComputedStyle(pageBody).getPropertyValue('background-color').trim(); + + if (currentColor === 'rgb(255, 238, 252)') { + pageBody.style.backgroundColor = '#EEF7FF'; + } else { + pageBody.style.backgroundColor = '#FFEEFC'; + } +} + +setInterval(changeBackgroundColor, 5000); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..e9d7a7dd1 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +@import 'https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900'; diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..5811056d7 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,15 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +p { + @extend %p; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..b73a54c61 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,5 @@ @import 'utils/vars'; +@import 'utils/reset'; +@import 'utils/normalize'; @import 'utils/mixins'; @import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..875b43abe --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,194 @@ +.about-us { + padding-top: 68px; + margin-top: -68px; + + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 152px; + } + + @include on-laptop { + padding-top: 90px; + margin-top: -90px; + + margin-bottom: 349px; + } + + &__content { + @include page-grid; + + position: relative; + } + + &__background-image { + background-image: url(/src/images/about-us/crumbs-mobile-2x.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + position: absolute; + width: 100vw; + height: 300px; + top: 544px; + left: 50%; + right: 50%; + transform: translateX(-50%); + + z-index: -1; + + @include on-tablet { + background-image: url(/src/images/about-us/crumbs-main-1x.png); + height: 493px; + width: 526px; + top: 51px; + } + + @include on-laptop { + width: 718px; + height: 673px; + inset: 0; + transform: translateX(0%); + grid-column: 3 / 8; + } + + @include on-desktop { + grid-column: 1 / -1; + left: 50%; + right: 50%; + transform: translateX(-50%); + } + } + + &__title { + grid-column: 1 / -1; + + font-size: 48px; + line-height: 40.8px; + letter-spacing: -0.05em; + text-align: left; + color: $accent-orange-color; + + margin-bottom: 32px; + + @include on-tablet { + font-size: 56px; + line-height: 47.6px; + grid-column: span 4; + } + + @include on-laptop { + font-size: 72px; + line-height: 61.2px; + } + } + + &__description { + grid-column: 1 / -1; + + margin-bottom: 64px; + + @include on-tablet { + grid-column: span 4; + + margin-bottom: 72px; + } + + @include on-laptop { + line-height: 24px; + + margin-bottom: 146px; + } + } + + &__statistics { + display: flex; + flex-direction: column; + gap: 8px; + + margin-bottom: 48px; + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + &:nth-last-child(-n + 2) { + margin-bottom: 0; + } + } + + @include on-laptop { + margin-bottom: 0; + } + } + + &__statistics-title { + font-size: 96px; + line-height: 81.6px; + letter-spacing: -0.05em; + color: $accent-orange-color; + } + + &__statistics-year { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 2; + grid-column: span 4; + + margin-bottom: 80px; + } + + @include on-laptop { + grid-column: span 2; + + margin-bottom: 0; + } + } + + &__statistics-stores { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 2; + grid-column: span 4; + + margin-bottom: 80px; + } + + @include on-laptop { + grid-column: span 2; + + margin-bottom: 0; + } + } + + &__statistics-companies { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 3; + grid-column: span 4; + } + + @include on-laptop { + grid-row: 2; + grid-column: span 2; + } + } + + &__statistics-clients { + grid-column: 1 / -1; + + @include on-tablet { + grid-row: 3; + grid-column: span 4; + } + + @include on-laptop { + grid-row: 2; + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..a0cc603d1 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,3 @@ +.container { + @include padding-inline; +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..62cc9fd01 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,220 @@ +.footer { + &__content { + @include page-grid; + + padding-block: 56px; + + @include on-tablet { + padding-block: 88px; + } + } + + &__logo { + width: 168px; + height: 40px; + + grid-column: 1 / -1; + + margin-bottom: 40px; + + path { + stroke-dasharray: 500; + stroke-dashoffset: 500; + animation: + draw-path 2s ease forwards, + change-color-footer 5s infinite alternate; + } + + @include on-tablet { + grid-row: 1; + grid-column: span 4; + } + } + + &__title { + font-size: 48px; + line-height: 40.8px; + color: $white-color-main; + + grid-row: 3; + grid-column: 1 / -1; + + margin-bottom: 40px; + + @include on-tablet { + font-size: 56px; + line-height: 47.6px; + + grid-row: 1; + grid-column: span 4; + } + + @include on-laptop { + font-size: 72px; + line-height: 61.2px; + } + } + + &__info { + &__nav { + &-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &-link { + color: $white-color-main; + + &::after { + background-color: $white-color-main; + } + } + } + } + + &__info-title { + font-weight: 500; + line-height: 16px; + color: $grey-color; + } + + &__info-menu { + display: flex; + flex-direction: column; + gap: 16px; + + grid-row: 2; + grid-column: 1 / -1; + + margin-bottom: 64px; + + @include on-tablet { + margin-bottom: 0; + + grid-row: 2; + grid-column: span 4; + } + + @include on-laptop { + margin-bottom: 48px; + } + } + + &__info-call { + display: flex; + flex-direction: column; + gap: 16px; + + grid-row: 4; + grid-column: 1 / -1; + + margin-bottom: 40px; + + @include on-tablet { + grid-row: 2; + grid-column: span 4; + } + + @include on-laptop { + grid-column: span 2; + } + } + + &__info-call-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__info-call-link { + color: $white-color-main; + + &::after { + background-color: $white-color-main; + } + } + + &__info-email { + display: flex; + flex-direction: column; + gap: 16px; + + grid-row: 5; + grid-column: 1 / -1; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + + grid-row: 3; + grid-column: 5 / 9; + } + + @include on-laptop { + grid-row: 2; + grid-column: span 2; + } + } + + &__info-email-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__info-email-link { + color: $white-color-main; + + &::after { + background-color: $white-color-main; + } + } + + &__icons { + grid-row: 6; + grid-column: 1 / -1; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 0; + + grid-row: 4; + grid-column: span 4; + } + } + + &__icons-list { + display: flex; + gap: 32px; + } + + &__icon-link { + &:focus { + path { + fill: $grey-color; + } + } + + @include hover-path-fill(fill, $grey-color); + } + + &__copyright { + grid-row: 7; + grid-column: 1 / -1; + + line-height: 24px; + letter-spacing: -0.01em; + color: $grey-color; + + @include on-tablet { + display: flex; + align-items: center; + + grid-row: 4; + grid-column: 5 / 9; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..53ecce79b --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,299 @@ +.header { + margin-top: 64px; + + @include on-laptop { + margin-top: 88px; + margin-bottom: 152px; + } + + &__nav { + display: none; + } + + @include on-laptop { + &__nav { + display: block; + + &-list { + display: flex; + flex-direction: row; + gap: 64px; + } + + &-link { + line-height: 24px; + color: $black-color-main; + + &-call { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: $accent-orange-color; + text-decoration: none; + } + } + } + } + + &__content { + padding-top: 32px; + + @include page-grid; + + @include on-tablet { + padding-top: 80px; + } + + @include on-laptop { + padding-top: 0; + } + } + + &__description { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + text-align: center; + + grid-column: 1 / -1; + grid-row: 1; + + margin-bottom: 32px; + + @include on-tablet { + margin-bottom: 16px; + + text-align: left; + grid-row: 1; + grid-column: 1 / 5; + } + + @include on-laptop { + margin-top: 135px; + grid-column: 1 / 3; + grid-row: 1; + } + } + + &__title { + font-size: 64px; + line-height: 54.4px; + letter-spacing: -0.05em; + text-align: center; + color: $accent-orange-color; + + grid-column: 1 / -1; + grid-row: 2; + + @include on-tablet { + margin-top: 130px; + letter-spacing: -0.05em; + + font-size: 67px; + line-height: 54.4px; + } + + @media (min-width: 738px) { + font-size: 80px; + line-height: 68px; + } + + @include on-laptop { + margin-top: 235px; + + font-size: 106px; + font-weight: 400; + line-height: 115.6px; + letter-spacing: -0.05em; + + grid-column: 1 / -1; + grid-row: 1; + } + + @media (min-width: 1193px) { + font-size: 136px; + line-height: 115.6px; + } + + @include on-desktop { + font-size: 116px; + line-height: 115.6px; + } + + @media (min-width: 1418px) { + font-size: 144px; + line-height: 122.4px; + } + } + + &__image { + display: flex; + justify-content: center; + align-items: center; + z-index: -1; + + grid-column: 1 / -1; + grid-row: 3; + + @include on-tablet { + grid-column: 3 / 7; + grid-row: 2; + } + + @include on-laptop { + grid-column: 2 / 8; + position: absolute; + top: 88px; + right: 0; + left: 0; + } + } + + &__image-cookie { + width: 288px; + height: 290px; + + animation: float 5s ease-in-out infinite; + + @include on-tablet { + width: 326px; + height: 328px; + + margin-bottom: 80px; + } + + @include on-laptop { + width: 544px; + height: 546px; + margin-bottom: 0; + } + + @include on-desktop { + width: 584px; + height: 586px; + } + } + + &__button { + display: flex; + justify-content: center; + align-items: center; + gap: 1px; + + box-sizing: border-box; + width: 290px; + + margin-inline: auto; + grid-column: 1 / -1; + grid-row: 4; + + padding: 16px 77px; + border-radius: 32px; + border: 2px solid $accent-orange-color; + text-decoration: none; + + margin-bottom: 104px; + + @include hover(background-color, $accent-orange-color); + @include hover-path-fill(fill, $white-color-main); + + &-text { + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: $accent-orange-color; + + transition: color $effect-duration ease-in-out; + } + + &:hover { + .header__button-text { + color: $white-color-main; + } + } + + &:focus { + background-color: $dark-orange-color; + border-color: $dark-orange-color; + + path { + fill: $white-color-main; + } + + .header__button-text { + color: $white-color-main; + } + } + + &.disabled { + background-color: $light-pink-color; + border: 2px solid $light-orange-color; + cursor: not-allowed; + + .header__button-text { + color: $light-orange-color; + } + + path { + fill: $light-orange-color; + } + } + + @include on-tablet { + margin-bottom: 228px; + width: 326px; + grid-column: 3 / 7; + grid-row: 3; + } + + @include on-laptop { + margin-top: 395px; + margin-bottom: 161px; + padding: 16px 62px; + width: 260px; + height: 56px; + grid-column: 1 / 3; + grid-row: 1; + } + + @include on-desktop { + margin-bottom: 138px; + } + } +} + +@keyframes float { + 0% { + transform: translateY(0) scale(1) rotate(0deg); + filter: drop-shadow(0 0 10px $accent-orange-color); + } + + 25% { + transform: translateY(-10px) scale(1.05) rotate(5deg); + filter: drop-shadow(0 0 15px $accent-orange-color); + } + + 50% { + transform: translateY(0) scale(1.1) rotate(-5deg); + filter: drop-shadow(0 0 20px $accent-orange-color); + } + + 75% { + transform: translateY(10px) scale(1.05) rotate(3deg); + filter: drop-shadow(0 0 15px $accent-orange-color); + } + + 100% { + transform: translateY(0) scale(1) rotate(0deg); + filter: drop-shadow(0 0 10px $accent-orange-color); + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..00d737e7d --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,85 @@ +.logo { + display: block; + animation: logo-scale-up 1.5s ease-in-out forwards; + + svg { + width: 100%; + height: auto; + } +} + +@keyframes draw-path { + to { + stroke-dashoffset: 0; + } +} + +@keyframes change-color-top-bar { + 0% { + fill: $black-color-main; + } + + 50% { + fill: $accent-orange-color; + } + + 100% { + fill: $dark-orange-color; + } +} + +@keyframes change-color-footer { + 0% { + fill: $white-color-main; + } + + 50% { + fill: $accent-orange-color; + } + + 100% { + fill: $dark-orange-color; + } +} + +@keyframes logo-scale-up { + 0% { + transform: scale(0.5); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.icon { + display: inline-block; + cursor: pointer; + position: relative; + + @include on-tablet { + width: 30; + height: 30; + + svg { + width: 30; + height: 30; + } + } + + svg { + transition: transform 0.3s ease-in-out; + } + + &:hover svg { + transform: rotate(180deg); + } + + &-burger { + @include on-laptop { + display: none; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..42b005986 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,69 @@ +.menu { + background-color: $light-pink-color; + height: 100vh; + z-index: 2; + + &__bottom { + margin-top: 132px; + } + + &__nav { + display: flex; + flex-direction: column; + align-items: center; + + &-list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 24px; + + @include on-tablet { + gap: 100px; + } + } + + &-link { + font-size: 16px; + line-height: 24px; + color: $black-color-main; + + @include on-tablet { + font-size: 25px; + line-height: 25px; + } + } + + &-link-call { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: $accent-orange-color; + text-decoration: none; + + @include on-tablet { + font-size: 27px; + line-height: 27px; + + svg { + width: 30; + height: 30; + } + + path { + width: 30; + height: 30; + } + } + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..9d8b6ce3a --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,34 @@ +.nav { + &__list { + list-style: none; + } + + &__link { + text-decoration: none; + font-weight: 400; + letter-spacing: -0.01em; + padding-bottom: 2px; + + position: relative; + + @include hover(color, $accent-orange-color); + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: $black-color-main; + transform: scaleX(0); + transform-origin: bottom right; + transition: transform 0.25s ease-out; + } + + &:hover::after { + transform: scaleX(1); + transform-origin: bottom left; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..46a88abf7 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,43 @@ +.page { + font-family: Inter, sans-serif; + font-weight: 400; + color: $black-color-main; + + scroll-behavior: smooth; + + &__body { + transition: background-color 3s ease; + background-color: #ffeefc; + min-width: 320px; + + .page__body.lightblue { + background-color: #eef7ff; + } + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + transition: all $effect-duration; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0%); + pointer-events: all; + } + } + + &__footer { + background-color: $black-color-main; + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..eabfd4513 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,202 @@ +:root { + --glow-hue: 222deg; + --shadow-hue: 180deg; + --spring-easing: linear( + 0, + 0, + 0.01 0.9%, + 0.04 1.8%, + 0.16, + 0.31 5.8%, + 0.79 11.1%, + 1.01 14.2%, + 1.1, + 1.16, + 1.2, + 1.22 20.3%, + 1.23, + 1.23, + 1.23, + 1.21 24.6%, + 1.18 26.9%, + 1.06 32.6%, + 1.01 35.5%, + 0.98, + 0.97, + 0.96, + 0.95 42%, + 0.95 44.1%, + 0.95 46.5%, + 1 57.2%, + 1.01, + 1.01 63.3%, + 1.01 68.3%, + 1 84%, + 1 + ); + --spring-duration: 1.33s; +} + +.products { + padding-top: 68px; + margin-top: -68px; + + margin-bottom: 72px; + + @include on-tablet { + margin-bottom: 152px; + } + + @include on-laptop { + padding-top: 90px; + margin-top: -90px; + + margin-bottom: 178px; + } + + &__title { + font-size: 48px; + line-height: 40.8px; + letter-spacing: -0.05em; + color: $accent-orange-color; + + margin-bottom: 24px; + } + + &__description { + font-size: 16px; + line-height: 24px; + letter-spacing: -0.01em; + + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 80px; + } + } + + &__cards { + @include page-grid; + + gap: 56px; + + @include on-tablet { + gap: 24px; + row-gap: 80px; + } + } + + &__card { + grid-column: 1 / -1; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include on-tablet { + grid-column: span 4; + } + + @include on-laptop { + &-position-left { + grid-column: span 3; + } + + &-position-right-1 { + grid-column: 3 / 6; + } + + &-position-right-2 { + grid-column: span 3; + } + } + } + + &__card-image { + height: 356px; + width: 288px; + + filter: drop-shadow(0 0 20px pink); + + margin-bottom: 16px; + + @media ((min-width: 640px) and (max-width: 767px)) { + width: 270px; + } + + @media ((min-width: 768px) and (max-width: 1023px)) { + width: 328px; + height: 424px; + } + + @include on-laptop { + width: 100%; + height: 512px; + } + } + + &__card-content-text { + display: flex; + flex-direction: column; + justify-content: center; + } + + &__card-name { + line-height: 16px; + text-transform: uppercase; + color: $grey-color; + + margin-bottom: 8px; + } + + &__card-description { + letter-spacing: -0.01em; + + height: 48px; + overflow: auto; + + margin-bottom: 16px; + } + + &__card-order { + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + display: flex; + align-items: center; + gap: 4px; + text-decoration: none; + text-transform: uppercase; + color: $accent-orange-color; + position: relative; + isolation: isolate; + padding: 0.8em 1.4em; + border-radius: 0.66em; + box-shadow: + 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%), + inset 0 -10px 20px -10px hsla(var(--shadow-hue), 10%, 90%, 95%); + background-image: linear-gradient( + 315deg, + #ffc4ec -10%, + #efdbfd 50%, + #ffedd6 110% + ); + transition: all var(--spring-duration) var(--spring-easing); + scale: 1; + + &:active { + scale: 1.04; + transition-duration: calc(var(--spring-duration) * 0.5); + } + + &:hover:not(:active), + &.active { + transition-duration: calc(var(--spring-duration) * 0.5); + scale: 1.04; + box-shadow: + 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), + inset 0 0 0 transparent; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..bd336e138 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,38 @@ +.top-bar { + padding: 16px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-laptop { + padding: 28px 32px; + } + + &__logo { + path { + stroke-dasharray: 500; + stroke-dashoffset: 500; + animation: + draw-path 2s ease forwards, + change-color-top-bar 5s infinite alternate; + } + } +} + +.top-bar-header { + position: fixed; + right: 0; + top: 0; + left: 0; + background-color: transparent; + transition: + background-color 0.3s, + box-shadow 0.3s; + z-index: 1; +} + +.top-bar-header.scrolled { + background-color: pink; + opacity: 90%; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1a32250af 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,13 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/container'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/icons'; +@import 'blocks/top-bar'; +@import 'blocks/products'; +@import 'blocks/about-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..dfd5e5ebb 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,32 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; font-weight: 400; + + letter-spacing: -0.05em; + text-transform: uppercase; +} + +%h2 { + font-family: Inter, sans-serif; + font-weight: 400; + + letter-spacing: -0.05em; + text-transform: uppercase; +} + +%h3 { + font-family: Inter, sans-serif; + font-weight: 500; + + letter-spacing: 0.02em; +} + +%p { + font-family: Inter, sans-serif; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 150%; + + letter-spacing: -0.01em; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..2d02deaec 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,77 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effect-duration; + &:hover { #{$_property}: $_toValue; } } + +@mixin hover-path-fill($_property, $_toValue) { + path { + transition: $_property $effect-duration; + } + + &:hover path { + #{$_property}: $_toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-default-width) { + @content; + } +} + +@mixin on-laptop { + @media (min-width: $laptop-default-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-default-width) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-laptop { + padding-inline: 44px; + } + + @include on-desktop { + padding-inline: 124px; + max-width: 1200px; + margin-inline: auto; + } +} + +@mixin page-grid { + --columns: 2; + --columns-gap: 16px; + + display: grid; + column-gap: var(--columns-gap); + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + --columns-gap: 24px; + } + + @include on-laptop { + --columns: 8; + --columns-gap: 24px; + } + + @include on-desktop { + --columns: 8; + --columns-gap: 24px; + } +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..830576d91 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,4 @@ +* { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..4c0e1e419 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,35 @@ +html, +body, +div, +span, +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +article, +aside, +footer, +header, +menu, +nav, +section { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1db2a17e8 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ -$c-gray: #eee; +$white-color-main: #fff; +$black-color-main: #1c1a26; +$grey-color: #7f8096; +$light-blue-color: #eef7ff; +$light-pink-color: #ffeefc; +$light-orange-color: #fba28f; +$accent-orange-color: #f9512e; +$dark-orange-color: #b2341a; +$tablet-default-width: 640px; +$laptop-default-width: 1024px; +$desktop-default-width: 1201px; +$effect-duration: 0.3s;