diff --git a/README.md b/README.md index 8b16c19cb9..f24ba0232e 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Follow the instructions in this and next lessons to implement the page block by - 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://daria1503t.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/index.html b/index.html index 317e1141dd..e968d1c111 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,268 @@ + - + - Landing Page + Bose + + + - -

Landing Page

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

+ Your senses. +
+ Set free. +

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

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

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

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

+
+
+
+ + + +
+ +
+ +
+
+
+
+
diff --git a/src/images/background.png b/src/images/background.png new file mode 100644 index 0000000000..1e829ce14a Binary files /dev/null and b/src/images/background.png differ diff --git a/src/images/categories/earphones-1.png b/src/images/categories/earphones-1.png new file mode 100644 index 0000000000..5540b0ec4c 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..929cb9d6ed 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..442f666c84 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..7dbd93c00d 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..6631f4e404 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..4fd9c5a2c0 Binary files /dev/null and b/src/images/categories/smart-home-2.png differ diff --git a/src/images/icons/icon-burger-menu-2x.png b/src/images/icons/icon-burger-menu-2x.png new file mode 100644 index 0000000000..08679362a6 Binary files /dev/null and b/src/images/icons/icon-burger-menu-2x.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..6805d7e395 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..3fb79e5412 Binary files /dev/null and b/src/images/icons/icon-burger-menu.png differ diff --git a/src/images/icons/icon-close-2x.png b/src/images/icons/icon-close-2x.png new file mode 100644 index 0000000000..772dfbe832 Binary files /dev/null and b/src/images/icons/icon-close-2x.png differ diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 0000000000..391c7d49ae Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-phone-2x.png b/src/images/icons/icon-phone-2x.png new file mode 100644 index 0000000000..871c613258 Binary files /dev/null and b/src/images/icons/icon-phone-2x.png differ diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png new file mode 100644 index 0000000000..95b276ea25 Binary files /dev/null and b/src/images/icons/icon-phone.png differ diff --git a/src/images/logo-2x.png b/src/images/logo-2x.png new file mode 100644 index 0000000000..5ed7216e79 Binary files /dev/null and b/src/images/logo-2x.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000000..c8f842c568 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/player.png b/src/images/player.png new file mode 100644 index 0000000000..b818025416 Binary files /dev/null and b/src/images/player.png differ diff --git a/src/images/products/a5.png b/src/images/products/a5.png new file mode 100644 index 0000000000..9a3edca3bc Binary files /dev/null and b/src/images/products/a5.png differ diff --git a/src/images/products/hx.png b/src/images/products/hx.png new file mode 100644 index 0000000000..ee941e5b76 Binary files /dev/null and b/src/images/products/hx.png differ diff --git a/src/images/products/theatre.png b/src/images/products/theatre.png new file mode 100644 index 0000000000..6f56e5a0e8 Binary files /dev/null and b/src/images/products/theatre.png differ diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 0000000000..58918af196 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,63 @@ +.about-us{ + background-color: #FCFAEF; + + &__player{ + background-image: url('../images/player.png'); + width: 100%; + height: 200px; + background-size: cover; + background-position: center; + + @include onTablet { + height: 400px; + } + + @include onDesktop { + height: 460px; + } + } + + &__timeless{ + @include pageGrid; + padding-block: 48px; + + + @include onTablet { + padding-block: 120px; + } + } + + &__title{ + grid-column: 1 / -1; + + @include onTablet { + grid-column: span 3; + } + + @include onDesktop { + grid-column: span 6; + } + } + + &__content{ + grid-column: 1 / -1; + + @include onTablet { + grid-column: span 3; + } + + @include onDesktop { + grid-column: 8 / -1; + } + } + + &__description{ + padding: 0; + margin: 0; + font-weight: $section-text-font-weight; + font-size: $section-text-font-size; + letter-spacing: $section-text-letter-spacing; + } +} + + diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..396b8bc918 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,23 @@ +.categories{ + &__wrapper{ + display: grid; + row-gap: 40px; + + @include onTablet { + row-gap: 56px; + } + } + + &__button-wrapper{ + @include pageGrid; + } + + &__button{ + @include buttonStyle; + + grid-column: 1 / -1; + @include onDesktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/category.scss b/src/styles/blocks/category.scss new file mode 100644 index 0000000000..42269127b1 --- /dev/null +++ b/src/styles/blocks/category.scss @@ -0,0 +1,48 @@ +.category{ + &__photos{ + @include pageGrid; + grid-column: 1 / -1; + margin-bottom: 16px; + } + + &__link{ + height: 0; + position: relative; + padding-bottom: 100%; + + @include onTablet { + height: 100%; + position: static; + padding-bottom: 0; + grid-column: span 3; + } + + @include onDesktop { + grid-column: span 6; + } + } + + &__photo{ + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + + @include hover(transform, scale(1.05)); + + @include onTablet { + position: static; + } + + @include onTablet { + position: static; + } + } + + &__title{ + margin: 0; + font-weight: $main-bold-font-weight; + font-size: $category-title-font-size; + line-height: $main-line-height; + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 0000000000..26282a1bed --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,66 @@ +.contacts{ + &__wrapper{ + @include pageGrid; + row-gap: 48px; + + @include onTablet { + row-gap: 80px; + } + + @include onDesktop { + row-gap: 0px; + } + } + + &__form{ + display: flex; + flex-direction: column; + gap: 32px; + grid-column: 1 / -1; + + @include onDesktop { + grid-column: span 6; + } + } + + &__form-inputs{ + display: flex; + flex-direction: column; + gap: 16px; + } + + &__item{ + box-sizing: border-box; + height: 48px; + font-family: $page-font-family; + padding-block: 14px; + padding-inline: 16px; + font-weight: $main-regular-font-weight; + font-size: $form-font-size; + letter-spacing: $form-letter-spacing; + color: $main-text-color; + background-color: $form-background-color; + border: 1px solid transparent; + border-radius: 8px; + cursor: pointer; + + &--message{ + height: 148px; + } + + &::placeholder{ + color: $form-placeholder-text-color; + } + + @include hover('border', $form-hover-border); + @include hover('color', $form-hover-text-color); + &:focus{ + border: 2px solid $form-focus-border-color; + outline: none; + } + } + + &__button{ + @include buttonStyle; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 0000000000..ae81aa83bf --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,13 @@ +.container { + padding-inline: 20px; + + @include onTablet { + padding-inline: 72px; + } + + @include onDesktop { + max-width: 1260px; + margin-inline: auto; + padding-inline: 120px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..9ffc445a68 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,28 @@ +.footer{ + display: flex; + flex-direction: column; + gap: 24px; + grid-column: 1 / -1; + + font-weight: $main-regular-font-weight; + font-size: $form-font-size; + letter-spacing: $form-letter-spacing; + color: $form-text-color; + + @include onDesktop { + grid-column: 8 / -1; + } + + &__wrapper{ + display: flex; + flex-direction: column; + gap: 8px; + } + + &__link{ + font-size: 16px; + text-decoration: none; + color: $form-text-color; + @include hover('color', #191919); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..168a3d1f00 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,32 @@ +.header { + background-image: url(../images/background.png); + background-size: cover; + background-position: center; + + &__content{ + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + &__title{ + margin: 0; + font-weight: $main-bold-font-weight; + font-size: $header-title-font-size; + line-height: $header-title-line-height; + color: $header-title-text-color; + + @include onTablet { + font-size: 48px; + } + } + + &__bottom{ + padding-bottom: 40px; + + @include onTablet { + padding-bottom: 64px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..f6c81c87f1 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,29 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-size: cover; + + @include hover(transform, scale(1.2)); + + @include onTablet { + height: 32px; + width: 32px; + } + + &--phone{ + background-image: url(../images/icons/icon-phone-2x.png); + } + + &--menu{ + background-image: url(../images/icons/icon-burger-menu-2x.png); + + &:hover { + background-image: url(../images/icons/icon-burger-menu-hover.png); + } + } + + &--close{ + background-image: url(../images/icons/icon-close-2x.png); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..8cc11dc57d --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,28 @@ +.main{ + background-color: #fff; + + &__content{ + display: grid; + row-gap: 96px; + padding-top: 64px; + + @include onTablet { + row-gap: 120px; + padding-top: 120px; + } + + &--section-three{ + padding-top: 96px; + @include onTablet { + padding-top: 120px; + } + } + + &--section-four{ + padding-bottom: 64px; + @include onTablet { + padding-bottom: 120px; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..8424641f98 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,49 @@ +.menu{ + box-sizing: border-box; + height: 100vh; + background-color: $menu-background-color; + font-weight: $main-bold-font-weight; + overflow: auto; /* to scroll the menu if needed */ + + &__top{ + margin-bottom: 32px; + position: sticky; /* to keep cross always visible */ + top: 0; + z-index: 1; + background-color: #F9F9F9; + + @include onTablet { + margin-bottom: 56px; + } + } + + &__nav{ + margin-bottom: 48px; + } + + &__list{ + font-size: $menu-list-font-size; + line-height: $menu-list-line-height; + } + + &__phone-number{ + display: block; + margin-bottom: 16px; + color: inherit; + text-decoration: none; + font-size: $menu-contacts-font-size; + letter-spacing: $menu-contacts-letter-spacing; + } + + &__call-to-order{ + display: block; + width: fit-content; //Щоб підлаштувати ширину під вміст + padding-bottom: 3px; + border-bottom: 1px solid $main-text-color; + text-transform: uppercase; + color: inherit; + text-decoration: none; + font-size: $menu-contacts-font-size; + letter-spacing: $menu-contacts-letter-spacing; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..e0117ebf05 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,37 @@ +.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: -4px; + display: block; + height: 1px; + width: 100%; + background-color: $main-text-color; + + transition: transform 0.3s; + 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..9b9d132ae9 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,33 @@ +.page { + font-family: $page-font-family; + color: $main-text-color; + line-height: $main-line-height; + scroll-behavior: smooth; //Плавний скрол при переході по якорних посиланнях + + &__body{ + margin: 0; + min-width: 320px; + } + + &__menu{ + position: fixed; //Фіксоване положення відносно вікна + top: 0; + left: 0; + right: 0; + + transition: all 0.3s; + opacity: 0; //Меню повністю прозоре + transform: translateX(-100%); //Меню зміщене вліво за межі екрану + pointer-events: none; //Ігнорує усі кліки та наведення + + &:target { //Спрацьовує, коли URL містить #id цього елемента + opacity: 1; //Меню стає видимим + transform: translateX(0); //Меню повертається на своє місце + pointer-events: all; //Меню реагує на кліки та наведення + } + } + + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 0000000000..0a31aae32b --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,35 @@ +.product{ + &__photo{ + width: 100%; + @include hover(transform, scale(1.05)); + + } + + &__name{ + margin-top: 24px; + margin-bottom: 8px; + font-weight: $main-bold-font-weight; + font-size: $section-name-font-size; + } + + &__description{ + margin: 0; + font-weight: $section-text-font-weight; + font-size: $section-text-font-size; + letter-spacing: $section-text-letter-spacing; + } + + &__price{ + margin: 12px 0 0; + font-weight: $main-bold-font-weight; + font-size: $section-text-font-size; + + @include onTablet { + margin-top: 34px; + } + + @include onDesktop { + margin-top: 12px; + } + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..bb65df0bcb --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,22 @@ +.recommended{ + &__products{ + @include pageGrid; + row-gap: 40px; + + @include onTablet { + row-gap: 56px; + } + + @include onDesktop { + row-gap: 0; + } + } + + &__product{ + grid-column: 1 / -1; + + @include onDesktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..c781e11a65 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,28 @@ +.section-title { + margin: 0; + margin-bottom: 48px; + + font-weight: $main-bold-font-weight; + font-size: $section-title-font-size; + line-height: $section-title-line-height; + text-align: left; + + @include onTablet { + margin-bottom: 56px; + font-size: 40px; + line-height: 40px; + } + + @include onDesktop { + font-size: 48px; + line-height: 48px; + } + + &--section-three{ + margin-bottom: 24px; + + @include onTablet { + margin: 0; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..ff438bf761 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,31 @@ +.top-bar { + padding-block: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + + @include onTablet { + padding-block: 32px; + } + + &__icons{ + display: flex; + gap: 24px; + } + + &__logo-link{ + display: block; + } + + &__logo{ + display: flex; + height: 16px; + + @include hover(transform, scale(1.2)); + + @include onTablet { + 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..0667ba7862 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,19 @@ +@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/container'; +@import 'blocks/about-us'; +@import 'blocks/categories'; +@import 'blocks/category'; +@import 'blocks/contacts'; +@import 'blocks/footer'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..2cffde645a --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,53 @@ +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} 0.3s; + &:hover { + #{$property}: $toValue; + } +} + +@mixin buttonStyle{ + padding: 0; + font-family: $page-font-family; + height: 56px; + font-weight: $main-bold-font-weight; + font-size: $form-button-font-size; + line-height: $form-button-line-height; + color: $form-button-text-color; + background-color: $form-button-background-color; + border-style: none; + border-radius: 8px; + cursor: pointer; + + @include hover('background-color', $form-hover-button-background-color); + &:active{ + background-color: #010810; + } +} + +@mixin pageGrid { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include onTablet { + --columns: 6; + column-gap: 24px; + } + + @include onDesktop { + --columns: 12; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..b6ead97f08 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,59 @@ +// for mixins +$tablet-min-width: 576px; +$desktop-min-width: 1024px; + +// for page and main +$page-font-family: Manrope, sans-serif; +$main-text-color: #1B2129; +$main-bold-font-weight: 700; +$main-regular-font-weight: 400; +$main-line-height: 140%; + +// for header +$header-title-text-color: #FFF; +$header-title-font-size: 36px; +$header-title-line-height: 100%; + +// for menu +$menu-background-color: #F9F9F9; +$menu-list-font-size: 22px; +$menu-list-line-height: 22px; + +$menu-contacts-font-size: 16px; +$menu-contacts-letter-spacing: 2px; + +// for section +$section-title-font-size: 32px; +$section-title-line-height: 32px; + +$section-name-font-size: 18px; + +$section-text-font-weight: 400; +$section-text-font-size: 16px; // and price +$section-text-letter-spacing: 0.15px; + +// for categories +$category-title-font-size: 18px; + +// for contacts / form +// items +$form-font-size: 14px; +$form-letter-spacing: 0.15px; +$form-text-color: #7E7E83; +$form-background-color: #F9F9F9; +// items placeholder +$form-placeholder-text-color: #7E7E83; + +// button +$form-button-font-size: 16px; +$form-button-line-height: 27px; +$form-button-text-color: #FFF; +$form-button-background-color: #F98921; + +// for hover +$form-hover-border: 1px solid #DBDBDB; +$form-hover-text-color: #1B2129; +$form-hover-button-background-color: #1B2129; + +// for focus +$form-focus-border-color: #F98921;