diff --git a/README.md b/README.md index 3a2fb5928..a58f692b5 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://Cumacea.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..0511d230b 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,538 @@ - + - Title + Creative Bakery + - -

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 +

+
+ +
+
+
+ Cake +
+ +

+ Cakes +

+ +

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

+ + + Order + +
+ +
+
+ Cake +
+ +

+ Cakes +

+ +

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

+ + + Order + +
+
+ +
+
+
+ Donut +
+ +

+ Donuts +

+ +

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

+ + + Order + +
+ +
+
+ Donut +
+ +

+ Donuts +

+ +

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

+ + + Order + +
+
+ +
+
+
+ Cake +
+ +

+ Cakes +

+ +

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ + + Order + +
+ +
+
+ Cookie +
+ +

+ 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/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/fonts/inter-v20-latin-500.woff2 b/src/fonts/inter-v20-latin-500.woff2 new file mode 100644 index 000000000..54f0a595d Binary files /dev/null and b/src/fonts/inter-v20-latin-500.woff2 differ diff --git a/src/fonts/inter-v20-latin-regular.woff2 b/src/fonts/inter-v20-latin-regular.woff2 new file mode 100644 index 000000000..f15b025d6 Binary files /dev/null and b/src/fonts/inter-v20-latin-regular.woff2 differ diff --git a/src/images/about-image/crumbs.png b/src/images/about-image/crumbs.png new file mode 100644 index 000000000..965097ac1 Binary files /dev/null and b/src/images/about-image/crumbs.png differ diff --git a/src/images/header-image/cookie.png b/src/images/header-image/cookie.png new file mode 100644 index 000000000..2a9951c93 Binary files /dev/null and b/src/images/header-image/cookie.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-hover.svg b/src/images/icons/icon-close-hover.svg new file mode 100644 index 000000000..1225a6256 --- /dev/null +++ b/src/images/icons/icon-close-hover.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..8c10df3c5 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie-hover.svg b/src/images/icons/icon-cookie-hover.svg new file mode 100644 index 000000000..5ea176e39 --- /dev/null +++ b/src/images/icons/icon-cookie-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie.svg b/src/images/icons/icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu-hover.svg b/src/images/icons/icon-menu-hover.svg new file mode 100644 index 000000000..b74cb0beb --- /dev/null +++ b/src/images/icons/icon-menu-hover.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/logos/favicon.png b/src/images/logos/favicon.png new file mode 100644 index 000000000..19ce6e6d0 Binary files /dev/null and b/src/images/logos/favicon.png differ diff --git a/src/images/logos/footer-logo.svg b/src/images/logos/footer-logo.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/logos/footer-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logos/logo.svg b/src/images/logos/logo.svg new file mode 100644 index 000000000..c3a0f20e6 --- /dev/null +++ b/src/images/logos/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/products/product-image-1.png b/src/images/products/product-image-1.png new file mode 100644 index 000000000..edb1054cd Binary files /dev/null and b/src/images/products/product-image-1.png differ diff --git a/src/images/products/product-image-2.png b/src/images/products/product-image-2.png new file mode 100644 index 000000000..c89ce23f1 Binary files /dev/null and b/src/images/products/product-image-2.png differ diff --git a/src/images/products/product-image-3.png b/src/images/products/product-image-3.png new file mode 100644 index 000000000..c14f02274 Binary files /dev/null and b/src/images/products/product-image-3.png differ diff --git a/src/images/products/product-image-4.png b/src/images/products/product-image-4.png new file mode 100644 index 000000000..036f1c9a5 Binary files /dev/null and b/src/images/products/product-image-4.png differ diff --git a/src/images/products/product-image-5.png b/src/images/products/product-image-5.png new file mode 100644 index 000000000..01fe9d04a Binary files /dev/null and b/src/images/products/product-image-5.png differ diff --git a/src/images/products/product-image-6.png b/src/images/products/product-image-6.png new file mode 100644 index 000000000..12470753d Binary files /dev/null and b/src/images/products/product-image-6.png differ diff --git a/src/images/social-icons/facebook-hover.svg b/src/images/social-icons/facebook-hover.svg new file mode 100644 index 000000000..f786194b4 --- /dev/null +++ b/src/images/social-icons/facebook-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/facebook.svg b/src/images/social-icons/facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/social-icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/instagram-hover.svg b/src/images/social-icons/instagram-hover.svg new file mode 100644 index 000000000..fd6a8276a --- /dev/null +++ b/src/images/social-icons/instagram-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/instagram.svg b/src/images/social-icons/instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/social-icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-icons/x-hover.svg b/src/images/social-icons/x-hover.svg new file mode 100644 index 000000000..b7142b7b2 --- /dev/null +++ b/src/images/social-icons/x-hover.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/social-icons/x.svg b/src/images/social-icons/x.svg new file mode 100644 index 000000000..887472fdb --- /dev/null +++ b/src/images/social-icons/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..d42acfd5a 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,17 @@ 'use strict'; + +const titles = document.querySelectorAll('.change__color'); +const backgrounds = document.querySelectorAll('.change__background'); +const buttons = document.querySelectorAll('.top-bar__logo'); + +buttons.forEach((button) => { + button.addEventListener('click', () => { + titles.forEach((title) => { + title.classList.toggle('change__color--active'); + }) + + backgrounds.forEach((background) => { + background.classList.toggle('change__background--active'); + }) + }) +}) diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..8b293e2da 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,15 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; + font-weight: 400; font-style: normal; + font-display: swap; + src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); +} + +@font-face { + font-family: Inter; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/inter-v20-latin-500.woff2') format('woff2'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..bc9018ee7 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,21 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +a, +p { + @extend %main-text; +} + +button, +.uppercase { + @extend %uppercase-text; +} + +.about__big-info { + @extend %big-text; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f044aad29 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/reset'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..acd214d9e --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,107 @@ +.about { + @include padding-inline; + + position: relative; + + display: flex; + flex-direction: column; + gap: 64px; + + box-sizing: border-box; + padding-block: 72px; + + @include on-tablet { + gap: 72px; + padding-block: 152px; + } + + @include on-desktop { + gap: 144px; + padding-block: 178px 349px; + } + + &__about { + display: flex; + flex-direction: column; + gap: 32px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + } + } + + &__description { + @include on-tablet { + min-height: 216px; + } + } + + &__blog { + display: flex; + flex-direction: column; + gap: 48px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + row-gap: 80px; + } + + @include on-desktop { + gap: 20px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 8px; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__small-info { + color: $footer-secondary-text; + } + + &__picture { + position: absolute; + z-index: -1; + bottom: 246px; + left: 50%; + transform: translateX(-50%); + + display: block; + + width: 320px; + height: 300px; + + background-image: url('../images/about-image/crumbs.png'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + bottom: 204px; + width: 526px; + height: 493px; + } + + @include on-desktop { + bottom: 56px; + left: 27%; + transform: translateX(27%); + + width: 718px; + height: 673px; + } + } +} diff --git a/src/styles/blocks/change.scss b/src/styles/blocks/change.scss new file mode 100644 index 000000000..e0c5fc6dc --- /dev/null +++ b/src/styles/blocks/change.scss @@ -0,0 +1,21 @@ +.change { + &__color { + color: $main-color; + transition: color 0.3s ease; + + &--active { + color: $accent-color; + transition: color 0.3s ease; + } + } + + &__background { + background-color: $blue-background; + transition: background-color 0.3s ease; + + &--active { + background-color: $pink-background; + transition: background-color 0.3s ease; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..575f75339 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,212 @@ +.footer { + @include padding-inline; + + display: flex; + flex-direction: column; + gap: 40px; + + padding-block: 56px; + + color: $footer-text; + + background-color: $main-color; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + row-gap: 48px; + padding-block: 88px; + } + + &__navigation { + display: flex; + flex-direction: column; + gap: 40px; + margin-bottom: 24px; + + @include on-tablet { + gap: 96px; + margin-bottom: 0; + } + + @include on-desktop { + gap: 61px; + } + } + + &__logo { + cursor: pointer; + + position: relative; + + display: block; + + width: 168px; + height: 40px; + + background-image: url('../images/logos/footer-logo.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 2px; + border-radius: 1px; + + background-color: $accent-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__nav { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__contact { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__br { + display: none; + + @include on-tablet { + display: block; + } + + @include on-desktop { + display: none; + } + } + + &__title { + @include on-desktop { + grid-column: 1 / -1; + } + } + + &__call { + display: flex; + flex-direction: column; + gap: 16px; + + @include on-desktop { + grid-column: 1; + } + } + + &__call-list { + display: flex; + flex-direction: column; + gap: 16px; + list-style: none; + } + + &__email { + display: flex; + flex-direction: column; + gap: 16px; + + @include on-desktop { + grid-column: 2; + } + } + + &__link { + position: relative; + width: fit-content; + color: inherit; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $accent-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__social { + display: flex; + gap: 32px; + } + + &__social-icon { + cursor: pointer; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: background-image 0.3s ease; + + &--facebook { + background-image: url('../images/social-icons/facebook.svg'); + + &:hover { + background-image: url('../images/social-icons/facebook-hover.svg'); + } + } + + &--x { + background-image: url('../images/social-icons/x.svg'); + + &:hover { + background-image: url('../images/social-icons/x-hover.svg'); + } + } + + &--instagram { + background-image: url('../images/social-icons/instagram.svg'); + + &:hover { + background-image: url('../images/social-icons/instagram-hover.svg'); + } + } + } + + &__subtitles { + color: $footer-secondary-text; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..dec8a7319 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,131 @@ +.header { + &__content { + @include padding-inline; + + position: relative; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + } + } + + &__description { + padding-block: 32px; + text-align: center; + + @include on-tablet { + grid-column: 1 / 5; + min-height: 72px; + padding-block: 80px 122px; + text-align: left; + } + + @include on-desktop { + grid-column: 1 / 3; + padding-block: 135px 8px; + } + + @include on-large-desktop { + padding-block: 144px 16px; + } + } + + &__title { + z-index: 2; + text-align: center; + + @include on-tablet { + grid-column: 1 / -1; + min-height: 136px; + } + } + + &__image { + width: 100%; + + @include on-tablet { + position: absolute; + top: 144px; + left: 50%; + transform: translateX(-50%); + + width: 326px; + height: 328px; + } + + @include on-desktop { + top: 0; + width: 544px; + height: 546px; + } + + @include on-large-desktop { + width: 584px; + height: 586px; + } + } + + &__button { + position: relative; + + display: inline-flex; + align-items: center; + justify-content: center; + + width: 100%; + margin-bottom: 40px; + padding-block: 16px; + border: 2px solid $accent-color; + border-radius: 32px; + + color: $accent-color; + text-align: center; + text-decoration: none; + + background-color: inherit; + + transition: + color 0.3s ease, + background-color 0.3s ease; + + @include on-tablet { + grid-column: 3 / 7; + margin-block: 142px 228px; + } + + @include on-desktop { + grid-column: 1 / 3; + margin-block: 64px 161px; + } + + @include on-large-desktop { + margin-block: 64px 112px; + } + + &::before { + content: ''; + + display: block; + + width: 24px; + height: 24px; + margin-right: 4px; + + background-image: url('../images/icons/icon-cookie.svg'); + background-repeat: no-repeat; + background-size: contain; + + transition: background-image 0.3s ease; + } + + &:hover { + color: $footer-text; + background-color: $accent-color; + + &::before { + background-image: url('../images/icons/icon-cookie-hover.svg'); + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..261a7026a --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,48 @@ +.menu { + pointer-events: none; + + position: fixed; + z-index: 10; + top: 0; + left: 0; + + overflow: auto; + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100%; + + color: $main-color; + + opacity: 0; + + transition: opacity 0.4s ease; + + &:target { + pointer-events: all; + opacity: 1; + + @include on-desktop { + display: none; + } + } + + &__nav { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + text-align: center; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 24px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..0976811cc --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,73 @@ +.nav { + &__list { + list-style: none; + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $accent-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__contact { + position: relative; + display: inline-flex; + align-items: center; + color: $accent-color; + + &::before { + content: ''; + + display: block; + + width: 24px; + height: 24px; + margin-right: 4px; + + background-image: url('../images/icons/icon-phone.svg'); + background-repeat: no-repeat; + background-size: contain; + } + + &:hover::before { + animation: shake 0.3s ease-in-out infinite; + } + } +} + +@keyframes shake { + 0% { + transform: rotate(0deg); + } + 25% { + transform: rotate(5deg); + } + 50% { + transform: rotate(0deg); + } + 75% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..9e1718634 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,8 @@ +.page { + scroll-behavior: smooth; + color: $main-color; + + &__body:has(.menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..7d66c4d18 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,139 @@ +.products { + @include padding-inline; + + display: flex; + flex-direction: column; + gap: 56px; + margin-top: 64px; + + @include on-tablet { + gap: 80px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(8, 1fr); + } + + &__info { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-desktop { + grid-column: 1 / -1; + } + } + + &__block { + display: flex; + flex-direction: column; + gap: 56px; + + @include on-tablet { + flex-direction: row; + gap: 24px; + } + + @include on-desktop { + &--left { + grid-column: 1 / 7; + } + + &--right { + grid-column: 3 / -1; + } + } + } + + &__card { + display: flex; + flex-direction: column; + gap: 8px; + } + + &__wrapper { + overflow: hidden; + border-radius: 8px; + } + + &__image { + width: 100%; + border-radius: 8px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__name { + margin-top: 8px; + color: $footer-secondary-text; + } + + &__description { + min-height: 72px; + } + + &__order { + position: relative; + + display: inline-flex; + align-items: center; + + width: fit-content; + + color: $accent-color; + text-decoration: none; + + &::before { + content: ''; + + display: block; + + width: 24px; + height: 24px; + margin-right: 4px; + + background-image: url('../images/icons/icon-arrow.svg'); + background-repeat: no-repeat; + background-size: contain; + } + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $accent-color; + + transition: width 0.3s ease; + } + + &:hover { + &::after { + width: 100%; + } + + &::before { + animation: jump 0.5s ease-in-out infinite; + } + } + } +} + +@keyframes jump { + 0%, + 100% { + transform: translateX(0); + } + 50% { + transform: translateX(20%); + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..45393df52 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,106 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px; + + &__logo { + cursor: pointer; + + position: relative; + + display: block; + + width: 136px; + height: 32px; + border: none; + + appearance: none; + background-color: transparent; + background-image: url('../images/logos/logo.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &::after { + content: ''; + + position: absolute; + bottom: -2px; + left: 0; + + width: 0; + height: 3px; + border-radius: 2px; + + background-color: $accent-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__nav { + display: none; + + @include on-desktop { + display: block; + } + } + + &__nav-list { + @include on-desktop { + display: flex; + gap: 64px; + } + } + + &__menu { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + border: none; + + background-image: url('../images/icons/icon-menu.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: background-image 0.3s ease; + + @include on-desktop { + display: none; + } + + &:hover { + background-image: url('../images/icons/icon-menu-hover.svg'); + } + } + + &__close { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + border: none; + + background-image: url('../images/icons/icon-close.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: background-image 0.3s ease; + + &:hover { + background-image: url('../images/icons/icon-close-hover.svg'); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..4dcd433ea 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,12 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/nav'; +@import 'blocks/top-bar'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/products'; +@import 'blocks/about'; +@import 'blocks/footer'; +@import 'blocks/change'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..bc019d912 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,59 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; + font-size: 64px; font-weight: 400; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 80px; + } + + @include on-desktop { + font-size: 144px; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 48px; + font-weight: 400; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -5%; + + @include on-tablet { + font-size: 56px; + } + + @include on-desktop { + font-size: 72px; + } +} + +%main-text { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: -1%; +} + +%big-text { + font-family: Inter, sans-serif; + font-size: 96px; + font-weight: 400; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -5%; +} + +%uppercase-text { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + text-transform: uppercase; + letter-spacing: 2%; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..691018189 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,35 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-large-desktop { + @media screen and (min-width: 1920px) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-large-desktop { + padding-inline: 124px; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..cddf8e694 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,19 @@ +body, +html, +ul, +p, +h1, +h2, +h3, +h4, +h5, +button, +a { + margin: 0; + padding: 0; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..9f2b1f45a 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ -$c-gray: #eee; +$main-color: #1c1a26; +$footer-text: #fff; +$accent-color: #f9512e; +$footer-secondary-text: #7f8096; +$blue-background: #eef7ff; +$pink-background: #ffeefc;