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..2fea747f2 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://wiolip.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 7ff3575da..7a6b5be74 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.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.15.4", "cypress": "^13.13.0", @@ -1560,10 +1560,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", - "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", + "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", "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 7aaf6ef03..9f3cc39c0 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,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.2", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.15.4", "cypress": "^13.13.0", diff --git a/src/fonts/Helvetica.woff b/src/fonts/Helvetica.woff new file mode 100644 index 000000000..0da10e155 Binary files /dev/null and b/src/fonts/Helvetica.woff differ 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/fonts/helvetica-light-587ebe5a59211.woff b/src/fonts/helvetica-light-587ebe5a59211.woff new file mode 100644 index 000000000..5e3db7c8a Binary files /dev/null and b/src/fonts/helvetica-light-587ebe5a59211.woff differ diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg new file mode 100644 index 000000000..8590db151 --- /dev/null +++ b/src/images/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-2.svg b/src/images/Vector-2.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/Vector-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/Vector.svg b/src/images/Vector.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/Vector.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/avatar.jpg b/src/images/avatar.jpg new file mode 100644 index 000000000..8760fdbcc Binary files /dev/null and b/src/images/avatar.jpg differ diff --git a/src/images/favicon2.png b/src/images/favicon2.png new file mode 100644 index 000000000..90e960f76 Binary files /dev/null and b/src/images/favicon2.png differ diff --git a/src/images/features.jpg b/src/images/features.jpg new file mode 100644 index 000000000..e324e16c5 Binary files /dev/null and b/src/images/features.jpg differ diff --git a/src/images/features.png b/src/images/features.png new file mode 100644 index 000000000..189a0adf8 Binary files /dev/null and b/src/images/features.png differ diff --git a/src/images/icon_design.svg b/src/images/icon_design.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icon_design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon_fb.svg b/src/images/icon_fb.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icon_fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon_ig.svg b/src/images/icon_ig.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icon_ig.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon_light.svg b/src/images/icon_light.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icon_light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icon_twitter.svg b/src/images/icon_twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icon_twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon_wifi.svg b/src/images/icon_wifi.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icon_wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/iocn_sound.svg b/src/images/iocn_sound.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/iocn_sound.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/kickstar.jpg b/src/images/kickstar.jpg new file mode 100644 index 000000000..f63fe7847 Binary files /dev/null and b/src/images/kickstar.jpg differ diff --git a/src/images/kickstar_medium.jpg b/src/images/kickstar_medium.jpg new file mode 100644 index 000000000..88b09c4d1 Binary files /dev/null and b/src/images/kickstar_medium.jpg differ diff --git a/src/images/kickstar_small.jpg b/src/images/kickstar_small.jpg new file mode 100644 index 000000000..02a6ff333 Binary files /dev/null and b/src/images/kickstar_small.jpg differ 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/luna_eye_medium.jpg b/src/images/luna_eye_medium.jpg new file mode 100644 index 000000000..9041c6330 Binary files /dev/null and b/src/images/luna_eye_medium.jpg differ diff --git a/src/images/luna_eye_small.jpg b/src/images/luna_eye_small.jpg new file mode 100644 index 000000000..ffc197d90 Binary files /dev/null and b/src/images/luna_eye_small.jpg differ diff --git a/src/images/meet_luna.jpg b/src/images/meet_luna.jpg new file mode 100644 index 000000000..e420bb97e Binary files /dev/null and b/src/images/meet_luna.jpg differ diff --git a/src/images/meet_luna_medium.jpg b/src/images/meet_luna_medium.jpg new file mode 100644 index 000000000..5b32c9daf Binary files /dev/null and b/src/images/meet_luna_medium.jpg differ diff --git a/src/images/meet_luna_small.jpg b/src/images/meet_luna_small.jpg new file mode 100644 index 000000000..e81dc4968 Binary files /dev/null and b/src/images/meet_luna_small.jpg differ diff --git a/src/images/quote.svg b/src/images/quote.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sketch.jpg b/src/images/sketch.jpg new file mode 100644 index 000000000..ea76aaeea Binary files /dev/null and b/src/images/sketch.jpg differ diff --git a/src/images/sketch_medium.jpg b/src/images/sketch_medium.jpg new file mode 100644 index 000000000..61764b811 Binary files /dev/null and b/src/images/sketch_medium.jpg differ diff --git a/src/images/sketch_small.jpg b/src/images/sketch_small.jpg new file mode 100644 index 000000000..a7240385e Binary files /dev/null and b/src/images/sketch_small.jpg differ diff --git a/src/index.html b/src/index.html index 8019b83ec..e70de5802 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,675 @@ content="width=device-width, initial-scale=1.0" /> Title + + + + + + -

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

+ + + + + + + hero image + +
+ + + +
+
+ design + +

Futuristic Design

+

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

+
+ +
+ speaker_system + +

Tweeter Speaker System

+

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

+
+ +
+ multiroom_system + +

Multiroom System

+

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

+
+ +
+ lighting_system + +

Intuitive Lighting System

+

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

+
+
+ +
+ + + + + + meet luna + +
+ +
+
+

Designed for the future

+ +
+ + + + + + hero image + +
+ +

+ 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

+ +
+ + + + + + hero image + +
+ +

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

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

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
    • +
+
+
+ +
+
+
+ + + + +
+
+ + + + +
+
+ +
+ 01 + 03 +
+
+
+
+ +
+

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..21fcbb630 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,88 @@ 'use strict'; + +const fadeUpElements = document.querySelectorAll( + '.fade-up' +); + +const observer = new IntersectionObserver( + (entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('is-visible'); + observer.unobserve(entry.target); + } + }); + }, + { + threshold: 0.3, + } +); + +fadeUpElements.forEach((el) => observer.observe(el)); + + + + + + +document.addEventListener('DOMContentLoaded', () => { + let swiper = null; + + function initSwiper() { + const screenWidth = window.innerWidth; + + if (screenWidth <= 1024 && swiper === null) { + swiper = new Swiper('.features__wrapper', { + slidesPerView: 1, + spaceBetween: 0, + loop: false, + navigation: { + nextEl: '.swiper__button-next', + prevEl: '.swiper__button-prev', + }, + }); + + // eslint-disable-next-line no-inner-declarations + function updatePagination(swiperInstance) { + + const current = document.querySelector('.swiper__pagination--current'); + const total = document.querySelector('.swiper__pagination--total'); + + if (current && total) { + // eslint-disable-next-line max-len + current.textContent = String(swiperInstance.realIndex + 1).padStart(2, '0'); + // eslint-disable-next-line max-len + total.textContent = String(swiperInstance.slides.length).padStart(2, '0'); + } + } + + swiper.on('init slideChange', () => updatePagination(swiper)); + swiper.init(); + } + + if (screenWidth > 1024 && swiper !== null) { + swiper.destroy(true, true); // usuwa slider + swiper = null; + } + } + + + initSwiper(); + window.addEventListener('resize', initSwiper); +}); + + +if (window.innerWidth > 1024 && swiper !== null) { + swiper.destroy(true, true); + swiper = null; + + document.querySelectorAll('.swiper-slide').forEach(slide => { + slide.style.width = ''; + slide.style.flex = ''; + }); + + const wrapper = document.querySelector('.swiper-wrapper'); + if (wrapper) wrapper.style.display = ''; +} + + 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/base/_base.scss b/src/styles/base/_base.scss new file mode 100644 index 000000000..fcb758c99 --- /dev/null +++ b/src/styles/base/_base.scss @@ -0,0 +1,22 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +html { + scroll-behavior: smooth; + box-sizing: border-box; + font-family: Inter, sans-serif; + +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body{ + background-color: $background-color; +} + + diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 000000000..091202e07 --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,136 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + + font: inherit; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss new file mode 100644 index 000000000..c25d3203b --- /dev/null +++ b/src/styles/components/_about.scss @@ -0,0 +1,123 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +body:has(.menu:target) { + overflow: hidden; +} + +.about { + &__wrapper { + @include grid; + } + + &__title { + @extend %heading; + + grid-column: span 4; + font-size: 30px; + line-height: 40px; + + @include fade-up-scroll(0.8s, 0.2s, 30px); + + @include for-tablet { + grid-column: 5/-1; + margin-bottom: 10px; + font-size: 38px; + line-height: 46px; + } + + @include for-desktop { + grid-column: 7/-1; + font-size: 56px; + line-height: 70px; + } + + &--reversed { + @include for-tablet { + grid-column: 1/5; + } + } + } + + &__text { + @extend %p; + + grid-column: span 4; + font-size: 14px; + + @include for-tablet { + grid-column: 5/-1; + align-self: start; + } + + @include for-desktop { + grid-column: 7/-1; + align-self: start; + } + + &--reversed { + @include for-tablet { + grid-column: 1/5; + } + + @include for-desktop { + grid-column: 1/7; + } + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + } + + &__imgbox { + position: relative; + overflow: hidden; + grid-column: span 4; + + @include for-tablet { + grid-column: 1/5; + grid-row: 1/5; + width: 100%; + } + + @include for-desktop { + grid-column: 1/7; + grid-row: 1/5; + width: 100%; + } + + &--reversed { + @include for-tablet { + grid-column: 5/-1; + } + + @include for-desktop { + grid-column: 7/-1; + } + } + + img { + will-change: transform; + + transform-origin: center center; + + display: block; + + width: 100%; + height: 100%; + + object-fit: cover; + + transition: transform 0.6s ease, filter 0.6s ease; + } + + &:hover img{ + transform: scale(1.08); + } + + + + } + + +} diff --git a/src/styles/components/_benefits.scss b/src/styles/components/_benefits.scss new file mode 100644 index 000000000..c48202c2e --- /dev/null +++ b/src/styles/components/_benefits.scss @@ -0,0 +1,79 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.benefits { + @include grid; + + @include for-tablet { + gap: 65px 20px; + } + + @include for-desktop { + gap: 65px 30px; + align-items: stretch; + } + + &__item { + display: flex; + grid-column: span 4; + flex-direction: column; + align-items: center; + + height: 100%; + padding: 10px; + border-radius: 15px; + + text-align: center; + + transition: all 0.3s ease-in-out; + + @include for-desktop { + grid-column: span 3; + } + + &:hover{ + transform: translateY(-5px); + box-shadow: 0 6px 25px 5px rgba(13, 178, 179, 0.3); + } + + &--hidden { + display: none; + + @include for-tablet { + display: flex; + } + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + &:nth-child(1) { transition-delay: 0s; } + &:nth-child(2) { transition-delay: 0.2s; } + &:nth-child(3) { transition-delay: 0.4s; } + &:nth-child(4) { transition-delay: 0.6s; } + + + + } + + &__img { + width: 50px; + height: 40px; + margin-bottom: 40px; + color: $icon-color; + } + + &__title { + @extend %heading; + + min-height: 56px; + margin-bottom: 20px; + font-size: 22px; + line-height: 28px; + } + + &__text { + @extend %p; + + text-align: center; + } +} diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss new file mode 100644 index 000000000..640ec46df --- /dev/null +++ b/src/styles/components/_button.scss @@ -0,0 +1,95 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; + +.button { + cursor: pointer; + + border: none; + + font-family: Inter, sans-serif; + font-size: 12px; + line-height: 48px; + color: #fff; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + background-color: $primary-color; + + @include hover(background-color, $primary-color-dark); + + &:disabled { + cursor: not-allowed; + background-color: $disabled-color; + } + + &--secondary { + position: relative; + + grid-column: span 3; + + width: 127px; + padding: 0 0 5px; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: $accent-color; + text-transform: uppercase; + + background-color: transparent; + + @include for-tablet { + grid-column: 5/-1; + } + + @include for-tablet { + grid-column: 7/-1; + } + + @include hover(background-color, transparent); + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 53; + height: 1px; + + background-color: $accent-color; + } + + &:hover::after { + width: 100%; + } + + &--reversed { + @include for-tablet { + grid-column: 1/5; + } + + @include for-desktop { + grid-column: 1/7; + } + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + } + + &--form { + display: inline-block; + + width: 102px; + height: 40px; + + line-height: 40px; + + background-color: $accent-color; + + @include hover(background-color, $accent-color-dark); + } +} diff --git a/src/styles/components/_contact.scss b/src/styles/components/_contact.scss new file mode 100644 index 000000000..9f794835b --- /dev/null +++ b/src/styles/components/_contact.scss @@ -0,0 +1,32 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.contact { + @include grid; + + &__title { + @extend %heading; + + grid-column: span 4; + margin-bottom: 7px; + font-size: 30px; + line-height: 40px; + + @include fade-up-scroll(0.8s, 0.2s, 30px); + + @include for-tablet { + grid-column: 1/5; + grid-row: 1/2; + font-size: 36px; + line-height: 46px; + } + + @include for-desktop { + grid-column: 1/7; + grid-row: 1/2; + font-size: 56px; + line-height: 70px; + } + } +} diff --git a/src/styles/components/_features.scss b/src/styles/components/_features.scss new file mode 100644 index 000000000..26eed30ca --- /dev/null +++ b/src/styles/components/_features.scss @@ -0,0 +1,105 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.features { + + &__title { + @extend %heading; + + margin-bottom: 32px; + padding: 0 30px; + font-size: 30px; + line-height: 40px; + + @include for-tablet{ + padding: 0; + } + + @include for-desktop{ + font-size: 56px; + line-height: 70px; + + } + } + + &__wrapper { + min-height: 555px; + + background-color: $accent-bg-color; + background-image: url('../images/features.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + + @include for-tablet{ + background-position: bottom right; + background-size: 435px auto; + } + + @include for-desktop{ + min-height: 100%; + background-size: 543px auto; + } + } + + &__article{ + @extend %p; + + max-width: 100%; + + + + } + + + &__subtitle { + @extend %heading; + + margin-bottom: 20px; + + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: $accent-color-dark; + + @include for-desktop{ + font-size: 34px; + line-height: 42px; + } + } + + + &__list { + display: block; + + width: 260px; + padding-left: 10px; + + list-style: disc; + list-style-position: outside; + + + @include for-desktop{ + width: 378px; + } + + + } + + &__item { + margin-bottom: 10px; + font-size: 14px; + line-height: 21px; + color: $primary-color; + + + + + } + + + + + +} diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss new file mode 100644 index 000000000..8ee687a08 --- /dev/null +++ b/src/styles/components/_form.scss @@ -0,0 +1,68 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.form{ + display: flex; + grid-column: span 4; + flex-direction: column; + gap: 20px; + justify-content: center; + + @include for-tablet{ + grid-column: -5/-1; + grid-row: 1/2; + } + + @include for-desktop{ + grid-column: 7/-1; + grid-row: 1/2; + } + + + &__label { + &:not(:focus, :active) { + @include visually-hidden; + } + } + + &__input { + @extend %p; + + width: 100%; + height: 48px; + padding-left: 20px; + border: 1px solid $form-border-color; + + line-height: 48px; + + background-color: $background-color; + + &::placeholder { + @extend %p; + } + + + } + + &__textarea{ + @extend %p; + + width: 100%; + height: 128px; + margin-bottom: 10px; + padding: 20px; + border: 1px solid $form-border-color; + + line-height: 24px; + + background-color: $background-color; + + &::placeholder { + @extend %p; + } + } + + + +} diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss new file mode 100644 index 000000000..973de3c75 --- /dev/null +++ b/src/styles/components/_hero.scss @@ -0,0 +1,89 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.hero { + @include grid; + + @include for-tablet { + padding: 0 34px; + } + + @include for-desktop { + padding: 0 125px; + } + + &__title { + @extend %heading; + + grid-column: span 4; + padding: 0 30px; + font-size: 40px; + line-height: 52px; + + @include for-tablet { + z-index: 1; + + grid-column: 1/5; + grid-row: 1/2; + align-self: bottom; + + margin-bottom: 10px; + padding: 0; + + font-size: 48px; + line-height: 62px; + } + + @include for-desktop { + align-self: end; + margin-bottom: 10px; + font-size: 62px; + line-height: 78px; + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + } + + &__description { + @extend %p; + + grid-column: span 4; + justify-self: start; + padding: 0 30px; + color: $primary-color; + + @include for-tablet { + z-index: 1; + grid-column: 1/4; + grid-row: 2/3; + padding: 0; + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + } + + &__img { + display: block; + grid-column: span 4; + grid-row: 1/2; + + width: 100%; + height: auto; + margin-bottom: 40px; + + object-fit: cover; + + @include for-tablet { + grid-column: 4/-1; + grid-row: 1/3; + margin-bottom: 0; + } + + @include for-desktop{ + grid-column: -9/-1; + grid-row: 1/3; + margin-bottom: 0; + } + } +} diff --git a/src/styles/components/_main-menu.scss b/src/styles/components/_main-menu.scss new file mode 100644 index 000000000..5e57129ea --- /dev/null +++ b/src/styles/components/_main-menu.scss @@ -0,0 +1,49 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.main { + &__menu { + display: none; + + @include for-desktop { + display: flex; + align-items: center; + justify-content: center; + + + } + + &-list { + display: flex; + gap: 84px; + align-items: center; + justify-content: center; + + width: 756px; + margin-bottom: 62px; + + + } + + &-item { + @extend %heading; + + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: $primary-color; + text-align: center; + + } + + &-link { + padding-bottom: 3px; + color: $primary-color; + text-decoration: none; + + @include underline-animation; + + } + } +} diff --git a/src/styles/components/_menu-mobile.scss b/src/styles/components/_menu-mobile.scss new file mode 100644 index 000000000..c168f20e8 --- /dev/null +++ b/src/styles/components/_menu-mobile.scss @@ -0,0 +1,131 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.menu { + position: fixed; + z-index: 10; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + overflow: hidden; + align-content: start; + + width: 100%; + height: 100vh; + + background-color: $background-menu-mobile; + + transition: transform 0.5s ease-in-out; + + @include grid; + + &:target { + transform: translateX(0); + } + + &__navigation { + display: flex;; + grid-column: span 4; + align-items: center; + justify-content: space-between; + + height: 76px; + margin-bottom: 10px; + padding: 0 30px; + + @include for-tablet{ + grid-column: span 8; + } + + } + + &__navlink { + grid-column: span 4; + align-self: start; + margin-bottom: 50px; + padding: 0 30px; + } + + &__links { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__item { + @extend %heading; + + font-size: 14px; + font-weight: 400; + line-height: 20px; + text-decoration: none; + } + + &__link { + color: $primary-color; + text-decoration: none; + + &:hover { + font-weight: 700; + } + } + + + &__nav { + grid-column: span 4; + padding: 0 30px 30px; + + @include grid; + + @include for-tablet { + display: none; + } + + @include for-desktop { + display: none; + } + } + + &__nav-list { + display: flex; + grid-column: span 4; + flex-direction: row; + gap: 20px; + + width: 100%; + } + + &__nav-link { + @extend %p; + + font-family: "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 300px; + color: $primary-color; + color: $icon-color; + text-decoration: none; + text-transform: uppercase; + + + + &--active { + font-weight: 700; + } + } + + &__language-swiper { + &::after { + content: '/'; + + } + } + + &__button{ + grid-column: span 4; + margin-top: 160px; + + } +} diff --git a/src/styles/components/_presentation.scss b/src/styles/components/_presentation.scss new file mode 100644 index 000000000..fbfc88642 --- /dev/null +++ b/src/styles/components/_presentation.scss @@ -0,0 +1,48 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + + +.presentation{ + position: relative; + width: 100%; + height: auto; + padding: 0 12px; + + + + + @include grid; + + &__img{ + transform-origin: center; + + display: block; + grid-column: span 4; + + width: 100%; + height: auto; + + transition: transform 0.3s ease-in-out; + + @include fade-up-scroll(0.8s, 0.2s, 30px); + + @include for-tablet{ + grid-column: span 8; + } + + @include for-desktop{ + grid-column: 3/-3; + } + + + &:hover{ + transform: scale(1.05); + } + } + + + + + +} diff --git a/src/styles/components/_swiper.scss b/src/styles/components/_swiper.scss new file mode 100644 index 000000000..3452f01cb --- /dev/null +++ b/src/styles/components/_swiper.scss @@ -0,0 +1,144 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.swiper { + + + &-wrapper { + margin-bottom: 40px; + padding: 30px 30px 0; + + @include for-tablet { + padding: 60px 90px 0; + + } + + @include for-desktop{ + display: contents !important; + display: grid !important; + grid-auto-rows: auto; + grid-template-columns: repeat(2, 1fr); + gap: 55px 132px ; + + width: auto !important; + margin-bottom: 0; + padding: 60px 306px 60px 102px; + + + } + } + + &-slide { + flex: 0 0 100%; + + @include for-desktop{ + flex: none !important; + width: auto !important; + + } + + &--first{ + grid-column: 1/2; + grid-row: 2/3; + } + + &--second{ + grid-column: 1/2; + grid-row: 1/2; + + } + + &--third{ + grid-column: 2/-1; + grid-row: 1/2; + } + + } + + + &__buttons { + pointer-events: auto; + display: flex; + justify-content: center; + margin-bottom: 8px; + + + + @include for-tablet { + justify-content: start; + padding-left: 90px; + + } + + @include for-desktop{ + display: none; + } + + } + + + &__button-prev, + &__button-next { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 48px; + height: 14px; + + svg path { + transition: fill 0.2s ease; + } + + &:hover { + + svg path { + fill: $accent-color-dark; + } + } + + + } + + &__pagination { + display: flex; + gap: 11px; + justify-content: center; + + + @include for-tablet { + justify-content: start; + padding-left: 90px; + + } + + @include for-desktop{ + display: none; + } + + &--current { + @extend %p; + + color: $primary-color; + } + + &--total { + @extend %p; + + align-self: end; + font-size: 11px; + line-height: 100%; + color: $accent-color-dark; + + &::before { + content: '/'; + width: 4px; + height: 14px; + margin-right: 5px; + } + } + } +} diff --git a/src/styles/components/_testimonials.scss b/src/styles/components/_testimonials.scss new file mode 100644 index 000000000..37a388ae3 --- /dev/null +++ b/src/styles/components/_testimonials.scss @@ -0,0 +1,109 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.testimonials { + text-align: center; + + + + @include grid; + + &__text { + @extend %p; + + position: relative; + + grid-column: span 4; + + margin-bottom: 30px; + + font-weight: 700; + line-height: 20px; + color: $primary-color; + + @include for-tablet { + grid-column: span 8; + font-size: 24px; + line-height: 38px; + } + + @include for-desktop { + grid-column: 3/-3; + } + + &::before { + content: ''; + + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + display: block; + + width: 208px; + height: 171px; + + background-image: url('../images/quote.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + + @include fade-up-scroll(0.8s, 0.2s, 30px); + } + + + &__wrapper-img { + overflow: hidden; + display: flex; + justify-content: center; + + width: 100%; + margin-bottom: 10px; + border-radius: 50%; + } + + &__img { + width: 60px; + height: 60px; + object-fit: cover;} + + &__author { + display: flex; + grid-column: span 4; + flex-direction: column; + justify-content: center; + + @include fade-up-scroll(0.8s, 0.2s, 30px); + + @include for-tablet { + grid-column: span 8; + } + + @include for-desktop { + grid-column: span 12; + } + + + + + &-name { + margin-bottom: 5px; + font-weight: 700; + line-height: 20px; + color: $primary-color; + + } + + &-status { + @extend %p; + + font-size: 14px; + line-height: 21px; + } + + + } +} diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss new file mode 100644 index 000000000..9ec25175e --- /dev/null +++ b/src/styles/fonts/_fonts.scss @@ -0,0 +1,7 @@ +@font-face { + font-family: 'Helvetica Neue'; + font-weight: 300; + font-style: normal; + font-display: swap; + src: url('../fonts/Helvetica.woff') format('woff'); +} diff --git a/src/styles/layout/_footer.scss b/src/styles/layout/_footer.scss new file mode 100644 index 000000000..c845555b3 --- /dev/null +++ b/src/styles/layout/_footer.scss @@ -0,0 +1,51 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + + +.footer{ + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + @include for-tablet{ + gap:60px; + } + + &__wrapper{ + display: flex; + flex-direction: column; + align-items: center; + padding: 0 34px 29px; + + } + + &__social{ + display: flex; + gap: 49px; + justify-content: center; + } + + &__copy{ + @extend %p; + + font-family: Helvetica, sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 21px; + color: $text-color-light; + text-align: center; + + } + + &__logo-link{ + display: none; + + @include for-tablet{ + display: inline-block; + } + } + + +} diff --git a/src/styles/layout/_header.scss b/src/styles/layout/_header.scss new file mode 100644 index 000000000..d3650d33a --- /dev/null +++ b/src/styles/layout/_header.scss @@ -0,0 +1,99 @@ +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + +.header { + &__hero { + margin-bottom: 100px; + } + + &__container { + height: 76px; + padding: 0 30px; + + @include grid; + + @include for-tablet { + margin-bottom: 90px; + padding: 0 34px; + } + + @include for-desktop { + padding: 0 125px; + } + } + + &__logo-link{ + grid-column: 1/3; + align-self: center; + + @include for-tablet{ + grid-column: 1/3; + } + + } + + &__nav { + grid-column: -2/-1; + place-self: center end; + + @include for-tablet{ + grid-column: 5/-1; + } + + @include for-tablet { + display: flex; + align-items: center; + justify-content: flex-end; + } + } + + &__burger-link{ + @include for-desktop{ + display: none; + } + } + + &__nav-list { + display: none; + + @include for-tablet { + display: flex; + flex-direction: row; + gap: 30px; + align-items: center; + justify-content: flex-end; + + margin-right: 30px; + } + } + + &__nav-link { + @extend %heading; + + font-size: 14px; + font-weight: 300; + text-decoration: none; + + &--active { + font-weight: 700; + } + } + + &__language-swiper { + &::after { + content: '/'; + font-weight: 300; + } + } + + &__button { + display: inline-block; + width: 100px; + } + + &__wrapper { + display: flex; + align-items: center; + } +} diff --git a/src/styles/layout/_main-section.scss b/src/styles/layout/_main-section.scss new file mode 100644 index 000000000..73eb2e6ae --- /dev/null +++ b/src/styles/layout/_main-section.scss @@ -0,0 +1,128 @@ + +@use '../utils/variables' as *; +@use '../utils/mixins' as *; +@use '../utils/extends' as *; + + +.main{ + + &__hero{ + margin-bottom: 110px; + + @include for-tablet{ + margin-bottom: 140px; + } + + @include for-desktop{ + margin-bottom: 170px; + } + } + + + &__benefits{ + @include grid; + + gap: 65px; + margin-bottom: 110px; + padding: 0 30px; + + @include for-tablet{ + margin-bottom: 140px; + padding: 0 34px; + } + + @include for-desktop{ + margin-bottom: 170px; + padding: 0 125px; + } + + + + } + + + &__presentation{ + margin-bottom: 110px; + + @include for-tablet{ + margin-bottom: 140px; + + } + + @include for-desktop{ + margin-bottom: 170px; + + } + } + + + + &__about{ + display: flex; + flex-direction: column; + gap:110px; + + margin-bottom: 150px; + padding: 0 30px; + + + @include for-tablet{ + padding: 0 34px; + } + + @include for-desktop{ + margin-bottom: 170px; + padding: 0 125px; + } + + + } + + &__testimonials{ + margin-bottom: 100px; + padding: 0 30px; + + @include for-tablet{ + margin-bottom: 140px; + padding: 0 34px ; + } + + @include for-desktop{ + margin-bottom: 170px; + padding: 0 125px ; + } + + + } + + &__features{ + margin-bottom: 100px; + + @include for-tablet{ + margin-bottom: 140px; + padding: 0 34px ; + } + + @include for-desktop{ + margin-bottom: 170px; + padding: 0 125px ; + } + } + + &__contact{ + margin-bottom: 100px; + padding: 0 30px; + + + @include for-tablet{ + margin-bottom: 140px; + padding: 0 34px ; + } + + @include for-desktop{ + margin-bottom: 170px; + padding: 0 125px ; + } + } + +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3df894be0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base/reset'; +@use './base/base'; +@use './utils/extends'; +@use './utils/mixins'; +@use './utils/variables'; +@use './fonts/fonts'; +@use './layout/header'; +@use './layout/footer'; +@use './layout/main-section'; +@use './components/button'; +@use './components/hero'; +@use './components/benefits'; +@use './components/presentation'; +@use './components/about'; +@use './components/testimonials'; +@use './components/features'; +@use './components/swiper'; +@use './components/contact'; +@use './components/form'; +@use './components/menu-mobile'; +@use './components/main-menu'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..485e5702b 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,20 @@ -%h1 { - font-family: Roboto, sans-serif; +@use './variables' as *; + + +%heading { + font-family: Inter, sans-serif; + font-weight: 700; + color: $primary-color; + text-transform: uppercase; + +} + +%p{ + font-family: Inter, sans-serif; + font-size: 16px; font-weight: 400; + font-style: normal; + line-height: 24px; + color: $text-color; + } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..5da81f28b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,100 @@ #{$_property}: $_toValue; } } + +@mixin visually-hidden() { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + + white-space: nowrap; + + clip: rect(0 0 0 0); + clip-path: inset(50%); +} + +@mixin grid() { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + justify-content: center; + + @include for-tablet { + grid-template-columns: repeat(8, 1fr); + } + + @include for-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } +} + +@mixin for-tablet() { + @media (min-width: 640px) { + @content; + } +} + +@mixin for-desktop() { + @media (min-width: 1280px) { + @content; + } +} + +@mixin underline-animation($color: #0c797a, $height: 3px, $duration: 0.5s) { + position: relative; + display: inline-block; + transition: color $duration ease; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + transform-origin: left; + transform: scaleX(0); + + width: 100%; + height: $height; + + background-color: $color; + + transition: transform $duration ease; + } + + &:hover { + font-weight: 700; + + &::after { + transform-origin: left; + transform: scaleX(1); + } + } + + &:not(:hover)::after { + transform-origin: right; + transform: scaleX(0); + } +} + + +@mixin fade-up-scroll( + $duration: 0.8s, + $delay: 0s, + $distance: 20px, + $easing: ease-out +) { + transform: translateY($distance); + opacity: 0; + transition: opacity $duration $easing $delay, + transform $duration $easing $delay; + + &.is-visible { + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 000000000..46fda415a --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,18 @@ +$primary-color: #333; +$primary-color-dark: #131313; +$text-color: #7C7C7C; +$text-color-light: #BDBDBD; +$icon-color: #4F4F4F; +$form-border-color: #828282; +$form-border-color-selected: #0C797A; +$form-border-color-success: #EB5757; +$disabled-color: #ddd; +$accent-color: #0DB2B3; +$accent-color-dark: #0C797A; +$accent-color-disabled: #CFEFF0; +$accent-color-light: #EEFAFA; +$accent-bg-color: #D6ECEC; +$background-color: #F7F7F7; +$background-menu-mobile: #F9F9F9; + + diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee;