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/README.md b/README.md index a95e97afe..175dafaef 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://notbelievable.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..8150f0df6 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,415 @@ - + - Title + Kicstarter + + + + - -

Hello Mate Academy

- + +
+ + + + +
+ + specs-icon + + + + lang-icon + + + + buy-icon + + + +
+
+ +
+
+
+ +
+

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

+
+
+ +
+
+ +
+ +
+ Vector1-img +

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

+
+ +
+ Vector2-img +

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

+
+ +
+ Vector3-img +

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

+
+ +
+ Vector4-img +

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

+
+ +
+ +
+ presentation1-img +
+ +
+
+

DESIGNED FOR THE FUTURE

+ about-us-img + +

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

+ about-us-img + +

+ 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.” +
+ +
+ photo +
Garrett Martin
+

Creative Director

+
+
+
+ +
+

FEATURES

+ +
+
+

Sound & Music

+
    +
  • +

    Feel-in-chest Base Power

    +
    • +
  • +

    Lossless Digital Audio Transmission

    +
    • +
  • +

    Easy & Stable Stereo Pairing

    +
    • +
  • +

    Crisp and Clear High Frequency Sound

    +
    • +
  • +

    Streams from Cloud Music and Local Library

    +
    • +
  • +

    Auto Music Playback from Last Song Stopped

    +
    • +
+
+ +
+

App Features

+
    +
  • +

    Customize Music Schedule

    +
    • +
  • +

    Wake Up with Favorite Songs

    +
    • +
  • +

    Home Detection Auto Wake Up

    +
    • +
  • +

    Color Wheel

    +
    • +
+
+ +
+

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

    +
    • +
+
+
+ features1 + features2 +
+
+ +
+ +
+

DO YOU HAVE ANY QUESTIONS?

+ +
+ + + + + + + +
+
+ + + + + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..aaa6d39c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "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 19d2ac56e..cd8f44768 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/1_original.png b/src/images/1_original.png new file mode 100644 index 000000000..b96c360c5 Binary files /dev/null and b/src/images/1_original.png differ diff --git a/src/images/2_original.png b/src/images/2_original.png new file mode 100644 index 000000000..45ffa1fef Binary files /dev/null and b/src/images/2_original.png differ diff --git a/src/images/Buy.png b/src/images/Buy.png new file mode 100644 index 000000000..4147736ca Binary files /dev/null and b/src/images/Buy.png differ diff --git a/src/images/Ellipse 3.png b/src/images/Ellipse 3.png new file mode 100644 index 000000000..b67cdc1ae Binary files /dev/null and b/src/images/Ellipse 3.png differ diff --git a/src/images/Group 14.png b/src/images/Group 14.png new file mode 100644 index 000000000..981e9b6a6 Binary files /dev/null and b/src/images/Group 14.png differ diff --git a/src/images/Language.png b/src/images/Language.png new file mode 100644 index 000000000..ecdd3b379 Binary files /dev/null and b/src/images/Language.png differ diff --git a/src/images/SPECS.png b/src/images/SPECS.png new file mode 100644 index 000000000..1d7b4d11e Binary files /dev/null and b/src/images/SPECS.png differ diff --git a/src/images/Vector1.png b/src/images/Vector1.png new file mode 100644 index 000000000..6e7073ba7 Binary files /dev/null and b/src/images/Vector1.png differ diff --git a/src/images/Vector2.png b/src/images/Vector2.png new file mode 100644 index 000000000..9f0199f95 Binary files /dev/null and b/src/images/Vector2.png differ diff --git a/src/images/Vector3.png b/src/images/Vector3.png new file mode 100644 index 000000000..178634a3d Binary files /dev/null and b/src/images/Vector3.png differ diff --git a/src/images/Vector4.png b/src/images/Vector4.png new file mode 100644 index 000000000..f062ebe7b Binary files /dev/null and b/src/images/Vector4.png differ diff --git a/src/images/Vector5.png b/src/images/Vector5.png new file mode 100644 index 000000000..d6a1d9853 Binary files /dev/null and b/src/images/Vector5.png differ diff --git a/src/images/ab1.png b/src/images/ab1.png new file mode 100644 index 000000000..6617518e1 Binary files /dev/null and b/src/images/ab1.png differ diff --git a/src/images/ab2.png b/src/images/ab2.png new file mode 100644 index 000000000..bc03b807a Binary files /dev/null and b/src/images/ab2.png differ diff --git a/src/images/facebook.png b/src/images/facebook.png new file mode 100644 index 000000000..df38715b1 Binary files /dev/null and b/src/images/facebook.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..ab6f20d09 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/features1.png b/src/images/features1.png new file mode 100644 index 000000000..9a890cde0 Binary files /dev/null and b/src/images/features1.png differ diff --git a/src/images/features2.png b/src/images/features2.png new file mode 100644 index 000000000..e0cd9a34f Binary files /dev/null and b/src/images/features2.png differ diff --git a/src/images/image 9.png b/src/images/image 9.png new file mode 100644 index 000000000..05a8baff5 Binary files /dev/null and b/src/images/image 9.png differ diff --git a/src/images/inst.png b/src/images/inst.png new file mode 100644 index 000000000..dc5c30abd Binary files /dev/null and b/src/images/inst.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..471087e83 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/menu-burger.png b/src/images/menu-burger.png new file mode 100644 index 000000000..f4fde8552 Binary files /dev/null and b/src/images/menu-burger.png differ diff --git a/src/images/menu-close.png b/src/images/menu-close.png new file mode 100644 index 000000000..beed3079b Binary files /dev/null and b/src/images/menu-close.png differ diff --git a/src/images/photo.png b/src/images/photo.png new file mode 100644 index 000000000..cb10cc53c Binary files /dev/null and b/src/images/photo.png differ diff --git a/src/images/presentation1.png b/src/images/presentation1.png new file mode 100644 index 000000000..158fc74ac Binary files /dev/null and b/src/images/presentation1.png differ diff --git a/src/images/testimonilas.png b/src/images/testimonilas.png new file mode 100644 index 000000000..71b86de88 Binary files /dev/null and b/src/images/testimonilas.png differ diff --git a/src/images/twitter.png b/src/images/twitter.png new file mode 100644 index 000000000..0f1e49ae1 Binary files /dev/null and b/src/images/twitter.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..7896d7fad 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,59 @@ 'use strict'; + +const asideMenu = document.querySelector('.aside'); +const btnMenu = document.querySelector('.top-bar__menu-btn'); +const btnClose = document.querySelector('.aside__menu-btn'); + +if (asideMenu && btnMenu && btnClose) { + btnMenu.addEventListener('click', () => { + asideMenu.classList.add('is-open'); + document.body.style.overflow = 'hidden'; + }); + + btnClose.addEventListener('click', () => { + asideMenu.classList.remove('is-open'); + document.body.style.overflow = ''; + }); +} + +const qustionsForm = document.querySelector('.questions-form'); + +qustionsForm.addEventListener('submit', function(e) { + e.preventDefault(); + this.reset(); +}); + +const linksMenu = document.querySelectorAll('.aside__nav-link'); + +linksMenu.forEach(link => { + link.addEventListener('click', function(e) { + e.preventDefault(); + + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + + if (targetElement) { + asideMenu.classList.remove('is-open'); + document.body.style.overflow = ''; + + targetElement.scrollIntoView ({ + behavior: 'smooth', + block: 'start' + }); + } + }); +}); + +const mediaQ = window.matchMedia('(min-width: 1280px)'); + +function minWidth(e) { + if (e.matches) { + if (asideMenu.classList.contains('is-open')) { + asideMenu.classList.remove('is-open'); + document.body.style.overflow = ''; + } + } +} + +mediaQ.addEventListener('change', minWidth); +minWidth(mediaQ); 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/_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 deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/about-us.scss b/src/styles/about-us.scss new file mode 100644 index 000000000..3b07bfd4a --- /dev/null +++ b/src/styles/about-us.scss @@ -0,0 +1,203 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.about-us { + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 110px; + + @include padd-inl; + @include tablet { + @include grid; + + padding: 0; + } + + @include desktop { + @include padd-inl; + } + + &__item { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-self: flex-start; + gap: 20px; + + @include tablet { + @include grid; + + margin-bottom: 110px; + padding-right: 34px; + grid-column: span 8; + } + + @include desktop { + grid-column: span 12; + padding: 0; + margin-bottom: 140px; + grid-auto-rows: min-content; + } + } + + &__title { + @include font(30px, null, 40px, 700); + @include tablet { + grid-column: 5 / span 3; + font-size: 36px; + line-height: 46px; + } + + @include desktop { + @include font(56px, null, 70px); + + grid-column: 7 / span 6; + } + + margin: 0; + text-transform: uppercase; + + &--style { + font-size: 36px; + + @include desktop { + @include font(56px, null, 70px); + } + } + } + + &__text { + margin: 0; + color: $c-gray; + + @include tablet { + font-size: 16px; + line-height: 24px; + grid-column: 5 / span 4; + } + + @include desktop { + grid-column: 7 / span 6; + + @include hover-t; + } + } + + &__img { + display: block; + width: 100%; + height: 210px; + object-fit: cover; + + @include tablet { + height: 100%; + grid-column: 1 / span 4; + grid-row: 1 / span 2; + } + + @include desktop { + grid-column: 1 / span 6; + max-height: 388px; + } + } + + &__link { + position: relative; + text-decoration: none; + color: $c-green; + font-size: 12px; + line-height: 14px; + text-transform: uppercase; + font-weight: 700; + padding-bottom: 5px; + align-self: start; + + @include hover(1.1); + @include hover-t; + @include tablet { + margin-bottom: 67px; + grid-column: 5 / span 3; + } + + @include desktop { + margin-bottom: 48px; + grid-column: 7 / span 6; + } + + &::after { + content: ''; + position: absolute; + background-color: $c-green; + width: 53px; + bottom: 0; + left: 0; + height: 1px; + transition: all 0.3s ease; + } + + &:hover { + &::after { + width: 100%; + } + } + } + + &__item--2 { + @include tablet { + padding: 0 0 0 34px; + } + + @include desktop { + grid-column: span 12; + padding: 0; + } + } + + &__img--2 { + @include tablet { + grid-column: 5 / span 4; + + @include desktop { + grid-column: 7 / span 6; + } + } + } + + &__link--2 { + @include tablet { + margin-block: 0 133px; + } + } + + &__title--2 { + grid-column: 1 / span 4; + + @include desktop { + grid-column: 1 / span 6; + } + } + + &__span { + display: flex; + flex-direction: column; + gap: 30px; + + @include tablet { + gap: 60px; + grid-column: 5 / 9; + + &--2 { + grid-column: 1 / 5; + } + } + + @include desktop { + grid-column: 7 / 13; + + &--2 { + grid-column: 1 / 7; + } + } + } +} diff --git a/src/styles/aside.scss b/src/styles/aside.scss new file mode 100644 index 000000000..a1eb95ad3 --- /dev/null +++ b/src/styles/aside.scss @@ -0,0 +1,58 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.aside { + box-sizing: border-box; + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background-color: $c-wh2; + transform: translateX(-200%); + transition: all 0.3s ease; + + &.is-open { + transform: translateX(0); + } + + &__menu-btn { + background-image: url(../images/menu-close.png); + background-position: center; + background-size: 16px 16px; + } + + &__nav-link.nav-link { + @include tablet { + @include font(22px, null, 28px); + } + } + + &__box { + display: flex; + align-items: center; + gap: 20px; + padding-top: 50px; + height: 100%; + } + + &__language, + &__specs { + display: block; + + @include tablet { + display: none; + } + } + + &__link-buy { + margin-top: 162px; + width: 100%; + display: flex; + justify-content: center; + + @include tablet { + display: none; + } + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 000000000..9ab4086f1 --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,52 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.html { + scroll-behavior: smooth; + font-family: Inter, sans-serif; + + @include font(14px, $c-black, 21px, 400); +} + +.body { + margin: 0; + background-color: $c-wh1; +} + +.wallpaper { + padding-inline: 12px; + box-sizing: border-box; + display: flex; + justify-content: center; + width: 100%; + height: 100%; + padding-bottom: 110px; + + @include tablet { + @include grid; + @include padd-inl; + + height: 100%; + padding-bottom: 140px; + } + + @include desktop { + padding-bottom: 170px; + } + + &__images { + height: 195px; + width: 100%; + display: block; + object-fit: contain; + + @include tablet { + grid-column: span 8; + height: 100%; + } + + @include desktop { + grid-column: 3 / 12; + } + } +} diff --git a/src/styles/benefits.scss b/src/styles/benefits.scss new file mode 100644 index 000000000..8e61b71a7 --- /dev/null +++ b/src/styles/benefits.scss @@ -0,0 +1,79 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.benefits { + box-sizing: border-box; + width: 100%; + + @include tablet { + @include grid; + @include padd-inl; + + padding-top: 100px; + } + + @include desktop { + padding-top: 60px; + } + + &__images { + height: 245px; + width: 100%; + background-image: url(../images/2_original.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + + @include tablet { + grid-column: 4 / span 5; + grid-row: 1; + height: 100%; + } + + @include desktop { + grid-column: 4 / span 9; + background-image: url(../images/1_original.png); + } + } + + &__item { + @include padd-inl; + + display: flex; + flex-direction: column; + gap: 20px; + padding-top: 40px; + + @include tablet { + grid-column: 1 / span 4; + grid-row: 1; + padding: 0; + } + + &-title { + margin: 0; + text-transform: uppercase; + + @include font(40px, $c-black, 52px, 700); + @include tablet { + font-size: 48px; + line-height: 62px; + } + + @include desktop { + font-size: 62px; + line-height: 78px; + padding-top: 80px; + } + } + + &-text { + margin: 0; + + @include font(16px, $c-black, 24px, 400); + @include tablet { + max-width: 250px; + } + } + } +} diff --git a/src/styles/features.scss b/src/styles/features.scss new file mode 100644 index 000000000..60eef6c34 --- /dev/null +++ b/src/styles/features.scss @@ -0,0 +1,162 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.features { + display: flex; + flex-direction: column; + + @include tablet { + @include padd-inl; + } + + @include desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + + &__grid { + box-sizing: border-box; + grid-column: span 12; + background-color: $c-gr-wh; + padding-block: 60px 0; + + @include grid; + } + } + + &__title { + @include font(30px, null, 40px, 700); + + margin: 0 30px 30px; + + @include tablet { + margin: 0 0 30px; + } + + @include desktop { + grid-column: span 12; + font-size: 56px; + line-height: 70px; + } + } + + &__container { + background-color: $c-gr-wh; + display: flex; + flex-direction: column; + + @include padd-inl; + + &:nth-child(n + 2) { + display: none; + + @include desktop { + display: flex; + } + } + + @include tablet { + padding-inline: 90px; + } + + @include desktop { + padding-inline: 0; + } + } + + &__sound { + @include font(18px, null, 22px, 700); + + margin-block: 30px 20px; + color: $c-green2; + text-transform: uppercase; + + @include tablet { + margin-top: 60px; + } + + @include desktop { + margin-top: 0; + font-size: 34px; + line-height: 42px; + } + } + + &__list { + margin: 0; + display: flex; + flex-direction: column; + padding-left: 16px; + gap: 10px; + + @include tablet { + max-width: 260px; + } + } + + &__function { + margin: 0; + } + + &__img-container { + box-sizing: border-box; + display: flex; + flex-direction: column; + width: 100%; + background-color: $c-gr-wh; + + @include tablet { + flex-direction: row; + padding-inline: 90px 0; + gap: 100px; + } + + @include desktop { + gap: 0; + + grid-column: 7 / 13; + padding: 0; + } + } + + &__img1 { + padding-top: 50px; + height: 47px; + width: 93px; + object-fit: contain; + margin-inline: auto; + + @include tablet { + margin: 0; + } + + @include desktop { + display: none; + } + } + + &__img2 { + width: 100%; + height: 100%; + object-fit: contain; + + @include tablet { + flex-shrink: 1; + min-width: 0; + } + } + + &__container--1 { + grid-row: 2; + grid-column: 2 / span 4; + } + + &__container--3 { + grid-column: 2 / span 4; + grid-row: 1; + } + + &__container--2 { + grid-column: 7 / span 4; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..f45f70e68 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,75 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.footer { + @include padd-inl; + + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + padding-bottom: 30px; + + @include tablet { + gap: 60px; + } + + &__btn-up { + position: absolute; + top: 10px; + right: 44px; + display: none; + + @include tablet { + display: block; + } + + @include desktop { + right: 133px; + } + } + + &__btn-img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; + + @include hover(1.4); + } + + &__socials { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + + @include tablet { + gap: 50px; + } + } + + &__img { + width: 24px; + height: 24px; + object-fit: contain; + border-radius: 25%; + + @include hover-b; + @include hover(1.4); + } + + &__privacy { + text-align: center; + color: $c-gray2; + } + + &__logo { + display: none; + + @include tablet { + display: flex; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..fa13f1d73 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,98 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.top-bar { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding-block: 25px; + + @include padd-inl; + @include tablet { + padding-block: 30px; + } + + &__item { + display: flex; + align-items: center; + gap: 30px; + } +} + +.specs { + position: relative; + display: none; + height: 17px; + width: 45px; + object-fit: contain; + + @include tablet { + display: flex; + } + + @include hover(1.1); +} + +.language { + display: none; + height: 18px; + width: auto; + object-fit: contain; + + @include hover(1.1); + @include tablet { + display: flex; + } +} + +.menu-btn { + display: block; + height: 32px; + width: 32px; + padding: 0; + background-image: url(../images/menu-burger.png); + background-size: 24px 16px; + background-position: center; + background-repeat: no-repeat; + border: none; + background-color: transparent; + cursor: pointer; + + @include hover(1.1); + @include desktop { + display: none; + } +} + +.logo { + display: block; + height: 25px; + width: 161px; + object-fit: contain; + + @include hover(1.1); +} + +.link-buy { + display: none; + align-items: center; + justify-content: center; + height: 48px; + width: 100px; + background-color: $c-black; + + @include hover-b; + @include tablet { + display: flex; + } +} + +.buy { + display: block; + align-items: center; + height: 25px; + width: 25px; + object-fit: contain; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..40fc2d8d0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base'; +@use './header'; +@use './benefits'; +@use './aside'; +@use './presentation'; +@use './about-us'; +@use './testimonilas'; +@use './features'; +@use './questions'; +@use './footer'; +@use './nav'; diff --git a/src/styles/nav.scss b/src/styles/nav.scss new file mode 100644 index 000000000..a6613dcca --- /dev/null +++ b/src/styles/nav.scss @@ -0,0 +1,40 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.nav { + display: flex; + flex-direction: column; + padding-block: 30px 50px; + + @include padd-inl; + + &-list { + display: flex; + flex-direction: column; + gap: 25px; + list-style: none; + margin: 0; + padding: 0; + + @include tablet { + gap: 40px; + } + } + + &-link { + text-decoration: none; + color: $c-black; + line-height: 20px; + + @include hover-t; + } + + &-item { + &:first-child { + .aside__nav-link, + .presentation__nav-link { + font-weight: 700; + } + } + } +} diff --git a/src/styles/presentation.scss b/src/styles/presentation.scss new file mode 100644 index 000000000..76833aa67 --- /dev/null +++ b/src/styles/presentation.scss @@ -0,0 +1,95 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.presentation { + padding-block: 110px; + box-sizing: border-box; + height: 100%; + display: flex; + flex-direction: column; + + @include tablet { + @include grid; + @include padd-inl; + + padding-block: 140px; + } + + @include desktop { + padding-block: 170px; + } + + &__nav.nav { + display: none; + padding: 0; + + @include desktop { + display: flex; + grid-column: span 12; + } + } + + &__nav-list.nav-list { + @include desktop { + @include padd-inl; + + justify-content: center; + gap: 84px; + flex-direction: row; + align-items: center; + padding: 0 0 60px; + } + } + + &__item { + @include padd-inl; + + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + + &:nth-child(n + 3) { + display: none; + + @include tablet { + display: block; + } + } + + @include tablet { + grid-column: span 4; + padding: 0; + } + + @include desktop { + grid-column: span 3; + } + } + + &__img { + margin-inline: auto; + width: 50px; + height: 40px; + display: block; + object-fit: contain; + } + + &__title { + margin: 0; + padding-block: 40px 20px; + + @include font(22px, null, 28px, 700); + } + + &__text { + margin: 0; + color: $c-gray; + + @include hover-t; + } + + &__nav-item { + @include hover(1.1); + } +} diff --git a/src/styles/questions.scss b/src/styles/questions.scss new file mode 100644 index 000000000..c9003da29 --- /dev/null +++ b/src/styles/questions.scss @@ -0,0 +1,109 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.questions { + box-sizing: border-box; + padding-block: 90px; + + @include padd-inl; + @include tablet { + padding-block: 140px; + + @include grid; + } + + @include desktop { + padding-block: 170px; + } + + &-form { + box-sizing: border-box; + display: flex; + flex-direction: column; + + @include tablet { + grid-column: 5 / span 4; + } + + @include desktop { + grid-column: 7 / span 6; + } + + &__input { + box-sizing: border-box; + height: 48px; + width: 100%; + padding: 12px 20px; + margin: 0 0 20px; + border: 1px solid $c-gray3; + background-color: transparent; + outline: none; + font-family: inherit; + + @include font(16px, $c-gray2, 24px); + + &::placeholder { + @include font(16px, $c-gray2, 24px); + } + } + + &__textarea { + box-sizing: border-box; + height: 128px; + width: 100%; + margin-bottom: 30px; + padding: 12px 20px; + border: 1px solid $c-gray3; + background-color: transparent; + resize: none; + outline: none; + font-family: inherit; + + @include font(16px, $c-gray2, 24px); + + &::placeholder { + @include font(16px, $c-gray2, 24px); + } + } + + &__btn { + height: 40px; + width: 102px; + background-color: $c-green; + border: none; + cursor: pointer; + font-family: inherit; + transition: all 0.3s ease; + + @include font(12px, $c-wh1, 14px, 700); + + &:hover { + background-color: $c-green2; + } + + &:active { + @include hover-b; + } + } + } + + &__title { + @include font(30px, null, 40px, 700); + + margin: 0 0 27px; + max-width: 220px; + + @include tablet { + grid-column: span 4; + max-width: 100%; + font-size: 36px; + line-height: 46px; + } + + @include desktop { + grid-column: span 6; + font-size: 56px; + line-height: 70px; + } + } +} diff --git a/src/styles/testimonilas.scss b/src/styles/testimonilas.scss new file mode 100644 index 000000000..740085e02 --- /dev/null +++ b/src/styles/testimonilas.scss @@ -0,0 +1,89 @@ +@use './utils/mixins' as *; +@use './utils/vars' as *; + +.testimonilas { + @include padd-inl; + + padding-block: 110px; + box-sizing: border-box; + + @include tablet { + @include grid; + + padding-block: 30px 140px; + } + + @include desktop { + padding-bottom: 170px; + } + + &__item { + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 30px; + + @include tablet { + grid-column: span 8; + } + + @include desktop { + grid-column: 3 / 11; + } + } + + &__text { + text-align: center; + line-height: 20px; + font-weight: 700; + padding-top: 50px; + background-image: url(../images/testimonilas.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include hover-t; + + @include tablet { + font-size: 24px; + line-height: 36px; + padding-top: 60px; + } + + @include desktop { + padding-block: 42px; + } + } + + &__user { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + margin-inline: auto; + + @include hover(1.1); + } + + &__photo { + width: 62px; + height: 62px; + object-fit: contain; + } + + &__name { + @include font(16px, null, 22px, 700); + + margin: 0; + + @include tablet { + margin-top: 15px; + } + } + + &__post { + color: $c-gray; + margin: 0; + } +} 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..a9942f3d5 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,77 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin font($size: null, $color: null, $line: null, $weight: null) { + @if $size { + font-size: $size; + } + @if $color { + color: $color; + } + @if $line { + line-height: $line; + } + @if $weight { + font-weight: $weight; + } +} + +@mixin padd-inl() { + padding-inline: 30px; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 123px; + } +} + +@mixin tablet() { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop() { + @media (min-width: 1440px) { + @content; + } +} + +@mixin grid() { + display: grid; + + @include tablet { + grid-template-columns: repeat(8, 1fr); + gap: 20px; + } + + @include desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } +} + +@mixin hover($scale) { + transition: all 0.3s ease; + + &:hover { + transform: scale($scale); + } +} + +@mixin hover-b() { + transition: all 0.3s ease; + + &:hover { + background-color: rgba(13, 178, 179, 1); + box-shadow: 0 0 15px rgba(13, 178, 179, 1); + } +} + +@mixin hover-t() { + transition: all 0.3s ease; + &:hover { - #{$_property}: $_toValue; + text-shadow: 0 0 15px rgba(13, 178, 179, 1); } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..35cc3c518 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$c-black: rgba(51, 51, 51, 1); +$c-wh1: rgba(247, 247, 247, 1); +$c-wh2: rgba(249, 249, 249, 1); +$c-gray: rgba(124, 124, 124, 1); +$c-gray2: rgba(189, 189, 189, 1); +$c-gray3: rgba(130, 130, 130, 1); +$c-green: rgba(13, 178, 179, 1); +$c-green2: rgba(12, 121, 122, 1); +$c-gr-wh: rgba(214, 236, 236, 1);