diff --git a/README.md b/README.md index 97d3c9060a..8d9e2bc9de 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that: - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0) - watch the lesson videos and implement your page blocks similarly to the videos; - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; -- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://.github.io/layout_miami/) +- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Karanelus.github.io/layout_miami/) - after each next block do the same (add, commit and push the changes, and deploy the updated demo; - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished; diff --git a/package-lock.json b/package-lock.json index 3369dda7dc..e01302d4ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "Miami", + "name": "bose-page", "version": "1.0.0", "lockfileVersion": 1, "requires": true, @@ -957,9 +957,9 @@ "dev": true }, "@mate-academy/scripts": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.7.3.tgz", - "integrity": "sha512-5cqlZbgbwIxiicQsjP7OR0cR/QBZTipfe4Eh/6VLn0dvP9yAhnZBu3ZN3PjS/1swlVthnIFrNL7xzU4gbPu3dQ==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.1.tgz", + "integrity": "sha512-zRhcI3uiflwWXeODuyELMqh1j4s438nTRiXXQ+v6Cs95kWMrfUDuzmg6ZqqJuIPZtmpg0KTLghGBf38vKalW/g==", "dev": true, "requires": { "@octokit/rest": "^17.11.2", diff --git a/package.json b/package.json index 1ed1e30d3d..9719815da7 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "Miami", + "name": "bose-page", "version": "1.0.0", "description": "Miami landing page", "scripts": { diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 0000000000..9032e4466e --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/images/photos/Icon-Phone-call.svg b/src/images/photos/Icon-Phone-call.svg new file mode 100644 index 0000000000..6954be9e41 --- /dev/null +++ b/src/images/photos/Icon-Phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/photos/Sound-waves.svg b/src/images/photos/Sound-waves.svg new file mode 100644 index 0000000000..18f9f85768 --- /dev/null +++ b/src/images/photos/Sound-waves.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/photos/category/imgFifth.png b/src/images/photos/category/imgFifth.png new file mode 100644 index 0000000000..8fd6b68404 Binary files /dev/null and b/src/images/photos/category/imgFifth.png differ diff --git a/src/images/photos/category/imgFirst.png b/src/images/photos/category/imgFirst.png new file mode 100644 index 0000000000..c4317bf555 Binary files /dev/null and b/src/images/photos/category/imgFirst.png differ diff --git a/src/images/photos/category/imgFourth.png b/src/images/photos/category/imgFourth.png new file mode 100644 index 0000000000..d070d48e03 Binary files /dev/null and b/src/images/photos/category/imgFourth.png differ diff --git a/src/images/photos/category/imgSecond.png b/src/images/photos/category/imgSecond.png new file mode 100644 index 0000000000..57af29b897 Binary files /dev/null and b/src/images/photos/category/imgSecond.png differ diff --git a/src/images/photos/category/imgSixth.png b/src/images/photos/category/imgSixth.png new file mode 100644 index 0000000000..5debec57dd Binary files /dev/null and b/src/images/photos/category/imgSixth.png differ diff --git a/src/images/photos/category/imgThird.png b/src/images/photos/category/imgThird.png new file mode 100644 index 0000000000..7b566ca29b Binary files /dev/null and b/src/images/photos/category/imgThird.png differ diff --git a/src/images/photos/footer.png b/src/images/photos/footer.png new file mode 100644 index 0000000000..d773e984aa Binary files /dev/null and b/src/images/photos/footer.png differ diff --git a/src/images/photos/header.png b/src/images/photos/header.png new file mode 100644 index 0000000000..2f3ad22353 Binary files /dev/null and b/src/images/photos/header.png differ diff --git a/src/images/photos/recommended/bluetooth-speaker-II.png b/src/images/photos/recommended/bluetooth-speaker-II.png new file mode 100644 index 0000000000..c6c81aab99 Binary files /dev/null and b/src/images/photos/recommended/bluetooth-speaker-II.png differ diff --git a/src/images/photos/recommended/bluetooth-speaker.png b/src/images/photos/recommended/bluetooth-speaker.png new file mode 100644 index 0000000000..3a7caddd8e Binary files /dev/null and b/src/images/photos/recommended/bluetooth-speaker.png differ diff --git a/src/images/photos/recommended/portable-smart-speaker.png b/src/images/photos/recommended/portable-smart-speaker.png new file mode 100644 index 0000000000..c3404fb253 Binary files /dev/null and b/src/images/photos/recommended/portable-smart-speaker.png differ diff --git a/src/index.html b/src/index.html index f63807ad65..8914719a73 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,11 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami + BOSE + -

Miami

+
+ +
+ +

+ The world shades. +
+ Your music shines. +

+
+
+
+
+

+ Recommended +

+
+
+ Portable smart speaker +

Bose portable Smart speaker

+

Smart home

+

$ 399.00

+
+
+ Bluetooth speaker +

+ SoundLink Flex Bluetooth speaker +

+

Portable bluetooth

+

$ 149.00

+
+
+ Bluetooth speaker II +

+ SoundLink Color Bluetooth speaker II +

+

Portable bluetooth

+

$ 129.00

+
+
+
+
+

+ Browse Bose products by category +

+
+
+ + +
+

Headphones & earbuds

+
+
+
+ + +
+

Speakers

+
+
+
+ + +
+

Audio sunglasses

+
+ +
+
+
+

+ Why buy direct from Bose +

+
+
    +
  • + Free 2-day shipping and returns +
    • +
  • 90-day risk-free trial
    • +
  • World class customer service
    • +
  • My Bose account management
    • +
+

+ A great product is more than what’s in the box. It’s a promise of + premium performance, world-class support, and everything you + expect from a trusted brand. It’s just one of many reasons why + you’ll shop with confidence on Bose.com. +

+
+
+
+
+

+ Contact us +

+
+
+ + + + +
+
+ + + +
+
+
+
+ +
+ +
+ 123 +
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..955ccde0b8 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,54 @@ 'use strict'; + +const burgerMenuButton = document.querySelector( + '.navigation__item--burger-menu', +); +const burgerMenu = document.querySelector('.burger-menu'); +const form = document.querySelector('.form-container__inputs'); +const pageContent = document.querySelector('.content'); +const imgs = [...pageContent.querySelectorAll('img')]; +const photoGallery = document.querySelector('.photo-gallery'); + +burgerMenuButton.addEventListener('click', () => { + burgerMenu.classList.toggle('burger-menu--active'); + burgerMenuButton.classList.toggle('navigation__item--burger-menu--active'); + if (burgerMenu.classList.contains('burger-menu--active')) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'auto'; + } +}); + +form.addEventListener('submit', (e) => { + e.preventDefault(); + + const inputs = [...form.querySelectorAll('input')]; + const textarea = form.querySelector('textarea'); + + if (inputs && textarea) { + inputs.forEach((input) => (input.value = '')); + textarea.value = ''; + } +}); + +imgs.forEach((img) => { + img.addEventListener('click', (e) => { + const target = e.target; + const photoGalleryImg = photoGallery.querySelector('.photo-gallery__img'); + + photoGalleryImg.src = target.src; + photoGallery.classList.add('photo-gallery--active'); + document.body.style.overflow = 'hidden'; + }); +}); + +photoGallery.addEventListener('click', (e) => { + const closeButton = e.target.closest('.photo-gallery--close'); + + if (!closeButton) { + return; + } + + photoGallery.classList.remove('photo-gallery--active'); + document.body.style.overflow = 'auto'; +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe10..0000000000 --- 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/blocks/burger-menu.scss b/src/styles/blocks/burger-menu.scss new file mode 100644 index 0000000000..6e74a1af1a --- /dev/null +++ b/src/styles/blocks/burger-menu.scss @@ -0,0 +1,81 @@ +@use '../utils/vars' as *; + +.burger-menu { + @media (max-width: 743px) { + --burger-menu-pt: 2rem; + --nav-logo-size: 1rem; + --nav-py: 1.5rem; + --burger-menu-logo-mb: 2rem; + } + + background-color: $burger-menu-color; + display: none; + height: 100dvh; + left: 0; + position: fixed; + right: 0; + top: 0; + + &__logo { + height: calc(var(--nav-logo-size) + var(--nav-py) * 2); + margin-bottom: var(--burger-menu-logo-mb); + padding-block: var(--nav-py); + } + + &__container { + margin-inline: auto; + padding-inline: var(--container-px); + width: min(100%, 63.75rem); + } + + &--active { + display: inherit; + } + + &__options { + gap: 2rem; + flex-direction: column; + display: flex; + list-style: none; + margin-bottom: 2.5rem; + } + + &__link { + font-size: 1.38rem; + font-weight: bold; + position: relative; + text-transform: uppercase; + + &::after { + background-color: $natual-black; + content: ''; + display: block; + height: 2px; + position: absolute; + width: 0; + transition: width 0.3s; + } + + &:hover::after { + width: 100%; + } + } + + &__contact-info { + font-weight: 700; + display: flex; + flex-direction: column; + } + + &__tel-num { + margin-bottom: 1rem; + } + + &__tel-text { + font-size: 0.75rem; + letter-spacing: 2px; + margin-bottom: 1rem; + text-decoration: underline; + text-transform: uppercase; + } +} diff --git a/src/styles/blocks/category.scss b/src/styles/blocks/category.scss new file mode 100644 index 0000000000..d2c6f75c5e --- /dev/null +++ b/src/styles/blocks/category.scss @@ -0,0 +1,72 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.category { + @media screen and (max-width: 1259px) { + --recommended-gap: 2.5rem; + --img-container-h: 11.5rem; + --category-button-size: 24.5rem; + } + + @media screen and (max-width: 743px) { + --title-mb: 3rem; + --type-title-size: 1rem; + --img-container-h: 8.13rem; + --img-container-gap: 1.25rem; + --category-type-mb: 2.5rem; + --category-button-size: 17.5rem; + } + + &__title { + margin-bottom: var(--title-mb); + } + + &__type { + width: 100%; + } + + &__type:not(:last-child) { + margin-bottom: var(--category-type-mb); + } + + &__img-container { + display: grid; + gap: var(--img-container-gap); + height: var(--img-container-h); + margin-bottom: 1rem; + + &[position='left'] { + grid-template-columns: 2fr 1fr; + } + + &[position='right'] { + grid-template-columns: 1fr 2fr; + } + + &[position='left'], + &[position='right'] { + @media screen and (max-width: 743px) { + grid-template-columns: 1fr 1fr; + } + } + } + + &__img { + height: var(--img-container-h); + object-fit: cover; + width: 100%; + + &[src*='Sixth'] { + object-position: right; + } + } + + &__type-title { + font-size: var(--type-title-size); + font-weight: 700; + } + + &__button { + @include button(var(--category-button-size)); + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..d68b29a429 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,32 @@ +@use '../utils/vars' as *; + +.contact { + --title-mb: 3rem; + + @media screen and (max-width: 1259px) { + --form-container-g: 1.5rem; + } + + @media screen and (max-width: 743px) { + --form-container-g: 3rem; + } + + &__title { + margin-bottom: var(--title-mb); + } + + &__form-container { + display: grid; + gap: var(--form-container-g); + grid-template-columns: repeat(2, 1fr); + width: 100%; + justify-content: space-between; + + @media screen and (max-width: 743px) { + --form-container-g: 3rem; + + grid-template-columns: 1fr; + grid-template-rows: repeat(2, auto); + } + } +} diff --git a/src/styles/blocks/content.scss b/src/styles/blocks/content.scss new file mode 100644 index 0000000000..202f36b570 --- /dev/null +++ b/src/styles/blocks/content.scss @@ -0,0 +1,44 @@ +@use '../utils/vars' as *; + +.content { + @media (max-width: 1259px) { + --title-size: 2.5rem; + } + + @media (max-width: 743px) { + --main-mb: 4rem; + --title-size: 2rem; + } + + width: 100dvw; + + [data-title] { + text-align: center; + font-size: var(--title-size); + width: var(--container-title-w); + letter-spacing: -1.5px; + } + + > *[class*='content'] { + margin-inline: auto; + margin-bottom: var(--main-mb); + display: flex; + flex-direction: column; + align-items: center; + padding-inline: var(--container-px); + width: min(100%, 63.75rem); + + @media (max-width: 1259px) { + width: min(100%, calc(63.75rem + var(--container-px))); + } + } + + img { + cursor: zoom-in; + transition: 0.3s ease; + + &:hover { + scale: 1.05; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..59d837c233 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,16 @@ +@use '../utils/vars' as *; + +.footer { + @media screen and (max-width: 1259px) { + --footer-height: 25rem; + } + + @media screen and (max-width: 743px) { + --footer-height: 12.5rem; + } + + background: url('../images/photos/footer.png') top center no-repeat; + background-size: cover; + height: var(--footer-height); + width: 100dvw; +} diff --git a/src/styles/blocks/form-container.scss b/src/styles/blocks/form-container.scss new file mode 100644 index 0000000000..305ea79aaa --- /dev/null +++ b/src/styles/blocks/form-container.scss @@ -0,0 +1,26 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.form-container { + &__inputs { + display: flex; + flex-direction: column; + gap: 1rem; + } + + &__input { + @include input(3rem, 2.5rem); + } + + &__text { + @include input(inherit, 1rem); + + resize: none; + overflow: hidden; + margin-bottom: 1rem; + } + + &__button { + @include button(100%); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..cf3d1715b0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,69 @@ +@use '../utils/vars' as *; + +.header { + @media (max-width: 1259px) { + --header-height: 48.38rem; + } + + @media (max-width: 743px) { + --header-height: 35.5rem; + --motto-m: 2.5rem; + --main-mb: 4rem; + --nav-py: 1.75rem; + } + + > * { + margin-inline: auto; + } + + align-content: space-between; + animation: header-animation 1.5s ease; + background: url('../images/photos/header.png') center no-repeat; + background-size: cover; + display: grid; + flex-direction: column; + height: var(--header-height); + margin-bottom: var(--main-mb); + width: 100dvw; + + &__navigation { + align-items: center; + display: flex; + height: var(--nav-h); + justify-content: space-between; + padding-block: var(--nav-py); + padding-inline: var(--container-px); + width: min(100%, 63.75rem); + + @media (max-width: 1259px) { + width: min(100%, calc(63.75rem + var(--container-px))); + } + } + + &__motto { + margin-bottom: var(--motto-m); + padding-inline: var(--container-px); + width: min(100%, 63.75rem); + + @media (max-width: 1259px) { + width: min(100%, calc(63.75rem + var(--container-px))); + } + } +} + +@keyframes header-animation { + from { + background-size: 125%; + + @media (max-width: 743px) { + background-size: 175%; + } + } + to { + background-size: 100%; + + @media (max-width: 743px) { + background-size: 150%; + } + } +} diff --git a/src/styles/blocks/how-to-buy.scss b/src/styles/blocks/how-to-buy.scss new file mode 100644 index 0000000000..bdc282a310 --- /dev/null +++ b/src/styles/blocks/how-to-buy.scss @@ -0,0 +1,43 @@ +@use '../utils/vars' as *; + +.how-to-buy { + &[class^='content'] { + align-items: baseline; + } + + &__title[data-title] { + text-align: left; + width: inherit; + } + + &__container { + display: grid; + gap: var(--how-to-buy-g); + grid-template-columns: repeat(2, var(--how-to-buy-cell-s)); + + @media screen and (max-width: 1259px) { + --how-to-buy-cell-s: 1fr; + } + + @media screen and (max-width: 743px) { + --how-to-buy-g: 2rem; + + flex-direction: column; + grid-template-columns: var(--how-to-buy-cell-s); + grid-template-rows: auto var(--how-to-buy-cell-s); + } + } + + &__reasons { + display: flex; + flex-direction: column; + font-weight: bold; + gap: 1rem; + list-style: none; + margin-bottom: 2.5rem; + } + + &__text { + line-height: 1.75rem; + } +} diff --git a/src/styles/blocks/info-block.scss b/src/styles/blocks/info-block.scss new file mode 100644 index 0000000000..30c8af560a --- /dev/null +++ b/src/styles/blocks/info-block.scss @@ -0,0 +1,27 @@ +@use '../utils/vars' as *; + +.info-block { + &__container { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + &__title { + color: $info-block-c; + font-size: 0.88rem; + } + + &__text { + transition: 0.3s ease; + + &:hover { + color: $info-block-c; + } + + &:active { + color: $info-block-act; + } + } +} diff --git a/src/styles/blocks/motto.scss b/src/styles/blocks/motto.scss new file mode 100644 index 0000000000..6791cb9441 --- /dev/null +++ b/src/styles/blocks/motto.scss @@ -0,0 +1,28 @@ +@use '../utils/vars' as *; + +.motto { + @media screen and (max-width: 1259px) { + --motto-img-mb: 2.5rem; + --motto-font-size: 2.5rem; + } + + @media screen and (max-width: 743px) { + --motto-img-mb: 1rem; + --motto-img-h: 3.62rem; + --motto-font-size: 2rem; + } + + &__img { + margin-bottom: var(--motto-img-mb); + height: var(--motto-img-h); + } + + &__text { + font-size: var(--motto-font-size); + font-family: Inter, sans-serif; + font-style: italic; + font-weight: 800; + line-height: var(--motto-font-size); + letter-spacing: -1.5px; + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..52007fdfe5 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,144 @@ +@use '../utils/vars' as *; + +.navigation { + @media screen and (max-width: 743px) { + --nav-button-size: 1.5rem; + --nav-logo-size: 1rem; + } + + &__logo { + height: var(--nav-logo-size); + } + + &__list { + align-items: center; + background-color: #ccd9ea47; + border-radius: 0 0.5rem 0.5rem 0; + display: flex; + gap: 1rem; + justify-content: center; + list-style: none; + + @media screen and (max-width: 1500px) { + background-color: transparent; + } + } + + &__item { + aspect-ratio: 1; + cursor: pointer; + display: grid; + height: var(--nav-button-size); + place-items: center; + position: relative; + transition: 0.5s ease; + + &--phone { + &__link { + width: 100%; + } + + &__logo { + width: 100%; + } + + &--number { + height: var(--nav-button-size); + left: calc(-4 * var(--nav-button-size)); + line-height: var(--nav-button-size); + font-size: 0.75rem; + font-weight: 700; + overflow: hidden; + pointer-events: none; + position: absolute; + text-align: left; + top: 0; + width: calc(4 * var(--nav-button-size)); + + &--on-hover { + background-color: #ccd9ea47; + border-radius: 0.5rem 0 0 0.5rem; + padding-left: 0.25rem; + transform: translateX(110%); + transition: 0.5s; + + @media screen and (max-width: 1500px) { + background-color: transparent; + } + } + } + + @media screen and (min-width: 743px) { + &:hover &--number &--number--on-hover { + transform: none; + } + } + } + + &--burger-menu { + z-index: 3; + + &--active { + position: fixed; + } + + &--part { + background-color: $natual-black; + border-radius: 100dvh; + height: $burger-menu-button-height; + position: relative; + transition: 0.5s ease; + width: 1.5rem; + + &::before, + &::after { + background-color: $natual-black; + border-radius: 100dvh; + content: ''; + height: $burger-menu-button-height; + position: absolute; + transition: 0.5s ease; + width: 1.5rem; + } + + &::before { + top: -0.5rem; + } + + &::after { + top: 0.5rem; + } + } + + &--active & { + &--part { + rotate: 45deg; + transition: 0.5s ease; + + &::before, + &::after { + top: 0; + } + + &::before { + background-color: transparent; + } + + &::after { + rotate: -90deg; + } + } + } + + &:not(.navigation__item--burger-menu--active):hover &--part { + &::before { + width: 1.13rem; + } + + &::after { + width: 0.75rem; + } + } + } + } +} diff --git a/src/styles/blocks/photo-gallery.scss b/src/styles/blocks/photo-gallery.scss new file mode 100644 index 0000000000..cbaf9cd456 --- /dev/null +++ b/src/styles/blocks/photo-gallery.scss @@ -0,0 +1,52 @@ +@use '../utils/vars' as *; + +.photo-gallery { + background-color: #585858c0; + backdrop-filter: blur(0.25rem); + height: 100dvh; + position: fixed; + display: none; + inset: 0 auto auto 0; + width: 100dvw; + z-index: 10; + + &--active { + display: inherit; + } + + &--close { + cursor: pointer; + position: absolute; + aspect-ratio: 1; + width: 2rem; + inset: 2dvw 2dvw auto auto; + background-color: transparent; + border: none; + display: flex; + justify-content: center; + align-items: center; + + &--part { + position: absolute; + background-color: $natual-black; + width: 1.75rem; + height: 0.25rem; + border-radius: 100dvw; + rotate: -45deg; + + &:last-child { + rotate: 45deg; + } + } + } + + &__container { + display: grid; + place-items: center; + height: 100%; + } + + &__img { + height: 80%; + } +} diff --git a/src/styles/blocks/products-container.scss b/src/styles/blocks/products-container.scss new file mode 100644 index 0000000000..23b18f4d4e --- /dev/null +++ b/src/styles/blocks/products-container.scss @@ -0,0 +1,18 @@ +.products-container { + &__image { + margin-bottom: 2rem; + } + + &__name { + font-weight: bold; + margin-bottom: 0.5rem; + } + + &__type { + margin-bottom: 0.75rem; + } + + &__cost { + font-weight: bold; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..9c32b07c46 --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,28 @@ +@use '../utils/vars' as *; + +.recommended { + @media screen and (max-width: 1259px) { + --footer-height: 25rem; + --recommended-gap: 2.5rem; + } + + @media screen and (max-width: 743px) { + --title-mb: 3rem; + } + + &__title { + margin-bottom: var(--title-mb); + } + + &__products-container { + display: grid; + gap: var(--recommended-gap); + grid-template-columns: repeat(3, 1fr); + place-items: center; + + @media screen and (max-width: 1259px) { + grid-template-columns: auto; + grid-template-rows: repeat(3, 1fr); + } + } +} diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss new file mode 100644 index 0000000000..2c6ea5fc52 --- /dev/null +++ b/src/styles/fonts/_fonts.scss @@ -0,0 +1 @@ +@import 'https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'; diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..291c42f77a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,17 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './utils/global' as *; +@use './utils/vars' as *; +@use './fonts/fonts' as *; +@use './blocks/header.scss'; +@use './blocks/navigation.scss'; +@use './blocks/burger-menu.scss'; +@use './blocks/motto.scss'; +@use './blocks/content.scss'; +@use './blocks/recommended.scss'; +@use './blocks/category.scss'; +@use './blocks/products-container.scss'; +@use './blocks/how-to-buy.scss'; +@use './blocks/contact.scss'; +@use './blocks/form-container.scss'; +@use './blocks/info-block.scss'; +@use './blocks/footer.scss'; +@use './blocks/photo-gallery.scss'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_global.scss b/src/styles/utils/_global.scss new file mode 100644 index 0000000000..161691840a --- /dev/null +++ b/src/styles/utils/_global.scss @@ -0,0 +1,44 @@ +@use './vars' as *; + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; + color: $natual-black; +} + +html { + scroll-behavior: smooth; +} + +img, +picture, +video, +svg { + background-repeat: no-repeat; + background-size: cover; + font-style: italic; + display: block; + max-width: 100%; +} + +button, +input, +textarea, +select { + font: inherit; +} + +a { + color: inherit; + text-decoration-line: none; +} + +body { + background: $natual-white; + font-family: Inter, sans-serif; + display: grid; + grid-template-rows: auto 1fr auto; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..ce832d5196 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,47 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@use './vars' as *; + +@mixin input($size, $radius) { + background-color: $input-placeholder-bg; + border: 1px solid $input-placeholder-bg; + border-radius: $radius; + color: $input-placeholder-text-c; + height: $size; + width: 100%; + padding: 1rem; + + &::placeholder { + color: $input-placeholder-color; + } + + &:hover { + border-color: $input-placeholder-border-c-hover; + } + + &:active, + &:focus { + border-color: $input-placeholder-border-c-active; + } +} + +@mixin button($size) { + background-color: $button-c-default; + border: 3px solid $button-c-default; + border-radius: 2.5rem; + color: $button-c-white; + cursor: pointer; + font-weight: bold; + padding: 1rem 3rem; + text-align: center; + width: $size; + &:hover { - #{$_property}: $_toValue; + background-color: $button-c-hover; + color: $button-c-default; + } + + &:active { + background-color: $button-c-black; + border-color: $button-c-black; + color: $button-c-white; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..044a7e41a1 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,60 @@ -$c-gray: #eee; +$natual-white: #f8f7ed; +$natual-black: #212427; +$burger-menu-button-height: 3px; +$burger-menu-color: #e8eff9; +$input-placeholder-bg: #f8f8fa; +$input-placeholder-text-c: #292929; +$input-placeholder-border-c-hover: #d5d7de; +$input-placeholder-border-c-active: #292929; +$input-placeholder-color: #7e7e83; +$info-block-c: #9fadc2; +$info-block-act: #34373b; +$button-c-default: #292929; +$button-c-white: #fff; +$button-c-hover: transparent; +$button-c-black: #111; +$photo-gallery-bg: #585858c0; + +:root { + --container-w: 63.75rem; + --container-px: 0; + --header-height: 45rem; + --nav-button-size: 2rem; + --nav-logo-size: 1.75rem; + --nav-py: 2.12rem; + --nav-h: 6rem; + --burger-menu-pt: 3.5rem; + --burger-menu-gap: 2rem; + --burger-menu-logo-mb: 3.5rem; + --container-title-w: 31rem; + --title-size: 3rem; + --title-mb: 4rem; + --recommended-gap: 1.5rem; + --type-title-size: 1.5rem; + --img-container-h: 20.25rem; + --category-type-mb: 4rem; + --img-container-gap: 1.5rem; + --category-button-size: 20.25rem; + --motto-m: 4rem; + --motto-font-size: 3rem; + --motto-img-mb: 2rem; + --motto-img-h: 4.75rem; + --main-mb: 7.5rem; + --how-to-buy-g: 1.5rem; + --how-to-buy-cell-s: 26rem; + --form-container-g: 12.5rem; + --footer-height: 28.75rem; + + @media (max-width: 1259px) { + --container-w: 37.5rem; + --container-px: 4.5rem; + --container-title-w: 24.5rem; + } + + @media (max-width: 743px) { + --container-w: 17.5rem; + --container-px: 1.5rem; + --nav-h: 4rem; + --container-title-w: 17.5rem; + } +}