diff --git a/README.md b/README.md index 2663d4520e..a51eacf274 100644 --- a/README.md +++ b/README.md @@ -4,18 +4,21 @@ > Now just choose a design and do the parts from the videos Choose a design for your landing page: + - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET) - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1) - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0) - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0) Follow the videos in this and next lessons to implement the page block by block + - Here is [the design from the video](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0) (❗❗ DO NOT implement this design ❗❗ choose one of the options above ❗❗ ☝️) - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; - When done check yourself using the [CHECKLIST](./checklist.md) when finished; -- Deploy and create a Pull Request with a [DEMO LINK](https://.github.io/layout_landing-page/) +- Deploy and create a Pull Request with a [DEMO LINK](https://d1nexl.github.io/layout_landing-page/) # Tips & Hints + - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`. - If some points from the checklist are not relevant to your design, just skip it. diff --git a/src/images/browse-photo/headphone.svg b/src/images/browse-photo/headphone.svg new file mode 100644 index 0000000000..e4533d17ab --- /dev/null +++ b/src/images/browse-photo/headphone.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browse-photo/headphones-in-hand.svg b/src/images/browse-photo/headphones-in-hand.svg new file mode 100644 index 0000000000..0f46321bad --- /dev/null +++ b/src/images/browse-photo/headphones-in-hand.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browse-photo/headphones2.svg b/src/images/browse-photo/headphones2.svg new file mode 100644 index 0000000000..5e65d89875 --- /dev/null +++ b/src/images/browse-photo/headphones2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browse-photo/parrots.svg b/src/images/browse-photo/parrots.svg new file mode 100644 index 0000000000..f067fdacbd --- /dev/null +++ b/src/images/browse-photo/parrots.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browse-photo/phone.svg b/src/images/browse-photo/phone.svg new file mode 100644 index 0000000000..b7809882e7 --- /dev/null +++ b/src/images/browse-photo/phone.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/browse-photo/zaryadka.svg b/src/images/browse-photo/zaryadka.svg new file mode 100644 index 0000000000..81eca4146e --- /dev/null +++ b/src/images/browse-photo/zaryadka.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/header-bg-mobile.png b/src/images/header-bg-mobile.png new file mode 100644 index 0000000000..65bc082ebd Binary files /dev/null and b/src/images/header-bg-mobile.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 0000000000..aed33c6687 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/Icon-burger-menu-hover.png b/src/images/icons/Icon-burger-menu-hover.png new file mode 100644 index 0000000000..e428692354 Binary files /dev/null and b/src/images/icons/Icon-burger-menu-hover.png differ diff --git a/src/images/icons/Icon-burger-menu-hover.svg b/src/images/icons/Icon-burger-menu-hover.svg new file mode 100644 index 0000000000..1063135c93 --- /dev/null +++ b/src/images/icons/Icon-burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/Icone-burger-menu.svg b/src/images/icons/Icone-burger-menu.svg new file mode 100644 index 0000000000..7290cdaa0a --- /dev/null +++ b/src/images/icons/Icone-burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 0000000000..a80045d470 Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icone-burger-menu.png b/src/images/icons/icone-burger-menu.png new file mode 100644 index 0000000000..596f3d3009 Binary files /dev/null and b/src/images/icons/icone-burger-menu.png differ diff --git a/src/images/icons/icone-phone.png b/src/images/icons/icone-phone.png new file mode 100644 index 0000000000..619a8653b1 Binary files /dev/null and b/src/images/icons/icone-phone.png differ diff --git a/src/images/icons/icone-phone.svg b/src/images/icons/icone-phone.svg new file mode 100644 index 0000000000..74589925fa --- /dev/null +++ b/src/images/icons/icone-phone.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/logo-2x.png b/src/images/logo-2x.png new file mode 100644 index 0000000000..64c2942ea5 Binary files /dev/null and b/src/images/logo-2x.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000000..07c71bad5c Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/picture.svg b/src/images/picture.svg new file mode 100644 index 0000000000..d6d41d30d3 --- /dev/null +++ b/src/images/picture.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picturepng.png b/src/images/picturepng.png new file mode 100644 index 0000000000..d1e1270c5b Binary files /dev/null and b/src/images/picturepng.png differ diff --git a/src/images/products-image/headphones.png b/src/images/products-image/headphones.png new file mode 100644 index 0000000000..d83413d56d Binary files /dev/null and b/src/images/products-image/headphones.png differ diff --git a/src/images/products-image/headphones.svg b/src/images/products-image/headphones.svg new file mode 100644 index 0000000000..d66ea4c5a1 --- /dev/null +++ b/src/images/products-image/headphones.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/products-image/headphones2.png b/src/images/products-image/headphones2.png new file mode 100644 index 0000000000..a385cb3792 Binary files /dev/null and b/src/images/products-image/headphones2.png differ diff --git a/src/images/products-image/headphones2.svg b/src/images/products-image/headphones2.svg new file mode 100644 index 0000000000..4ebbe03ce7 --- /dev/null +++ b/src/images/products-image/headphones2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/products-image/phone.png b/src/images/products-image/phone.png new file mode 100644 index 0000000000..93432054fa --- /dev/null +++ b/src/images/products-image/phone.png @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/products-image/phone.svg b/src/images/products-image/phone.svg new file mode 100644 index 0000000000..d41dd5103f --- /dev/null +++ b/src/images/products-image/phone.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 428e3b54bb..cfe4821444 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,419 @@ - + - + - Landing Page + NOTHING + + + + + + + - -

Landing Page

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

+ Bring joy back +
+ to the everyday +

+
+
+
+ +
+
+ +
+

+ Browse Nothing products by category +

+
+ + + + + View all + +
+
+
+
+

About us

+

+ We’re a London-based tech company on a mission to remove barriers + between people and technology. +
+
+ To do this, we’re crafting intuitive, flawlessly connected products + that improve our lives without getting in the way. No confusing + tech-speak. No silly product names. Just artistry, passion and + trust. And products we’re proud to share with our friends and + family. Simple. +
+
+ Because beautiful tech shouldn’t be complicated. +

+
+
+

Contact us

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

Phone

+ + +1 234 5555-55-55 + +
+
+

Email

+ + hello@nothing.com + +
+
+

Address

+ + 400 first ave. +
+ suite 700 +
+ Minneapolis, MN 55401 + +
+
+
+
+
+
+ diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..e595680ca5 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,36 @@ +.about-us { + @include page-grid; + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-decstop { + grid-column: 1/6; + } + } + + &__text { + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + color: $main-text-color; + margin: 0; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/7; + } + + @include on-decstop { + grid-column: 7/13; + } + } +} + +// test diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..ebdf83afe4 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,40 @@ +.categories { + width: 100%; + &__wrapper { + display: grid; + + row-gap: 40px; + + @include on-tablet { + row-gap: 56px; + } + } + + &__button { + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 700; + text-align: center; + justify-content: center; + text-decoration: none; + line-height: 56px; + color: rgba(255, 255, 255, 1); + background-color: $main-text-color; + border-radius: 8px; + height: 56px; + border: 2px solid $main-text-color; + width: 100%; + + @include on-decstop { + width: 324px; + } + + &:hover { + cursor: pointer; + transition-duration: 0.3s; + background-color: rgba(248, 248, 250, 1); + color: $main-text-color; + border: 2px solid rgba(240, 241, 244, 1); + } + } +} diff --git a/src/styles/blocks/category.scss b/src/styles/blocks/category.scss new file mode 100644 index 0000000000..32f25f3643 --- /dev/null +++ b/src/styles/blocks/category.scss @@ -0,0 +1,51 @@ +.category { + &__photos { + @include page-grid; + + margin-bottom: 16px; + } + + &__link { + position: relative; + + &--wide { + @include on-tablet { + grid-column: span 4; + } + + @include on-decstop { + grid-column: span 8; + } + } + + &--square { + padding-bottom: 100%; + height: 0; + + @include on-tablet { + grid-column: span 2; + } + + @include on-decstop { + grid-column: span 4; + } + } + } + + &__photo { + width: 100%; + height: 100%; + object-fit: cover; + position: absolute; + + @include hover(transform, scale(1.05)); + } + + &__title { + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 25.2px; + text-align: left; + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 0000000000..74a6a7cf84 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,158 @@ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:invalid, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +textarea:-webkit-autofill:invalid, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus, +select:-webkit-autofill:invalid { + border: 1px solid $main-text-color; + -webkit-outline: none; + -webkit-border-color: $main-text-color; + -webkit-text-fill-color: $main-text-color; + -webkit-box-shadow: 0 0 0 1000px #f8f8fa inset; +} + +.contacts { + &__wrap { + @include page-grid; + } + + &__form { + grid-column: 1/-1; + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 56px; + grid-column: 1/-1; + } + + @include on-decstop { + margin-bottom: 80px; + grid-column: 1/6; + } + } + + &__input { + width: 100%; + background-color: rgba(248, 248, 250, 1); + padding-left: 16px; + border-radius: 8px; + height: 48px; + margin-bottom: 16px; + border: none; + box-sizing: border-box; + transition: all $effect-in-duration; + color: rgba(126, 126, 131, 1); + outline: none; + &:-webkit-autofill { + -webkit-text-fill-color: green; + } + + &:hover { + border: 1px solid rgba(213, 215, 222, 1); + transition: all $effect-in-duration; + cursor: pointer; + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: rgba(41, 41, 41, 1); + } + + &:active { + border: 1px solid rgba(41, 41, 41, 1); + } + } + + &__input--textarea { + width: 100%; + height: 148px; + margin-bottom: 32px; + color: rgba(126, 126, 131, 1); + resize: none; + &:-webkit-autofill { + -webkit-text-fill-color: green; + } + + &:hover { + border: 1px solid rgba(213, 215, 222, 1); + cursor: pointer; + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: rgba(41, 41, 41, 1); + + &:active { + border: 1px solid rgba(41, 41, 41, 1); + } + } + } + + &__input--button { + height: 56px; + line-height: 56px; + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 700; + text-align: center; + display: block; + width: 100%; + border: none; + background-color: $main-text-color; + color: #fff; + border-radius: 8px; + transition: all $effect-in-duration; + cursor: pointer; + + &:hover { + background-color: #fff; + border: 1px solid rgba(126, 126, 131, 1); + color: $main-text-color; + transition: all $effect-in-duration; + cursor: pointer; + } + + &:active { + border: 1px solid $main-text-color; + } + } + + &__adrress { + @include on-decstop { + grid-column: 7/11; + } + + &--adrress { + margin-bottom: 24px; + } + } + + &__adrress--small { + color: rgba(147, 147, 163, 1); + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + margin-bottom: 8px; + } + + &__adrress--bold { + color: rgba(25, 25, 25, 1); + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + margin: 0; + text-decoration: none; + + &:hover { + color: blue; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..244ccc3552 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,3 @@ +.container { + @include content-padding-inline; +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..19da5cebff --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,4 @@ +.footer { + position: sticky; + z-index: -1; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..90c560c85b --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,36 @@ +.header { + background-image: url(/src/images/header-bg.png); + background-size: cover; + background-position: center; + width: 100%; + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100vh; + + @include content-padding-inline; + } + + &__title { + margin: 0; + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + } + + &__bottom { + padding-bottom: 40px; + + @include on-tablet { + padding-bottom: 65px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..0bff95764c --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,51 @@ +.icon { + height: 24px; + width: 24px; + display: block; + background-size: cover; + + @include on-tablet { + height: 32px; + width: 32px; + } + + @include hover(transform, scale(1.2)); + + &--phone { + background-image: url(/src/images/icons/icone-phone.svg); + cursor: pointer; + + @include on-decstop { + &:hover::before { + content: '+1 234 555-55-55'; + position: absolute; + right: 30px; + color: $main-text-color; + padding: 0; + margin: 8px 20px 8px 0; + white-space: nowrap; + z-index: 10; + font-family: Inter, Arial, Helvetica, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + } + } + } + + &--menu { + background-image: url(/src/images/icons/Icone-burger-menu.svg); + cursor: pointer; + + &:hover { + background-image: url(/src/images/icons/Icon-burger-menu-hover.svg); + } + } + + &--close { + background-image: url(/src/images/icons/icon-close.svg); + cursor: pointer; + } +} diff --git a/src/styles/blocks/mains.scss b/src/styles/blocks/mains.scss new file mode 100644 index 0000000000..89b64e76ed --- /dev/null +++ b/src/styles/blocks/mains.scss @@ -0,0 +1,12 @@ +.main { + &__content { + display: grid; + row-gap: 96px; + padding-block: 96px; + + @include on-tablet { + row-gap: 120px; + padding-block: 120px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..c17d2d16c4 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,47 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: rgba(229, 230, 232, 1); + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-weight: 700; + text-transform: uppercase; + overflow: auto; + + &__phone--number { + color: inherit; + text-decoration: none; + display: block; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + margin-bottom: 16px; + } + + &__call--to--order { + display: block; + color: inherit; + text-decoration: none; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + padding-bottom: 4px; + border-bottom: 1px solid $main-text-color; + width: fit-content; + } + + &__nav { + margin-bottom: 48px; + } + + &__top { + margin-bottom: 32px; + position: sticky; + top: 0; + z-index: 1; + background-color: #e5e5e5; + + @include on-tablet { + margin-bottom: 0; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..46bc13bf8a --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,36 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 32px; + } + + &__link { + color: inherit; + text-decoration: none; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + bottom: -4px; + width: 100%; + height: 1px; + background-color: $main-text-color; + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..aa367d8056 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,34 @@ +.page { + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + color: $main-text-color; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + pointer-events: none; + transform: translateX(-100%); + transition: all 0.5s; + opacity: 0; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/picture.scss b/src/styles/blocks/picture.scss new file mode 100644 index 0000000000..cd84f417ef --- /dev/null +++ b/src/styles/blocks/picture.scss @@ -0,0 +1,15 @@ +.picture { + background-image: url(/src/images/picture.svg); + height: 200px; + background-size: cover; + background-position: center; + width: 100%; + + @include on-tablet { + height: 400px; + } + + @include on-decstop { + height: 460px; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 0000000000..c59e04f2a5 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,43 @@ +.product { + &__photo { + width: 100%; + + &:hover { + transform: scale(1.02); + transition-duration: 0.3s; + } + } + + &__title { + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 25.2px; + text-align: left; + color: $main-text-color; + } + + &__category { + font-family: 'Space Mono', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-align: left; + color: $main-text-color; + + &--1 { + @include on-decstop { + display: none; + } + } + } + + &__price { + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22.4px; + text-align: left; + color: $main-text-color; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..b5db5c4eb6 --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,19 @@ +.recomended { + &__products { + @include page-grid; + + row-gap: 40px; + + @include on-tablet { + row-gap: 56px; + } + } + + &__product { + grid-column: 1/-1; + + @include on-decstop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..aefdaecb4b --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,18 @@ +.section-title { + margin: 0; + margin-bottom: 48px; + font-family: 'Space Grotesk', Arial, Helvetica, sans-serif; + font-size: 32px; + font-weight: 700; + line-height: 32px; + text-align: left; + + @include on-tablet { + font-size: 40px; + margin-bottom: 56px; + } + + @include on-decstop { + font-size: 48px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..83fa65f455 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,34 @@ +.top-bar { + padding-block: 24px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 32px; + } + + &__icons { + display: flex; + gap: 24px; + + @include on-tablet { + gap: 32px; + } + } + + &__logo--link { + display: flex; + } + + &__logo { + height: 16px; + cursor: pointer; + + @include on-tablet { + height: 24px; + } + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f13..34e458176d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,28 @@ -body { - margin: 0; +* { + box-sizing: border-box; } + +body, +html { + overflow-x: hidden; +} + +@import '/src/styles/utils/variables'; +@import '/src/styles/utils/mixins'; +@import '/src/styles/blocks/container'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/top-bar'; +@import '/src/styles/blocks/icon'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/section-title'; +@import '/src/styles/blocks/mains'; +@import '/src/styles/blocks/products'; +@import '/src/styles/blocks/recommended'; +@import '/src/styles/blocks/categories'; +@import '/src/styles/blocks/category'; +@import '/src/styles/blocks/picture'; +@import '/src/styles/blocks/about-us'; +@import '/src/styles/blocks/contacts'; +@import '/src/styles/blocks/footer'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..2d97a74793 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,51 @@ +@mixin hover($property, $toValue) { + transition: #{$property} 0.3s; + &:hover { + #{$property}: $toValue; + } +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-decstop { + @media (min-width: $desctop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-decstop { + max-width: 1260px; + padding-inline: 120px; + margin-inline: auto; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + column-gap: 24px; + + --columns: 6; + } + + @include on-decstop { + --columns: 12; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..c5378888dd --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,4 @@ +$tablet-min-width: 576px; +$desctop-min-width: 1024px; +$effect-in-duration: 0.3s; +$main-text-color: rgba(41, 41, 41, 1);