diff --git a/README.md b/README.md index 2663d4520e..a5843d5d7d 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Follow the videos in this and next lessons to implement the page block by block - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; - When done check yourself using the [CHECKLIST](./checklist.md) when finished; -- Deploy and create a Pull Request with a [DEMO LINK](https://.github.io/layout_landing-page/) +- Deploy and create a Pull Request with a [DEMO LINK](https://berezandiana.github.io/layout_landing-page/) # Tips & Hints - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`. diff --git a/src/images/about-us.png b/src/images/about-us.png new file mode 100644 index 0000000000..cde0c00f16 Binary files /dev/null and b/src/images/about-us.png differ diff --git a/src/images/categories/earphones-1.png b/src/images/categories/earphones-1.png new file mode 100644 index 0000000000..9a6c324251 Binary files /dev/null and b/src/images/categories/earphones-1.png differ diff --git a/src/images/categories/earphones-2.png b/src/images/categories/earphones-2.png new file mode 100644 index 0000000000..dca99c1bb5 Binary files /dev/null and b/src/images/categories/earphones-2.png differ diff --git a/src/images/categories/portable-speakers-1.png b/src/images/categories/portable-speakers-1.png new file mode 100644 index 0000000000..2b0bb2e0ad Binary files /dev/null and b/src/images/categories/portable-speakers-1.png differ diff --git a/src/images/categories/portable-speakers-2.png b/src/images/categories/portable-speakers-2.png new file mode 100644 index 0000000000..07f5c3ec4d Binary files /dev/null and b/src/images/categories/portable-speakers-2.png differ diff --git a/src/images/categories/smart-home-1.png b/src/images/categories/smart-home-1.png new file mode 100644 index 0000000000..4d629639db Binary files /dev/null and b/src/images/categories/smart-home-1.png differ diff --git a/src/images/categories/smart-home-2.png b/src/images/categories/smart-home-2.png new file mode 100644 index 0000000000..57f70aab03 Binary files /dev/null and b/src/images/categories/smart-home-2.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 0000000000..af444c5edd Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 0000000000..a951551cf6 Binary files /dev/null and b/src/images/icons/favicon.png differ diff --git a/src/images/icons/icon-burger-menu-hover.png b/src/images/icons/icon-burger-menu-hover.png new file mode 100644 index 0000000000..0545e3d53a Binary files /dev/null and b/src/images/icons/icon-burger-menu-hover.png differ diff --git a/src/images/icons/icon-burger-menu.png b/src/images/icons/icon-burger-menu.png new file mode 100644 index 0000000000..5eaabe0191 Binary files /dev/null and b/src/images/icons/icon-burger-menu.png differ diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 0000000000..ff6cde8f9c Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png new file mode 100644 index 0000000000..8321e72c67 Binary files /dev/null and b/src/images/icons/icon-phone.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000000..0ede0763a8 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/products/BEOPLAY HX.png b/src/images/products/BEOPLAY HX.png new file mode 100644 index 0000000000..1d117eac81 Binary files /dev/null and b/src/images/products/BEOPLAY HX.png differ diff --git a/src/images/products/BEOSOUND A5.png b/src/images/products/BEOSOUND A5.png new file mode 100644 index 0000000000..4f261bc9e1 Binary files /dev/null and b/src/images/products/BEOSOUND A5.png differ diff --git a/src/images/products/BEOSOUND THEATRE.png b/src/images/products/BEOSOUND THEATRE.png new file mode 100644 index 0000000000..5e393a4942 Binary files /dev/null and b/src/images/products/BEOSOUND THEATRE.png differ diff --git a/src/index.html b/src/index.html index 428e3b54bb..a57719eb21 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,407 @@ - + - Landing Page + Bose - Timeless Sound + + + + - -

Landing Page

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

+ Your senses. +
+ Set free. +

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

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

+ +
+ + + + + + +
+ + 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@nothing.com + +
+
+

Address

+ + 400 first ave. +
+ Suite 700 +
+ Minneapolis, MN 55401 + +
+
+
+
+
+
+
diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..f7141fe65d --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,58 @@ +.about-us { + background-color: #fcfaef; + + &__img { + background-image: url(../images/about-us.png); + width: 100%; + height: 200px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include on-tablet { + height: 400px; + } + + @include on-desktop { + height: 460px; + } + } + + &__wrapper { + @include page-grid; + + padding: 48px 0; + + @include on-tablet { + padding: 120px 0; + } + } + + &__title { + margin-bottom: 24px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + margin: 0; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__description { + margin: 0; + letter-spacing: 0.15px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..e2fc6c1686 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,26 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + height: 56px; + background-color: $accent-color; + border-radius: 8px; + outline: none; + border: none; + + text-decoration: none; + text-align: center; + color: #fff; + font-size: 16px; + line-height: 27px; + font-weight: 700; + font-family: inherit; + + @include hover(background-color, $main-text-color); + + &:active { + background-color: $button-color-pressed; + } +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..d19528de7a --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,74 @@ +.categories { + &__wrapper { + display: grid; + row-gap: 40px; + + @include on-tablet { + row-gap: 56px; + } + } + + &__button-wrapper { + @include page-grid; + } + + &__link { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 4; + } + } +} + +.category { + &__photos { + @include page-grid; + + margin-bottom: 16px; + } + + &__link { + position: relative; + grid-column: span 1; + padding-bottom: 100%; + + width: 100%; + height: 0; + + @include on-tablet { + grid-column: span 3; + padding-bottom: 65%; + } + + @include on-desktop { + grid-column: span 6; + } + + @include hover(transform, scale(1.05)); + @include hover(box-shadow, 0 0 8px rgba(0, 0, 0, 0.2)); + } + + &__photo { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__title { + margin: 0; + font-weight: 700; + font-size: 18px; + line-height: 25.2px; + + @include on-tablet { + font-size: 24px; + line-height: 33.6px; + } + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..c9da92070d --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,80 @@ +.contact-us { + &__wrapper { + @include page-grid; + + row-gap: 48px; + } + + &__form { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__input { + display: block; + box-sizing: border-box; + width: 100%; + height: 48px; + background-color: $background-color; + border-radius: 8px; + border: 1px solid $background-color; + margin-bottom: 16px; + font-size: 14px; + letter-spacing: 0.15px; + padding: 14px 16px; + color: #1b2129; + font-family: inherit; + outline: none; + + &::placeholder { + color: #7e7e83; + } + + &--textarea { + resize: none; + height: 148px; + margin-bottom: 32px; + } + + @include hover(border-color, #dbdbdb); + + &:focus { + border: 2px solid $accent-color; + } + } + + &__details { + display: grid; + grid-column: span 2; + row-gap: 24px; + align-self: start; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__title { + color: #9393a3; + margin: 0 0 8px; + font-size: 14px; + } + + &__info { + color: #191919; + text-decoration: none; + + @include hover(color, $accent-color); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..dc5e886a52 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,34 @@ +.header { + background-image: url(../images/header-bg.png); + background-size: cover; + background-position: center; + + &__content { + height: 100vh; + + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__title { + margin: 0; + font-weight: 700; + font-size: 36px; + line-height: 36px; + color: #fff; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + } + + &__bottom { + padding-bottom: 40px; + + @include on-tablet { + padding-bottom: 64px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..39bbe384a1 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,48 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + height: 32px; + width: 32px; + } + + &--phone { + background-image: url(../images/icons/icon-phone.png); + position: relative; + + &::before { + content: '+1 234 555-55-55'; + position: absolute; + display: block; + top: 50%; + width: 135px; + opacity: 0; + transform: translate(-100%, -50%); + color: $main-text-color; + font-weight: 600; + font-size: 14px; + } + + &:hover::before { + opacity: 1; + } + } + + &--menu { + background-image: url(../images/icons/icon-burger-menu.png); + + &:hover { + background-image: url(../images/icons/icon-burger-menu-hover.png); + } + } + + &--close { + background-image: url(../images/icons/icon-close.png); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..ae8465d61e --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,14 @@ +.main { + background-color: #fff; + + &__content { + display: grid; + row-gap: 96px; + padding-block: 64px; + + @include on-tablet { + padding-block: 120px; + row-gap: 120px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..ddd8e1c45c --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,45 @@ +.menu { + box-sizing: border-box; + + height: 100vh; + background-color: $background-color; + font-weight: 700; + + overflow: auto; + + &__top { + margin-bottom: 32px; + + position: sticky; + top: 0; + z-index: 1; + background-color: $background-color; + + @include on-tablet { + margin-bottom: 56px; + } + } + + &__nav { + margin-bottom: 48px; + } + + &__phone-number { + display: block; + margin-bottom: 16px; + letter-spacing: 2px; + color: inherit; + text-decoration: none; + } + + &__call-to-order { + display: block; + width: fit-content; + padding-bottom: 4px; + border-bottom: 1px solid $main-text-color; + letter-spacing: 2px; + color: inherit; + text-decoration: none; + text-transform: uppercase; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..33afb70c75 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,36 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 32px; + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + font-size: 22px; + line-height: 22px; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: $main-text-color; + + transition: transform $effectDuration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..c5421590e7 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,36 @@ +/* stylelint-disable font-family-name-quotes */ +.page { + font-family: 'Manrope', sans-serif; + color: $main-text-color; + font-size: 16px; + line-height: 22.4px; + + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: all $effectDuration; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 0000000000..511001efc5 --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,9 @@ +.product { + &__photo { + width: 100%; + } + + &__price { + font-weight: 700; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..c0ac292e75 --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,20 @@ +.recommended { + &__products { + @include page-grid; + + row-gap: 40px; + } + &__product { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: span 4; + } + + @include hover(transform, scale(1.08)); + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..cb2a45fe59 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,17 @@ +.section-title { + margin: 0; + margin-bottom: 48px; + + font-weight: 700; + font-size: 32px; + line-height: 100%; + + @include on-tablet { + margin-bottom: 56px; + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..92436f656b --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,34 @@ +.top-bar { + padding-block: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 32px; + } + + &__icons { + display: flex; + gap: 24px; + + @include on-tablet { + gap: 32px; + } + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 16px; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + height: 24px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000000..c793b0512f --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,16 @@ +@import './utils/variables'; +@import './utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/section-title'; +@import 'blocks/main'; +@import 'blocks/product'; +@import 'blocks/recommended'; +@import 'blocks/about-us'; +@import 'blocks/categories'; +@import 'blocks/button'; +@import 'blocks/contact-us'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..7f5bd46740 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,54 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-desktop { + max-width: 1020px; + margin-inline: auto; + padding-inline: 120px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 24px; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..b94b1d1334 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,7 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$effectDuration: 0.3s; +$main-text-color: #1b2129; +$background-color: #f9f9f9; +$accent-color: #f98921; +$button-color-pressed: #010810;