diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg new file mode 100644 index 000000000..c3f42c4a0 --- /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 000000000..df1397add --- /dev/null +++ b/src/images/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/LUNA-EYE.png b/src/images/LUNA-EYE.png new file mode 100644 index 000000000..5eb225117 Binary files /dev/null and b/src/images/LUNA-EYE.png differ diff --git a/src/images/SPECS.svg b/src/images/SPECS.svg new file mode 100644 index 000000000..f657881f1 --- /dev/null +++ b/src/images/SPECS.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/desighed-for-future.png b/src/images/desighed-for-future.png new file mode 100644 index 000000000..781f9f147 Binary files /dev/null and b/src/images/desighed-for-future.png differ diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon2.svg b/src/images/favicon2.svg new file mode 100644 index 000000000..3b0dd7e35 --- /dev/null +++ b/src/images/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/features-picture-removebg-preview.png b/src/images/features-picture-removebg-preview.png new file mode 100644 index 000000000..6be912360 Binary files /dev/null and b/src/images/features-picture-removebg-preview.png differ diff --git a/src/images/features-picture.png b/src/images/features-picture.png new file mode 100644 index 000000000..90fdfe61a Binary files /dev/null and b/src/images/features-picture.png differ diff --git a/src/images/futuristic-design.svg b/src/images/futuristic-design.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/futuristic-design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/garrett-martin.png b/src/images/garrett-martin.png new file mode 100644 index 000000000..f2b4b4ebb Binary files /dev/null and b/src/images/garrett-martin.png differ diff --git a/src/images/header-mobile-photo-white.png b/src/images/header-mobile-photo-white.png new file mode 100644 index 000000000..7616c9c20 Binary files /dev/null and b/src/images/header-mobile-photo-white.png differ diff --git a/src/images/header-photo.png b/src/images/header-photo.png new file mode 100644 index 000000000..0b48d8621 Binary files /dev/null and b/src/images/header-photo.png differ diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/intuitive-lighting-system.svg b/src/images/intuitive-lighting-system.svg new file mode 100644 index 000000000..634f3af0d --- /dev/null +++ b/src/images/intuitive-lighting-system.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/language.svg b/src/images/language.svg new file mode 100644 index 000000000..66d7ce317 --- /dev/null +++ b/src/images/language.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..9801c53e5 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/meet-luna.png b/src/images/meet-luna.png new file mode 100644 index 000000000..aecbcbce3 Binary files /dev/null and b/src/images/meet-luna.png differ diff --git a/src/images/mobile-header-photo.png b/src/images/mobile-header-photo.png new file mode 100644 index 000000000..7bc187f1c Binary files /dev/null and b/src/images/mobile-header-photo.png differ diff --git a/src/images/multiroom-system.svg b/src/images/multiroom-system.svg new file mode 100644 index 000000000..621302af1 --- /dev/null +++ b/src/images/multiroom-system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/quotes.png b/src/images/quotes.png new file mode 100644 index 000000000..2f9b8e26e Binary files /dev/null and b/src/images/quotes.png differ diff --git a/src/images/slider-correct-color.svg b/src/images/slider-correct-color.svg new file mode 100644 index 000000000..43006cb96 --- /dev/null +++ b/src/images/slider-correct-color.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/slider-hover.png b/src/images/slider-hover.png new file mode 100644 index 000000000..71d5664b9 Binary files /dev/null and b/src/images/slider-hover.png differ diff --git a/src/images/slider.png b/src/images/slider.png new file mode 100644 index 000000000..bdb2a7ca0 Binary files /dev/null and b/src/images/slider.png differ diff --git a/src/images/tweeter-speaker-system.svg b/src/images/tweeter-speaker-system.svg new file mode 100644 index 000000000..e6aad8bc2 --- /dev/null +++ b/src/images/tweeter-speaker-system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..68e57ee73 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,612 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + CrazyBaby + + -

Hello Mate Academy

- + + +
+
+
+ + + + menu + +
+ +
+ + +
+ + specs + + + + language + + + + + + menu + +
+
+ +
+ + +
+ + specs + + + + language + + + + + +
+
+
+ +
+ + product-card + + +
+
+

Futuristic
Wireless
Speaker

+

Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctly more layered.

+
+
+
+ +
+
+ + product-card + + + +
+

Futuristic
Wireless
Speaker

+

Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctly more layered.

+
+ +
+
+ + + +
+
+
+ + futuristic-design + + +

Futuristic Design

+ +

To give Luna a truly flawless look, we specifically picked aircraft grade aluminum as its material and adopted both three-dimensional stretch-bending technology and a high precision cold forging technique.

+
+ +
+ + tweeter-speaker-system + + +

Tweeter Speaker System

+ +

To deliver a more layered sound performance better than a sole full-range speaker, our team equipped Luna with one more tweeter speaker responsible for high-frequency sound independently.

+
+ +
+ + tweeter-speaker-system + + +

Multiroom System

+ +

Luna is natively compatible with your home Wi-Fi. Set up multiple speakers in different rooms to expand your music experience into the entire house.

+
+ +
+ + futuristic-design + + +

Intuitive Lighting System

+ +

An intuitive user interface allows you to adjust the hue and saturation of color for lighting that fits any mood and situation.

+
+
+
+ +
+
+ + meet-luna + +
+
+ +
+
+ + meet-luna + +
+
+
+ + + +
+
+
+
+

DESIGNED FOR THE FUTURE

+ + + desighed-for-future + + +

In 2014, a group of geeky industrial designers, engineering veterans and acoustic experts formed crazybaby. This is a bunch of passionate people who are crazy enough to think they can challenge the industry with disruptive audio products.

+ + See more about us +
+
+ +
+ + desighed-for-future + + +
+

DESIGNED FOR THE FUTURE

+ +

In 2014, a group of geeky industrial designers, engineering veterans and acoustic experts formed crazybaby. This is a bunch of passionate people who are crazy enough to think they can challenge the industry with disruptive audio products.

+ + SEE MORE ABOUT US +
+
+
+ +
+
+
+

LUNA EYE

+ + + LUNA-EYE + + +

Luna Eye is to the essence of this innovative light and audio system. It comprises an independent tweeter speaker, a light guiding component, a dome and a ring ornament.

+ + See more about us +
+
+ +
+ + LUNA-EYE + + +
+

LUNA EYE

+ +

Luna Eye is to the essence of this innovative light and audio system. It comprises an independent tweeter speaker, a light guiding component, a dome and a ring ornament.

+ + SEE MORE ABOUT US +
+
+
+ +
+
+
+ + quotes + + +
+

It really took me by surprise honestly to have such full beautiful sound that coming out of this small compact device. And with the brush aluminum surface, it feels so familiar. Like my iPhone.

+ + + garrett-martin + + +

Garrett Martin

+ +

Creative Director

+
+
+
+
+ +
+
+

FEATURES

+
+ +
+
+
+
+

Connectivity

+ +
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • Wi-Fi 2.4 GHz (802.11 b/g/n)
    • +
  • Smart Multiroom System Set Up
    • +
  • Party Mode with 6.0 Units and above
    • +
  • MESHNET Multi Speaker Network
    • +
+
+ +
+

App Features

+ +
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Color Wheel
    • +
+
+ +
+

Sound & Music

+ +
    +
  • Feel-in-chest Base Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music Playback from Last Song Stopped
    • +
+
+ + + features-picture + +
+
+ +
+
+ + slider + + + + features-picture + +
+
+ +
+ + features-picture + +
+
+
+ +
+
+
+

DO YOU HAVE ANY QUESTIONS?

+ +
+ + + + + +
+
+
+
+ +
+ + diff --git a/src/styles/aside.scss b/src/styles/aside.scss new file mode 100644 index 000000000..fa94ec28e --- /dev/null +++ b/src/styles/aside.scss @@ -0,0 +1,147 @@ +.aside { + margin: 0; + background-color: #f7f7f7; + height: 100%; + opacity: 0; + transition: all 0.3s ease-in-out; + transform: translateX(-100%); + pointer-events: none; + top: 0; + right: 0; + left: 0; + position: fixed; + + @include on-desktop { + display: none; + } + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + + &-top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 25px; + + @include on-desktop { + display: none; + } + } + + &-mobile-top-bar-link-icon-close { + display: flex; + + &-img { + width: 24px; + height: 24px; + + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + } + } + + &-nav { + margin-top: 30px; + + @include on-tablet { + margin-top: 40px; + } + + &-list { + display: flex; + flex-direction: column; + gap: 25px; + list-style: none; + padding: 0; + + @include on-tablet { + gap: 40px; + } + + @include on-desktop { + display: flex; + flex-direction: row; + gap: 84px; + align-items: center; + } + } + + &-link { + display: block; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-align: left; + color: #333333; + text-decoration: none; + cursor: pointer; + + transition: transform 0.3s ease-in-out; + + @include on-desktop { + &:hover { + transform: scale(1.1); + } + } + } + } + + &-container-for-flex { + display: flex; + flex-direction: row; + gap: 20px; + justify-content: start; + align-items: center; + margin-top: 50px; + + @include on-tablet { + display: none; + } + } + + &-container-for-button { + display: flex; + justify-content: center; + align-items: center; + margin-top: 160px; + margin-bottom: 30px; + + @include on-tablet { + display: none; + } + } + + &-button { + width: 100%; + height: 48px; + background-color: #333333; + border: none; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-align: center; + color: #FFFFFF; + + &:hover { + background-color: #131313; + } + + &:disabled { + background-color: #D0D0D0; + } + } +} + +.aside-link-for-button-on-mobile { + display: block; + width: 100%; +} diff --git a/src/styles/desighed-for-future.scss b/src/styles/desighed-for-future.scss new file mode 100644 index 000000000..f43f25f27 --- /dev/null +++ b/src/styles/desighed-for-future.scss @@ -0,0 +1,141 @@ +.desighed-for-future { + + &-title { + margin: 0; + margin-top: 110px; + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-align: left; + color: #333333; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + margin-top: 140px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + margin-top: 170px; + } + } + + &-link { + display: flex; + justify-content: center; + margin-top: 30px; + width: 100%; + overflow: hidden; + + @include on-tablet { + grid-column: 1 / 5; + + margin-top: 140px; + } + + @include on-desktop { + width: 100%; + grid-column: 1 / 7; + margin-top: 170px; + } + + &-img { + width: 120%; + + object-fit: cover; + object-position: center; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + + @include on-tablet { + width: 140%; + } + + @include on-desktop { + width: 100%; + } + } + } + + &-description { + margin: 0; + margin-top: 20px; + margin-bottom: 30px; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #7C7C7C; + + @include on-tablet { + font-size: 16px; + line-height: 24px; + margin-top: 30px; + margin-bottom: 60px; + } + } + + &-about-us-link { + display: block; + text-decoration: none; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-align: left; + color: #0DB2B3; + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 53px; + height: 1px; + background-color: #0DB2B3; + transition: width 0.3s ease-in-out; + } + + &:hover::after { + width: 128px; + } + } +} + +.container-for-desighed-for-future-on-mobile { + @include on-tablet { + display: none; + } +} + +.container-for-desighed-for-future-on-tablet { + display: none; + + @include on-tablet { + @include page-grid; + } + + @include on-desktop { + padding-inline: 123px; + } +} + +.container-desighed-for-future-text-block { + @include on-tablet { + grid-column: 5 / 9; + padding-right: 34px; + } + + @include on-desktop { + grid-column: 7 / 13; + padding-right: 0; + } +} diff --git a/src/styles/features.scss b/src/styles/features.scss new file mode 100644 index 000000000..1d06a29d3 --- /dev/null +++ b/src/styles/features.scss @@ -0,0 +1,202 @@ +.features { + // padding-top: 110px; + + // @include on-tablet { + // padding-top: 140px; + // } + + // @include on-desktop { + // padding-top: 170px; + // } + + &-title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-align: left; + color: #333333; + margin: 0; + margin-bottom: 30px; + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &-container-for-text-and-picture { + background-color: #D6ECEC; + position: relative; + } + + &-text-area { + // padding-inline: 30px; + @include page-grid; + + &-connectivity, &-app-features { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + align-items: start; + gap: 30px; + padding-top: 60px; + } + } + + &-connectivity { + grid-column: 2 / 6; + grid-row: 1; + } + + &-app-features { + grid-column: 7 / 13; + grid-row: 1; + } + + + + &-sound-and-music { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: start; + gap: 20px; + padding-top: 30px; + + @include on-tablet { + padding-top: 60px; + grid-column: 2 / 5; + } + + @include on-desktop { + gap: 30px; + grid-column: 2 / 6; + grid-row: 2; + } + + &-title { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-align: left; + color: #0C797A; + margin: 0; + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } + } + + &-list { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0; + margin: 0; + padding-left: 10px; + } + + &-item { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #333333; + margin: 0; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + } + } + + &-picture-link-on-mobile { + grid-column: 1 / -1; + display: flex; + + @include on-tablet { + display: none; + } + + &-img { + width: 100%; + // object-fit: cover; + } + } + + &-slider-link { + display: flex; + justify-content: center; + // align-items: center; + margin-top: 50px; + // padding-bottom: 174px; + cursor: pointer; + + @include on-tablet { + justify-content: start; + // padding-left: 124px; + // padding-bottom: 123px; + grid-column: 2 / 4; + } + + @include on-desktop { + display: none; + } + + &-img { + width: 93px; + height: 47px; + + &:hover { + content: url('../images/slider-hover.png'); + } + } + } +} + +.container-grid-for-slider { + @include on-tablet { + @include page-grid; + } +} + +.container-grid-features-picture-link-on-mobile { + @include page-grid; +} + +.features-picture-link-on-tablet { + display: none; + + @include on-tablet { + display: flex; + grid-column: 4 / 9; + grid-row: 1; + } + + @include on-desktop { + display: none; + } + + &-img { + width: 100%; + } +} + +.features-picture-link-on-desktop { + display: none; + + @include on-desktop { + display: flex; + grid-column: 7 / 13; + grid-row: 2; + padding-top: 60px; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..9e6c40608 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,112 @@ +.footer { + margin-top: 110px; + margin-bottom: 20px; + + @include on-tablet { + margin-top: 140px; + margin-bottom: 30px; + } + + @include on-desktop { + margin-top: 170px; + } + + &-logo-link { + display: none; + + @include on-tablet { + display: flex; + } + + &-img { + @include on-tablet { + width: 184px; + height: 25px; + } + + @include on-desktop { + width: 161px; + height: 26px; + } + } + } + + &-container-for-flex { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + + position: relative; + + @include on-tablet { + gap: 60px; + } + } + + &-social-link { + display: flex; + + &-img { + width: 24px; + height: 24px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + } + } + + &-container-for-social-icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 40px; + + @include on-tablet { + gap: 49px; + } + + @include on-desktop { + gap: 40px; + } + } + + &-textarea { + margin: 0; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #BDBDBD; + } + + &-arrow-up-link { + display: none; + + @include on-tablet { + display: flex; + position: absolute; + top: 0; + right: 0; + cursor: pointer; + } + + &-img { + @include on-tablet { + width: 24px; + height: 24px; + + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + } + } + } +} diff --git a/src/styles/form.scss b/src/styles/form.scss new file mode 100644 index 000000000..08177b28e --- /dev/null +++ b/src/styles/form.scss @@ -0,0 +1,173 @@ +.form { + margin-top: 90px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-desktop { + margin-top: 170px; + } + + &-title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-align: left; + color: #333333; + margin: 0; + margin-bottom: 27px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + grid-column: 1 / 5; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + grid-column: 1 / 7; + } + } + + &-contact-form { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 5 / 9; + } + + @include on-desktop { + grid-column: 7 / 13; + } + + &-email, &-textarea { + + padding-inline: 20px; + padding-block: 12px; + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: #333333; + box-sizing: border-box; + background: #f7f7f7; + cursor: pointer; + + border: 1px solid #828282; + + @include on-tablet { + padding-inline: 30px; + } + + @include on-desktop { + padding-inline: 36px; + padding-block: 16px; + } + } + + &-email { + height: 48px; + } + + &-textarea { + margin-top: 20px; + height: 128px; + resize: none; + + @include on-tablet { + height: 201px; + } + + @include on-desktop { + height: 128px; + } + } + + &-button { + display: flex; + justify-content: center; + align-items: center; + background-color: #0DB2B3; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-align: left; + color: #FFFFFF; + width: 102px; + height: 40px; + cursor: pointer; + margin-top: 30px; + border: none; + box-sizing: border-box; + + @include on-desktop { + width: 123px; + height: 48px; + } + + &:hover { + background-color: #0C797A; + } + + &:disabled { + background-color: #CFEFF0; + } + } + } +} + + + +/* Стилізація автозаповнення */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset; /* Білий фон */ + -webkit-text-fill-color: #333333; /* Колір тексту для автозаповнення */ +} + +/* Стилі плейсхолдера */ +input::placeholder, textarea::placeholder { + color: #BDBDBD; /* Колір плейсхолдера */ +} + +input:hover::placeholder, textarea:hover::placeholder { + color: #BDBDBD; /* плейсхолдер при hover */ +} + +input:focus::placeholder, textarea:focus::placeholder { + color: transparent; /* Плейсхолдер зникає при focus */ +} + +/* При фокусі: червона каретка та стиль бордера */ +input:focus, textarea:focus { + outline: none; + border: 1px solid #0C797A; +} + +/* При валідному значенні */ +input:valid { + border: 1px solid #EB5757; +} + +input:valid::placeholder { + color: #EB57574D; +} + +.container-for-grid-form { + @include on-tablet { + @include page-grid; + } +} diff --git a/src/styles/garrett-martin.scss b/src/styles/garrett-martin.scss new file mode 100644 index 000000000..7c0eac496 --- /dev/null +++ b/src/styles/garrett-martin.scss @@ -0,0 +1,111 @@ +.garrett-martin { + margin-top: 110px; + margin-bottom: 259px; + + @include on-tablet { + margin-top: 140px; + margin-bottom: 325px; + } + + @include on-desktop { + margin-top: 170px; + margin-bottom: 288px; + } + + &-container-for-bgpicture-and-text { + position: relative; + } + + &-bgpicture-link { + display: flex; + justify-content: center; + align-items: center; + + &-img { + width: 208px; + height: 171px; + + @include on-tablet { + width: 233px; + height: 189px; + } + } + } + + &-container-for-text { + display: flex; + flex-direction: column; + justify-content: center; + + position: absolute; + top: 0; + } + + &-description { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + color: #333333; + margin: 0; + margin-top: 50px; + + @include on-tablet { + margin-top: 60px; + font-size: 24px; + line-height: 36px; + } + + @include on-desktop { + margin-top: 42px; + padding-inline: 204px; + } + } + + &-name { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; + text-align: center; + color: #333333; + margin: 0; + margin-top: 10px; + + @include on-tablet { + margin-top: 20px; + } + } + + &-employment { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #7C7C7C; + margin: 0; + margin-top: 5px; + } + + &-link { + display: flex; + justify-content: center; + align-items: center; + margin-top: 30px; + + @include on-tablet { + margin-top: 40px; + } + + @include on-desktop { + margin-top: 30px; + } + + &-img { + width: 62px; + height: 62px; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..31d6e8e00 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,378 @@ +.header { + + &-mobile-top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 25px; + + @include on-tablet { + display: none; + } + + &-link-logo { + display: flex; + + &-img { + width: 161px; + height: 26px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + } + } + + &-link-menu { + display: flex; + + &-img { + width: 32px; + height: 32px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + } + } + } + + &-tablet-top-bar { + display: none; + + @include on-tablet { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 30px; + } + + @include on-desktop { + display: none; + } + + &-container-for-flex { + display: flex; + flex-direction: row; + gap: 30px; + justify-content: center; + align-items: center; + } + + &-link { + display: flex; + justify-content: center; + align-items: center; + } + + &-button { + width: 102px; + height: 48px; + background-color: #333333; + border: none; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-align: center; + color: #FFFFFF; + cursor: pointer; + + &:hover { + background-color: #131313; + } + + &:disabled { + background-color: #D0D0D0; + } + } + } + + &-desktop-top-bar { + display: none; + + @include on-desktop { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 30px; + } + } + + &-link-product-card { + display: flex; + // justify-content: center; + width: 100%; + overflow: hidden; + + &-img { + width: 133.33%; + object-fit: cover; + object-position: left; + + @include on-desktop { + width: 100%; + // object-position: center; + } + } + + @include on-tablet { + grid-column: 4 / 9; + grid-row: 1; + margin-top: 100px; + } + + @include on-desktop { + grid-column: 5 / 13; + margin-top: 60px; + } + } + + &-text-area { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 40px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + + margin-top: 100px; + gap: 30px; + } + + @include on-desktop { + grid-column: 1 / 5; + margin-top: 140px; + } + + &-title { + margin: 0; + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-align: left; + color: #333333; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } + } + + &-description { + margin: 0; + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: #333333; + } + } + + &-nav { + display: none; + + @include on-desktop { + display: flex; + justify-content: center; + margin-top: 198px; + } + } + + &-futuristic-design-block-mobile { + display: flex; + flex-direction: column; + + margin-top: 110px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + margin-top: 140px; + } + + @include on-desktop { + margin-top: 90px; + grid-column: 1 / 4; + } + + &-link { + display: flex; + justify-content: center; + align-items: center; + + &-img { + width: 50px; + height: 40px; + + @include on-desktop { + width: 70px; + height: 50px; + } + } + } + + &-title { + margin: 0; + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + color: #333333; + + margin-top: 40px; + } + + &-description { + margin: 0; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: center; + color: #7C7C7C; + + margin-top: 20px; + } + } + + &-tweeter-speaker-system-block-tablet { + display: none; + + @include on-tablet { + display: flex; + flex-direction: column; + + margin-top: 140px; + + grid-column: 5 / 9; + grid-row: 1; + } + + @include on-desktop { + margin-top: 90px; + grid-column: 4 / 7; + } + } + + &-intuitive-lighting-system-block-tablet, &-multiroom-system-block-tablet { + display: none; + + @include on-tablet { + display: flex; + flex-direction: column; + + margin-top: 65px; + } + + @include on-desktop { + margin-top: 90px; + } + } + + &-multiroom-system-block-tablet { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 2; + } + + @include on-desktop { + grid-column: 7 / 10; + grid-row: 1; + } + } + + &-intuitive-lighting-system-block-tablet { + @include on-tablet { + grid-column: 5 / 9; + grid-row: 2; + } + + @include on-desktop { + grid-column: 10 / 13; + grid-row: 1; + } + } + + &-container-for-four-blocks { + @include on-tablet { + @include page-grid; + } + } + + &-container-for-meet-luna-for-padding-inline-on-mobile { + padding-inline: 12px; + } + + &-container-for-meet-luna-on-mobile { + @include on-tablet { + display: none; + } + } + + &-container-for-meet-luna-on-tablet { + display: none; + + @include on-tablet { + @include page-grid; + } + } + + &-meet-luna-link { + display: flex; + justify-content: center; + + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + grid-column: 1 / -1; + } + + @include on-desktop { + margin-top: 170px; + grid-column: 3 / 11; + } + + &-img { + width: 100%; + object-fit: cover; + + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.1); + } + } + } +} + +.container-for-padding-inline { + @include content-padding-inline; +} + +.header-container-for-grid { + display: none; + + @include on-tablet { + @include page-grid; + } +} + +.header-container-for-hide-on-tablet { + @include on-tablet { + display: none; + } +} diff --git a/src/styles/luna-eye.scss b/src/styles/luna-eye.scss new file mode 100644 index 000000000..7b977c603 --- /dev/null +++ b/src/styles/luna-eye.scss @@ -0,0 +1,146 @@ +.luna-eye { + position: relative; + + &-title { + margin: 0; + margin-top: 110px; + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-align: left; + color: #333333; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + margin-top: 140px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + margin-top: 170px; + } + } + + &-link { + display: flex; + justify-content: center; + margin-top: 30px; + width: 100%; + overflow: hidden; + + @include on-tablet { + grid-column: 5 / 9; + grid-row: 1; + margin-top: 140px; + } + + @include on-desktop { + width: 100%; + grid-column: 7 / 13; + margin-top: 170px; + } + + &-img { + width: 120%; + + object-fit: cover; + object-position: center; + + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.2); + } + + @include on-tablet { + width: 140%; + } + + @include on-desktop { + width: 100%; + } + } + } + + &-description { + margin: 0; + margin-top: 20px; + margin-bottom: 30px; + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #7C7C7C; + + @include on-tablet { + font-size: 16px; + line-height: 24px; + margin-top: 30px; + margin-bottom: 60px; + } + } + + &-about-us-link { + display: block; + text-decoration: none; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-align: left; + color: #0DB2B3; + position: relative; + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 53px; + height: 1px; + background-color: #0DB2B3; + transition: width 0.3s ease-in-out; + } + + &:hover::after { + width: 128px; + } + } +} + +.container-for-luna-eye-on-mobile { + @include on-tablet { + display: none; + } +} + +.container-for-luna-eye-on-tablet { + display: none; + + @include on-tablet { + @include page-grid; + } + + @include on-desktop { + padding-inline: 123px; + } +} + +.container-luna-eye-text-block { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + padding-left: 34px; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 1; + padding-left: 0; + } +} + diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..9a7da1f49 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,24 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'header'; +@import 'aside'; +@import 'desighed-for-future'; +@import 'luna-eye'; +@import 'garrett-martin'; +@import 'features'; +@import 'form'; +@import 'footer'; body { - background: $c-gray; + background: #f7f7f7; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body:has(#aside:target) { + overflow: hidden; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..da2bf23f8 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,47 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +// @mixin hover($_property, $_toValue) { +// transition: #{$_property} 0.3s; +// &:hover { +// #{$_property}: $_toValue; +// } +// } + +@mixin page-grid { + --columns: 4; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + column-gap: 30px; + --columns: 12; + } +} + +@mixin on-tablet { + @media (min-width: 744px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; } }