diff --git a/README.md b/README.md index a95e97afe..509e3fa82 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 11. `git push origin develop` - to send you code for PR 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Kickstarter/) + [DEMO LINK](https://svyatoslav1313.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Testimonilas-photo.png b/src/images/Testimonilas-photo.png new file mode 100644 index 000000000..cc28e794f Binary files /dev/null and b/src/images/Testimonilas-photo.png differ diff --git a/src/images/crazybaby-burger-menu.png b/src/images/crazybaby-burger-menu.png new file mode 100644 index 000000000..bc2fee050 Binary files /dev/null and b/src/images/crazybaby-burger-menu.png differ diff --git a/src/images/crazybaby-close.png b/src/images/crazybaby-close.png new file mode 100644 index 000000000..3d5ff6a5c Binary files /dev/null and b/src/images/crazybaby-close.png differ diff --git a/src/images/crazybaby-logo.png b/src/images/crazybaby-logo.png new file mode 100644 index 000000000..b22e14233 Binary files /dev/null and b/src/images/crazybaby-logo.png differ diff --git a/src/images/designed-for-future-photo.png b/src/images/designed-for-future-photo.png new file mode 100644 index 000000000..101653784 Binary files /dev/null and b/src/images/designed-for-future-photo.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..6243dd933 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/features-arrow-left.png b/src/images/features-arrow-left.png new file mode 100644 index 000000000..f61b83a97 Binary files /dev/null and b/src/images/features-arrow-left.png differ diff --git a/src/images/features-arrow-normal.png b/src/images/features-arrow-normal.png new file mode 100644 index 000000000..28d9b7ad3 Binary files /dev/null and b/src/images/features-arrow-normal.png differ diff --git a/src/images/features-arrow-right.png b/src/images/features-arrow-right.png new file mode 100644 index 000000000..f48b6ba63 Binary files /dev/null and b/src/images/features-arrow-right.png differ diff --git a/src/images/features-highlight-items/futuristic-design-photo.png b/src/images/features-highlight-items/futuristic-design-photo.png new file mode 100644 index 000000000..1ea709b9c Binary files /dev/null and b/src/images/features-highlight-items/futuristic-design-photo.png differ diff --git a/src/images/features-highlight-items/intuitive-lighting-system-photo.png b/src/images/features-highlight-items/intuitive-lighting-system-photo.png new file mode 100644 index 000000000..c781baf88 Binary files /dev/null and b/src/images/features-highlight-items/intuitive-lighting-system-photo.png differ diff --git a/src/images/features-highlight-items/multiroom-system-photo.png b/src/images/features-highlight-items/multiroom-system-photo.png new file mode 100644 index 000000000..a32962712 Binary files /dev/null and b/src/images/features-highlight-items/multiroom-system-photo.png differ diff --git a/src/images/features-highlight-items/tweeter-speaker-system-photo.png b/src/images/features-highlight-items/tweeter-speaker-system-photo.png new file mode 100644 index 000000000..a220512ce Binary files /dev/null and b/src/images/features-highlight-items/tweeter-speaker-system-photo.png differ diff --git a/src/images/features-photo.png b/src/images/features-photo.png new file mode 100644 index 000000000..52710b4d4 Binary files /dev/null and b/src/images/features-photo.png differ diff --git a/src/images/features__photo.png b/src/images/features__photo.png new file mode 100644 index 000000000..d4b31cb2b Binary files /dev/null and b/src/images/features__photo.png differ diff --git a/src/images/footer/footer-arrow.png b/src/images/footer/footer-arrow.png new file mode 100644 index 000000000..ff64fcab2 Binary files /dev/null and b/src/images/footer/footer-arrow.png differ diff --git a/src/images/footer/footer-facebook.png b/src/images/footer/footer-facebook.png new file mode 100644 index 000000000..b86d728d1 Binary files /dev/null and b/src/images/footer/footer-facebook.png differ diff --git a/src/images/footer/footer-insta.png b/src/images/footer/footer-insta.png new file mode 100644 index 000000000..67a753a62 Binary files /dev/null and b/src/images/footer/footer-insta.png differ diff --git a/src/images/footer/footer-twitter.png b/src/images/footer/footer-twitter.png new file mode 100644 index 000000000..598cbccaa Binary files /dev/null and b/src/images/footer/footer-twitter.png differ diff --git a/src/images/luna-eye-photo.png b/src/images/luna-eye-photo.png new file mode 100644 index 000000000..e548bb774 Binary files /dev/null and b/src/images/luna-eye-photo.png differ diff --git a/src/images/meetluna-laptop-photo.png b/src/images/meetluna-laptop-photo.png new file mode 100644 index 000000000..68628406f Binary files /dev/null and b/src/images/meetluna-laptop-photo.png differ diff --git a/src/images/meetluna-photo.png b/src/images/meetluna-photo.png new file mode 100644 index 000000000..3c1ee155e Binary files /dev/null and b/src/images/meetluna-photo.png differ diff --git a/src/images/testimonilas-avatar.png b/src/images/testimonilas-avatar.png new file mode 100644 index 000000000..33d947980 Binary files /dev/null and b/src/images/testimonilas-avatar.png differ diff --git a/src/images/wireless-speaker.png b/src/images/wireless-speaker.png new file mode 100644 index 000000000..3c7281c7a Binary files /dev/null and b/src/images/wireless-speaker.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..7609f167a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,8 @@ - + Title + + + + - -

Hello Mate Academy

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

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

+
+ + + +
+
+
+
+ + + +
+
+
+ + + meetluna + +
+
+

+ DESIGNED FOR THE FUTURE +

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

+ +
+ +
+

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

+ +
+ +
+ testimonilas__photo +

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

+ testimonilas__avatar +

Garrett Martin

+

Creative Director

+
+
+
+

FEATURES

+
+
+

Sound & Music

+ +
+ + +
+
+
+
+
+ 01 + / + 03 +
+ features-photo +
+
+ + +
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+ +
+
+ + + + +
+ + facebook + + + twitter + + + insta + +
+

+ © 2019 All rights reserved. Terms of Use & Privacy Policy +

+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..580e19b40 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,197 @@ 'use strict'; + +function handleResponsiveLayout() { + const breakpointTablet = 768; + const breakpointLaptop = 1440; + + // элементы + const featureItems = document.querySelectorAll('.features-highlight__item'); + const itemsToModify = Array.from(featureItems).slice(1, 4); + + const wirelessSpeakerMobile = document.querySelector( + '.wireless-speaker-mobile', + ); + const wirelessSpeakerTablet = document.querySelector( + '.wireless-speaker-tablet', + ); + + const topBarSpecs = document.querySelectorAll('.top-bar__spec'); + const menuButton = document.querySelector('.menu__button'); + + const designedForFutureMobile = document.querySelector( + '.designed-for-future-mobile', + ); + const designedForFutureTablet = document.querySelector( + '.designed-for-future-tablet', + ); + + const lunaEyeMobile = document.querySelector('.luna-eye-mobile'); + const lunaEyeTablet = document.querySelector('.luna-eye-tablet'); + + const headerNav = document.querySelector('.features-highlight__nav'); + + const featuresMobile = document.querySelector('.features-mobile'); + const featuresTablet = document.querySelector('.features-tablet'); + const featuresLaptop = document.querySelector('.features-laptop'); + + const footerLogo = document.querySelector('.footer__logo'); + const footerArrow = document.querySelector('.footer__arrow'); + + const width = window.innerWidth; + + // MOBILE + if (width < breakpointTablet) { + wirelessSpeakerMobile.classList.remove('hidden'); + wirelessSpeakerTablet.classList.add('hidden'); + + menuButton.classList.remove('hidden'); + + designedForFutureMobile.classList.remove('hidden'); + designedForFutureTablet.classList.add('hidden'); + + lunaEyeMobile.classList.remove('hidden'); + lunaEyeTablet.classList.add('hidden'); + + featuresMobile.classList.remove('hidden'); + featuresTablet.classList.add('hidden'); + featuresLaptop.classList.add('hidden'); + footerLogo.classList.add('hidden'); + footerArrow.classList.add('hidden'); + + topBarSpecs.forEach((spec) => spec.classList.add('hidden')); + itemsToModify.forEach((item) => item.classList.add('hidden')); + + headerNav.classList.add('hidden'); + // TABLET + } else if (width < breakpointLaptop) { + wirelessSpeakerMobile.classList.add('hidden'); + wirelessSpeakerTablet.classList.remove('hidden'); + + menuButton.classList.add('hidden'); + + designedForFutureMobile.classList.add('hidden'); + designedForFutureTablet.classList.remove('hidden'); + + lunaEyeMobile.classList.add('hidden'); + lunaEyeTablet.classList.remove('hidden'); + + featuresMobile.classList.add('hidden'); + featuresTablet.classList.remove('hidden'); + featuresLaptop.classList.add('hidden'); + footerLogo.classList.remove('hidden'); + footerArrow.classList.remove('hidden'); + + topBarSpecs.forEach((spec) => spec.classList.remove('hidden')); + itemsToModify.forEach((item) => item.classList.remove('hidden')); + + headerNav.classList.add('hidden'); + // LAPTOP + } else { + wirelessSpeakerMobile.classList.add('hidden'); + wirelessSpeakerTablet.classList.remove('hidden'); + + menuButton.classList.add('hidden'); + + designedForFutureMobile.classList.add('hidden'); + designedForFutureTablet.classList.remove('hidden'); + + lunaEyeMobile.classList.add('hidden'); + lunaEyeTablet.classList.remove('hidden'); + + featuresMobile.classList.add('hidden'); + featuresTablet.classList.add('hidden'); + featuresLaptop.classList.remove('hidden'); + + topBarSpecs.forEach((spec) => spec.classList.remove('hidden')); + itemsToModify.forEach((item) => item.classList.remove('hidden')); + + headerNav.classList.remove('hidden'); + } +} + +window.addEventListener('load', handleResponsiveLayout); +window.addEventListener('resize', handleResponsiveLayout); + +// slider mobile +const featuresArrowLeft = document.querySelector( + '.features__slider-arrow-left', +); +const featuresArrowRight = document.querySelector( + '.features__slider-arrow-right', +); +const featuresNumberChange = document.querySelector( + '.features__slider-number-change', +); +const featuresInfos = document.querySelectorAll('.features__info'); + +featuresArrowRight.addEventListener('click', () => { + let number = Number(featuresNumberChange.textContent); + + if (number === featuresInfos.length) { + return; + } + + number++; + featuresNumberChange.textContent = `0${number}`; + + featuresInfos.forEach((featuresInfo, index) => { + featuresInfo.classList.toggle('hidden', index !== number - 1); + }); +}); + +featuresArrowLeft.addEventListener('click', () => { + let number = Number(featuresNumberChange.textContent); + + if (number === 1) { + return; + } + + number--; + featuresNumberChange.textContent = `0${number}`; + + featuresInfos.forEach((featuresInfo, index) => { + featuresInfo.classList.toggle('hidden', index !== number - 1); + }); +}); + +// slider tablet +const featuresArrowLeftTablet = document.querySelector( + '.features-tablet__slider-arrow-left', +); +const featuresArrowRightTablet = document.querySelector( + '.features-tablet__slider-arrow-right', +); +const featuresNumberChangeTablet = document.querySelector( + '.features-tablet__slider-number-change', +); +const featuresInfosTablet = document.querySelectorAll('.features-tablet__info'); + +featuresArrowRightTablet.addEventListener('click', () => { + let number = Number(featuresNumberChangeTablet.textContent); + + if (number === featuresInfosTablet.length) { + return; + } + + number++; + featuresNumberChangeTablet.textContent = `0${number}`; + + featuresInfosTablet.forEach((featuresInfo, index) => { + featuresInfo.classList.toggle('hidden', index !== number - 1); + }); +}); + +featuresArrowLeftTablet.addEventListener('click', () => { + let number = Number(featuresNumberChangeTablet.textContent); + + if (number === 1) { + return; + } + + number--; + featuresNumberChangeTablet.textContent = `0${number}`; + + featuresInfosTablet.forEach((featuresInfo, index) => { + featuresInfo.classList.toggle('hidden', index !== number - 1); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss new file mode 100644 index 000000000..0095bf7fe --- /dev/null +++ b/src/styles/_globals.scss @@ -0,0 +1,13 @@ +.black { + color: #131313 !important; +} + +.hidden { + display: none !important; +} + +.show { + transform: scaleY(1) !important; + display: block !important; + opacity: 1 !important; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f1078dced 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/designed-for-future.scss b/src/styles/blocks/designed-for-future.scss new file mode 100644 index 000000000..065bba9f8 --- /dev/null +++ b/src/styles/blocks/designed-for-future.scss @@ -0,0 +1,126 @@ +.designed-for-future-mobile { + &__title { + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + } + + &__photo { + width: 100%; + height: auto; + } + + &__description { + font-size: 14px; + line-height: 21px; + color: #7c7c7c; + } + + &__button { + position: relative; + + margin: 0; + padding: 0; + border: none; + + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: #0db2b3; + text-transform: uppercase; + + background-color: #f7f7f7; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + + display: block; + + width: 42%; + height: 1px; + + background-color: #0db2b3; + } + } +} + +.designed-for-future-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + + &__title { + margin: 0; + margin-bottom: 30px; + + font-size: 36px; + font-weight: 700; + line-height: 46px; + text-transform: uppercase; + } + + &__photo { + grid-column: 1 / 5; + + width: calc(100% + 30px); + height: 415px; + margin-left: -30px; + + object-fit: cover; + } + + &__info { + grid-column: 5 / -1; + } + + &__description { + margin-bottom: 60px; + font-size: 16px; + line-height: 24px; + color: #7c7c7c; + } + + &__button { + cursor: pointer; + + position: relative; + + margin: 0; + padding: 0; + border: none; + + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: #0db2b3; + text-transform: uppercase; + + background-color: #f7f7f7; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + + display: block; + + width: 42%; + height: 1px; + + background-color: #0db2b3; + + transition: width 0.3s; + } + + &:hover { + &::after { + width: 100%; + } + } + } +} diff --git a/src/styles/blocks/features-highlight.scss b/src/styles/blocks/features-highlight.scss new file mode 100644 index 000000000..734d9b96a --- /dev/null +++ b/src/styles/blocks/features-highlight.scss @@ -0,0 +1,199 @@ +.features-highlight { + padding-inline: 30px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 65px 20px; + } + + @include on-laptop-large { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } + + &__nav { + grid-column: 4 / 10; + &-list { + display: flex; + justify-content: space-between; + list-style: none; + } + + &-link { + position: relative; + color: $c-gray; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-black; + + transition: transform 0.3s; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + @include on-laptop-large { + justify-content: flex-start; + } + } + + &__photo { + width: 50px; + height: 40px; + margin-bottom: 40px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__title { + margin-bottom: 20px; + + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-transform: uppercase; + + @include on-laptop-large { + text-align: center; + } + } + + &__description { + margin: 0; + + font-size: 14px; + line-height: 21px; + color: #7c7c7c; + text-align: center; + } +} + +.futuristic-design { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-laptop-large { + grid-column: 1 / 4; + } + + &__photo { + @include on-laptop-large { + margin-bottom: 33px; + } + } + + &__title { + @include on-laptop-large { + margin-bottom: 52px; + } + } +} + +.tweeter-speaker-system { + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-laptop-large { + grid-column: 4 / 7; + } + + &__photo { + @include on-tablet { + width: 46px; + height: 40px; + } + + @include on-laptop-large { + margin-bottom: 33px; + } + } + + &__title { + @include on-laptop-large { + margin-bottom: 24px; + } + } +} + +.multiroom-system { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-laptop-large { + grid-column: 7 / 10; + } + + &__photo { + @include on-tablet { + width: 46px; + height: 37px; + } + + @include on-laptop-large { + margin-bottom: 36px; + } + } + + &__title { + @include on-laptop-large { + margin-bottom: 52px; + } + } +} + +.intuitive-lighting-system { + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-laptop-large { + grid-column: 10 / -1; + } + + &__photo { + @include on-tablet { + width: 44px; + height: 44px; + } + + @include on-laptop-large { + margin-bottom: 30px; + } + } + + &__title { + @include on-laptop-large { + margin-bottom: 24px; + } + } +} diff --git a/src/styles/blocks/features-laptop.scss b/src/styles/blocks/features-laptop.scss new file mode 100644 index 000000000..0fb0f0c5a --- /dev/null +++ b/src/styles/blocks/features-laptop.scss @@ -0,0 +1,49 @@ +.features-laptop { + &__container { + position: relative; + + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 56px 30px; + + margin-inline: -20px; + padding-block: 60px; + + background-color: #d6ecec; + } + + &__info:nth-child(1) { + grid-column: 2 / 6; + } + + &__info:nth-child(2) { + grid-column: 2 / 6; + } + + &__info:nth-child(3) { + grid-column: 7 / 10; + grid-row: 1; + } + + &__info-title { + margin: 0; + + font-size: 34px; + font-weight: 700; + line-height: 42px; + color: #0c797a; + text-transform: uppercase; + } + + &__photo { + position: absolute; + right: 0; + bottom: 0; + } + + &__title { + font-size: 56px; + line-height: 70px; + } +} diff --git a/src/styles/blocks/features-tablet.scss b/src/styles/blocks/features-tablet.scss new file mode 100644 index 000000000..383e2eaef --- /dev/null +++ b/src/styles/blocks/features-tablet.scss @@ -0,0 +1,118 @@ +.features-tablet { + &__title { + margin: 0; + margin-bottom: 32px; + } + + &__container { + display: flex; + flex-direction: column; + + padding: 30px; + padding-bottom: 0; + + background-color: #d6ecec; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + } + } + + &__info { + margin-bottom: 50px; + + @include on-tablet { + grid-column: 2 / 5; + } + + &-title { + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: #0c797a; + text-transform: uppercase; + } + } + + &__list { + padding-left: 20px; + } + + &__item { + margin-bottom: 10px; + } + + &__slider { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &-arrows { + display: flex; + margin-bottom: 10px; + } + &-arrow { + &-left { + cursor: pointer; + + width: 48px; + height: 14px; + + background-image: url(../images/features-arrow-left.png); + background-position: center; + background-size: cover; + } + &-right { + cursor: pointer; + + width: 48px; + height: 14px; + + background-image: url(../images/features-arrow-normal.png); + background-position: center; + background-size: cover; + + transition: background-image 0.3s; + + &:hover { + background-image: url(../images/features-arrow-right.png); + } + } + } + + &-numbers { + grid-column: 2 / 4; + } + + &-number { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #bdbdbd; + } + + &-slash { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #bdbdbd; + } + } + + &__photo { + width: 435px; + height: 226px; + } + + &-tablet__bottom { + display: flex; + } + + &__bottom { + display: flex; + grid-column: 2 / -1; + justify-content: space-between; + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..b955b0283 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,103 @@ +.features { + &__title { + margin: 0; + margin-bottom: 32px; + } + + &__container { + display: flex; + flex-direction: column; + align-items: center; + + margin-inline: -20px; + padding: 30px; + padding-bottom: 0; + + background-color: #d6ecec; + } + + &__info { + margin-bottom: 50px; + &-title { + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: #0c797a; + text-transform: uppercase; + } + } + + &__list { + padding-left: 20px; + } + + &__item { + margin-bottom: 10px; + } + + &__slider { + display: flex; + flex-direction: column; + align-items: center; + + &-arrows { + display: flex; + margin-bottom: 10px; + } + &-arrow { + &-left { + cursor: pointer; + + width: 48px; + height: 14px; + + background-image: url(../images/features-arrow-left.png); + background-position: center; + background-size: cover; + } + &-right { + cursor: pointer; + + width: 48px; + height: 14px; + + background-image: url(../images/features-arrow-normal.png); + background-position: center; + background-size: cover; + + transition: background-image 0.3s; + + &:hover { + background-image: url(../images/features-arrow-right.png); + } + } + } + + &-numbers { + grid-column: 2 / 4; + } + + &-number { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #bdbdbd; + } + + &-slash { + font-size: 11px; + font-weight: 400; + line-height: 100%; + color: #bdbdbd; + } + } + + &__photo { + width: 320px; + height: 174px; + } + + &-tablet__bottom { + display: flex; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..7882f4145 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,46 @@ +.footer { + position: relative; + &__logo { + width: 184px; + height: 30px; + margin-bottom: 60px; + } + + &__arrow { + position: absolute; + top: 0; + right: 50px; + + width: 24px; + height: 30px; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + } + + &__icones { + display: flex; + gap: 47px; + } + + &__icone { + cursor: pointer; + width: 24px; + height: 24px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__bottom { + font-size: 14px; + line-height: 21px; + color: #bdbdbd; + text-align: center; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..e69f68aa9 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,13 @@ +.header { + padding-top: 25px; + &__content { + display: flex; + flex-direction: column; + } + + &__bottom { + display: flex; + flex-direction: column; + gap: 110px; + } +} diff --git a/src/styles/blocks/luna-eye.scss b/src/styles/blocks/luna-eye.scss new file mode 100644 index 000000000..abfe11c4d --- /dev/null +++ b/src/styles/blocks/luna-eye.scss @@ -0,0 +1,73 @@ +.luna-eye-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + + &__title { + margin: 0; + margin-bottom: 30px; + + font-size: 36px; + font-weight: 700; + line-height: 46px; + text-transform: uppercase; + } + + &__photo { + grid-column: 5 / -1; + width: calc(100% + 20px); + height: 417px; + object-fit: cover; + } + + &__info { + grid-column: 1 / 5; + } + + &__description { + margin-bottom: 60px; + font-size: 16px; + line-height: 24px; + color: #7c7c7c; + } + + &__button { + cursor: pointer; + + position: relative; + + margin: 0; + padding: 0; + border: none; + + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: #0db2b3; + text-transform: uppercase; + + background-color: #f7f7f7; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + + display: block; + + width: 42%; + height: 1px; + + background-color: #0db2b3; + + transition: width 0.3s; + } + + &:hover { + &::after { + width: 100%; + } + } + } +} diff --git a/src/styles/blocks/main-block.scss b/src/styles/blocks/main-block.scss new file mode 100644 index 000000000..bb3c207d4 --- /dev/null +++ b/src/styles/blocks/main-block.scss @@ -0,0 +1,11 @@ +.main { + margin-top: 110px; + margin-bottom: 110px; + + &__content { + display: flex; + flex-direction: column; + gap: 110px; + margin-inline: 20px; + } +} diff --git a/src/styles/blocks/meetluna.scss b/src/styles/blocks/meetluna.scss new file mode 100644 index 000000000..6b8d6bfce --- /dev/null +++ b/src/styles/blocks/meetluna.scss @@ -0,0 +1,12 @@ +.meetluna { + display: flex; + align-items: center; + justify-content: center; + + &__photo { + width: 100%; + max-width: 846px; + height: auto; + max-height: 520px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..03940584a --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,107 @@ +.menu { + box-sizing: border-box; + height: 100vh; + padding-inline: 30px; + background-color: #f9f9f9; + + @include on-laptop-large { + max-width: 1194px; + margin: 0 auto; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 64px; + } + + &-close { + width: 24px; + height: 24px; + + background-image: url(../images/crazybaby-close.png); + background-position: center; + background-size: cover; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + } + + &__items { + display: flex; + flex-direction: column; + gap: 50px; + } + + &__nav { + &-list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &-link { + position: relative; + color: $c-gray; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-black; + + transition: transform 0.3s; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &__specs { + display: flex; + gap: 20px; + align-items: center; + } + + &__button { + position: fixed; + bottom: 30px; + + box-sizing: border-box; + width: calc(100vw - 60px); + height: 48px; + padding: 0; + border: none; + + color: #fff; + text-align: center; + text-transform: uppercase; + + background-color: $c-gray; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..1b4978669 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,49 @@ +.page { + scroll-behavior: smooth; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray; + + background-color: #f7f7f7; + + &__body { + min-width: 320px; + max-width: 1194px; + margin: 0 auto; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + overflow: auto; + + padding-top: 25px; + + @include on-tablet { + padding-top: 35px; + } + + opacity: 0; + + transition: all 0.5s; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..5551a23c6 --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,120 @@ +.questions { + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + } + + @include on-laptop-large { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } + + &__title { + font-size: 30px; + line-height: 40px; + + @include on-tablet { + grid-column: 1 / 5; + margin: 0; + font-size: 36px; + line-height: 46px; + } + + @include on-laptop-large { + grid-column: 1 / 7; + font-size: 56px; + line-height: 70px; + } + } + + &__form { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-laptop-large { + grid-column: 7 / -1; + } + } + + &__email { + height: 48px; + margin-bottom: 20px; + padding: 12px 20px; + border: 1px solid #828282; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + + &::placeholder { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #bdbdbd; + } + + &:focus { + border-color: #0c797a; + outline: none; + } + } + + &__message { + resize: none; + + height: 128px; + margin-bottom: 30px; + padding: 12px 20px; + border: 1px solid #828282; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 24px; + + @include on-tablet { + height: 201px; + } + + &::placeholder { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #bdbdbd; + } + + &:focus { + border-color: #0c797a; + outline: none; + } + } + + &__button { + cursor: pointer; + + width: 102px; + height: 40px; + padding: 0; + border: none; + + color: #fff; + text-align: center; + text-transform: uppercase; + + background-color: #0db2b3; + + transition: background-color 0.3s; + + &:hover { + background-color: #0c797a; + } + } +} diff --git a/src/styles/blocks/testimonilas.scss b/src/styles/blocks/testimonilas.scss new file mode 100644 index 000000000..26937bef8 --- /dev/null +++ b/src/styles/blocks/testimonilas.scss @@ -0,0 +1,75 @@ +.testimonilas { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + + @include on-laptop-large { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + justify-items: center; + } + + &__background { + position: absolute; + top: 0; + width: 208px; + height: 171px; + } + + &__description { + margin-top: 50px; + margin-bottom: 30px; + + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + + @include on-tablet { + font-size: 24px; + font-weight: 700; + line-height: 36px; + } + + @include on-laptop-large { + grid-column: 3 / 11; + } + } + + &__avatar { + width: 62px; + height: 62px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + + @include on-laptop-large { + grid-column: 6 / 8; + } + } + + &__name { + font-size: 16px; + font-weight: 700; + line-height: 22px; + + @include on-laptop-large { + grid-column: 6 / 8; + } + } + + &__post { + margin: 0; + font-size: 14px; + font-weight: 400; + line-height: 21px; + + @include on-laptop-large { + grid-column: 6 / 8; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..d41c4bbc8 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,53 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-inline: 30px; + + &__logo { + height: 26px; + } + + &__menu { + display: block; + + width: 24px; + height: 24px; + + background-image: url(../images/crazybaby-burger-menu.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__specs { + display: flex; + gap: 30px; + align-items: center; + } + + &__button { + cursor: pointer; + + width: 100px; + height: 48px; + border: none; + + color: #fff; + text-align: center; + + background-color: $c-gray; + + transition: background-color 0.3s; + + &:hover { + background-color: $c-black; + } + } +} diff --git a/src/styles/blocks/wireless-speaker.scss b/src/styles/blocks/wireless-speaker.scss new file mode 100644 index 000000000..cadfffe79 --- /dev/null +++ b/src/styles/blocks/wireless-speaker.scss @@ -0,0 +1,80 @@ +.wireless-speaker-mobile { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + padding-inline: 30px; + + &__photo { + width: 100%; + height: auto; + margin-bottom: 40px; + } + + &__title { + margin-top: 0; + margin-bottom: 20px; + + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; + } +} + +.wireless-speaker-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + + margin-top: 130px; + padding-inline: 35px; + + @include on-laptop { + margin-top: 90px; + } + + @include on-laptop { + grid-template-columns: repeat(10, 1fr); + column-gap: 25px; + } + + &__photo { + grid-column: 5 / -1; + + width: 420px; + height: 317px; + + object-fit: cover; + object-position: center; + + @include on-laptop { + width: 560px; + height: 420px; + } + } + + &__info { + @include on-laptop { + padding-top: 70px; + } + + grid-column: 1 / 5; + } + + &__title { + margin-top: 0; + margin-bottom: 20px; + + font-size: 46px; + font-weight: 700; + line-height: 62px; + text-transform: uppercase; + } + + &__description { + font-size: 16px; + line-height: 24px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..7e4c08358 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'globals'; -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/wireless-speaker'; +@import 'blocks/features-highlight'; +@import 'blocks/main-block'; +@import 'blocks/meetluna'; +@import 'blocks/designed-for-future'; +@import 'blocks/luna-eye'; +@import 'blocks/testimonilas'; +@import 'blocks/features'; +@import 'blocks/features-tablet'; +@import 'blocks/features-laptop'; +@import 'blocks/questions'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..317174a78 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,17 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-laptop { + @media (min-width: $laptop-min-width) { + @content; + } +} + +@mixin on-laptop-large { + @media (min-width: $laptop-large-min-width) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..9867a71f5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,5 @@ -$c-gray: #eee; +$c-gray: #333; +$c-black: #131313; +$tablet-min-width: 768px; +$laptop-min-width: 987px; +$laptop-large-min-width: 1440px;