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..e464fc210 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ # 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]() - Use BEM and SCSS -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 - Desktop 1280px - Tablet 640px @@ -14,11 +15,10 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 1. Implement `About us` block. 1. Implement `Technology` block. 1. Implement `Testimonilas` block. -1. Implement `Features` block. +1. Implement `capabilities` block. 1. Implement `Questions` block 1. Implement the footer. - ## Github flow 1. **Fork** the repo. @@ -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://AngelaStrechen.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/checklist.md b/checklist.md index 4b7562fd7..b325f1855 100644 --- a/checklist.md +++ b/checklist.md @@ -1,4 +1,3 @@ - # Checklist for preparing a portfolio project ## Tech review @@ -7,15 +6,15 @@ 2. Add a smooth scroll for the whole page (`scroll-behavior: smooth;`) 3. Menu on mobile should contain navigation links. [Menu example](http://joxi.ru/VrwJRDPcoOzEZA) 4. Logos should become bigger on hover and lead to the first section -5. Icons in the “about us” block should be ***animated*** on hover +5. Icons in the “about us” block should be **_animated_** on hover 6. The arrow icon in the footer should increase when hovering and when clicked smoothly scroll the page to the top 7. Under the button “see more about us”, the strip should stretch to the full width when hovering and lead to the CrazyBaby website -8. All interactive elements(**links, buttons, pictures, icons**) ***should have a hover effect and cursor pointer***. User must intuitively understand that he can interact with them +8. All interactive elements(**links, buttons, pictures, icons**) **_should have a hover effect and cursor pointer_**. User must intuitively understand that he can interact with them 9. Make sure when you click on logo there is no 404 error (Use `href="#"` in `anchor tag`) 10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded 11. The form shouldn’t submit empty 12. After autocomplete the form, change the [default styles](http://joxi.ru/xAeW7w9CMp9GPm). Read more about [changing autocomplete styles](https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/) -13. OPTIONAL: After everything is done you can add a slider in the “features” section (for mobile version) +13. OPTIONAL: After everything is done you can add a slider in the “capabilities” section (for mobile version) ## HR review diff --git a/index.html b/index.html index d339e6856..4b6cabe0b 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,695 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Grazy baby + + + + - -

Hello Mate Academy

- + +
+
+
+ + +
+
+ + Specs + + +
+ + EN / + + + UA + +
+ + + Buy + +
+ + + +
+
+ + +
+ + + + Futuristic wireless speaker + + +
+

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

+
+
+
+
+ +
+ + + + + + Speaker + + +
+
+ +
+

DESIGNED FOR THE FUTURE

+ + + + + + Designed for the future + + +

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

+ + + See more about us + +
+ + +
+

Luna Eye

+ + + + + + + Luna Eye + + +

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

+ + + See more about us + +
+
+
+ +
+

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

+ + Garrett Martin + +
Garrett Martin
+ +
Creative Director
+
+
+ +
+

features

+
+ +
+
+ +
+

Connectivity

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

App Features

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

Sound & Music

+
    +
  • Feel-in-chest Bass Power
    • +
  • + Lossless Digital Audio Transmission +
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp High Frequency Sound
    • +
  • + Streams from Cloud Music and Local Library +
    • +
  • + Auto Music from Last Song Stopped +
    • +
+
+ +
+ +
+
+
+ + +
+
+ + + +
+ +
+ 01 + + / 03 +
+
+ +
+ +
+
+
+
+ +
+
+
+

Do you have any questions?

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

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

+
+
+
+ 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/about/about__desktop.jpg b/src/images/about/about__desktop.jpg new file mode 100644 index 000000000..e420bb97e Binary files /dev/null and b/src/images/about/about__desktop.jpg differ diff --git a/src/images/about/about__mobile.jpg b/src/images/about/about__mobile.jpg new file mode 100644 index 000000000..e81dc4968 Binary files /dev/null and b/src/images/about/about__mobile.jpg differ diff --git a/src/images/about/about__tablet.jpg b/src/images/about/about__tablet.jpg new file mode 100644 index 000000000..070cc7114 Binary files /dev/null and b/src/images/about/about__tablet.jpg differ diff --git a/src/images/about/future-desktop.jpg b/src/images/about/future-desktop.jpg new file mode 100644 index 000000000..ea76aaeea Binary files /dev/null and b/src/images/about/future-desktop.jpg differ diff --git a/src/images/about/future-mobile.jpg b/src/images/about/future-mobile.jpg new file mode 100644 index 000000000..a7240385e Binary files /dev/null and b/src/images/about/future-mobile.jpg differ diff --git a/src/images/about/future-tablet.jpg b/src/images/about/future-tablet.jpg new file mode 100644 index 000000000..45509a4cb Binary files /dev/null and b/src/images/about/future-tablet.jpg differ diff --git a/src/images/about/luna-eye__desktop.jpg b/src/images/about/luna-eye__desktop.jpg new file mode 100644 index 000000000..1270fa368 Binary files /dev/null and b/src/images/about/luna-eye__desktop.jpg differ diff --git a/src/images/about/luna-eye__mobile.jpg b/src/images/about/luna-eye__mobile.jpg new file mode 100644 index 000000000..ffc197d90 Binary files /dev/null and b/src/images/about/luna-eye__mobile.jpg differ diff --git a/src/images/about/person.jpg b/src/images/about/person.jpg new file mode 100644 index 000000000..eb2417d92 Binary files /dev/null and b/src/images/about/person.jpg differ diff --git a/src/images/about/una-eye__tablet.jpg b/src/images/about/una-eye__tablet.jpg new file mode 100644 index 000000000..9d0393259 Binary files /dev/null and b/src/images/about/una-eye__tablet.jpg differ diff --git a/src/images/about/vector.svg b/src/images/about/vector.svg new file mode 100644 index 000000000..71544aa4e --- /dev/null +++ b/src/images/about/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/capabilities/capabilities-design.svg b/src/images/capabilities/capabilities-design.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/capabilities/capabilities-design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/capabilities/capabilities-lighting.svg b/src/images/capabilities/capabilities-lighting.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/capabilities/capabilities-lighting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/capabilities/capabilities-multiroom.svg b/src/images/capabilities/capabilities-multiroom.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/capabilities/capabilities-multiroom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/capabilities/capabilities-speaker.svg b/src/images/capabilities/capabilities-speaker.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/capabilities/capabilities-speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/features/image.png b/src/images/features/image.png new file mode 100644 index 000000000..453bed5e6 Binary files /dev/null and b/src/images/features/image.png differ diff --git a/src/images/hero/hero__dekstop.jpg b/src/images/hero/hero__dekstop.jpg new file mode 100644 index 000000000..f63fe7847 Binary files /dev/null and b/src/images/hero/hero__dekstop.jpg differ diff --git a/src/images/hero/hero__mobile.jpg b/src/images/hero/hero__mobile.jpg new file mode 100644 index 000000000..02a6ff333 Binary files /dev/null and b/src/images/hero/hero__mobile.jpg differ diff --git a/src/images/hero/hero__tablet.jpg b/src/images/hero/hero__tablet.jpg new file mode 100644 index 000000000..88b09c4d1 Binary files /dev/null and b/src/images/hero/hero__tablet.jpg differ diff --git a/src/images/icon/Vector.svg b/src/images/icon/Vector.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/icon/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/favicon.svg b/src/images/icon/favicon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/icon/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/icon/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..476722f48 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,144 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + // ================= BURGER MENU ================= + const burger = document.querySelector('.burger'); + const menu = document.querySelector('.header__menu'); + const body = document.body; + + function openMenu() { + burger.classList.add('is-open'); + menu.classList.add('is-open'); + body.classList.add('no-scroll'); + } + + function closeMenu() { + burger.classList.remove('is-open'); + menu.classList.remove('is-open'); + body.classList.remove('no-scroll'); + } + + function toggleMenu() { + // eslint-disable-next-line no-unused-expressions + menu.classList.contains('is-open') ? closeMenu() : openMenu(); + } + + burger.addEventListener('click', (e) => { + e.stopPropagation(); + toggleMenu(); + }); + + document.addEventListener('click', (e) => { + if (!menu.contains(e.target) && !burger.contains(e.target)) { + closeMenu(); + } + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + closeMenu(); + } + }); + + // ================= CLOSE MENU AFTER CLICK ================= + const menuItems = document.querySelectorAll('.header__menu a[href^="#"]'); + + menuItems.forEach((item) => { + item.addEventListener('click', () => { + closeMenu(); + }); + }); + + // ================= FEATURES SLIDER ================= + const slider = document.querySelector('.features__slider'); + const slides = document.querySelectorAll('.features__slide'); + const nextBtn = document.querySelector('.features__btn--next'); + const prevBtn = document.querySelector('.features__btn--prev'); + const currentEl = document.querySelector('.features__current'); + + if (slider && slides.length && nextBtn && prevBtn && currentEl) { + let current = 0; + const total = slides.length; + + // eslint-disable-next-line no-inner-declarations + function update() { + slider.style.transform = `translateX(-${current * 100}%)`; + currentEl.textContent = String(current + 1).padStart(2, '0'); + + prevBtn.classList.toggle('is-disabled', current === 0); + nextBtn.classList.toggle('is-disabled', current === total - 1); + } + + nextBtn.addEventListener('click', () => { + if (current < total - 1) { + current++; + update(); + } + }); + + prevBtn.addEventListener('click', () => { + if (current > 0) { + current--; + update(); + } + }); + + update(); + } + + // ================= FOOTER FORM ================= + const form = document.querySelector('.footer__form'); + const email = document.querySelector('.footer__input'); + const message = document.querySelector('.footer__textarea'); + + if (form && email && message) { + form.addEventListener('submit', (e) => { + e.preventDefault(); + + let isValid = true; + + // reset перед перевіркою + email.classList.remove('error', 'success'); + message.classList.remove('error', 'success'); + + const emailValue = email.value.trim(); + const messageValue = message.value.trim(); + + // EMAIL VALIDATION (жорстка) + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (!emailValue || !emailRegex.test(emailValue)) { + email.classList.add('error'); + isValid = false; + } + + // MESSAGE VALIDATION + if (!messageValue) { + message.classList.add('error'); + isValid = false; + } + + // SUCCESS + if (isValid) { + email.classList.add('success'); + message.classList.add('success'); + + // короткий success ефект + setTimeout(() => { + email.value = ''; + message.value = ''; + + email.classList.remove('success'); + message.classList.remove('success'); + }, 400); + } + }); + + // прибираємо помилку під час вводу + [email, message].forEach((field) => { + field.addEventListener('input', () => { + field.classList.remove('error'); + }); + }); + } +}); 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/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 000000000..0bba9d40b --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,81 @@ +/* 1. Box sizing */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* 2. Скидання відступів */ +* { + margin: 0; + padding: 0; +} + +/* 3. Базові налаштування html/body */ +html { + scroll-behavior: smooth; +} + +html, +body { + height: 100%; +} + +body { + -webkit-font-smoothing: antialiased; + + &.no-scroll { + overflow: hidden; + } +} + +/* 5. Форми */ +input, +button, +textarea, +select { + font: inherit; +} + +input, +textarea { + outline: none; + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px transparent inset; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: inherit; + } +} + +/* 6. Кнопки */ +button { + border: none; + background: none; +} + +/* 7. Списки */ +ul, +ol { + list-style: none; +} + +/* 8. Посилання */ +a { + color: inherit; + text-decoration: none; +} + +a, +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'], +input[type='radio'], +label[for] { + cursor: pointer; +} diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 000000000..a6cf17005 --- /dev/null +++ b/src/styles/base/_typography.scss @@ -0,0 +1,15 @@ +h1 { + @extend %h1; +} + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} diff --git a/src/styles/components/_about.scss b/src/styles/components/_about.scss new file mode 100644 index 000000000..62b9c76f7 --- /dev/null +++ b/src/styles/components/_about.scss @@ -0,0 +1,270 @@ +.about { + margin-top: 55px; + + @include on-tablet { + margin-top: 70px; + } + + @include on-desktop { + margin-top: 85px; + } + + &__banner { + display: block; + width: 100%; + margin-bottom: 110px; + + &-img { + display: block; + width: 100%; + height: auto; + } + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + max-width: 846px; + margin: 0 auto 170px; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 110px; + } + + // ================= CARD ================= + &__card { + display: flex; + flex-direction: column; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 20px; + align-items: start; + + min-height: 415px; + padding-right: 34px; + } + + @include on-desktop { + column-gap: 30px; + min-height: 582px; + padding-right: 0; + } + + &--reverse { + @include on-tablet { + padding-left: 34px; + + .about__image { + grid-column: 2; + } + + .about__title, + .about__text, + .about__link { + grid-column: 1; + } + } + + @include on-desktop { + padding-left: 0; + } + } + } + + &__image { + overflow: hidden; + display: block; + + width: 100%; + height: auto; + margin-bottom: 20px; + + @include on-tablet { + overflow: hidden; + grid-column: 1; + grid-row: 1 / span 3; + + width: 100%; + height: 100%; + margin-bottom: 0; + } + + &-img { + display: block; + width: 100%; + height: auto; + transition: transform $effectDuration ease; + + &:hover { + transform: scale(1.05); + } + + @include on-tablet { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + &__title, + &__text, + &__link { + @include on-tablet { + grid-column: 2; + margin-bottom: 0; + } + } + + &__title { + margin-bottom: 30px; + text-transform: uppercase; + + &--luna { + margin-bottom: 20px; + font-size: 36px; + line-height: 46px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + } + + &__text { + margin-bottom: 30px; + font-size: 16px; + line-height: 24px; + color: #7c7c7c; + + &--future { + font-size: 14px; + line-height: 21px; + } + } + + &__link { + position: relative; + + width: fit-content; + + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: #0db2b3; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + left: 0; + + width: 53px; + height: 1px; + + background-color: #0db2b3; + + transition: width $effectDuration ease; + + @include on-desktop { + width: 65px; + } + } + + &:hover { + opacity: 0.8; + + &::after { + width: 100%; + } + } + } + + &__testimonial { + display: flex; + flex-direction: column; + align-items: center; + + margin: 0 auto; + padding: 110px 30px; + + text-align: center; + + background-image: url('../images/about/vector.svg'); + background-repeat: no-repeat; + background-position: 50% 20%; + background-size: 208px; + + @include on-tablet { + padding: 140px 34px; + background-position: 50% 15%; + background-size: 233px; + } + + @include on-desktop { + max-width: 786px; + padding: 170px 0; + background-position: 50% 30%; + } + + &-text { + margin-bottom: 30px; + + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: $dark-gray; + text-align: center; + + @include on-tablet { + margin-bottom: 40px; + font-size: 24px; + line-height: 36px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &-photo { + width: 62px; + height: 62px; + margin-bottom: 10px; + border-radius: 50%; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &-name { + margin-bottom: 5px; + font-size: 16px; + font-weight: 700; + line-height: 22px; + } + + &-role { + font-size: 14px; + line-height: 21px; + color: #7c7c7c; + } + } +} diff --git a/src/styles/components/_body.scss b/src/styles/components/_body.scss new file mode 100644 index 000000000..44c29fa1c --- /dev/null +++ b/src/styles/components/_body.scss @@ -0,0 +1,35 @@ +.page_body { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: normal; + color: $dark-gray; + + background: $light-gray; +} + +.container { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + &--about { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + padding-inline: 0; + } + } + + @include on-desktop { + padding-inline: 80px; + } + + @include on-large-desktop { + padding-inline: 123px; + } +} diff --git a/src/styles/components/_burger.scss b/src/styles/components/_burger.scss new file mode 100644 index 000000000..1cb9dda11 --- /dev/null +++ b/src/styles/components/_burger.scss @@ -0,0 +1,52 @@ +.burger { + position: relative; + z-index: 1005; + width: 24px; + height: 16px; + + &__line { + position: absolute; + left: 0; + + width: 100%; + height: 3px; + border-radius: 2px; + + background: $color-neutral; + + transition: $effectDuration ease; + + &:nth-child(1) { + top: 0; + } + + &:nth-child(2) { + top: 8px; + } + + &:nth-child(3) { + top: 16px; + } + } + + &.is-open { + span:nth-child(1) { + top: 8px; + transform: rotate(45deg); + } + + span:nth-child(2) { + transform: scale(0); + opacity: 0; + } + + span:nth-child(3) { + top: 8px; + transform: rotate(-45deg); + } + } + + @include on-large-desktop { + display: none; + } +} diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss new file mode 100644 index 000000000..cd6333313 --- /dev/null +++ b/src/styles/components/_button.scss @@ -0,0 +1,36 @@ +.button { + display: flex; + align-items: center; + justify-content: center; + + width: 260px; + height: 48px; + margin: 0 auto; + + font-size: 12px; + font-weight: 500; + line-height: 100%; + color: $white; + text-align: center; + text-transform: uppercase; + + background-color: $dark-gray; + + transition: background-color $effectDuration ease; + + &:hover { + background-color: $btn-hover; + } + + &:active { + background-color: $dark-gray; + } + + &:focus-visible { + background-color: $btn-active; + } + + @include on-tablet { + width: 100px; + } +} diff --git a/src/styles/components/_capabilities.scss b/src/styles/components/_capabilities.scss new file mode 100644 index 000000000..59a62f105 --- /dev/null +++ b/src/styles/components/_capabilities.scss @@ -0,0 +1,135 @@ +.capabilities { + &-cards { + scroll-behavior: smooth; + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: 20px; + + padding-bottom: 65px; + + -webkit-overflow-scrolling: touch; + + &::-webkit-scrollbar { + display: none; + } + + @include on-tablet { + @include page-grid; + + overflow-x: visible; + gap: 65px 20px; + padding-top: 70px; + padding-bottom: 70px; + + @include on-desktop { + gap: 30px; + padding-bottom: 85px; + } + } + + @include on-desktop { + align-items: start; + justify-content: space-between; + margin-bottom: 170px; + } + } + + &-card { + scroll-snap-align: start; + + display: flex; + flex: 0 0 100%; + flex-direction: column; + align-items: center; + + &:nth-child(1) { + @include on-tablet { + grid-column: 1 /5; + } + + @include on-desktop { + grid-column: 1 /4; + } + } + + &:nth-child(2) { + @include on-tablet { + grid-column: 5 /-1; + } + + @include on-desktop { + grid-column: 4 /7; + } + } + + &:nth-child(3) { + @include on-tablet { + grid-column: 1 /5; + } + + @include on-desktop { + grid-column: 7 /10; + } + } + + &:nth-child(4) { + @include on-tablet { + grid-column: 5 /-1; + } + + @include on-desktop { + grid-column: 10 /-1; + } + } + } + + &__icon { + height: auto; + margin-bottom: 30px; + color: #4f4f4f; + object-fit: contain; + + @include on-tablet { + height: 50px; + } + + &--design { + width: 50px; + margin-bottom: 34px; + } + + &--speaker { + width: 46px; + margin-bottom: 34px; + } + + &--multiroom { + width: 46px; + margin-bottom: 36px; + } + + &--lighting { + width: 44px; + margin-bottom: 31px; + } + } + + &-title { + margin-bottom: 21px; + + @include on-desktop { + min-height: 56px; + margin-bottom: 24px; + } + } + + &-text { + font-size: 14px; + line-height: 21px; + color: #7c7c7c; + text-align: center; + } +} diff --git a/src/styles/components/_features.scss b/src/styles/components/_features.scss new file mode 100644 index 000000000..bdeff6b4a --- /dev/null +++ b/src/styles/components/_features.scss @@ -0,0 +1,338 @@ +.features { + width: 100%; + margin-bottom: 45px; + + @include on-tablet { + margin-bottom: 70px; + padding-inline: 34px; + } + + @include on-desktop { + padding-bottom: 85px; + padding-inline: 123px; + } + + // ================= CONTENT ================= + &__content { + display: flex; + flex-direction: column; + padding-top: 30px; + background-color: #cfeff0; + + @include on-tablet { + flex-flow: row wrap; + padding-top: 60px; + padding-left: 90px; + } + + @include on-small-desktop { + padding-inline: 40px; + } + + @include on-desktop { + margin-bottom: 115px; + padding: 0; + } + } + + // ================= TITLE ================= + &__title { + margin-bottom: 20px; + + @include on-desktop { + margin-bottom: 30px; + } + } + + &__title-1 { + margin-bottom: 32px; + margin-left: 30px; + + @include on-tablet { + margin-left: 0; + } + } + + // ================= VIEWPORT ================= + &__viewport { + overflow: hidden; + padding-inline: 30px; + + @include on-tablet { + display: block; + width: 100%; + padding: 0; + } + } + + // ================= SLIDER ================= + &__slider { + display: flex; + transition: transform 0.4s ease; + + @include on-small-desktop { + @include page-grid; + + row-gap: 30px; + padding-top: 40px; + } + + @include on-desktop { + row-gap: 56px; + padding-top: 60px; + background-color: #cfeff0; + } + } + + &__slide { + display: flex; + flex-direction: column; + align-items: center; + + min-width: 100%; + + text-align: left; + + @include on-tablet { + align-items: flex-start; + } + + &--1 { + @include on-small-desktop { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 2 /6; + grid-row: 1; + } + } + &--2 { + @include on-small-desktop { + grid-column: 1 / 5; + grid-row: 2; + } + + @include on-desktop { + grid-column: 7 /10; + grid-row: 1; + } + } + + &--3 { + @include on-small-desktop { + grid-column: 6 / 11; + grid-row: 1; + margin-bottom: 30px; + } + + @include on-desktop { + grid-column: 2 /6; + grid-row: 2; + margin-bottom: 59px; + } + } + } + + // ================= LIST ================= + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + margin: 0 0 30px; + padding: 0; + + @include on-tablet { + margin: 0; + } + + @include on-desktop { + margin-bottom: 0; + } + } + + &__item { + position: relative; + + padding-left: 18px; + + font-size: 14px; + line-height: 21px; + color: $dark-gray; + + &::before { + content: ''; + + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: #000; + } + + @include on-small-desktop { + font-size: 14px; + line-height: 20px; + } + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + + // ================= NAV ================= + &__nav { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + margin-top: 20px; + + @include on-tablet { + align-items: flex-start; + width: 40%; + margin-top: 50px; + } + + @include on-small-desktop { + display: none; + } + } + + &__arrows { + display: flex; + } + + &__btn { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + border: none; + + color: #333; + + background: none; + + transition: + color 0.3s ease, + transform 0.2s ease; + + &:hover:not(.is-disabled) { + transform: scale(1.05); + color: #0c797a; + } + + &.is-disabled { + pointer-events: none; + cursor: default; + color: #bdbdbd; + } + } + + &__icon { + display: block; + } + + &__counter { + font-weight: 400; + } + + &__current { + font-size: 16px; + line-height: 24px; + } + + &__total { + font-size: 11px; + line-height: 100%; + color: #0c797a; + } + + // ================= IMAGE ================= + + &__image { + display: flex; + justify-content: center; + + width: 100%; + height: auto; + + background: #cfeff0; + + @include on-tablet { + display: flex; + justify-content: flex-end; + width: 60%; + } + + @include on-desktop { + width: 100%; + } + + &-mobile { + display: block; + justify-content: flex-end; + + width: 100%; + max-width: 415px; + height: auto; + + @include on-small-desktop { + display: none; + } + } + + &-desktop { + display: none; + + @include on-small-desktop { + display: inline-flex; + grid-column: 6 / 13; + grid-row: 2; + align-self: end; + + width: 100%; + padding-right: 20px; + } + + @include on-desktop { + grid-column: 6 /12; + grid-row: 2; + align-self: flex-end; + padding-right: 46px; + } + + @include on-large-desktop { + grid-column: 7 /12; + grid-row: 2; + } + + &-img { + display: block; + height: auto; + object-fit: contain; + + @include on-small-desktop { + width: 100%; + max-width: 420px; + } + + @include on-desktop { + min-width: 543px; + } + } + } + } +} diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss new file mode 100644 index 000000000..6c46d5fc0 --- /dev/null +++ b/src/styles/components/_footer.scss @@ -0,0 +1,275 @@ +.footer { + padding-top: 45px; + padding-bottom: 20px; + + @include on-tablet { + padding-top: 70px; + padding-bottom: 30px; + } + + @include on-desktop { + padding-top: 85px; + } + + &__contact { + display: flex; + flex-direction: column; + justify-content: space-between; + margin-bottom: 110px; + + @include on-tablet { + flex-direction: row; + row-gap: 21px; + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__title { + margin-bottom: 27px; + + @include on-tablet { + margin-right: 21px; + } + + @include on-desktop { + margin-right: 28px; + } + } + + &__form { + display: flex; + flex-direction: column; + } + + &__field { + display: block; + } + + &__input { + margin-bottom: 20px; + } + + &__textarea { + resize: none; + min-height: 128px; + margin-bottom: 30px; + + @include on-tablet { + min-height: 201px; + } + + @include on-desktop { + min-height: 128px; + } + } + + &__input, + &__textarea { + width: 260px; + padding: 12px 20px; + border: 1px solid #828282; + + font-size: 14px; + font-weight: 500; + line-height: 24px; + color: $dark-gray; + + background: transparent; + + transition: border-color $effectDuration ease; + + &::placeholder { + font-size: 16px; + color: #828282; + } + + // hover + + &:hover { + border-color: #0c797a; + } + + // focus (коли пишеш) + + &:focus { + border-color: #0c797a; + } + + // ERROR має ПЕРЕБИВАТИ ВСЕ + + &.error { + border-color: #eb5757 !important; + } + + // success (тимчасовий) + + &.success { + border-color: #0c797a; + } + + @include on-tablet { + width: 340px; + padding: 12px 30px; + } + + @include on-desktop { + width: 582px; + padding: 12px 36px; + } + } + + &__button { + width: 102px; + height: 40px; + + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: $white; + text-transform: uppercase; + + background-color: #0db2b3; + + transition: background-color $effectDuration ease; + + &:hover { + background-color: #0c797a; + } + + &:disabled { + cursor: not-allowed; + background: #cfeff0; + } + + @include on-desktop { + width: 124px; + height: 48px; + } + } + + &__top { + &-row { + display: none; + + @include on-tablet { + @include page-grid; + + margin-bottom: 60px; + } + } + } + &__logo { + display: none; + + @include on-tablet { + display: block; + grid-column: 4 /6; + text-align: center; + } + + @include on-small-desktop { + grid-column: 6 /8; + } + + &-img { + height: 25px; + } + } + + &__scroll { + display: flex; + align-items: center; + justify-content: center; + + color: #333; + + transition: + color 0.3s ease, + transform 0.3s ease; + + &:hover { + transform: translateY(-3px); + color: #0c797a; + } + + @include on-tablet { + grid-column: 8; + } + + @include on-small-desktop { + grid-column: 12; + } + + &-icon { + display: block; + } + } + + &__socials { + display: flex; + gap: 40px; + align-items: center; + justify-content: center; + + margin-bottom: 30px; + + @include on-tablet { + gap: 49px; + margin-bottom: 60px; + } + + @include on-small-desktop { + gap: 40px; + } + } + + &__social { + &-link { + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + + color: #4f4f4f; + + transition: + color $effectDuration ease, + transform $effectDuration ease; + + &:hover { + transform: scale(1.15); + color: #0c797a; + } + + &:active { + transform: scale(0.95); + color: #0a5f60; + } + + &:focus-visible { + border-radius: 4px; + outline: 2px solid #0c797a; + outline-offset: 3px; + } + } + + &-icon { + display: block; + width: 24px; + height: 24px; + } + } + + &__copyright { + font-size: 14px; + line-height: 21px; + color: #bdbdbd; + text-align: center; + } +} diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss new file mode 100644 index 000000000..d0604fc70 --- /dev/null +++ b/src/styles/components/_header.scss @@ -0,0 +1,249 @@ +.header { + position: relative; + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 25px 0; + + @include on-tablet { + margin-bottom: 130px; + } + + @include on-large-desktop { + margin-bottom: 90px; + } + } + + &__logo-img { + height: 25px; + } + + &__controls { + display: flex; + flex-direction: row; + gap: 34px; + align-items: center; + } + + &__desktop-controls { + display: none; + + @include on-tablet { + display: flex; + flex-direction: row; + gap: 30px; + align-items: center; + } + } + + &__meta { + font-size: 14px; + font-weight: 300; + line-height: 100%; + text-transform: uppercase; + + transition: + color $effectDuration ease, + font-weight $effectDuration ease; + + &:hover { + font-weight: 400; + color: $dark-gray; + } + } + + &__content { + padding-bottom: 65px; + + @include on-tablet { + @include page-grid; + + padding-bottom: 75px; + } + + @include on-large-desktop { + padding-bottom: 85px; + } + } + + &__hero { + &-picture { + display: block; + margin-bottom: 40px; + + @include on-tablet { + display: inline-block; + grid-column: 4 /-1; + grid-row: 1; + margin-bottom: 0; + } + + @include on-large-desktop { + grid-column: 5 /-1; + grid-row: 1; + } + } + &-img { + width: 100%; + height: auto; + margin: 0 auto; + } + + &-text { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: 1 /4; + grid-row: 1; + } + + @include on-large-desktop { + grid-column: 1 /5; + grid-row: 1; + padding-top: 80px; + } + } + } + + &__title { + margin-bottom: 20px; + text-transform: uppercase; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__description { + font-size: 16px; + line-height: 24px; + + @include on-large-desktop { + padding-right: 120px; + } + } + + &__desktop { + &-nav { + display: none; + + @include on-large-desktop { + display: block; + margin-bottom: 90px; + } + } + &-list { + display: flex; + flex-direction: row; + gap: 84px; + align-items: center; + justify-content: center; + } + } + + &__link { + font-size: 14px; + line-height: 20px; + text-transform: uppercase; + vertical-align: middle; + + transition: + color $effectDuration ease, + font-weight $effectDuration ease; + + &:hover { + font-weight: 700; + color: $btn-hover; + } + } + + &__nav { + margin-bottom: 50px; + + @include on-large-desktop { + display: block; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + @include on-tablet { + gap: 40px; + } + } + + &__menu { + position: fixed; + z-index: 1001; + inset: 0; + transform: translateY(-10px); + + display: flex; + flex-direction: column; + + height: 100vh; + padding: 24px; + + visibility: hidden; + opacity: 0; + background: #fff; + + transition: 0.3s ease; + + &.is-open { + transform: translateY(0); + visibility: visible; + opacity: 1; + + @include on-large-desktop { + display: none; + } + } + + @include on-tablet { + padding-inline: 24px; + } + + &-top { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 55px; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &-bottom { + display: flex; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + display: none; + } + } + + &-specs { + &-lang { + display: flex; + gap: 20px; + align-items: center; + margin-bottom: 162px; + } + } + + &-list { + display: flex; + flex-direction: row; + gap: 84px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8f2f4fb33 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,15 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'utils/extends'; -body { - background: $c-gray; -} +@import 'base/typography'; +@import 'base/reset'; + +@import 'components/body'; +@import 'components/header'; +@import 'components/burger'; +@import 'components/button'; +@import 'components/capabilities'; +@import 'components/about'; +@import 'components/features'; +@import 'components/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..97d3399f8 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,53 @@ %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + font-size: 40px; + font-weight: 700; + line-height: 52px; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-large-desktop { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + text-transform: uppercase; +} + +%h3 { + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +%h4 { + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: $color-turquoise; + text-transform: uppercase; + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..cea2131e7 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,67 @@ #{$_property}: $_toValue; } } + +@mixin on-small-tablet() { + @media (min-width: $small-tablet-min-width) { + @content; + } +} + +@mixin on-tablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-laptop() { + @media (min-width: $laptop-min-width) { + @content; + } +} + +@mixin on-small-desktop() { + @media (min-width: $small-desktop-min-width) { + @content; + } +} + +@mixin on-desktop() { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-large-desktop() { + @media (min-width: $large-desktop-min-width) { + @content; + } +} + +@mixin page-grid() { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + + column-gap: 20px; + } + + @include on-small-desktop { + --columns: 12; + } + + @include on-desktop { + --columns: 12; + } + + @include on-large-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a7fd224f0 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$light-gray: #f7f7f7; +$color-neutral: #292929; +$dark-gray: #333; +$btn-hover: #131313; +$btn-active: #d0d0d0; +$white: #fff; +$color-turquoise: #0c797a; +$small-tablet-min-width: 568px; +$tablet-min-width: 768px; +$small-desktop-min-width: 870px; +$desktop-min-width: 1200px; +$large-desktop-min-width: 1440px; +$effectDuration: 0.3s;