diff --git a/.prettier.rc b/.prettier.rc new file mode 100644 index 0000000000..4154891b0b --- /dev/null +++ b/.prettier.rc @@ -0,0 +1 @@ +{ "semi": true, "singleQuote": false, "printWidth": 80, "tabWidth": 2, "useTabs": false, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "avoid", "bracketSameLine": false} diff --git a/README.md b/README.md index 97d3c9060a..052339e142 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://bartKarb.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/js_stateful-clones b/js_stateful-clones new file mode 160000 index 0000000000..244fac08c5 --- /dev/null +++ b/js_stateful-clones @@ -0,0 +1 @@ +Subproject commit 244fac08c5708d213ec64bcd01a44a815e954c89 diff --git a/package.json b/package.json index 54d14e8757..be800d9263 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "*", - "@mate-academy/scripts": "^1.2.12", + "@mate-academy/scripts": "^1.7.0", "@mate-academy/stylelint-config": "^0.0.11", "@parcel/transformer-sass": "2.10.2", "backstopjs": "^6.2.2", diff --git a/src/.gitignore b/src/.gitignore new file mode 100644 index 0000000000..a99ab7110d --- /dev/null +++ b/src/.gitignore @@ -0,0 +1,2 @@ +styles.css +styles.scc.map 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/header-background-big.jpg b/src/images/header-background-big.jpg new file mode 100644 index 0000000000..80cd429632 Binary files /dev/null and b/src/images/header-background-big.jpg differ diff --git a/src/images/header-background-medium.jpg b/src/images/header-background-medium.jpg new file mode 100644 index 0000000000..7db91bbb8e Binary files /dev/null and b/src/images/header-background-medium.jpg differ diff --git a/src/images/header-background-smaller.jpg b/src/images/header-background-smaller.jpg new file mode 100644 index 0000000000..4fc653f011 Binary files /dev/null and b/src/images/header-background-smaller.jpg differ diff --git a/src/images/header-background.jpg b/src/images/header-background.jpg new file mode 100644 index 0000000000..caac768668 Binary files /dev/null and b/src/images/header-background.jpg 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/picture-1.jpg b/src/images/picture-1.jpg new file mode 100644 index 0000000000..376358e936 Binary files /dev/null and b/src/images/picture-1.jpg differ diff --git a/src/images/picture-10-wide.jpg b/src/images/picture-10-wide.jpg new file mode 100644 index 0000000000..ae763e4715 Binary files /dev/null and b/src/images/picture-10-wide.jpg differ diff --git a/src/images/picture-10.jpg b/src/images/picture-10.jpg new file mode 100644 index 0000000000..ae763e4715 Binary files /dev/null and b/src/images/picture-10.jpg differ diff --git a/src/images/picture-2.jpg b/src/images/picture-2.jpg new file mode 100644 index 0000000000..39d0b0e0dd Binary files /dev/null and b/src/images/picture-2.jpg differ diff --git a/src/images/picture-3.jpg b/src/images/picture-3.jpg new file mode 100644 index 0000000000..a3876ab733 Binary files /dev/null and b/src/images/picture-3.jpg differ diff --git a/src/images/picture-4.jpg b/src/images/picture-4.jpg new file mode 100644 index 0000000000..07a4d46284 Binary files /dev/null and b/src/images/picture-4.jpg differ diff --git a/src/images/picture-5.jpg b/src/images/picture-5.jpg new file mode 100644 index 0000000000..048c05b18e Binary files /dev/null and b/src/images/picture-5.jpg differ diff --git a/src/images/picture-6.jpg b/src/images/picture-6.jpg new file mode 100644 index 0000000000..e1aed1e917 Binary files /dev/null and b/src/images/picture-6.jpg differ diff --git a/src/images/picture-7.jpg b/src/images/picture-7.jpg new file mode 100644 index 0000000000..56d0623bb5 Binary files /dev/null and b/src/images/picture-7.jpg differ diff --git a/src/images/picture-8.jpg b/src/images/picture-8.jpg new file mode 100644 index 0000000000..b2b6d50e59 Binary files /dev/null and b/src/images/picture-8.jpg differ diff --git a/src/images/picture-9.jpg b/src/images/picture-9.jpg new file mode 100644 index 0000000000..8f3d801c14 Binary files /dev/null and b/src/images/picture-9.jpg differ diff --git a/src/incons/Company-Logo.svg b/src/incons/Company-Logo.svg new file mode 100644 index 0000000000..22401b497e --- /dev/null +++ b/src/incons/Company-Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/incons/Icon-Burger-menu-hover.svg b/src/incons/Icon-Burger-menu-hover.svg new file mode 100644 index 0000000000..6e12572898 --- /dev/null +++ b/src/incons/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/incons/Icon-Burger-menu.svg b/src/incons/Icon-Burger-menu.svg new file mode 100644 index 0000000000..311d70fca9 --- /dev/null +++ b/src/incons/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/incons/Icon-Close.svg b/src/incons/Icon-Close.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/incons/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/incons/Icon-Phone-call.svg b/src/incons/Icon-Phone-call.svg new file mode 100644 index 0000000000..1d2695c8bb --- /dev/null +++ b/src/incons/Icon-Phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 2f7ebfffdd..bf091be0ef 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,319 @@ + - Miami + B&O + + + + - - -

Miami

+ + +
+
+ + +
+ + +1 234 555-55-55 + Icon-Phone + + + Open menu + +
+
+

+ Your senses.
+ Set free. +

+
+ + + +
+
+
+ +

+ Recommended +

+
+
+
+ 1 +
+

+ BEOSOUND A5 +

+

+ Huge sound anywhere – in the home or outdoors. Beosound A5 is a Wi-Fi and Bluetooth speaker with long-lasting battery and wireless charging built in. +

+

+ $ 1299.00 +

+
+ +
+
+ 2 +
+

+ BEOPLAY HX +

+

+ Wireless noise-cancelling headphones. Listen in comfort whether you're on a call, working from home or taking a moment for yourself. +

+

+ $ 499.00 +

+
+ +
+
+ 3 +
+

+ BEOSOUND THEATRE +

+

+ Four patent-pending acoustic innovations in one sleek soundbar envelop you in sound from every angle. Made to fit any TV, and last for generations. +

+

+ $ 3199.00 +

+
+ +
+ +
+ + +
+

+ Sound. Vision.
+ It's your pick. +

+ +
+
+ 4 +
+
+ 5 +
+
+ +

+ Portable speakers +

+ +
+
+ 6 +
+
+ 7 +
+
+ +

+ Earphones +

+ +
+
+ 8 +
+
+ 9 +
+
+

+ Smart Home +

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

+ Timeless, for 50 years and counting +

+

+ Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems - a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today's cutting-edge digital technology. +

+
+
+ +
+ + diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss new file mode 100644 index 0000000000..7f47847a10 --- /dev/null +++ b/src/styles/blocks/address.scss @@ -0,0 +1,36 @@ +.address { + grid-column: 1 / 3; + padding-top: 32px; + font-family: Manrope, sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.15px; + + &__label { + line-height: 20px; + color: #9393A3; + margin-top: 24px; + } + + &__content { + display: inline-block; + text-decoration: none; + line-height: 22px; + color: #191919; + margin-top: 8px; + transition: 0.4s; + + &:hover { + color:#f98921; + } + } + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 8 / 13; + } +} + diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 0000000000..f30464a021 --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,22 @@ +.burger { + background-image: url("/src/incons/Icon-Burger-menu.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 24px; + width: 24px; + transition: 0.3s; + + &:hover { + background-image: url("/src/incons/Icon-Burger-menu-hover.svg"); + } + + @include laptop { + height: 32px; + width: 32px; + } + + &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..5f17224805 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,17 @@ +.button { + background: #F98921; + border-radius: 8px; + display: block; + text-decoration: none; + font-weight: 700; + font-size: 16px; + line-height: 56px; + text-align: center; + height: 56px; + color: #FFF; + + &--primary { + background: #1B2129; + border-radius: 8px; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..98c18b934c --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,59 @@ +.card { + display: flex; + flex-direction: column; + margin: 40px 0; + + &__img { + height: 280px; + width: 280px; + border-radius: 4px; + margin-bottom: 24px; + transition: 0.5s; + + } + + &__description { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 0.15px; + color: #1B2129; + margin: 8px 0 12px; + transition: 0.2s; + } + + &:hover { + .card__img { + transform: scale(1.05); + border-radius: 10px; + box-shadow: 4px 4px 10px rgba(106, 85, 67, 0.3); + } + + .card__description { + color: #362718; + } + } + + @include laptop { + width: 600px; + height: 757px; + + &__img { + height: 600px; + width: 600px; + } + + } + + @include desktop { + height: 525px; + width: 324px; + + &__img { + height: 324px; + width: 324px; + } + } +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..4aa2014e92 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,69 @@ +.categories { + // padding: 0 20px; + grid-column: 1 /3; + + + &__block { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-top: 40px; + + @include laptop { + margin-top: 56px; + gap: 24px; + } + } + + &__img { + width: 100%; + height: 130px; + border-radius: 4px; + object-fit: cover; + margin-bottom: 16px; + + @include img-hover; + + @include laptop { + height: 184px; + } + + @include desktop { + height: 324px; + } + + } + + &__button { + width: 100%; + height: 56px; + margin-top: 40px; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 27px; + box-sizing: border-box; + border-radius: 8px; + background-color: #F98921; + color: #FFF; + + @include button-hover; + @include button-active; + + @include desktop { + width: 324px; + } + } + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..f4ea51b65d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,69 @@ +.footer { + grid-column: 1 /3; + + &__form { + margin-top: 48px; + width: 100%; + } + + &__input { + height: 48px; + width: 100%; + background-color: #F9F9F9; + border-radius: 8px; + border: 1px solid transparent; + box-sizing: border-box; + margin-bottom: 16px; + + &::placeholder { + font-family: Manrope, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.15px; + text-align: left; + color: #7E7E83; + } + + &:hover { + border-color: #DBDBDB; + &::placeholder { + color: #1B2129; + } + } + + &:focus { + border: 2px solid #F98921; + outline: none; + } + + &--textarea { + min-height: 148px; + } + } + + &__label { + &:not(:focus) &:not(:active) { + @include visually-hidden; + } + } + + &__button { + height: 56px; + width: 100%; + border: none; + outline: none; + background-color: #f98921; + color: white; + border-radius: 8px; + text-align: center; + margin: 16px 0 24px; + + @include button-hover; + @include button-active; + } + + @include laptop { + grid-column: 1 / 7; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..928c380f16 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,65 @@ +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.form { + display: flex; + flex-direction: column; + gap: 20px; + + &__item { + color: #FFF; + } + + &__input { + background: #F9F9F9; + border-radius: 8px; + border: 0; + width: 100%; + box-sizing: border-box; + height: 48px; + line-height: 48px; + padding-left: 17px; + + &::placeholder { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + letter-spacing: 0.15px; + color: #7E7E83; + } + } + + &__textarea { + background: #F9F9F9; + border-radius: 8px; + border: 0; + width: 100%; + line-height: 48px; + padding-left: 17px; + padding-top: 16px; + box-sizing: border-box; + + &::placeholder { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + letter-spacing: 0.15px; + color: #7E7E83; + } + } + + &__label { + &:not(:focus, :active) { + @include visually-hidden; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..4482f26576 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,49 @@ +@use '../utils/mixins' as *; + +.header { + background-color: black; + background-repeat: no-repeat; + background-size: cover; + min-height: 100vh; + padding: 0 20px 80px; + box-sizing: border-box; + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 130px); + grid-template-rows: 1fr 1fr; + gap: 20px; + + @include desktop { + background-image: url(/src/images/header-background-big.jpg); + grid-template-columns: repeat(12, 63px); + gap: 24px; + } + + @include laptop { + background-image: url(/src/images/header-background-medium.jpg); + } + + @media (max-width: 744px) { + background-image: url(/src/images/header-background-smaller.jpg); + } + + &__navigation { + align-self: start; + grid-column: 1 / 3; + grid-row : 1 / 2; + + @include desktop { + grid-column: 1 / 13; + } + } + + &__title { + align-self: end; + grid-column: 1 / 3; + grid-row: 2 / 3; + + @include desktop { + grid-column: 1 / 13; + } + } +} diff --git a/src/styles/blocks/intersection.scss b/src/styles/blocks/intersection.scss new file mode 100644 index 0000000000..37dc636ef3 --- /dev/null +++ b/src/styles/blocks/intersection.scss @@ -0,0 +1,75 @@ +.intersection { + background-color: #FCFAEF; + grid-column: 1 /3; + + &__paragraph { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 140%; + letter-spacing: 0.15px; + color: #1B2129; + background-color: #FCFAEF; + } + + + &__img { + background-image: url("../images/picture-10.jpg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 200px; + width: 100%; + margin-bottom: 48px; + + @include laptop { + height: 400px; + margin-bottom: 120px; + } + + @include desktop { + height: 460px; + } + } + + &__info { + @include grid; + + @include laptop { + padding: 0 72px 64px; + } + + @include desktop { + padding: 0 120px 64px; + } + + &-title { + grid-column: 1 / 3; + + @include desktop { + grid-column: 1 / 6; + } + } + + &-description { + grid-column: 1 / 3; + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 0.15px; + color: #1B2129; + margin: 16px 0 28px; + + @include laptop { + grid-column: 4 / 7; + } + + @include desktop { + grid-column: 8 / 13; + } + } + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..accd23f24b --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,24 @@ +.links { + padding-top: 32px; + &__lists { + padding: 0; + } + + &__item { + margin-bottom: 32px; + } + + &__link { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 700; + font-size: 22px; + line-height: 22px; + color: #1B2129; + text-decoration: none; + + &:hover { + border-bottom: 1px solid #1B2129; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..238add6be5 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,112 @@ +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translate(100%); + transition: transform 0.3s ease-in-out; + background-color: #F9F9F9; + box-sizing: border-box; + padding: 0 20px; + min-height: 100vh; + align-content: start; + font-family: Manrope, sans-serif; + font-weight: 700; + font-style: normal; + overflow: hidden auto; + + @include grid; + + &:target { + transform: translate(0); + } + + &__header { + grid-column: 1 / 3; + display: flex; + justify-content: space-between; + align-items: center; + height: 72px; + + @include laptop { + height: 96px; + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-logo{ + width: 152px;; + + @include laptop { + width: 228px; + } + } + + &-icon { + height: 24px; + width: 24px; + + @include laptop { + height: 32px; + width: 32px; + } + } + } + + &__navigation { + height: 184px; + grid-column: 1 /3; + margin: 32px 0; + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-item { + margin-bottom: 32px; + } + + &-link { + font-size: 22px; + line-height: 22px; + color: #1B2129; + text-decoration: none; + + } + } + + &__paragraph { + grid-column: 1 /3; + height: 64px; + font-size: 16px; + line-height: 22px; + letter-spacing: 2px; + margin-top: 16px; + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-link { + display: inline-block; + line-height: 22.4px; + padding: 16px 0 4px; + letter-spacing: 2px; + text-transform: uppercase; + border-bottom: 1px solid #1B2129; + text-decoration: none; + color: #1B2129; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..238add6be5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,112 @@ +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translate(100%); + transition: transform 0.3s ease-in-out; + background-color: #F9F9F9; + box-sizing: border-box; + padding: 0 20px; + min-height: 100vh; + align-content: start; + font-family: Manrope, sans-serif; + font-weight: 700; + font-style: normal; + overflow: hidden auto; + + @include grid; + + &:target { + transform: translate(0); + } + + &__header { + grid-column: 1 / 3; + display: flex; + justify-content: space-between; + align-items: center; + height: 72px; + + @include laptop { + height: 96px; + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-logo{ + width: 152px;; + + @include laptop { + width: 228px; + } + } + + &-icon { + height: 24px; + width: 24px; + + @include laptop { + height: 32px; + width: 32px; + } + } + } + + &__navigation { + height: 184px; + grid-column: 1 /3; + margin: 32px 0; + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-item { + margin-bottom: 32px; + } + + &-link { + font-size: 22px; + line-height: 22px; + color: #1B2129; + text-decoration: none; + + } + } + + &__paragraph { + grid-column: 1 /3; + height: 64px; + font-size: 16px; + line-height: 22px; + letter-spacing: 2px; + margin-top: 16px; + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &-link { + display: inline-block; + line-height: 22.4px; + padding: 16px 0 4px; + letter-spacing: 2px; + text-transform: uppercase; + border-bottom: 1px solid #1B2129; + text-decoration: none; + color: #1B2129; + } + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..9c59b144a3 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,41 @@ +.navigation { + align-self: start; + grid-column: 1 / 3; + grid-row: 1 / 2; + height: 72px; + display: flex; + justify-content: space-between; + align-items: center; + + @include laptop { + height: 96px; + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + } + + &__logo { + width: 152px; + + @include laptop { + width: 228px; + } + } + + &__buttons { + display: flex; + gap: 32px; + + &--icon { + height: 24px; + width: 24px; + + @include laptop { + height: 32px; + width: 32px; + } + } + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..eb7a4d3d07 --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,17 @@ +.phone { + &__label { + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 32px; + letter-spacing: 2px; + color: hsl(214deg, 21%, 13%); + text-decoration: none; + position: absolute; + transform: translate(calc(-100% - 20px)); + } + + &:not(:hover) &__label{ + @include visually-hidden; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..6ffbbe2de7 --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,23 @@ +.recommended { + padding-top: 64px; + grid-column: 1 /3; + + &__products { + display: flex; + flex-direction: column; + } + + @include laptop { + grid-column: 1 / 7; + } + + @include desktop { + grid-column: 1 / 13; + + &__products { + display: flex; + flex-direction: row; + gap: 24px; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..b40f1945eb --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,70 @@ +.section { + + &__title { + margin-bottom: 32px; + } + + &__article { + margin-bottom: 32px; + } + + &__page { + display: flex; + flex-direction: column; + margin-bottom: 40px; + box-sizing: border-box; + + // min-height: 100vh; + + } + + &__catalog { + @include grid; + + @include laptop { + padding: 0 72px 64px; + } + + @include desktop { + padding: 0 120px 64px; + } + + } + + &__footer { + box-sizing: border-box; + + // min-height: 100vh; + + padding: 64px 20px 68px; + + @include grid; + + @include laptop { + padding: 120px 72px ; + } + + @include desktop { + padding: 120px; + } + + &--title { + grid-column: 1 / 3; + margin-bottom: 48px; + + @include laptop { + grid-column: 1 / 7; + margin-bottom: 56px; + } + + @include desktop { + grid-column: 1 / 13; + } + + } + } + + &--with-menu { + overflow: hidden; + } +} diff --git a/src/styles/blocks/speaker.scss b/src/styles/blocks/speaker.scss new file mode 100644 index 0000000000..b49e8b10c0 --- /dev/null +++ b/src/styles/blocks/speaker.scss @@ -0,0 +1,40 @@ +.speaker { + display: flex; + flex-direction: column; + margin: 40px 0; + + &__name { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 140%; + color: #1B2129; + margin-top: 24px; + margin-bottom: 8px; + display: flex; + align-items: center; + width: 87,5% + } + + &__paragraph { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 0.15px; + color: #1B2129; + margin: 8px 0 12px; + transition: 0.2s; + } + + &__price { + font-family: Manrope, sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 140%; + color: #1B2129; + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..a3dc1c64c0 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,56 @@ +.title { + font-family: Manrope, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + display: flex; + align-items: center; + color: #FFF; + + @include laptop { + font-size: 48px; + line-height: 48px; + } + + @include desktop { + font-size: 56px; + line-height: 56px; + } + + &--secondary { + font-weight: 700; + font-size: 32px; + line-height: 32px; + color: #1B2129; + margin-bottom: 8px; + + @include laptop { + font-size: 40px; + line-height: 40px; + } + + @include desktop { + font-size: 48px; + line-height: 48px; + } + } + + &--product-name { + font-weight: 700; + font-size: 18px; + line-height: 25.2px; + color: #1B2129; + + @include laptop { + font-size: 24px; + } + } + + &--product-price { + font-weight: 700; + font-size: 16px; + line-height: 22.4px; + color: #1B2129; + } + +} diff --git a/src/styles/_fonts.scss b/src/styles/fonts.scss similarity index 100% rename from src/styles/_fonts.scss rename to src/styles/fonts.scss diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d7..721e0785cc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,20 @@ -@import "utils"; -@import "fonts"; -@import "typography"; - -body { - background: $c-gray; -} +@import './utils/mixins'; +@import './utils/reset'; +@import './blocks/title'; +@import './blocks/header'; +@import './blocks/main'; +@import './blocks/button'; +@import './blocks/address'; +@import './blocks/form'; +@import './blocks/intersection'; +@import './blocks/navigation'; +@import './blocks/menu'; +@import './blocks/links'; +@import './blocks/section'; +@import './blocks/speaker'; +@import './blocks/categories'; +@import './blocks/recommended'; +@import './blocks/card'; +@import './blocks/footer'; +@import './blocks/burger'; +@import './blocks/phone'; diff --git a/src/styles/_typography.scss b/src/styles/typography.scss similarity index 100% rename from src/styles/_typography.scss rename to src/styles/typography.scss diff --git a/src/styles/_utils.scss b/src/styles/utils.scss similarity index 100% rename from src/styles/_utils.scss rename to src/styles/utils.scss diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e37..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/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/extends.scss b/src/styles/utils/extends.scss new file mode 100644 index 0000000000..d7201e7b3e --- /dev/null +++ b/src/styles/utils/extends.scss @@ -0,0 +1,4 @@ +%h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..b9878c5f3f --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,69 @@ +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin img-hover { + transition: 0.5s; + &:hover { + transform: scale(1.03); + border-radius: 10px; + box-shadow: 0 3px 10px rgba(176, 97, 23, 0.3); + } +} + +@mixin button-hover { + transition: color 0.3s, background-color 0.3s, box-shadow 0.3s; + + &:hover { + background-color: #1B2129; + } +} + +@mixin button-active { + &:active { + background-color: #010810; + } +} + +@mixin desktop() { + @media (min-width:1020px) { + @content + } +} + +@mixin laptop() { + @media (min-width:744px) { + @content + } +} + +@mixin grid() { + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 130px); + gap: 20px; + + @include laptop { + grid-template-columns: repeat(6, 80px); + gap: 24px; + } + + @include desktop { + grid-template-columns: repeat(12, 63px); + gap: 24px; + } +} + diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..9df9aa5cbf --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,127 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-style: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/vars.scss similarity index 100% rename from src/styles/utils/_vars.scss rename to src/styles/utils/vars.scss