diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 1558091fd..5f762af15 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,6 @@ backstop_data dist .cache .parcel-cache + +# map css files +src/styles/main.css.map diff --git a/README.md b/README.md index a95e97afe..bf77e5af3 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://O1ympus.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/package-lock.json b/package-lock.json index 05ac51229..a7e4e51e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", + "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 83c8373ca..c5bdf7be2 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 000000000..bc809f94c --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/director.jpg b/src/images/director.jpg new file mode 100644 index 000000000..eb2417d92 Binary files /dev/null and b/src/images/director.jpg differ diff --git a/src/images/extra-feature.png b/src/images/extra-feature.png new file mode 100644 index 000000000..40b8079b5 Binary files /dev/null and b/src/images/extra-feature.png differ diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..73cdd9f4a --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/feature--1.svg b/src/images/feature--1.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/feature--1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/feature--2.svg b/src/images/feature--2.svg new file mode 100644 index 000000000..a7fb58ccf --- /dev/null +++ b/src/images/feature--2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/feature--3.svg b/src/images/feature--3.svg new file mode 100644 index 000000000..17a465966 --- /dev/null +++ b/src/images/feature--3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/feature--4.svg b/src/images/feature--4.svg new file mode 100644 index 000000000..edd7753bb --- /dev/null +++ b/src/images/feature--4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/future-design.jpg b/src/images/future-design.jpg new file mode 100644 index 000000000..fcbd801d1 Binary files /dev/null and b/src/images/future-design.jpg differ diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 000000000..2f3d9a323 --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,3 @@ + + + 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/luna-eye.jpg b/src/images/luna-eye.jpg new file mode 100644 index 000000000..1270fa368 Binary files /dev/null and b/src/images/luna-eye.jpg differ diff --git a/src/images/meet-luna.jpg b/src/images/meet-luna.jpg new file mode 100644 index 000000000..1faa668da Binary files /dev/null and b/src/images/meet-luna.jpg differ diff --git a/src/images/pagination-left.svg b/src/images/pagination-left.svg new file mode 100644 index 000000000..9a39a0030 --- /dev/null +++ b/src/images/pagination-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/pagination-right.svg b/src/images/pagination-right.svg new file mode 100644 index 000000000..19613dbd2 --- /dev/null +++ b/src/images/pagination-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/quotes.png b/src/images/quotes.png new file mode 100644 index 000000000..03986a7fb Binary files /dev/null and b/src/images/quotes.png differ diff --git a/src/images/speaker.png b/src/images/speaker.png new file mode 100644 index 000000000..8c0ade625 Binary files /dev/null and b/src/images/speaker.png differ diff --git a/src/images/twitter.svg b/src/images/twitter.svg new file mode 100644 index 000000000..aa6ba3d84 --- /dev/null +++ b/src/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..81ee57b88 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,539 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + CrazyBaby - -

Hello Mate Academy

+ +
+ + +
+
+
+
+

+ 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

+

+ 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

+

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

+
+
+ + + +

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

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

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

+
+
+
+
+
+
+

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

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

+
+ director +

Garrett Martin

+ Creative Director +
+ quotes +
+
+

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 from Last Song Stopped + +
    • +
+
+
+ + luna-gadget +
+
+
+

DO YOU HAVE ANY QUESTIONS?

+
+ + + +
+
+
+
+ + +
+ + + + + +
+
+ © 2019 All rights reserved. Terms of Use & Privacy Policy +
+
diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..a573a2c38 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,66 @@ 'use strict'; + +const innerList = document.querySelector('.header__inner-list'); + +const leftPaginationSwitch = document + .querySelector('.pagination__switch--1'); +const rightPaginationSwitch = document + .querySelector('.pagination__switch--2'); + +const currentPaginationPage = document + .querySelector('.pagination__number--1'); +const maxPaginationPage = document + .querySelector('.pagination__number--2'); + +const productCharacteristics = document + .querySelector('.additional-features__characteristics'); +const characteristicsWidth = 260; + + +const burgerMenu = document.querySelector('.header__burger-menu'); +const menu = document.querySelector('.site-navigation'); +const body = document.body; + +burgerMenu.addEventListener('click', () => { + menu.classList.toggle('site-navigation--active'); + innerList.classList.toggle('header__inner-list--active'); + + body.classList.toggle('no-scroll'); + + burgerMenu.classList.toggle('header__burger-menu--active'); +}); + +function changePaginationNumber(bool) { + const currentPage = +currentPaginationPage.textContent.slice(1) + + (bool ? 1 : -1); + + if (currentPage < 10) { + currentPaginationPage.textContent = '0' + currentPage; + } else { + currentPaginationPage.textContent = currentPage; + } +} + + +leftPaginationSwitch.addEventListener('click', () => { + if (currentPaginationPage.textContent !== '01') { + productCharacteristics.scrollBy({ + left: -characteristicsWidth, + behavior: 'smooth', + }) + + changePaginationNumber(false); + } +}); + +rightPaginationSwitch.addEventListener('click', () => { + if (currentPaginationPage.textContent !== maxPaginationPage.textContent) { + productCharacteristics.scrollBy({ + left: characteristicsWidth, + behavior: 'smooth', + }) + + changePaginationNumber(true); + } +}); + diff --git a/src/styles/components/_additional-features.scss b/src/styles/components/_additional-features.scss new file mode 100644 index 000000000..50b8c7e3a --- /dev/null +++ b/src/styles/components/_additional-features.scss @@ -0,0 +1,218 @@ +.additional-features { + margin-bottom: 170px; + padding: 0 123px; + + &__title { + color: $dark; + font-size: 56px; + line-height: 70px; + font-weight: 700; + margin-bottom: 30px; + } + + &__inner { + background-color: #d6ecec; + padding: 60px 306px 60px 102px; + position: relative; + } + + &__inner-img { + width: calc(100% * 540 / 1200); + height: auto; + position: absolute; + right: 46px; + bottom: 0; + } + + &__characteristics { + display: grid; + grid-template-columns: repeat(2, 378px); + grid-template-rows: repeat(2, 1fr); + gap: 56px 132px; + } +} + +.extra-feature { + &__title { + color: #0c797a; + font-size: 34px; + line-height: 42px; + font-weight: 700; + margin-bottom: 30px; + } + + &__item { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: $dark; + list-style-position: inside; + } + + &__item:not(:last-of-type) { + margin-bottom: 10px; + } +} + +.pagination { + display: none; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .additional-features { + margin-bottom: 140px; + padding: 0 34px; + box-sizing: border-box; + + &__title { + font-size: 30px; + line-height: 40px; + } + + &__inner { + padding: 60px 0 123px 90px; + + &-img { + right: 7px; + width: 57%; + } + } + + &__characteristics { + display: flex; + gap: 0; + overflow: hidden; + width: 260px; + } + } + + .extra-feature { + width: 100%; + flex-shrink: 0; + + &__title { + font-size: 18px; + line-height: 22px; + margin-bottom: 20px; + } + + &__item { + font-size: 14px; + line-height: 21px; + } + } + + .pagination { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 120px; + padding-top: 50px; + + &__switches { + margin-bottom: 8px; + } + + &__number { + font-weight: 400; + } + + &__number--1 { + font-size: 16px; + line-height: 24px; + + &::after { + content: '/'; + color: #0c797a; + margin-left: 3px; + } + } + + &__number--2 { + font-size: 11px; + color: #0c797a; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .additional-features { + margin-bottom: 90px; + padding: 0; + position: relative; + + &__title { + font-size: 30px; + line-height: 40px; + padding: 0 30px; + } + + &__inner { + padding: 35px 30px 0; + + &-img { + position: relative; + right: auto; + width: 100vw; + left: -30px; + } + } + + &__characteristics { + display: flex; + gap: 0; + overflow: hidden; + width: 260px; + } + } + + .extra-feature { + width: 100%; + flex-shrink: 0; + + &__title { + font-size: 18px; + line-height: 22px; + margin-bottom: 20px; + } + + &__item { + font-size: 14px; + line-height: 21px; + } + } + + .pagination { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 120px; + padding-top: 50px; + + &__switches { + margin-bottom: 8px; + } + + &__number { + font-weight: 400; + } + + &__number--1 { + font-size: 16px; + line-height: 24px; + + &::after { + content: '/'; + color: #0c797a; + margin-left: 3px; + } + } + + &__number--2 { + font-size: 11px; + color: #0c797a; + } + } +} diff --git a/src/styles/components/_articles.scss b/src/styles/components/_articles.scss new file mode 100644 index 000000000..9a9898119 --- /dev/null +++ b/src/styles/components/_articles.scss @@ -0,0 +1,156 @@ +.articles { + margin-bottom: 170px; + padding: 0 123px; +} + +.article { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto 1fr; + gap: 30px; + width: auto; + + &__info { + width: 100%; + } + + &__title { + font-weight: 700; + font-size: 56px; + line-height: 70px; + grid-area: title; + text-transform: uppercase; + } + + &__text { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-bottom: 60px; + color: #7c7c7c; + } + + &__link { + color: #0db2b3; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + line-height: 14px; + position: relative; + + &::after { + content: ''; + position: absolute; + width: 64.6px; + height: 1px; + background-color: #0db2b3; + bottom: -5px; + left: 0; + } + } + + &__visual { + height: 388px; + grid-area: visual; + } +} + +.article--1 { + margin-bottom: 170px; + grid-template-areas: + 'visual title' + 'visual info'; + + .article__visual { + background: url('../images/future-design.jpg') center/cover no-repeat; + } +} + +.article--2 { + grid-template-areas: + 'title visual' + 'info visual'; + + .article__visual { + background: url('../images/luna-eye.jpg') center/cover no-repeat; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .articles { + width: 100%; + padding: 0; + margin-bottom: 140px; + } + + .article { + &__title { + font-size: 36px; + line-height: 46px; + margin-bottom: 0; + } + + &__visual { + height: auto; + aspect-ratio: 374 / 415; + } + + &__info { + grid-area: info; + } + } + + .article--1 { + margin-left: -34px; + padding: 0 34px 0 0; + } + + .article--2 { + margin-right: 0; + padding: 0 0 0 34px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .articles { + width: 100%; + padding: 0; + margin-bottom: 160px; + } + + .article { + display: flex; + gap: 20px; + width: auto; + flex-direction: column; + padding: 0 30px; + + &__title { + font-size: 30px; + line-height: 40px; + order: 1; + width: 100%; + margin-bottom: 0; + } + + &__visual { + height: auto; + aspect-ratio: 374 / 415; + order: 2; + width: 100%; + } + + &__info { + order: 3; + width: 100%; + } + + &__text { + margin-bottom: 30px; + } + } + + .article--1 { + margin-bottom: 110px; + } +} diff --git a/src/styles/components/_director.scss b/src/styles/components/_director.scss new file mode 100644 index 000000000..f90691d7d --- /dev/null +++ b/src/styles/components/_director.scss @@ -0,0 +1,72 @@ +.director { + padding: 0 123px; + max-width: 786px; + margin: 0 auto 170px; + text-align: center; + position: relative; + + &__message { + font-size: 24px; + line-height: 36px; + font-weight: 700; + color: $dark; + margin-bottom: 30px; + } + + &__image { + margin-bottom: 20px; + width: 62px; + height: 62px; + border-radius: 50%; + } + + &__name { + margin-bottom: 5px; + font-weight: 700; + color: $dark; + font-size: 16px; + line-height: 22px; + } + + &__pos { + color: #7c7c7c; + font-size: 14px; + line-height: 31px; + font-weight: 400; + } +} + +.quotes { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: -1; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .director { + padding: 0 34px; + margin-bottom: 140px; + } + + .quotes { + top: -55px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .director { + padding: 0 30px; + margin-bottom: 110px; + + &__message { + font-size: 14px; + line-height: 20px; + } + } + + .quotes { + top: -55px; + } +} diff --git a/src/styles/components/_features.scss b/src/styles/components/_features.scss new file mode 100644 index 000000000..5b6a3afd9 --- /dev/null +++ b/src/styles/components/_features.scss @@ -0,0 +1,125 @@ +.features { + padding: 0 123px; + display: flex; + align-items: start; + justify-content: center; + gap: 30px; + margin-bottom: 170px; +} + +.feature { + text-align: center; + width: 276px; + + &__image { + width: 70px; + height: 50px; + margin-bottom: 30px; + } + + &__title { + font-weight: 700; + font-size: 22px; + line-height: 28px; + color: $dark; + margin-bottom: 24px; + text-transform: uppercase; + height: 56px; + } + + &__text { + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: #7c7c7c; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .features { + padding: 0 34px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 65px 20px; + margin-bottom: 140px; + } + + .feature { + width: auto; + + &__image { + margin-bottom: 45px; + } + + &__title { + margin-bottom: 20px; + height: auto; + } + } + + .feature--1 .feature__image { + width: 50px; + height: 40px; + } + + .feature--2 .feature__image { + width: 46px; + height: 40px; + } + + .feature--3 .feature__image { + width: 46px; + height: 37px; + } + + .feature--4 .feature__image { + width: 44px; + height: 44px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .features { + padding: 0 30px; + margin-bottom: 110px; + } + + .feature { + width: auto; + + &__image { + margin-bottom: 40px; + } + + &__title { + margin-bottom: 20px; + height: auto; + } + } + + .feature--2, + .feature--3, + .feature--4 { + display: none; + } + + .feature--1 .feature__image { + width: 50px; + height: 40px; + } + + .feature--2 .feature__image { + width: 46px; + height: 40px; + } + + .feature--3 .feature__image { + width: 46px; + height: 37px; + } + + .feature--4 .feature__image { + width: 44px; + height: 44px; + } +} diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss new file mode 100644 index 000000000..0944a7582 --- /dev/null +++ b/src/styles/components/_footer.scss @@ -0,0 +1,87 @@ +.footer { + padding: 0 123px 30px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: relative; + + &__logo { + background: url('../images/logo.svg') center/cover no-repeat; + width: 161px; + height: 26px; + margin-bottom: 60px; + } + + &__up { + position: absolute; + right: 125px; + top: 0; + width: 24px; + height: 20px; + background: url('../images/arrow-up.svg') center/contain no-repeat; + } + + &__socials { + margin-bottom: 60px; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + } + + &__copyrights { + color: #bdbdbd; + font-weight: 400; + font-size: 14px; + line-height: 21px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .footer { + padding: 0 34px 30px; + + &__up { + right: 50px; + } + + &__socials { + gap: 50px; + } + } + + .facebook, + .twitter, + .instagram { + width: 24px; + height: 24px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .footer { + padding: 0 30px 20px; + + &__logo, + &__up { + display: none; + } + + &__socials { + gap: 40px; + margin-bottom: 30px; + } + + &__copyrights { + text-align: center; + } + } + + .facebook, + .twitter, + .instagram { + width: 24px; + height: 24px; + } +} diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss new file mode 100644 index 000000000..7f9f419e1 --- /dev/null +++ b/src/styles/components/_header.scss @@ -0,0 +1,201 @@ +.header { + padding: 40px 123px 0; + height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 90px; + + &__logo { + width: 161px; + height: 26.2px; + } + + &__list, + &__inner-list { + display: flex; + align-items: center; + gap: 47px; + position: relative; + } + + &__item { + list-style: none; + } + + &__item:first-of-type { + font-weight: 400; + line-height: 20px; + font-size: 14px; + + .header__link { + color: #4f4f4f; + } + } + + &__item:nth-of-type(2) { + font-weight: 400; + line-height: 20px; + font-size: 14px; + color: $dark; + } + + &__en { + color: $dark; + } + + &__ua { + color: #bdbdbd; + } + + &__item:nth-of-type(3) { + background-color: $dark; + width: 102px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + } + + &__item:nth-of-type(3) .header__link { + color: white; + font-weight: 700; + line-height: 14px; + font-size: 12px; + } + + &__burger-menu { + display: none; + align-items: center; + flex-direction: column; + justify-content: center; + gap: 4px; + width: 24px; + height: 16px; + + span { + transition: transform 0.3s ease; + background-color: #292929; + border-radius: 2px; + height: 2.5px; + } + } + + &__burger-menu--active { + span:nth-of-type(2) { + display: none; + } + + span:first-of-type { + transform-origin: center center; + transform: rotate(-45deg) translateY(4.5px); + } + + span:last-of-type { + transform-origin: center center; + transform: rotate(45deg) translateY(-4.5px); + } + } + + &__burger-menu-part { + background-color: white; + height: 2px; + width: 25px; + display: block; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .header { + padding: 40px 34px 0; + margin-bottom: 80px; + + &__burger-menu { + display: flex; + } + } + + .speaker { + padding: 0 34px; + align-items: end; + position: relative; + margin-bottom: 140px; + overflow: hidden; + justify-content: center; + + &__info { + width: 40%; + max-width: none; + } + + &__title { + font-size: 48px; + line-height: 62px; + } + + &__text { + max-width: 80%; + } + + &__visual { + aspect-ratio: 816 / 464; + height: auto; + max-width: 700px; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .header { + padding: 25px 30px 0; + margin-bottom: 60px; + + &__list { + position: static; + } + + &__inner-list { + height: 0; + position: absolute; + display: grid; + grid-template-areas: + 'specs language' + 'buy buy'; + gap: 162px 20px; + grid-template-columns: min-content auto; + top: 300px; + left: 30px; + overflow: hidden; + width: calc(100vw - 60px); + z-index: 20; + transition: height 0.3s ease; + } + + &__inner-list--active { + height: auto; + } + + &__item:nth-of-type(3) { + display: flex; + align-items: center; + justify-content: center; + grid-area: buy; + width: 100%; + text-align: center; + } + + &__burger-menu:last-of-type { + display: flex; + } + } + + .specs { + grid-area: specs; + display: block; + } + + .language { + grid-area: language; + display: block; + } +} diff --git a/src/styles/components/_meet-luna.scss b/src/styles/components/_meet-luna.scss new file mode 100644 index 000000000..d030d3562 --- /dev/null +++ b/src/styles/components/_meet-luna.scss @@ -0,0 +1,26 @@ +.meet-luna { + padding: 0 123px; + margin: 0 auto 170px; + width: 846px; + height: 520px; + background: url('../images/meet-luna.jpg') center/cover no-repeat; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .meet-luna { + width: 100%; + height: auto; + margin: 0 0 140px; + aspect-ratio: 700 / 430; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .meet-luna { + width: 100%; + height: auto; + margin: 0 0 110px; + padding: 0 12px; + aspect-ratio: 700 / 430; + } +} diff --git a/src/styles/components/_questions.scss b/src/styles/components/_questions.scss new file mode 100644 index 000000000..7410525ef --- /dev/null +++ b/src/styles/components/_questions.scss @@ -0,0 +1,103 @@ +.questions { + padding: 0 123px; + margin-bottom: 170px; + display: flex; + align-items: start; + justify-content: center; + gap: 70px; + + &__title { + color: $dark; + font-weight: 700; + font-size: 56px; + line-height: 70px; + width: calc(50% - 15px); + } +} + +.form { + width: calc(50% - 15px); + + &__email, + &__textarea { + width: 100%; + border: 1px solid #828282; + outline: none; + color: #bdbdbd; + font-size: 16px; + line-height: 24px; + font-weight: 400; + box-sizing: border-box; + background-color: transparent; + + &::placeholder { + color: #bdbdbd; + } + } + + &__email { + padding: 12px 36px; + margin-bottom: 19px; + } + + &__textarea { + padding: 16px 36px; + margin-bottom: 30px; + height: 128px; + } + + &__submit { + color: white; + padding: 17px 42px; + background-color: #0db2b3; + text-transform: uppercase; + border: none; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .questions { + padding: 0 34px; + margin-bottom: 140px; + gap: 20px; + + &__title { + font-size: 36px; + line-height: 46px; + } + } + + .form { + &__textarea { + min-height: 200px; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .questions { + padding: 0 34px; + margin-bottom: 110px; + flex-direction: column; + gap: 27px; + + &__title { + font-size: 30px; + line-height: 40px; + width: 100%; + } + } + + .form { + width: 100%; + + &__email { + width: 100%; + } + + &__textarea { + min-height: 200px; + width: 100%; + } + } +} diff --git a/src/styles/components/_site-navigation.scss b/src/styles/components/_site-navigation.scss new file mode 100644 index 000000000..07fc4396a --- /dev/null +++ b/src/styles/components/_site-navigation.scss @@ -0,0 +1,88 @@ +.site-navigation { + margin-bottom: 90px; + padding: 0 123px; + + &__list { + display: flex; + align-items: center; + justify-content: center; + gap: 84px; + } + + &__item { + list-style: none; + } + + &__item .site-navigation__link { + font-size: 14px; + line-height: 20px; + } + + &__item:first-of-type .site-navigation__link { + color: #131313; + font-weight: 700; + } + + &__item:not(:first-of-type) .site-navigation__link { + color: $dark; + font-weight: 400; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .site-navigation { + position: absolute; + top: 100px; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; + background-color: #f9f9f9; + padding: 50px 34px 0; + + &__list { + flex-direction: column; + gap: 40px; + align-items: start; + } + } + + .site-navigation__link { + font-size: 22px !important; + line-height: 28px !important; + } + + .site-navigation--active { + height: 100%; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .site-navigation { + position: absolute; + top: 100px; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; + background-color: #f9f9f9; + padding: 20px 30px 0; + + &__list { + flex-direction: column; + gap: 25px; + align-items: start; + } + } + + .site-navigation__link { + font-size: 14px !important; + line-height: 20px !important; + } + + .site-navigation--active { + height: 100%; + } +} diff --git a/src/styles/components/_speaker.scss b/src/styles/components/_speaker.scss new file mode 100644 index 000000000..43d0d8636 --- /dev/null +++ b/src/styles/components/_speaker.scss @@ -0,0 +1,85 @@ +@import '../utils'; + +.speaker { + padding: 0 123px; + display: flex; + align-items: end; + justify-content: center; + margin-bottom: 170px; + + &__info { + max-width: 378px; + } + + &__title { + font-weight: 700; + font-size: 62px; + line-height: 78px; + padding-bottom: 30px; + text-transform: uppercase; + } + + &__text { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: $dark; + max-width: 276px; + } + + &__visual { + background: url('../images/speaker.png') center left/cover no-repeat; + width: 816px; + height: 464px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .speaker { + padding: 0 34px; + + &__title { + font-size: 48px; + line-height: 62px; + } + + &__visual { + width: 430px; + height: 317px; + } + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .speaker { + padding: 0 30px; + align-items: end; + position: relative; + margin-bottom: 110px; + overflow: hidden; + justify-content: center; + flex-direction: column-reverse; + gap: 40px; + + &__info { + width: calc(100vw - 60px); + max-width: none; + text-align: center; + } + + &__title { + font-size: 40px; + line-height: 52px; + } + + &__text { + max-width: none; + } + + &__visual { + aspect-ratio: 320 / 245; + height: auto; + width: 100%; + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..26d87db66 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1259 @@ +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +code, +del, +dfn, +em, +img, +q, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + box-sizing: border-box; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +:root { + font-family: Inter, sans-serif; + scroll-behavior: smooth; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; + background: #f7f7f7; +} + +a { + text-decoration: none; + color: black; +} + +.no-scroll { + overflow: hidden; + max-height: 100vh; +} + +.header { + padding: 40px 123px 0; + height: 48px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 90px; +} + +.header__logo { + width: 161px; + height: 26.2px; +} + +.header__list, +.header__inner-list { + display: flex; + align-items: center; + gap: 47px; + position: relative; +} + +.header__item { + list-style: none; +} + +.header__item:first-of-type { + font-weight: 400; + line-height: 20px; + font-size: 14px; +} + +.header__item:first-of-type .header__link { + color: #4f4f4f; +} + +.header__item:nth-of-type(2) { + font-weight: 400; + line-height: 20px; + font-size: 14px; + color: #333; +} + +.header__en { + color: #333; +} + +.header__ua { + color: #bdbdbd; +} + +.header__item:nth-of-type(3) { + background-color: #333; + width: 102px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; +} + +.header__item:nth-of-type(3) .header__link { + color: white; + font-weight: 700; + line-height: 14px; + font-size: 12px; +} + +.header__burger-menu { + display: none; + align-items: center; + flex-direction: column; + justify-content: center; + gap: 4px; + width: 24px; + height: 16px; +} + +.header__burger-menu span { + transition: transform 0.3s ease; + background-color: #292929; + border-radius: 2px; + height: 2.5px; +} + +.header__burger-menu--active span:nth-of-type(2) { + display: none; +} + +.header__burger-menu--active span:first-of-type { + transform-origin: center center; + transform: rotate(-45deg) translateY(4.5px); +} + +.header__burger-menu--active span:last-of-type { + transform-origin: center center; + transform: rotate(45deg) translateY(-4.5px); +} + +.header__burger-menu-part { + background-color: white; + height: 2px; + width: 25px; + display: block; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .header { + padding: 40px 34px 0; + margin-bottom: 80px; + } + + .header__burger-menu { + display: flex; + } + + .speaker { + padding: 0 34px; + align-items: end; + position: relative; + margin-bottom: 140px; + overflow: hidden; + justify-content: center; + } + + .speaker__info { + width: 40%; + max-width: none; + } + + .speaker__title { + font-size: 48px; + line-height: 62px; + } + + .speaker__text { + max-width: 80%; + } + + .speaker__visual { + aspect-ratio: 816/464; + height: auto; + max-width: 700px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .header { + padding: 25px 30px 0; + margin-bottom: 60px; + } + + .header__list { + position: static; + } + + .header__inner-list { + height: 0; + position: absolute; + display: grid; + grid-template-areas: 'specs language' 'buy buy'; + gap: 162px 20px; + grid-template-columns: min-content auto; + top: 300px; + left: 30px; + overflow: hidden; + width: calc(100vw - 60px); + z-index: 20; + transition: height 0.3s ease; + } + + .header__inner-list--active { + height: auto; + } + + .header__item:nth-of-type(3) { + display: flex; + align-items: center; + justify-content: center; + grid-area: buy; + width: 100%; + text-align: center; + } + + .header__burger-menu:last-of-type { + display: flex; + } + + .specs { + grid-area: specs; + display: block; + } + + .language { + grid-area: language; + display: block; + } +} + +.speaker { + padding: 0 123px; + display: flex; + align-items: end; + justify-content: center; + margin-bottom: 170px; +} + +.speaker__info { + max-width: 378px; +} + +.speaker__title { + font-weight: 700; + font-size: 62px; + line-height: 78px; + padding-bottom: 30px; + text-transform: uppercase; +} + +.speaker__text { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #333; + max-width: 276px; +} + +.speaker__visual { + background: url('../images/speaker.png') center left/cover no-repeat; + width: 816px; + height: 464px; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .speaker { + padding: 0 34px; + } + + .speaker__title { + font-size: 48px; + line-height: 62px; + } + + .speaker__visual { + width: 430px; + height: 317px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .speaker { + padding: 0 30px; + align-items: end; + position: relative; + margin-bottom: 110px; + overflow: hidden; + justify-content: center; + flex-direction: column-reverse; + gap: 40px; + } + + .speaker__info { + width: calc(100vw - 60px); + max-width: none; + text-align: center; + } + + .speaker__title { + font-size: 40px; + line-height: 52px; + } + + .speaker__text { + max-width: none; + } + + .speaker__visual { + aspect-ratio: 320/245; + height: auto; + width: 100%; + } +} + +.site-navigation { + margin-bottom: 90px; + padding: 0 123px; +} + +.site-navigation__list { + display: flex; + align-items: center; + justify-content: center; + gap: 84px; +} + +.site-navigation__item { + list-style: none; +} + +.site-navigation__item .site-navigation__link { + font-size: 14px; + line-height: 20px; +} + +.site-navigation__item:first-of-type .site-navigation__link { + color: #131313; + font-weight: 700; +} + +.site-navigation__item:not(:first-of-type) .site-navigation__link { + color: #333; + font-weight: 400; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .site-navigation { + position: absolute; + top: 100px; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; + background-color: #f9f9f9; + padding: 50px 34px 0; + } + + .site-navigation__list { + flex-direction: column; + gap: 40px; + align-items: start; + } + + .site-navigation__link { + font-size: 22px !important; + line-height: 28px !important; + } + + .site-navigation--active { + height: 100%; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .site-navigation { + position: absolute; + top: 100px; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; + background-color: #f9f9f9; + padding: 20px 30px 0; + } + + .site-navigation__list { + flex-direction: column; + gap: 25px; + align-items: start; + } + + .site-navigation__link { + font-size: 14px !important; + line-height: 20px !important; + } + + .site-navigation--active { + height: 100%; + } +} + +.features { + padding: 0 123px; + display: flex; + align-items: start; + justify-content: center; + gap: 30px; + margin-bottom: 170px; +} + +.feature { + text-align: center; + width: 276px; +} + +.feature__image { + width: 70px; + height: 50px; + margin-bottom: 30px; +} + +.feature__title { + font-weight: 700; + font-size: 22px; + line-height: 28px; + color: #333; + margin-bottom: 24px; + text-transform: uppercase; + height: 56px; +} + +.feature__text { + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: #7c7c7c; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .features { + padding: 0 34px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 65px 20px; + margin-bottom: 140px; + } + + .feature { + width: auto; + } + + .feature__image { + margin-bottom: 45px; + } + + .feature__title { + margin-bottom: 20px; + height: auto; + } + + .feature--1 .feature__image { + width: 50px; + height: 40px; + } + + .feature--2 .feature__image { + width: 46px; + height: 40px; + } + + .feature--3 .feature__image { + width: 46px; + height: 37px; + } + + .feature--4 .feature__image { + width: 44px; + height: 44px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .features { + padding: 0 30px; + margin-bottom: 110px; + } + + .feature { + width: auto; + } + + .feature__image { + margin-bottom: 40px; + } + + .feature__title { + margin-bottom: 20px; + height: auto; + } + + .feature--2, + .feature--3, + .feature--4 { + display: none; + } + + .feature--1 .feature__image { + width: 50px; + height: 40px; + } + + .feature--2 .feature__image { + width: 46px; + height: 40px; + } + + .feature--3 .feature__image { + width: 46px; + height: 37px; + } + + .feature--4 .feature__image { + width: 44px; + height: 44px; + } +} + +.meet-luna { + padding: 0 123px; + margin: 0 auto 170px; + width: 846px; + height: 520px; + background: url('../images/meet-luna.jpg') center/cover no-repeat; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .meet-luna { + width: 100%; + height: auto; + margin: 0 0 140px; + aspect-ratio: 700/430; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .meet-luna { + width: 100%; + height: auto; + margin: 0 0 110px; + padding: 0 12px; + aspect-ratio: 700/430; + } +} + +.articles { + margin-bottom: 170px; + padding: 0 123px; +} + +.article { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto 1fr; + gap: 30px; + width: auto; +} + +.article__info { + width: 100%; +} + +.article__title { + font-weight: 700; + font-size: 56px; + line-height: 70px; + grid-area: title; + text-transform: uppercase; +} + +.article__text { + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin-bottom: 60px; + color: #7c7c7c; +} + +.article__link { + color: #0db2b3; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + line-height: 14px; + position: relative; +} + +.article__link::after { + content: ''; + position: absolute; + width: 64.6px; + height: 1px; + background-color: #0db2b3; + bottom: -5px; + left: 0; +} + +.article__visual { + height: 388px; + grid-area: visual; +} + +.article--1 { + margin-bottom: 170px; + grid-template-areas: 'visual title' 'visual info'; +} + +.article--1 .article__visual { + background: url('../images/future-design.jpg') center/cover no-repeat; +} + +.article--2 { + grid-template-areas: 'title visual' 'info visual'; +} + +.article--2 .article__visual { + background: url('../images/luna-eye.jpg') center/cover no-repeat; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .articles { + width: 100%; + padding: 0; + margin-bottom: 140px; + } + + .article__title { + font-size: 36px; + line-height: 46px; + margin-bottom: 0; + } + + .article__visual { + height: auto; + aspect-ratio: 374/415; + } + + .article__info { + grid-area: info; + } + + .article--1 { + margin-left: -34px; + padding: 0 34px 0 0; + } + + .article--2 { + margin-right: 0; + padding: 0 0 0 34px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .articles { + width: 100%; + padding: 0; + margin-bottom: 160px; + } + + .article { + display: flex; + gap: 20px; + width: auto; + flex-direction: column; + padding: 0 30px; + } + + .article__title { + font-size: 30px; + line-height: 40px; + order: 1; + width: 100%; + margin-bottom: 0; + } + + .article__visual { + height: auto; + aspect-ratio: 374/415; + order: 2; + width: 100%; + } + + .article__info { + order: 3; + width: 100%; + } + + .article__text { + margin-bottom: 30px; + } + + .article--1 { + margin-bottom: 110px; + } +} + +.director { + padding: 0 123px; + max-width: 786px; + margin: 0 auto 170px; + text-align: center; + position: relative; +} + +.director__message { + font-size: 24px; + line-height: 36px; + font-weight: 700; + color: #333; + margin-bottom: 30px; +} + +.director__image { + margin-bottom: 20px; + width: 62px; + height: 62px; + border-radius: 50%; +} + +.director__name { + margin-bottom: 5px; + font-weight: 700; + color: #333; + font-size: 16px; + line-height: 22px; +} + +.director__pos { + color: #7c7c7c; + font-size: 14px; + line-height: 31px; + font-weight: 400; +} + +.quotes { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: -1; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .director { + padding: 0 34px; + margin-bottom: 140px; + } + + .quotes { + top: -55px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .director { + padding: 0 30px; + margin-bottom: 110px; + } + + .director__message { + font-size: 14px; + line-height: 20px; + } + + .quotes { + top: -55px; + } +} + +.additional-features { + margin-bottom: 170px; + padding: 0 123px; +} + +.additional-features__title { + color: #333; + font-size: 56px; + line-height: 70px; + font-weight: 700; + margin-bottom: 30px; +} + +.additional-features__inner { + background-color: #d6ecec; + padding: 60px 306px 60px 102px; + position: relative; +} + +.additional-features__inner-img { + width: 45%; + height: auto; + position: absolute; + right: 46px; + bottom: 0; +} + +.additional-features__characteristics { + display: grid; + grid-template-columns: repeat(2, 378px); + grid-template-rows: repeat(2, 1fr); + gap: 56px 132px; +} + +.extra-feature__title { + color: #0c797a; + font-size: 34px; + line-height: 42px; + font-weight: 700; + margin-bottom: 30px; +} + +.extra-feature__item { + font-size: 16px; + line-height: 24px; + font-weight: 400; + color: #333; + list-style-position: inside; +} + +.extra-feature__item:not(:last-of-type) { + margin-bottom: 10px; +} + +.pagination { + display: none; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .additional-features { + margin-bottom: 140px; + padding: 0 34px; + box-sizing: border-box; + } + + .additional-features__title { + font-size: 30px; + line-height: 40px; + } + + .additional-features__inner { + padding: 60px 0 123px 90px; + } + + .additional-features__inner-img { + right: 7px; + width: 57%; + } + + .additional-features__characteristics { + display: flex; + gap: 0; + overflow: hidden; + width: 260px; + } + + .extra-feature { + width: 100%; + flex-shrink: 0; + } + + .extra-feature__title { + font-size: 18px; + line-height: 22px; + margin-bottom: 20px; + } + + .extra-feature__item { + font-size: 14px; + line-height: 21px; + } + + .pagination { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 120px; + padding-top: 50px; + } + + .pagination__switches { + margin-bottom: 8px; + } + + .pagination__number { + font-weight: 400; + } + + .pagination__number--1 { + font-size: 16px; + line-height: 24px; + } + + .pagination__number--1::after { + content: '/'; + color: #0c797a; + margin-left: 3px; + } + + .pagination__number--2 { + font-size: 11px; + color: #0c797a; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .additional-features { + margin-bottom: 90px; + padding: 0; + position: relative; + } + + .additional-features__title { + font-size: 30px; + line-height: 40px; + padding: 0 30px; + } + + .additional-features__inner { + padding: 35px 30px 0; + } + + .additional-features__inner-img { + position: relative; + right: auto; + width: 100vw; + left: -30px; + } + + .additional-features__characteristics { + display: flex; + gap: 0; + overflow: hidden; + width: 260px; + } + + .extra-feature { + width: 100%; + flex-shrink: 0; + } + + .extra-feature__title { + font-size: 18px; + line-height: 22px; + margin-bottom: 20px; + } + + .extra-feature__item { + font-size: 14px; + line-height: 21px; + } + + .pagination { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 120px; + padding-top: 50px; + } + + .pagination__switches { + margin-bottom: 8px; + } + + .pagination__number { + font-weight: 400; + } + + .pagination__number--1 { + font-size: 16px; + line-height: 24px; + } + + .pagination__number--1::after { + content: '/'; + color: #0c797a; + margin-left: 3px; + } + + .pagination__number--2 { + font-size: 11px; + color: #0c797a; + } +} + +.questions { + padding: 0 123px; + margin-bottom: 170px; + display: flex; + align-items: start; + justify-content: center; + gap: 70px; +} + +.questions__title { + color: #333; + font-weight: 700; + font-size: 56px; + line-height: 70px; + width: calc(50% - 15px); +} + +.form { + width: calc(50% - 15px); +} + +.form__email, +.form__textarea { + width: 100%; + border: 1px solid #828282; + outline: none; + color: #bdbdbd; + font-size: 16px; + line-height: 24px; + font-weight: 400; + box-sizing: border-box; + background-color: transparent; +} + +.form__email::placeholder, +.form__textarea::placeholder { + color: #bdbdbd; +} + +.form__email { + padding: 12px 36px; + margin-bottom: 19px; +} + +.form__textarea { + padding: 16px 36px; + margin-bottom: 30px; + height: 128px; +} + +.form__submit { + color: white; + padding: 17px 42px; + background-color: #0db2b3; + text-transform: uppercase; + border: none; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .questions { + padding: 0 34px; + margin-bottom: 140px; + gap: 20px; + } + + .questions__title { + font-size: 36px; + line-height: 46px; + } + + .form__textarea { + min-height: 200px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .questions { + padding: 0 34px; + margin-bottom: 110px; + flex-direction: column; + gap: 27px; + } + + .questions__title { + font-size: 30px; + line-height: 40px; + width: 100%; + } + + .form { + width: 100%; + } + + .form__email { + width: 100%; + } + + .form__textarea { + min-height: 200px; + width: 100%; + } +} + +.footer { + padding: 0 123px 30px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: relative; +} + +.footer__logo { + background: url('../images/logo.svg') center/cover no-repeat; + width: 161px; + height: 26px; + margin-bottom: 60px; +} + +.footer__up { + position: absolute; + right: 125px; + top: 0; + width: 24px; + height: 20px; + background: url('../images/arrow-up.svg') center/contain no-repeat; +} + +.footer__socials { + margin-bottom: 60px; + display: flex; + align-items: center; + justify-content: center; + gap: 40px; +} + +.footer__copyrights { + color: #bdbdbd; + font-weight: 400; + font-size: 14px; + line-height: 21px; +} + +@media screen and (min-width: 768px) and (max-width: 1439px) { + .footer { + padding: 0 34px 30px; + } + + .footer__up { + right: 50px; + } + + .footer__socials { + gap: 50px; + } + + .facebook, + .twitter, + .instagram { + width: 24px; + height: 24px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .footer { + padding: 0 30px 20px; + } + + .footer__logo, + .footer__up { + display: none; + } + + .footer__socials { + gap: 40px; + margin-bottom: 30px; + } + + .footer__copyrights { + text-align: center; + } + + .facebook, + .twitter, + .instagram { + width: 24px; + height: 24px; + } +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .main { + overflow: hidden; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..a55be476a --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/_extends.scss","_fonts.scss","reset.scss","utils/_vars.scss","components/_header.scss","components/_speaker.scss","components/_site-navigation.scss","components/_features.scss","components/_meet-luna.scss","components/_articles.scss","components/_director.scss","components/_additional-features.scss","components/_questions.scss","components/_footer.scss","main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA;EACA;;ADJF;EACE;EACA;;;AEAF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EA2CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA,YCzEO;;;AD4ET;EACE;EACA;;;AAGF;EACE;EACA;;;AEnFF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA,ODtCG;;ACyCL;EACE,OD1CG;;AC6CL;EACE;;AAGF;EACE,kBDlDG;ECmDH;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAKF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;;AAKN;EACE;IACE;IACA;;EAEA;IACE;;EAGF;IACE;IACA;IACA;IACA,qBACE;IAEF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;;AJtMJ;EACE;EACA;;;AKAF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OFxBG;EEyBH;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;IACE;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;;AAKN;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;;ACjFN;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE,OHzBG;EG0BH;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;;;ACrFJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OJtBG;EIuBH;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;EAIJ;AAAA;AAAA;IAGE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AC1HJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;;;ACvBJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA,qBACE;;AAGF;EACE;;;AAIJ;EACE,qBACE;;AAGF;EACE;;;AAIJ;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAIJ;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;EAIJ;IACE;;;ACzJJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,OPVG;EOWH;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OPxBG;EOyBH;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;;EAEA;IACE;IACA;;EAIJ;IACE;;;ACrEJ;EACE;EACA;;AAEA;EACE,ORJG;EQKH;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,OR9CG;EQ+CH;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;IACE;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;;EAEA;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;IACA;;;AAKN;EACE;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;;EAEA;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;IACA;IACA;;EAIJ;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;IACA;;;ACtNN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OTRG;ESSH;EACA;EACA;EACA;;;AAIJ;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;IACA;IACA;;EAEA;IACE;IACA;;EAKF;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAIJ;IACE;;EAEA;IACE;;EAGF;IACE;IACA;;;ACnGN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAEA;IACE;;EAGF;IACE;;EAIJ;AAAA;AAAA;IAGE;IACA;;;AAIJ;EACE;IACE;;EAEA;IAEE;;EAGF;IACE;IACA;;EAGF;IACE;;EAIJ;AAAA;AAAA;IAGE;IACA;;;ACrEJ;EACE;IACE","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..03618b295 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,20 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'reset'; +@import 'components/header'; +@import 'components/speaker'; +@import 'components/site-navigation'; +@import 'components/features'; +@import 'components/meet-luna'; +@import 'components/articles'; +@import 'components/director'; +@import 'components/additional-features'; +@import 'components/questions'; +@import 'components/footer'; -body { - background: $c-gray; +@media screen and (min-width: 320px) and (max-width: 767px) { + .main { + overflow: hidden; + } } diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 000000000..1b19c2734 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,85 @@ +@import 'utils'; + +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +code, +del, +dfn, +em, +img, +q, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: inherit; + font-style: inherit; + font-size: 100%; + font-family: inherit; + box-sizing: border-box; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +:root { + font-family: Inter, sans-serif; + scroll-behavior: smooth; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; + background: $c-gray; +} + +a { + text-decoration: none; + color: black; +} + +.no-scroll { + overflow: hidden; + max-height: 100vh; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..72b6b452e 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,2 @@ -$c-gray: #eee; +$c-gray: #f7f7f7; +$dark: #333;