diff --git a/src/images/Image.png b/src/images/Image.png new file mode 100644 index 0000000000..737ee8eaef Binary files /dev/null and b/src/images/Image.png differ diff --git a/src/images/about-us/about-us-name.png b/src/images/about-us/about-us-name.png new file mode 100644 index 0000000000..0ec1eec081 Binary files /dev/null and b/src/images/about-us/about-us-name.png differ diff --git a/src/images/about-us/contact-us-email.png b/src/images/about-us/contact-us-email.png new file mode 100644 index 0000000000..9e9a01c089 Binary files /dev/null and b/src/images/about-us/contact-us-email.png differ diff --git a/src/images/categories/accessories-block.png b/src/images/categories/accessories-block.png new file mode 100644 index 0000000000..78c5a1c0b9 Binary files /dev/null and b/src/images/categories/accessories-block.png differ diff --git a/src/images/categories/accessories-phone.png b/src/images/categories/accessories-phone.png new file mode 100644 index 0000000000..39427f3ea0 Binary files /dev/null and b/src/images/categories/accessories-phone.png differ diff --git a/src/images/categories/all-products-birds.png b/src/images/categories/all-products-birds.png new file mode 100644 index 0000000000..4fc44baf44 Binary files /dev/null and b/src/images/categories/all-products-birds.png differ diff --git a/src/images/categories/all-products-box.png b/src/images/categories/all-products-box.png new file mode 100644 index 0000000000..20d33476b1 Binary files /dev/null and b/src/images/categories/all-products-box.png differ diff --git a/src/images/categories/audio-earphone.jpg b/src/images/categories/audio-earphone.jpg new file mode 100644 index 0000000000..35c42b9768 Binary files /dev/null and b/src/images/categories/audio-earphone.jpg differ diff --git a/src/images/categories/audio-earphones.png b/src/images/categories/audio-earphones.png new file mode 100644 index 0000000000..d8a4129d27 Binary files /dev/null and b/src/images/categories/audio-earphones.png differ diff --git a/src/images/header-bg-mobile.png b/src/images/header-bg-mobile.png new file mode 100644 index 0000000000..dc62e95c1c Binary files /dev/null and b/src/images/header-bg-mobile.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..596f3d3009 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..a80045d470 Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-phone-call.png b/src/images/icons/icon-phone-call.png new file mode 100644 index 0000000000..2fb4eec387 Binary files /dev/null and b/src/images/icons/icon-phone-call.png differ diff --git a/src/images/logo__nothing.png b/src/images/logo__nothing.png new file mode 100644 index 0000000000..a2b6e2f1e8 Binary files /dev/null and b/src/images/logo__nothing.png differ diff --git a/src/images/products/ear-stick-photo.png b/src/images/products/ear-stick-photo.png new file mode 100644 index 0000000000..2f60adea84 Binary files /dev/null and b/src/images/products/ear-stick-photo.png differ diff --git a/src/images/products/earphone-photo.png b/src/images/products/earphone-photo.png new file mode 100644 index 0000000000..d3919d953c Binary files /dev/null and b/src/images/products/earphone-photo.png differ diff --git a/src/images/products/phone-photo.png b/src/images/products/phone-photo.png new file mode 100644 index 0000000000..aec318380c Binary files /dev/null and b/src/images/products/phone-photo.png differ diff --git a/src/index.html b/src/index.html index 428e3b54bb..48c363da6d 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,458 @@ + - + - Landing Page + + + + + + + Nothing + - -

Landing Page

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

+ Bring joy back +
+ to the everyday +

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

+ Recommended +

+
+
+ + phone-photo + +

Phone (1)

+

+ Through the Glyph Interface, a perfected OS and exceptional + dual camera. All startlingly fast. +

+

$ 499.00

+
+
+ + eraphone-photo + +

Ear (2)

+

+ Perfecting the path from artist to ear. So that music sounds + just as it was intended. +

+

$ 149.00

+
+
+ + ear-stick-photo + +

Ear (stick)

+

+ Tech you can’t feel. Leaving just space for sound to come to + life. Powered by custom sound technology. +

+

$ 119.00

+
+
+
+ + +
+

+ Browse Nothing products by category +

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

+ About us +

+ +
+

+ We're a London-based tech company on a mission to remove barriers + between people and technology. +
+
+ To do this, we're crafting intuitive, flawlessly connected + products that improve our lives without getting in the way. No + confusing tech-speak. No silly product names. Just artistry, + passion and trust. And products we're proud to share with our + friends and family. Simple. +
+
+ Because beautiful tech shouldn't be complicated. +

+
+
+ + +
+

+ 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..006ac2f05b --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,38 @@ +.about-us { + @include page-grid; + + @include on-tablet { + padding-top: 56px; + } + + &__title { + margin-top: 0; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__content { + // margin-top: 24px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + } + + @include on-desktop { + grid-column: 7 / 13; + } + } + + &__descriptions { + margin: 0; + line-height: 22.4px; + } +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..cb1ee56025 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,67 @@ +.categories { + &__wrapper { + display: grid; + row-gap: 40px; + + @include on-tablet { + row-gap: 56px; + } + } +} + +.category { + &__photos { + @include page-grid; + + margin-bottom: 16px; + } + + &__link { + @include hover(transform, scale(1.05)); + + position: relative; + + &--wide { + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 8; + } + } + + &--square { + height: 0; + padding-bottom: 100%; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + } + + &__photo { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 4px; + } + + &__title { + margin: 0; + font-weight: 700; + font-size: 18px; + + @include on-tablet { + font-size: 24px; + + // line-height: 140%; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 0000000000..8bd9077dd1 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,105 @@ +.contacts { + &__container { + @include page-grid; + + &--wraper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &--blocks { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 7 / 13; + } + } + } + + &__wraper { + display: grid; + row-gap: $row-gap-contacts; + } + + &__text-area { + margin-bottom: 32px; + resize: none; + } + + &__button { + margin-bottom: 48px; + border: 2px solid $main-text-color; + cursor: pointer; + } + + @include on-tablet { + &__button { + margin-bottom: 80px; + } + } + + &__blocks { + &--thin-type { + @include contacts-block-thin; + } + + &--bold-type { + @include contacts-block-bold; + @include hover(color, #036654); + } + } +} + +.input { + background-color: $contacts-input-background-color; + width: $contacts-input-width; + height: $contacts-input-height; + box-sizing: border-box; + border-radius: 8px; + padding: 16px 14px; + border: none; + outline: none; + font-size: 14px; + font-weight: 400; + + &__textarea { + font-family: 'Space Mono', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + height: auto; + } + + &__button { + color: #fff; + background-color: $main-text-color; + + &:hover { + background-color: $contacts-input-background-color; + color: $main-text-color; + } + + &:focus { + @include hover(box-shadow, 1px 4px 16px 2px #111); + + background-color: #111; + color: #fff; + } + } +} + +input:-webkit-autofill { + -webkit-text-fill-color: inherit !important; + box-shadow: 0 0 0 1000px $contacts-input-background-color inset; +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..a5c76a7ec7 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,29 @@ +.header { + // display: none; + background-image: url(../images/header-bg-mobile.png); + background-size: cover; + background-position: center; + + // margin: 0; + + // @include content-padding-inline; + + &__title { + margin: 0; + font-weight: 700; + font-size: 36px; + line-height: 36px; + margin-bottom: 16px; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100vh; + } + + &__bottom { + padding-bottom: 40px; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..4cddf7f699 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,54 @@ +.icon { + display: block; + height: 24px; + width: 24px; + + background-image: url(../images/icons/icon-burger-menu.png); + background-size: cover; + + @include on-tablet { + height: 32px; + width: 32px; + } + + &--menu { + @include hover(transform, scale(1.2)); + + background-image: url(../images/icons/icon-burger-menu.png); + } + + &--phone { + @include hover(transform, scale(1.2)); + + background-image: url(../images/icons/icon-phone-call.png); + position: relative; + } + + &--phone::after { + position: absolute; + content: '+1 234 555 55 55'; + width: 150px; + top: 10px; + color: #2b0303; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + transition: transform 0.4; + right: 50px; + transform: scale(0); + } + + @include on-desktop { + &:hover::after { + transform: scale(1.2); + } + } + + &--close { + @include hover(transform, scale(1.2)); + + background-image: url(../images/icons/icon-close.png); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..0a3bd5ff03 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,44 @@ +.menu { + overflow: auto; /* to scroll the menu if needed */ + transition: 1s steps(100, end) 500ms; + height: 100vh; + background-color: #e5e6e8; + text-transform: uppercase; + font-weight: 700; + + &__top { + margin-bottom: 32px; + } + + &__nav { + margin-bottom: 48px; + } + + &__phone-number { + @include hover(transform, scale(1.2)); + + color: inherit; + text-decoration: none; + display: block; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + width: fit-content; + margin-bottom: 16px; + } + + &__call-to-order { + @include hover(transform, scale(1.2)); + + color: inherit; + text-decoration: none; + display: block; + padding-bottom: 4px; + border-bottom: 1px solid $main-text-color; + width: fit-content; + + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..bd2b6a230a --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,25 @@ +.nav { + &__link { + color: inherit; + text-decoration: none; + + line-height: 22px; + font-size: 22px; + letter-spacing: 2px; + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 32px; + } + + &__item { + @include hover(transform, scale(1.2)); + + width: fit-content; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..d396f4fb1b --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,29 @@ +.page { + font-family: 'Space Grotesk', sans-serif; + color: $main-text-color; + + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } +} + +.page: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..6e4c47994c --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,25 @@ +.product { + @include on-desktop { + position: relative; + } + + &__photo { + width: 100%; + + @include on-desktop { + height: 324px; + } + } + + &__price { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + @include on-desktop { + position: absolute; + bottom: 0; + margin-bottom: 0; + } + } +} diff --git a/src/styles/blocks/recommendet.scss b/src/styles/blocks/recommendet.scss new file mode 100644 index 0000000000..8562b17930 --- /dev/null +++ b/src/styles/blocks/recommendet.scss @@ -0,0 +1,27 @@ +.recommendet { + // display: grid; + // justify-content: center; + + &__product { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: span 4; + } + } + + &__products { + @include page-grid; + + row-gap: 40px; + } +} + +.product { + @include on-desktop { + height: 503px; + } + &__photo { + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..9fc85c1cd3 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,25 @@ +.section-title { + margin: 0; + margin-bottom: 48px; + + font-weight: 700; + font-size: 32px; + line-height: 100%; + + @include on-tablet { + font-size: 40px; + margin-bottom: 56px; + } + + @include on-desktop { + font-size: 48px; + + // &--categories--top--indend { + // margin-top: 128px; + // } + + // &--about--top--indend { + // margin-top: 56px; + // } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..3dc821b418 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,20 @@ +.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; + } + + &__logo { + @include hover(transform, scale(1.3)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f13..2f7e071ef8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,132 @@ -body { +@import './utils/variables'; +@import './utils/mixins'; +@import 'blocks/header'; +@import 'blocks/page'; +@import 'blocks/icon'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import './blocks/section-title'; +@import './blocks/product'; +@import './blocks/recommendet'; +@import './blocks/about-us'; +@import './blocks/categories'; +@import './blocks/contacts'; + +.main { + background-color: #fff; + + &__content { + &--section-title--recommendet--top--indent { + display: grid; + padding-top: 64px; + padding-bottom: 48px; + } + + &--button { + @include content-padding-inline; + + color: #fff; + text-align: center; + font-size: 16px; + line-height: 27px; + background-color: $main-text-color; + width: 100%; + height: 56px; + border: 0; + border-radius: 8px; + margin-top: 40px; + margin-bottom: 96px; + cursor: pointer; + + @include on-tablet { + margin-top: 56px; + margin-bottom: 120px; + } + + &:hover { + background-color: #fff; + color: $main-text-color; + } + + &:focus { + @include hover(box-shadow, 1px 4px 16px 2px $main-text-color); + + background-color: #111; + color: #fff; + } + + @include on-desktop { + width: 324px; + } + } + + &--section-title--categories--top--indend { + display: grid; + padding-top: 96px; + padding-bottom: 48px; + } + + &--section-title--about--top--indend { + display: grid; + padding-block: 48px; + padding-bottom: 24px; + } + + &--section-title--contacts--top--indent { + display: grid; + padding-top: 104px; + padding-bottom: 48px; + } + + @include on-tablet { + &--section-title { + display: grid; + padding-top: 120px; + padding-bottom: 56px; + } + + &--section-title--about--top--indend { + padding-top: 0; + } + } + + @include on-desktop { + &--section-title { + display: grid; + padding-top: 120px; + padding-bottom: 56px; + } + + &--section-title--categories--top--indend { + display: grid; + padding-top: 128px; + } + + &--section-title--about--top--indend { + padding-top: 0; + } + } + } +} + +h2 { + margin: 0; +} + +.image { + background-image: url(../images/Image.png); + background-position: bottom; + background-size: cover; margin: 0; + width: 100%; + height: 200px; + + @include on-tablet { + height: 400px; + } + + @include on-desktop { + height: 460px; + } } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..1503a67de3 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,73 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin contacts-block-bold() { + font-family: 'Space Mono', sans-serif; + font-weight: 400; + font-size: 16px; + margin-top: 8px; + margin-bottom: 0; + color: #191919; + line-height: 22px; + text-decoration: none; +} + +@mixin contacts-block-thin { + font-weight: 400; + font-size: 14px; + margin-bottom: 24px; + color: #9393a3; +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-desktop { + padding-inline: 120px; + margin-inline: auto; + } +} + +@mixin hover($property, $value) { + transition: #{$property} 0.8s; + &:hover { + #{$property}: $value; + } +} + +@mixin page-grid { + --column-grid: 2; + + // max-width: 1200px; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--column-grid), 1fr); + + @include on-tablet { + --column-grid: 6; + + column-gap: 24px; + display: grid; + } + + @include on-desktop { + --column-grid: 12; + } +} + +.container { + @include content-padding-inline; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..04c5fb6a04 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,8 @@ +$main-text-color: #292929; +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$effect-duration: 0.3s; +$row-gap-contacts: 16px; +$contacts-input-width: 100%; +$contacts-input-height: 48px; +$contacts-input-background-color: #f8f8fa;