diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 885c5fa6a4..e3303b2918 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ raw_reports reports cypress/screenshots cypress/videos +main.css +main.css.map diff --git a/index.html b/index.html index 06bcd7773a..422bbeed97 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,194 @@ - + - - - Miami - - + + + + Boost + + + + -

Miami

+ + + + +
+

Recommended

+ +
+
+ + + +

Bose portable Smart speaker

+

Smart home

+

$ 399.00

+
+ +
+ + + +

SoundLink Flex Bluetooth speaker

+

Portable bluetooth

+

$ 149.00

+
+ +
+ + Picture 1 + +

SoundLink Color Bluetooth speaker II

+

Portable bluetooth

+

$ 129.00

+
+
+ +

Browse Bose
products by
category

+

Browse Bose
products by category

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

Headphones & earbuds

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

Speakers

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

Audio sunglasses

+
+
+ + View all + + +
+

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

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

Phone

+ +1 234 5555-55-55 +

Email

+

hello@miami.com

+

Address

+ + 400 first ave.
suite 700
Minneapolis MN 55401 + +
+ +
+ +
+ + + + diff --git a/src/images/Icon-Burger-menu-hover.svg b/src/images/Icon-Burger-menu-hover.svg new file mode 100644 index 0000000000..d69ca09050 --- /dev/null +++ b/src/images/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg new file mode 100644 index 0000000000..f8b47d8168 --- /dev/null +++ b/src/images/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/images/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg new file mode 100644 index 0000000000..0d66c9f71e --- /dev/null +++ b/src/images/Icon-Phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Image1.jpg b/src/images/Image1.jpg new file mode 100644 index 0000000000..cd5b7adb93 Binary files /dev/null and b/src/images/Image1.jpg differ diff --git a/src/images/Image2.jpg b/src/images/Image2.jpg new file mode 100644 index 0000000000..54767e1903 Binary files /dev/null and b/src/images/Image2.jpg differ diff --git a/src/images/Image3.jpg b/src/images/Image3.jpg new file mode 100644 index 0000000000..79c0b57863 Binary files /dev/null and b/src/images/Image3.jpg differ diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 0000000000..85ff9d7c1c --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Sound-waves.svg b/src/images/Sound-waves.svg new file mode 100644 index 0000000000..cb64c6b3d1 --- /dev/null +++ b/src/images/Sound-waves.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/background-image.jpg b/src/images/background-image.jpg new file mode 100644 index 0000000000..683a86aeed Binary files /dev/null and b/src/images/background-image.jpg differ diff --git a/src/images/background1020.jpg b/src/images/background1020.jpg new file mode 100644 index 0000000000..d1ee93cb1b Binary files /dev/null and b/src/images/background1020.jpg differ 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/footer.jpg b/src/images/footer.jpg new file mode 100644 index 0000000000..1438ae23c9 Binary files /dev/null and b/src/images/footer.jpg differ diff --git a/src/images/footer1.svg b/src/images/footer1.svg new file mode 100644 index 0000000000..8f6d7dcc70 --- /dev/null +++ b/src/images/footer1.svg @@ -0,0 +1,9 @@ + + + + + + + + + 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.svg b/src/images/picture-1.svg new file mode 100644 index 0000000000..c6d16f39b4 --- /dev/null +++ b/src/images/picture-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picture-2.svg b/src/images/picture-2.svg new file mode 100644 index 0000000000..69b65f4e29 --- /dev/null +++ b/src/images/picture-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picture-3.svg b/src/images/picture-3.svg new file mode 100644 index 0000000000..f1680bc075 --- /dev/null +++ b/src/images/picture-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picture-4.svg b/src/images/picture-4.svg new file mode 100644 index 0000000000..b601645ea8 --- /dev/null +++ b/src/images/picture-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picture-5.svg b/src/images/picture-5.svg new file mode 100644 index 0000000000..775ae38b27 --- /dev/null +++ b/src/images/picture-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/picture-6.svg b/src/images/picture-6.svg new file mode 100644 index 0000000000..8c6c8a8424 --- /dev/null +++ b/src/images/picture-6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..6e8da06dcf 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,10 @@ +console.log('Cześć, tu plik main.js - melduję się!'); + 'use strict'; +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } + }); 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/_main.scss b/src/styles/_main.scss new file mode 100644 index 0000000000..3cb8e3b180 --- /dev/null +++ b/src/styles/_main.scss @@ -0,0 +1,15 @@ +@use './utils/reset.scss'; +@use './blocks/title.scss'; +@use './blocks/header.scss'; +@use './blocks/main.scss'; +@use './blocks/article.scss'; +@use './blocks/pictures.scss'; +@use './blocks/button.scss'; +@use './blocks/form.scss'; +@use './blocks/adress.scss'; +@use './blocks/footer.scss'; +@use './blocks/navigation.scss'; +@use './blocks/menu.scss'; +@use './blocks/links.scss'; +@use './blocks/burger.scss'; +@use './blocks/phone.scss'; 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/_adress.scss b/src/styles/blocks/_adress.scss new file mode 100644 index 0000000000..193b736f08 --- /dev/null +++ b/src/styles/blocks/_adress.scss @@ -0,0 +1,64 @@ +@use '../utils/mixins' as *; + +.adress { + @include for-medium { + grid-column: 2; + display: block; + } + + @include for-desktop { + grid-column: 7 / 12; + } + &__label { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + color: #9fadc2; + + &:not(:first-child) { + margin-top: 30px; + } + } + + &__content { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + + &--phone { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + padding-top: 10px; + color: black; + text-decoration: none; + cursor: pointer; + } + + &--adress { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + padding-top: 10px; + color: black; + text-decoration: none; + cursor: pointer; + } + + &:hover { + color: #9fadc4; + } + } +} diff --git a/src/styles/blocks/_article.scss b/src/styles/blocks/_article.scss new file mode 100644 index 0000000000..adea07517c --- /dev/null +++ b/src/styles/blocks/_article.scss @@ -0,0 +1,189 @@ +@use '../utils/mixins' as *; + +.categories { + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + padding: 20px; +} + +.article { + margin: 0 20px; + + &__grid { + display: flex; + gap: 10px; + margin-bottom: 15px; + } + + &__image-wrapper { + position: relative; + aspect-ratio: 1 / 1; + overflow: hidden; + height: 130px; + margin-top: 20px; + + img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + } + + @include for-medium { + height: 280px; + aspect-ratio: auto; + } + + @include for-desktop { + height: 350px; + } + } + + &__image { + display: block; + margin: 0 auto; + height: auto; + } + + &__name { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 15px; + letter-spacing: 0; + line-height: 140%; + margin-top: 15px; + + @include for-medium { + padding-left: 180px; + } + + @include for-desktop { + padding-left: 20px; + } + + &--secondary { + transform: none; + padding-left: 0; + + @include for-medium { + grid-column: 2; + text-align: left; + justify-self: start; + padding: 0; + transform: translateY(-120px); + } + } + } + + &__product { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + + @include for-medium { + font-size: 24px; + } + } + + &__category { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + letter-spacing: 0; + line-height: 140%; + + @include for-medium { + padding-left: 180px; + } + + @include for-desktop { + padding-left: 20px; + } + } + + &__price { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 16px; + letter-spacing: 0; + line-height: 140%; + + @include for-medium { + padding-left: 180px; + } + + @include for-desktop { + padding-left: 20px; + } + } + + &__paragraph { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + letter-spacing: 0; + line-height: 27px; + margin-top: 50px; + + @include for-medium { + grid-column: 2; + margin-top: 30px; + padding: 0; + text-align: left; + justify-self: end; + transform: translateY(-120px); + line-height: 27px; + } + } + + &__buy { + margin: 0 20px -40px; + + @include for-medium { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: start; + margin-bottom: -160px; + } + + &--title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: left; + margin: 90px 20px 30px 0; + + @include for-medium { + font-size: 40px; + line-height: 100%; + grid-column: span 2; + align-self: start; + } + + @include for-desktop { + font-size: 48px; + line-height: 100%; + } + } + } +} + +.recommended { + @include for-desktop { + display: grid; + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/src/styles/blocks/_burger.scss b/src/styles/blocks/_burger.scss new file mode 100644 index 0000000000..d4e44279f5 --- /dev/null +++ b/src/styles/blocks/_burger.scss @@ -0,0 +1,16 @@ +@use '../utils/mixins' as *; + +.burger { + display: inline-block; + align-items: end; + background-image: url(../images/Icon-Burger-Menu.svg); + background-size: cover; + + &:hover { + background-image: url(../images/Icon-Burger-menu-hover.svg); + } + + &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 0000000000..f31744ec6f --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,53 @@ +@use '../utils/mixins' as *; + +.button { + background-color: #292929; + color: #fff; + border-radius: 40px; + display: flex; + flex-direction: column; + text-decoration: none; + text-align: center; + align-items: center; + justify-content: center; + width: 280px; + height: 56px; + line-height: 56px; + font-family: Inter, sans-serif; + font-weight: 700; + margin: 15px auto; + + &--secondary { + width: 100%; + margin: 30px auto; + + @include for-medium { + align-self: start; + } + } + + &:hover { + background-color: white; + color: #292929; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + text-align: center; + border: 3px solid #292929; + } + + &.active { + background-color: black; + color: #fff; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + text-align: center; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 0000000000..9079bbcedf --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,23 @@ +@use '../utils/mixins' as *; + +.footer { + height: 250px; + background-image: url(../images/footer.jpg); + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + box-sizing: border-box; + margin-top: 100px; + + @include for-medium { + height: 400px; + background-image: url(../images/footer1.svg); + } + + @include for-desktop { + height: 460px; + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 0000000000..1d1bfe71e3 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,92 @@ +@use '../utils/mixins' as *; + +.contacts { + margin: 0 20px; + + @include for-medium { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + align-items: start; + } + + @include for-desktop { + display: grid; + grid-template-columns: repeat(11, 63px); + gap: 30px; + } +} + +.form { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; + width: 100%; + margin: 0 auto; + + @include for-medium { + display: block; + grid-column: 1; + } + + @include for-desktop { + grid-column: 1 / 7; + padding-left: 40px; + } + + &__adress { + grid-column: 9 / 11; + } + + &__item { + @include for-medium { + margin-bottom: 20px; + } + } + + &__input { + background-color: #f8f8fa; + border-radius: 40px; + border: 0; + width: 100%; + box-sizing: border-box; + height: 48px; + line-height: 48px; + padding-left: 17px; + + &::placeholder { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + } + } + + &__textarea { + background-color: #f8f8fa; + border-radius: 16px; + border: 0; + width: 100%; + box-sizing: border-box; + height: 148px; + padding: 16px 13px; + + &::placeholder { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + } + } + + &__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..0297dfe09c --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,49 @@ +@use '../utils/mixins' as *; + +.header { + background-color: white; + background-image: url(../images/background-image.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + padding: 0 20px 20px; + box-sizing: border-box; + + @include grid; + + &__navigation { + align-self: start; + grid-column: 1 / 3; + grid-row: 1 / 2; + + @include for-medium { + grid-column: 1 / 6; + } + + @include for-desktop { + grid-column: 1 / 12; + } + } + + &__title { + align-self: end; + grid-column: 1 / 3; + grid-row: 2 / 3; + + @include for-medium { + grid-column: 1 / 6; + } + + @include for-desktop { + grid-column: 1 / 6; + font-family: Inter, sans-serif; + font-weight: 800; + font-style: Italic; + font-size: 48px; + line-height: 100%; + letter-spacing: -1.5px; + vertical-align: middle; + } + } +} diff --git a/src/styles/blocks/_links.scss b/src/styles/blocks/_links.scss new file mode 100644 index 0000000000..3b9fa23291 --- /dev/null +++ b/src/styles/blocks/_links.scss @@ -0,0 +1,28 @@ +.links { + padding-top: 20px; + + &__list { + padding-top: 16px; + } + + &__item { + padding-top: 30px; + } + + &__link { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + text-decoration: none; + + &:hover { + border-bottom: 1px solid #292929; + } + } +} diff --git a/src/styles/blocks/_main.scss b/src/styles/blocks/_main.scss new file mode 100644 index 0000000000..c90cdcfc85 --- /dev/null +++ b/src/styles/blocks/_main.scss @@ -0,0 +1,13 @@ +// @use '../utils/mixins' as *; + +// .main { +// padding: 0 20px 60px; + +// @include for-medium { +// padding: 0 72px 60px; +// } + +// @include for-desktop { +// padding: 0 120px 60px; +// } +// } diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 0000000000..1fc39c9dad --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,60 @@ +.page__body--with-menu { + overflow: hidden; + position: fixed; + height: 100vh; +} + +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); + transition: transform 0.5s ease-in-out; + background-color: #e8f0fe; + padding: 0 30px 20px; + min-height: 100vh; + display: flex; + flex-direction: column; + z-index: 999; + + &:target { + transform: translateX(0); + } + + &__links { + margin-bottom: 40px; + } + + &__paragraph { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + margin-bottom: 10px; + } + + &__link { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + padding-bottom: 8px; + text-decoration: none; + border-bottom: 1px solid #292929 transparent; + + &:hover { + border-bottom: 1px solid #292929; + } + } +} diff --git a/src/styles/blocks/_navigation.scss b/src/styles/blocks/_navigation.scss new file mode 100644 index 0000000000..7ee9382e93 --- /dev/null +++ b/src/styles/blocks/_navigation.scss @@ -0,0 +1,64 @@ +@use '../utils/mixins' as *; + +$nav-padding-mobile: 20px; +$nav-padding-desktop: 40px; + +.navigation { + display: flex; + justify-content: space-between; + padding: 25px $nav-padding-mobile 0; + + @include for-medium { + padding: 25px $nav-padding-desktop 0; + } + + &__logo { + width: 125px; + height: 16px; + + @include for-medium { + width: 188px; + height: 24px; + } + } + + &__actions { + display: flex; + align-items: flex-end; + gap: 10px; + + @include for-medium { + gap: 20px; + transform: translateX(150px); + } + + @include for-desktop { + gap: 20px; + transform: translateX(60px); + } + } + + &__icon { + width: 24px; + height: 24px; + + @include for-medium { + width: 32px; + height: 32px; + } + } + + &__phone { + width: 24px; + height: 24px; + + @include for-medium { + width: 32px; + height: 32px; + } + + @include for-desktop { + // transform: translate(340px, 0); + } + } +} diff --git a/src/styles/blocks/_phone.scss b/src/styles/blocks/_phone.scss new file mode 100644 index 0000000000..639b3ec2c2 --- /dev/null +++ b/src/styles/blocks/_phone.scss @@ -0,0 +1,29 @@ +@use '../utils/mixins' as *; + +.phone { + display: flex; + position: relative; + gap: 20px; + + &__label { + display: inline-block; + white-space: nowrap; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + vertical-align: middle; + text-transform: uppercase; + + color: #292929; + position: absolute; + transform: translateX(-100%) translateY(calc(120% - 10px)); + } + + &:not(:hover) .phone__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/_pictures.scss b/src/styles/blocks/_pictures.scss new file mode 100644 index 0000000000..456e93f4fa --- /dev/null +++ b/src/styles/blocks/_pictures.scss @@ -0,0 +1,23 @@ +.pictures { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &__secondary { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 30px; + } + + &__item { + width: 100%; + height: 100%; + object-fit: cover; + + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/styles/blocks/_title.scss b/src/styles/blocks/_title.scss new file mode 100644 index 0000000000..a6163218e3 --- /dev/null +++ b/src/styles/blocks/_title.scss @@ -0,0 +1,83 @@ +@use '../utils/mixins' as *; + +.title { + font-family: Inter, sans-serif; + font-weight: 800; + font-style: normal; + font-size: 32px; + line-height: 100%; + letter-spacing: -1.5px; + padding: 10px; + + display: flex; + flex-direction: column; + justify-content: flex-end; + + &--decorated::before { + content: ''; + background-image: url('../images/Sound-waves.svg'); + display: block; + width: 48px; + height: 58px; + margin-bottom: 20px; + } + + &--secondary { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: center; + margin-top: 80px; + margin-bottom: 40px; + + @include for-medium { + font-size: 40px; + line-height: 100%; + } + + @include for-desktop { + font-size: 48px; + line-height: 100%; + } + } + + &--third { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: center; + margin-top: 60px; + margin-bottom: 30px; + + @include for-medium { + font-size: 40px; + line-height: 100%; + display: none; + } + } + + &--hidden { + display: none; + + @include for-medium { + display: block; + font-family: Inter, sans-serif; + font-weight: 800; + font-style: bold; + font-size: 40px; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + margin-top: 80px; + margin-bottom: 10px; + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000000..6da58acac8 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1003 @@ +/* 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: inherit; + font-size: 100%; + 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; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.title { + font-family: Inter, sans-serif; + font-weight: 800; + font-style: normal; + font-size: 32px; + line-height: 100%; + letter-spacing: -1.5px; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.title--decorated::before { + content: ''; + background-image: url('../images/Sound-waves.svg'); + display: block; + width: 48px; + height: 58px; + margin-bottom: 20px; +} + +.title--secondary { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: center; + margin-top: 80px; + margin-bottom: 40px; +} + +@media (min-width: 744px) { + .title--secondary { + font-size: 40px; + line-height: 100%; + } +} + +@media (min-width: 1020px) { + .title--secondary { + font-size: 48px; + line-height: 100%; + } +} + +.title--third { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: center; + margin-top: 60px; + margin-bottom: 30px; +} + +@media (min-width: 744px) { + .title--third { + font-size: 40px; + line-height: 100%; + display: none; + } +} + +.title--hidden { + display: none; +} + +@media (min-width: 744px) { + .title--hidden { + display: block; + font-family: Inter, sans-serif; + font-weight: 800; + font-style: bold; + font-size: 40px; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + margin-top: 80px; + margin-bottom: 10px; + } +} + +.header { + background-color: white; + background-image: url(../images/background-image.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + height: 100vh; + padding: 0 20px 20px; + box-sizing: border-box; + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 130px); + gap: 20px; +} + +@media (min-width: 744px) { + .header { + background-image: url(../images/background1020.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + grid-template-columns: repeat(6, 80px); + gap: 24px; + } +} + +@media (min-width: 1020px) { + .header { + background-position: center; + grid-template-columns: repeat(12, 63px); + gap: 24px; + } +} + +.header__navigation { + align-self: start; + grid-column: 1/3; + grid-row: 1/2; +} + +@media (min-width: 744px) { + .header__navigation { + grid-column: 1/6; + } +} + +@media (min-width: 1020px) { + .header__navigation { + grid-column: 1/12; + } +} + +.header__title { + align-self: end; + grid-column: 1/3; + grid-row: 2/3; +} + +@media (min-width: 744px) { + .header__title { + grid-column: 1/6; + } +} + +@media (min-width: 1020px) { + .header__title { + grid-column: 1/6; + font-family: Inter, sans-serif; + font-weight: 800; + font-style: Italic; + font-size: 48px; + line-height: 100%; + letter-spacing: -1.5px; + vertical-align: middle; + } +} + +.categories { + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; + padding: 20px; +} + +.article { + margin: 0 20px; +} + +.article__grid { + display: flex; + gap: 10px; + margin-bottom: 15px; +} + +.article__image-wrapper { + position: relative; + aspect-ratio: 1/1; + overflow: hidden; + height: 130px; + margin-top: 20px; +} + +.article__image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +@media (min-width: 744px) { + .article__image-wrapper { + height: 280px; + aspect-ratio: auto; + } +} + +@media (min-width: 1020px) { + .article__image-wrapper { + height: 350px; + } +} + +.article__image { + display: block; + margin: 0 auto; + height: auto; +} + +.article__name { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 15px; + letter-spacing: 0; + line-height: 140%; + margin-top: 15px; +} + +@media (min-width: 744px) { + .article__name { + padding-left: 180px; + } +} + +@media (min-width: 1020px) { + .article__name { + padding-left: 20px; + } +} + +.article__name--secondary { + transform: none; + padding-left: 0; +} + +@media (min-width: 744px) { + .article__name--secondary { + grid-column: 2; + text-align: left; + justify-self: start; + padding: 0; + transform: translateY(-120px); + } +} + +.article__product { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; +} + +@media (min-width: 744px) { + .article__product { + font-size: 24px; + } +} + +.article__category { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + letter-spacing: 0; + line-height: 140%; +} + +@media (min-width: 744px) { + .article__category { + padding-left: 180px; + } +} + +@media (min-width: 1020px) { + .article__category { + padding-left: 20px; + } +} + +.article__price { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 16px; + letter-spacing: 0; + line-height: 140%; +} + +@media (min-width: 744px) { + .article__price { + padding-left: 180px; + } +} + +@media (min-width: 1020px) { + .article__price { + padding-left: 20px; + } +} + +.article__paragraph { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + letter-spacing: 0; + line-height: 27px; + margin-top: 50px; +} + +@media (min-width: 744px) { + .article__paragraph { + grid-column: 2; + margin-top: 30px; + padding: 0; + text-align: left; + justify-self: end; + transform: translateY(-120px); + line-height: 27px; + } +} + +.article__buy { + margin: 0 20px -40px; +} + +@media (min-width: 744px) { + .article__buy { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: start; + margin-bottom: -160px; + } +} + +.article__buy--title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: bold; + font-size: 32px; + line-height: 32px; + letter-spacing: -1.5px; + align-items: center; + text-align: left; + margin: 90px 20px 30px 0; +} + +@media (min-width: 744px) { + .article__buy--title { + font-size: 40px; + line-height: 100%; + grid-column: span 2; + align-self: start; + } +} + +@media (min-width: 1020px) { + .article__buy--title { + font-size: 48px; + line-height: 100%; + } +} + +@media (min-width: 1020px) { + .recommended { + display: grid; + grid-template-columns: repeat(3, 1fr); + } +} + +.pictures { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.pictures__secondary { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 30px; +} + +.pictures__item { + width: 100%; + height: 100%; + object-fit: cover; +} + +.pictures__item:hover { + transform: scale(1.1); +} + +.button { + background-color: #292929; + color: #fff; + border-radius: 40px; + display: flex; + flex-direction: column; + text-decoration: none; + text-align: center; + align-items: center; + justify-content: center; + width: 280px; + height: 56px; + line-height: 56px; + font-family: Inter, sans-serif; + font-weight: 700; + margin: 15px auto; +} + +.button--secondary { + width: 100%; + margin: 30px auto; +} + +@media (min-width: 744px) { + .button--secondary { + align-self: start; + } +} + +.button:hover { + background-color: white; + color: #292929; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + text-align: center; + border: 3px solid #292929; +} + +.button.active { + background-color: black; + color: #fff; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + text-align: center; +} + +.contacts { + margin: 0 20px; +} + +@media (min-width: 744px) { + .contacts { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + align-items: start; + } +} + +@media (min-width: 1020px) { + .contacts { + display: grid; + grid-template-columns: repeat(11, 63px); + gap: 30px; + } +} + +.form { + display: flex; + flex-direction: column; + justify-content: center; + gap: 20px; + width: 100%; + margin: 0 auto; +} + +@media (min-width: 744px) { + .form { + display: block; + grid-column: 1; + } +} + +@media (min-width: 1020px) { + .form { + grid-column: 1/7; + padding-left: 40px; + } +} + +.form__adress { + grid-column: 9/11; +} + +@media (min-width: 744px) { + .form__item { + margin-bottom: 20px; + } +} + +.form__input { + background-color: #f8f8fa; + border-radius: 40px; + border: 0; + width: 100%; + box-sizing: border-box; + height: 48px; + line-height: 48px; + padding-left: 17px; +} + +.form__input::placeholder { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; +} + +.form__textarea { + background-color: #f8f8fa; + border-radius: 16px; + border: 0; + width: 100%; + box-sizing: border-box; + height: 148px; + padding: 16px 13px; +} + +.form__textarea::placeholder { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; +} + +.form__label:not(:focus, :active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@media (min-width: 744px) { + .adress { + grid-column: 2; + display: block; + } +} + +@media (min-width: 1020px) { + .adress { + grid-column: 7/12; + } +} + +.adress__label { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + color: #9fadc2; +} + +.adress__label:not(:first-child) { + margin-top: 30px; +} + +.adress__content { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; +} + +.adress__content--phone { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + padding-top: 10px; + color: black; + text-decoration: none; + cursor: pointer; +} + +.adress__content--adress { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + padding-top: 10px; + color: black; + text-decoration: none; + cursor: pointer; +} + +.adress__content:hover { + color: #9fadc4; +} + +.footer { + height: 250px; + background-image: url(../images/footer.jpg); + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + box-sizing: border-box; + margin-top: 100px; +} + +@media (min-width: 744px) { + .footer { + height: 400px; + background-image: url(../images/footer1.svg); + } +} + +@media (min-width: 1020px) { + .footer { + height: 460px; + } +} + +.navigation { + display: flex; + justify-content: space-between; + padding: 25px 20px 0; +} + +@media (min-width: 744px) { + .navigation { + padding: 25px 40px 0; + } +} + +.navigation__logo { + width: 125px; + height: 16px; +} + +@media (min-width: 744px) { + .navigation__logo { + width: 188px; + height: 24px; + } +} + +.navigation__actions { + display: flex; + align-items: flex-end; + gap: 10px; +} + +@media (min-width: 744px) { + .navigation__actions { + gap: 20px; + transform: translateX(150px); + } +} + +@media (min-width: 1020px) { + .navigation__actions { + gap: 20px; + transform: translateX(60px); + } +} + +.navigation__icon { + width: 24px; + height: 24px; +} + +@media (min-width: 744px) { + .navigation__icon { + width: 32px; + height: 32px; + } +} + +.navigation__phone { + width: 24px; + height: 24px; +} + +@media (min-width: 744px) { + .navigation__phone { + width: 32px; + height: 32px; + } +} + +.page__body--with-menu { + overflow: hidden; + position: fixed; + height: 100vh; +} + +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); + transition: transform 0.5s ease-in-out; + background-color: #e8f0fe; + padding: 0 30px 20px; + min-height: 100vh; + display: flex; + flex-direction: column; + z-index: 999; +} + +.menu:target { + transform: translateX(0); +} + +.menu__links { + margin-bottom: 40px; +} + +.menu__paragraph { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + margin-bottom: 10px; +} + +.menu__link { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + padding-bottom: 8px; + text-decoration: none; + border-bottom: 1px solid #292929 transparent; +} + +.menu__link:hover { + border-bottom: 1px solid #292929; +} + +.links { + padding-top: 20px; +} + +.links__list { + padding-top: 16px; +} + +.links__item { + padding-top: 30px; +} + +.links__link { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + text-decoration: none; +} + +.links__link:hover { + border-bottom: 1px solid #292929; +} + +.burger { + display: inline-block; + align-items: end; + background-image: url(../images/Icon-Burger-Menu.svg); + background-size: cover; +} + +.burger:hover { + background-image: url(../images/Icon-Burger-menu-hover.svg); +} + +.burger__label { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +.phone { + display: flex; + position: relative; + gap: 20px; +} + +.phone__label { + display: inline-block; + white-space: nowrap; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + vertical-align: middle; + text-transform: uppercase; + color: #292929; + position: absolute; + transform: translateX(-100%) translateY(calc(120% - 10px)); +} + +.phone:not(:hover) .phone__label { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 0000000000..eb0693ad39 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/reset.scss","blocks/_title.scss","utils/_mixins.scss","blocks/_header.scss","blocks/_article.scss","blocks/_pictures.scss","blocks/_button.scss","blocks/_form.scss","blocks/_adress.scss","blocks/_footer.scss","blocks/_navigation.scss","blocks/_menu.scss","blocks/_links.scss","blocks/_burger.scss","blocks/_phone.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;EACE;EACA;;;ACnIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjCF;EDuBA;IAaI;IACA;;;AC/BJ;EDiBA;IAkBI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACxDF;ED8CA;IAaI;IACA;IACA;;;AAIJ;EACE;;AClEF;EDiEA;IAII;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AE7EN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EDGA;EACA;EACA;EACA;;AAfA;ECCF;IDiBI;IACA;IACA;IACA;IACA;IACA;;;AAjBF;ECLF;ID0BI;IACA;IACA;;;AChBF;EACE;EACA;EACA;;ADhBF;ECaA;IAMI;;;ADbJ;ECOA;IAUI;;;AAIJ;EACE;EACA;EACA;;AD9BF;EC2BA;IAMI;;;AD3BJ;ECqBA;IAUI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;;AC3CN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AF7BJ;EEkBA;IAeI;IACA;;;AF5BJ;EEYA;IAoBI;;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFvDF;EEgDA;IAUI;;;AFpDJ;EE0CA;IAcI;;;AAGF;EACE;EACA;;AFnEJ;EEiEE;IAKI;IACA;IACA;IACA;IACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;AFrFF;EE+EA;IASI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AFlGF;EE4FA;IASI;;;AF/FJ;EEsFA;IAaI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AFnHF;EE6GA;IASI;;;AFhHJ;EEuGA;IAaI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AFrIF;EE8HA;IAUI;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;;AFnJF;EEkJA;IAII;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFrKJ;EE4JE;IAYI;IACA;IACA;IACA;;;AFrKN;EEsJE;IAmBI;IACA;;;;AF1KN;EEgLF;IAEI;IACA;;;;AC1LJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;ACjBN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AJpBF;EIkBA;IAKI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AChDJ;EACE;;ALFA;EKCF;IAII;IACA;IACA;IACA;;;ALFF;EKLF;IAWI;IACA;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ALxBA;EKkBF;IASI;IACA;;;ALtBF;EKYF;IAcI;IACA;;;AAGF;EACE;;ALrCF;EKwCA;IAEI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKF;ELpDF;EACA;EACA;EACA;EACA;EACA;EACA;;;AAxCA;EMCF;IAEI;IACA;;;ANEF;EMLF;IAOI;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;;AC1DN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;APXA;EOCF;IAaI;IACA;;;APTF;EOLF;IAkBI;;;;ACfJ;EACE;EACA;EACA;;ARPA;EQIF;IAMI;;;AAGF;EACE;EACA;;ARfF;EQaA;IAKI;IACA;;;AAIJ;EACE;EACA;EACA;;AR1BF;EQuBA;IAMI;IACA;;;ARxBJ;EQiBA;IAWI;IACA;;;AAIJ;EACE;EACA;;ARzCF;EQuCA;IAKI;IACA;;;AAIJ;EACE;EACA;;ARnDF;EQiDA;IAKI;IACA;;;ACxDN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACxDN;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACtBN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EXuBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AYvCF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAGF;EZUA;EACA;EACA;EACA;EACA;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d128..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} 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/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..2fd2c18339 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,43 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin for-medium() { + @media (min-width: 744px) { + @content; } } + +@mixin for-desktop() { + @media (min-width: 1020px) { + @content; + } +} + +@mixin grid() { + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 130px); + gap: 20px; + + @include for-medium { + background-image: url(../images/background1020.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + grid-template-columns: repeat(6, 80px); + gap: 24px; + } + + @include for-desktop { + background-position: center; + grid-template-columns: repeat(12, 63px); + gap: 24px; + } +} + +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..8e7d301bf7 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,135 @@ +/* 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: inherit; + font-size: 100%; + 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; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +}