diff --git a/.gitignore b/.gitignore index 885c5fa6a4..53a3ebaa3b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,20 @@ +# IDE .idea .vscode -build -dist + +# Node node_modules + +# MacOS .DS_Store -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# Generated files +backstop_data +dist +.cache +.parcel-cache -raw_reports -reports -cypress/screenshots -cypress/videos +package-lock.json +package.json +.github/workflows/test.yml-template +checklist.md diff --git a/checklist.md b/checklist.md index 5a7e226250..77eea2c95f 100644 --- a/checklist.md +++ b/checklist.md @@ -1,6 +1,6 @@ -1. Add a favicon -2. Don’t forget to add a title for the whole web page (it could be the name of your landing) -3. All Logos on the page should be links to home page + + + 4. Change text color on hover for phone, email and address 5. When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device 6. Same when you click on logo. There shouldn't be any error. diff --git a/index.html b/index.html index 06bcd7773a..ec10019813 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,254 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami + + + + Bang & Olfusen + + + + -

Miami

+ + + + +
+
+

+ Recommended +

+
+
+ speaker photo +

+ 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

+
+ +
+ headphones photo +

+ 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

+
+ +
+ soundbar photo +

+ 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. +

+
+
+
+ +
+
+ +
+
+

+ + Portable speakers + +

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

+ + Earphones + +

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

+ + 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. +

+
+
+ + +
+
+

Contact us

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

Phone

+

+ +1 234 5555-55-55 +

+

Email

+

+ hello@bang&olufsen.com +

+

Adress

+

+ + 400 first ave. +
suite 700 +
Minneapolis, MN 55401 + +

+
+
+
+ + +
+ diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 0000000000..06ee7b08c5 --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg index 08f1f27cea..8590db1515 100644 --- a/src/images/cross.svg +++ b/src/images/cross.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/fav2.png b/src/images/fav2.png new file mode 100644 index 0000000000..9a48ee5fd4 Binary files /dev/null and b/src/images/fav2.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png index 0e04c361e1..961ab46f6b 100644 Binary files a/src/images/favicon.png and b/src/images/favicon.png differ diff --git a/src/images/logo.png b/src/images/logo.png index 9b6a4dd7d4..a0716b1704 100644 Binary files a/src/images/logo.png and b/src/images/logo.png differ diff --git a/src/images/menu.svg b/src/images/menu.svg index 5d6b5a0b38..d771acdc82 100644 --- a/src/images/menu.svg +++ b/src/images/menu.svg @@ -1,3 +1,10 @@ - - + + + + + + + + + diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg index 39263b75bc..6e12572898 100644 --- a/src/images/menu_hover.svg +++ b/src/images/menu_hover.svg @@ -1,3 +1,10 @@ - - + + + + + + + + + diff --git a/src/images/phone.svg b/src/images/phone.svg index 0c2c52cb54..4ab8ffa4b8 100644 --- a/src/images/phone.svg +++ b/src/images/phone.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg index f796f55605..08d16d397b 100644 Binary files a/src/images/photos/1.jpg and b/src/images/photos/1.jpg differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg index d9053b6a20..d32d649379 100644 Binary files a/src/images/photos/2.jpg and b/src/images/photos/2.jpg differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg index 5e40be94d2..ac50ea50db 100644 Binary files a/src/images/photos/3.jpg and b/src/images/photos/3.jpg 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/Image(10).jpg b/src/images/photos/Image(10).jpg new file mode 100644 index 0000000000..176e371e0a Binary files /dev/null and b/src/images/photos/Image(10).jpg differ diff --git a/src/images/photos/Image(4).jpg b/src/images/photos/Image(4).jpg new file mode 100644 index 0000000000..a4ba94f287 Binary files /dev/null and b/src/images/photos/Image(4).jpg differ diff --git a/src/images/photos/Image(5).jpg b/src/images/photos/Image(5).jpg new file mode 100644 index 0000000000..763ede55f6 Binary files /dev/null and b/src/images/photos/Image(5).jpg differ diff --git a/src/images/photos/Image(6).jpg b/src/images/photos/Image(6).jpg new file mode 100644 index 0000000000..18e585a2cd Binary files /dev/null and b/src/images/photos/Image(6).jpg differ diff --git a/src/images/photos/Image(7).jpg b/src/images/photos/Image(7).jpg new file mode 100644 index 0000000000..887c566930 Binary files /dev/null and b/src/images/photos/Image(7).jpg differ diff --git a/src/images/photos/Image(8).jpg b/src/images/photos/Image(8).jpg new file mode 100644 index 0000000000..d71161ba0c Binary files /dev/null and b/src/images/photos/Image(8).jpg differ diff --git a/src/images/photos/back2.jpg b/src/images/photos/back2.jpg new file mode 100644 index 0000000000..362879c367 Binary files /dev/null and b/src/images/photos/back2.jpg differ diff --git a/src/images/photos/background.jpg b/src/images/photos/background.jpg new file mode 100644 index 0000000000..b6769968cd Binary files /dev/null and b/src/images/photos/background.jpg differ diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe10..7178e0ede5 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,5 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; +@import './utils/reset'; +@import './utils/vars'; +@import './utils/mixins'; +@import './utils/extends'; + diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss new file mode 100644 index 0000000000..ba7a13d43d --- /dev/null +++ b/src/styles/blocks/_about.scss @@ -0,0 +1,92 @@ +.about { + background-color: $color-back-about; + box-sizing: border-box; + margin-top: 96px; + + + + &__backimage { + background-color: gray; + min-height: 200px; + background-image: url(../images/photos/back2.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include for-tablets { + min-height: 400px; + } + + @include for-desktop { + min-height: 480px; + } + } + + &__inside { + @include grid; + @include padding; + + &--title { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 32px; + line-height: 32px; + letter-spacing: 0; + color: $font-color; + padding: 48px 0 0; + + @include for-tablets{ + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 40px; + line-height: 100%; + } + + @include for-desktop { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 48px; + } + } + &--description { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 140%; + letter-spacing: 0.15px; + color: $font-color; + padding: 24px 0 48px; + } + + &__title { + grid-column: 1 / 3; + + @include for-tablets { + grid-column: 1 / 4; + padding: 120px 0; + } + + @include for-desktop { + grid-column: 1 / 7; + } + + } + + &__content { + grid-column: 1 / 3; + + @include for-tablets { + grid-column: 4 / 7; + padding: 120px 0; + } + + @include for-desktop { + grid-column: 8 / 13; + + } + } + + + } +} diff --git a/src/styles/blocks/_address.scss b/src/styles/blocks/_address.scss new file mode 100644 index 0000000000..1e95c35cba --- /dev/null +++ b/src/styles/blocks/_address.scss @@ -0,0 +1,27 @@ +.address { + font-style: normal; + + &__label { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0.15px; + color: $color-label-contact-info; + margin-bottom: 8px; + } + + &__content{ + margin-bottom: 24px; + } + + &__link { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 140%; + letter-spacing: 0.15px; + text-decoration: none; + color: $font-color; + } +} diff --git a/src/styles/blocks/_article.scss b/src/styles/blocks/_article.scss new file mode 100644 index 0000000000..93dca2c5b4 --- /dev/null +++ b/src/styles/blocks/_article.scss @@ -0,0 +1,18 @@ +.article{ + &__paragraph{ + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 18px; + + @include for-desktop { + font-size: 24px; + } + } + &__highlight{ + font-weight: 700; + } + + &__pictures { + margin-bottom: 16px; + } +} diff --git a/src/styles/blocks/_burger.scss b/src/styles/blocks/_burger.scss new file mode 100644 index 0000000000..8c99245199 --- /dev/null +++ b/src/styles/blocks/_burger.scss @@ -0,0 +1,44 @@ +.burger{ + display: flex; + align-items: center; + &::before{ + content: ''; + background-image: url(/src/images/menu.svg); + background-size: cover; + display: inline-block; + width: 18px; + height: 18px; + + @include for-tablets { + width: 24px; + height: 24px; + } + } + + &::after { + display: none; + content: ''; + background-image: url(/src/images/menu_hover.svg); + background-size: cover; + width: 18px; + height: 18px; + + @include for-tablets { + width: 24px; + height: 24px; + } + } + + &:hover { + &::before { + display: none; + } + &::after { + display: inline-block; + } + } + + &__label { + @include visuall-hidden; + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 0000000000..0772d921c9 --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,25 @@ +.button{ + background-color: $button-default; + display: block; + text-decoration: none; + height: 56px; + text-align: center; + border-radius: 8px; + color: $button-text-color; + font-size: 16px; + font-weight: 700; + line-height: 56px; + border: 0; + + &:hover { + background-color: $button-hover; + } + + &:active { + background-color: $button-pressed; + } + + &--send { + margin-top: 10px; + } +} diff --git a/src/styles/blocks/_close.scss b/src/styles/blocks/_close.scss new file mode 100644 index 0000000000..048272ca16 --- /dev/null +++ b/src/styles/blocks/_close.scss @@ -0,0 +1,11 @@ +.close{ + &__icon{ + width: 16px; + height: 16px; + + @include for-tablets { + width: 24px; + height: 24px; + } + } +} diff --git a/src/styles/blocks/_contact.scss b/src/styles/blocks/_contact.scss new file mode 100644 index 0000000000..e28e945cfc --- /dev/null +++ b/src/styles/blocks/_contact.scss @@ -0,0 +1,29 @@ +.contact{ + @include grid; + + margin-bottom: 64px; + + @include for-tablets { + margin-bottom: 120px; + } + + &__form{ + grid-column: span 2; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 6; + } + } + + &__info { + grid-column: span 2; + + @include for-desktop { + grid-column: 8 / 13; + } + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 0000000000..186146ec85 --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,68 @@ +.form { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 48px; + + + &__input { + background-color: $input-default-back; + border-radius: 8px; + border: 0; + width: 100%; + height: 48px; + padding-left: 16px; + box-sizing: border-box; + + &:hover { + border: 1px solid $input-hover-border; + } + &:focus { + outline: none; + border: 1px solid $input-pressed-border; + } + + &::placeholder { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0.15px; + + } + } + + &__textarea { + background-color: $input-default-back; + border-radius: 8px; + border: 0; + width: 100%; + height: 148px; + padding-left: 16px; + padding-top: 14px; + box-sizing: border-box; + + &:hover { + border: 1px solid $input-hover-border; + } + &:focus { + outline: none; + border: 1px solid $input-pressed-border; + } + + &::placeholder { + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0.15px; + + } + } + + &__label { + &:not(:focus, :active) { + @include visuall-hidden; + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 0000000000..d557bf95ee --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,52 @@ +.header{ +background-color: white; +background-image: url(/src/images/photos/background.jpg); +background-position: center; +background-repeat: no-repeat; +background-size: cover; + +min-height: 100vh; +box-sizing: border-box; + +grid-template-rows: 1fr 1fr; + +@include padding; + +padding-bottom: 40px; + +@include for-tablets{ + padding-bottom: 64px +} + +@include grid; + + &__navigation { + align-self: start; + grid-column: 1 / 3; + grid-row: 1 / 2; + + + @include for-tablets { + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 13; + } + } + + &__title { + align-self: end; + grid-column: 1 / 3; + grid-row: 2 / 3; + + @include for-tablets { + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 13; + } + } +} + diff --git a/src/styles/blocks/_links.scss b/src/styles/blocks/_links.scss new file mode 100644 index 0000000000..a1ed892e94 --- /dev/null +++ b/src/styles/blocks/_links.scss @@ -0,0 +1,26 @@ +.links { + padding-top: 60px; + + // &__list { + + // } + + &__item { + margin-bottom: 32px; + } + + &__link { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 22px; + color: $font-color; + text-decoration: none; + border-bottom: 1px solid transparent; + display: inline-block; + padding-bottom: 4px; + + &:hover{ + border-bottom: 1px solid $font-color; + } + } +} diff --git a/src/styles/blocks/_logo.scss b/src/styles/blocks/_logo.scss new file mode 100644 index 0000000000..150e67a1d4 --- /dev/null +++ b/src/styles/blocks/_logo.scss @@ -0,0 +1,11 @@ +.logo{ + &__image { + height: 16px; + + @include for-tablets { + height: 24px; + } + + } +} + diff --git a/src/styles/blocks/_main.scss b/src/styles/blocks/_main.scss new file mode 100644 index 0000000000..4365ced802 --- /dev/null +++ b/src/styles/blocks/_main.scss @@ -0,0 +1,35 @@ +.main{ + @include padding; + + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 140%; + font-style: normal; + + @include grid; + + &__section { + grid-column: 1 / 3; + + @include for-tablets{ + grid-column: 1 / 7; + } + + @include for-desktop { + grid-column: 1 / 13; + } + } + + &__button { + grid-column: span 2; + + @include for-tablets { + grid-column: span 6 + } + + @include for-desktop { + grid-column: span 4 + } + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 0000000000..da1eca0e29 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,87 @@ +body:has(.menu:target) { + overflow: hidden; +} + + +.menu { + z-index: 1; + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + background-color: $background-accent; + min-height: 100vh; + overflow: hidden; + + @include padding; + @include grid; + + gap: 0 20px; + align-content: start; + + + &:target { + transform: translateX(0); + } + + &__navigation { + grid-column: span 2; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__links { + margin-bottom: 16px; + grid-column: span 2; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__paragraph { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 16px; + letter-spacing: 2px; + color: $font-color; + margin-bottom: 16px; + grid-column: span 2; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__call-link { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 16px; + letter-spacing: 2px; + color: $font-color; + text-decoration: none; + border-bottom: 1px solid transparent; + padding-bottom: 8px; + display: inline-block; + + &:hover { + border-bottom: 1px solid $font-color; + } + } +} diff --git a/src/styles/blocks/_navigation.scss b/src/styles/blocks/_navigation.scss new file mode 100644 index 0000000000..69b31ef51d --- /dev/null +++ b/src/styles/blocks/_navigation.scss @@ -0,0 +1,22 @@ +.navigation { + display: flex; + justify-content: space-between; + padding-top: 28px; + align-items: center; + + + + + + + &__icons{ + display: inline-flex; + gap: 27px; + align-items: center; + + @include for-tablets{ + gap: 36px; + } + } + +} diff --git a/src/styles/blocks/_phone.scss b/src/styles/blocks/_phone.scss new file mode 100644 index 0000000000..61f371b787 --- /dev/null +++ b/src/styles/blocks/_phone.scss @@ -0,0 +1,31 @@ +.phone { + display: flex; + align-items: center; + + &__label { + font-family: Manrope, sans-serif; + font-weight: 700; + color: $font-color; + font-size: 12px; + letter-spacing: 2px; + position: absolute; + transform: translateX(calc(-100% - 20px)); + + } + + &__icon{ + width: 18px; + height: 18px; + + @include for-tablets { + width: 24px; + height: 24px; + } + } + + &:not(:hover) &__label { + @include visuall-hidden; + } + + +} diff --git a/src/styles/blocks/_pictures.scss b/src/styles/blocks/_pictures.scss new file mode 100644 index 0000000000..9b05c14565 --- /dev/null +++ b/src/styles/blocks/_pictures.scss @@ -0,0 +1,33 @@ +.pictures { + @include grid; + + &__image { + top: 0; + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + border-radius: 4px; + } + + &__item{ + width: 100%; + position: relative; + padding-top: 100%; + + @include for-tablets { + grid-column: span 3; + padding-top: 184px; + } + + @include for-desktop { + grid-column: span 6; + padding-top: 324px; + } + + &:hover .pictures__image { + transform: scale(1.05); + transition: transform 0.3s ease-in-out; + } + } +} diff --git a/src/styles/blocks/_products.scss b/src/styles/blocks/_products.scss new file mode 100644 index 0000000000..6cddc400c6 --- /dev/null +++ b/src/styles/blocks/_products.scss @@ -0,0 +1,18 @@ +.products{ + @include grid; + + &__recommended{ + margin-bottom: 40px; + grid-column: span 2; + + @include for-tablets { + grid-column: span 6; + } + + @include for-desktop{ + grid-column: span 4; + } + } +} + + diff --git a/src/styles/blocks/_recommended.scss b/src/styles/blocks/_recommended.scss new file mode 100644 index 0000000000..bd1675a3df --- /dev/null +++ b/src/styles/blocks/_recommended.scss @@ -0,0 +1,18 @@ +.recommended{ + font-family: Manrope, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 140%; + &__paragraph{ + margin-bottom: 12px; + + &--bold{ + font-weight: 700; + } + + } + &__photo{ + width: 100%; + margin-bottom: 24px; + } +} diff --git a/src/styles/blocks/_section.scss b/src/styles/blocks/_section.scss new file mode 100644 index 0000000000..9a803df0f5 --- /dev/null +++ b/src/styles/blocks/_section.scss @@ -0,0 +1,13 @@ +.section { + padding-top: 64px; + + &__title { + margin-bottom: 48px; + } + + &__article { + margin-bottom: 40px; + + } + +} diff --git a/src/styles/blocks/_title.scss b/src/styles/blocks/_title.scss new file mode 100644 index 0000000000..5fcdfc932a --- /dev/null +++ b/src/styles/blocks/_title.scss @@ -0,0 +1,40 @@ +.title { + font-family: Manrope, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 32px; + + color: $title-color; + + @include for-tablets{ + font-size: 48px; + line-height: 100%; + } + + @include for-desktop{ + font-size: 56px; + } + + + &--secondary { + color: $font-color; + font-size: 32px; + + + @include for-tablets { + font-size: 40px; + line-height: 40px; + } + + @include for-desktop { + font-size: 48px; + line-height: 48px; + } + } + + &--third { + color: $font-color; + font-size: 18px; + margin-bottom: 8px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..79cc553976 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,25 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import './utils'; +@import './fonts'; +@import './typography'; +@import './blocks/title'; +@import './blocks/header'; +@import './blocks/main'; +@import './blocks/article'; +@import './blocks/pictures'; +@import './blocks/button'; +@import './blocks/recommended'; +@import './blocks/address'; +@import './blocks/form'; +@import './blocks/about'; +@import './blocks/navigation'; +@import './blocks/menu'; +@import './blocks/links'; +@import './blocks/section'; +@import './blocks/products'; +@import './blocks/contact'; +@import './blocks/burger'; +@import './blocks/phone'; +@import './blocks/logo'; +@import './blocks/close'; + -body { - background: $c-gray; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780dc..c43289adbd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,56 @@ #{$_property}: $_toValue; } } + +@mixin for-desktop { + @media (min-width: 1260px) { + @content; + } +} + +@mixin for-tablets { + @media (min-width: 744px) { + @content; + } +} + +@mixin grid() { + display: grid; + justify-content: center; + grid-template-columns: 1fr 1fr; + gap: 20px; + + + @include for-tablets { + grid-template-columns: repeat(6, 1fr); + gap: 24px; + + } + + @include for-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + } +} + +@mixin visuall-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +@mixin padding { + padding: 0 20px; + + @include for-tablets { + padding: 0 76px; + } + + @include for-desktop { + padding: 0 120px; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..2f1a2e9528 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,134 @@ +/* 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%; + 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; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..6c8db650b4 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ $c-gray: #eee; +$background-accent: #f9f9f9; +$background-accent-2: #fcfaef; +$button-hover: #1b2129; +$button-default: #f98921; +$button-pressed: #010810; +$input-default-back: #f9f9f9; +$input-hover-border: #dbdbdb; +$input-pressed-border: #f98921; +$font-color: #1b2129; +$title-color: #fff; +$button-text-color: #fff; +$color-label-contact-info: #9393A3; +$color-back-about: #FCFAEF;