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..39c945655 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,28 @@ -# Kickstarter landing page (HARD) +# NAMU Landing Page -**⚠️ 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).** +[Live Demo](https://razor5000.github.io/Kickstarter/#header) -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 -- Mobile (> 320px) -1. Implement the header with `nav`. -1. Implement `Benefits` block. -1. Implement `Presentation` block. -1. Implement `About us` block. -1. Implement `Technology` block. -1. Implement `Testimonilas` block. -1. Implement `Features` block. -1. Implement `Questions` block -1. Implement the footer. +![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) +![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) +![Sass](https://img.shields.io/badge/Sass-hotpink.svg?style=for-the-badge&logo=Sass&logoColor=white) +![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) +## 📋 Описание проекта +Адаптивный лендинг для стартапа. В проекте реализована верстка по макету Figma, использованы современные подходы к стилизации и сборке. -## Github flow +превью проекта -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`) -4. Run `npm start`. -5. Open one more terminal window for the next steps -6. `git checkout -b develop` - to create new branch and switch on it -7. Write you code in `src` folder -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages` -10. `git add . && git commit -m 'solution'` to save your changes -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/) -14. Copy `DEMO LINK` to the PR description +## 🛠 Технологии +* **HTML5 / SCSS** (БЭМ методология) +* **Vite** (сборка проекта) +* **Cypress** (тестирование) +* **GitHub Pages** (хостинг) -> To update you PR repeat steps 7-11 +## 🚀 Как запустить локально +1. Клонировать репозиторий: + `https://github.com/razor5000/Kickstarter.git` +2. Установить зависимости: + `npm install` +3. Запустить режим разработки: + `npm run dev` diff --git a/index.html b/index.html index d339e6856..f8caf7ac4 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,390 @@ + - Title + Crazybaby + + + + + + - -

Hello Mate Academy

- + + + +
+
+
+
+ + + +
+
+
+ specs + + +
+ Buy + +
+
+
+
+

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.

+
+
+
+ + +
+
+ + + + Luna eye + +
+
+ + +
+
+
+

DESIGNED FOR THE FUTURE

+
+ + + + Luna eye + +
+

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

+
+ Stive Marin +
Garrett Martin
+

Creative Director

+
+
+ + +
+

FEATURES

+
+
+
+

Sound & Music

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

Connectivity

+
    +
  • Feel-in-chest Base Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music from Last Song Stopped
    • +
+
+ +
+
+
+
+ + + + product + +
+
+ + + + turtle + +
+
+ + + + desert + +
+
+ + + + rider + +
+
+
+
+
+
+
+ +
+ + + + 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..c88577546 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "kickstarter", "version": "1.0.0", "description": "Kickstarter", - "homepage": "Kickstarter", + "homepage": "https://razor5000.github.io/Kickstarter/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -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/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/about-us/design.png b/src/images/about-us/design.png new file mode 100644 index 000000000..28c760620 Binary files /dev/null and b/src/images/about-us/design.png differ diff --git a/src/images/about-us/desktop/design.avif b/src/images/about-us/desktop/design.avif new file mode 100644 index 000000000..2418c4e7e Binary files /dev/null and b/src/images/about-us/desktop/design.avif differ diff --git a/src/images/about-us/desktop/luna-eye.avif b/src/images/about-us/desktop/luna-eye.avif new file mode 100644 index 000000000..c48639d3f Binary files /dev/null and b/src/images/about-us/desktop/luna-eye.avif differ diff --git a/src/images/about-us/luna-eye.png b/src/images/about-us/luna-eye.png new file mode 100644 index 000000000..8c1d6ebb2 Binary files /dev/null and b/src/images/about-us/luna-eye.png differ diff --git a/src/images/about-us/mobile/design.avif b/src/images/about-us/mobile/design.avif new file mode 100644 index 000000000..327011aaa Binary files /dev/null and b/src/images/about-us/mobile/design.avif differ diff --git a/src/images/about-us/mobile/luna-eye.avif b/src/images/about-us/mobile/luna-eye.avif new file mode 100644 index 000000000..761c5417c Binary files /dev/null and b/src/images/about-us/mobile/luna-eye.avif differ diff --git a/src/images/about-us/tablet/design.avif b/src/images/about-us/tablet/design.avif new file mode 100644 index 000000000..e156e9aa1 Binary files /dev/null and b/src/images/about-us/tablet/design.avif differ diff --git a/src/images/about-us/tablet/luna-eye.avif b/src/images/about-us/tablet/luna-eye.avif new file mode 100644 index 000000000..93dc8230e Binary files /dev/null and b/src/images/about-us/tablet/luna-eye.avif differ diff --git a/src/images/avatar.png b/src/images/avatar.png new file mode 100644 index 000000000..9f022f538 Binary files /dev/null and b/src/images/avatar.png differ diff --git a/src/images/bgi/desktop/luna-eye.avif b/src/images/bgi/desktop/luna-eye.avif new file mode 100644 index 000000000..d096201c9 Binary files /dev/null and b/src/images/bgi/desktop/luna-eye.avif differ diff --git a/src/images/bgi/desktop/meet-luna.avif b/src/images/bgi/desktop/meet-luna.avif new file mode 100644 index 000000000..d12f7d134 Binary files /dev/null and b/src/images/bgi/desktop/meet-luna.avif differ diff --git a/src/images/bgi/luna-eye.png b/src/images/bgi/luna-eye.png new file mode 100644 index 000000000..60da54f9d Binary files /dev/null and b/src/images/bgi/luna-eye.png differ diff --git a/src/images/bgi/meet-luna.png b/src/images/bgi/meet-luna.png new file mode 100644 index 000000000..413428fc9 Binary files /dev/null and b/src/images/bgi/meet-luna.png differ diff --git a/src/images/bgi/mobile/luna-eye.avif b/src/images/bgi/mobile/luna-eye.avif new file mode 100644 index 000000000..ebe1c8d40 Binary files /dev/null and b/src/images/bgi/mobile/luna-eye.avif differ diff --git a/src/images/bgi/mobile/meet-luna.avif b/src/images/bgi/mobile/meet-luna.avif new file mode 100644 index 000000000..b77abdc51 Binary files /dev/null and b/src/images/bgi/mobile/meet-luna.avif differ diff --git a/src/images/bgi/tablet/luna-eye.avif b/src/images/bgi/tablet/luna-eye.avif new file mode 100644 index 000000000..95cc28f8a Binary files /dev/null and b/src/images/bgi/tablet/luna-eye.avif differ diff --git a/src/images/bgi/tablet/luna-eye.png b/src/images/bgi/tablet/luna-eye.png new file mode 100644 index 000000000..60da54f9d Binary files /dev/null and b/src/images/bgi/tablet/luna-eye.png differ diff --git a/src/images/bgi/tablet/meet-luna.avif b/src/images/bgi/tablet/meet-luna.avif new file mode 100644 index 000000000..b54ab4992 Binary files /dev/null and b/src/images/bgi/tablet/meet-luna.avif differ diff --git a/src/images/features/desert.jpg~ b/src/images/features/desert.jpg~ new file mode 100644 index 000000000..9326a61ea Binary files /dev/null and b/src/images/features/desert.jpg~ differ diff --git a/src/images/features/desktop/desert.jpg b/src/images/features/desktop/desert.jpg new file mode 100644 index 000000000..9326a61ea Binary files /dev/null and b/src/images/features/desktop/desert.jpg differ diff --git a/src/images/features/desktop/product.png b/src/images/features/desktop/product.png new file mode 100644 index 000000000..072775ef6 Binary files /dev/null and b/src/images/features/desktop/product.png differ diff --git a/src/images/features/desktop/rider.jpg b/src/images/features/desktop/rider.jpg new file mode 100644 index 000000000..276ad5fe3 Binary files /dev/null and b/src/images/features/desktop/rider.jpg differ diff --git a/src/images/features/desktop/turtle.jpg b/src/images/features/desktop/turtle.jpg new file mode 100644 index 000000000..88960fb78 Binary files /dev/null and b/src/images/features/desktop/turtle.jpg differ diff --git a/src/images/features/mobile/desert.avif b/src/images/features/mobile/desert.avif new file mode 100644 index 000000000..a84d35bf4 Binary files /dev/null and b/src/images/features/mobile/desert.avif differ diff --git a/src/images/features/mobile/product.avif b/src/images/features/mobile/product.avif new file mode 100644 index 000000000..40625a888 Binary files /dev/null and b/src/images/features/mobile/product.avif differ diff --git a/src/images/features/mobile/rider.avif b/src/images/features/mobile/rider.avif new file mode 100644 index 000000000..4054b80c6 Binary files /dev/null and b/src/images/features/mobile/rider.avif differ diff --git a/src/images/features/mobile/turtle.avif b/src/images/features/mobile/turtle.avif new file mode 100644 index 000000000..29c0d13de Binary files /dev/null and b/src/images/features/mobile/turtle.avif differ diff --git a/src/images/features/product.png b/src/images/features/product.png new file mode 100644 index 000000000..c44f4739e Binary files /dev/null and b/src/images/features/product.png differ diff --git a/src/images/features/rider.jpg~ b/src/images/features/rider.jpg~ new file mode 100644 index 000000000..276ad5fe3 Binary files /dev/null and b/src/images/features/rider.jpg~ differ diff --git a/src/images/features/tablet/desert.avif b/src/images/features/tablet/desert.avif new file mode 100644 index 000000000..60e15602b Binary files /dev/null and b/src/images/features/tablet/desert.avif differ diff --git a/src/images/features/tablet/product.avif b/src/images/features/tablet/product.avif new file mode 100644 index 000000000..49a9e039a Binary files /dev/null and b/src/images/features/tablet/product.avif differ diff --git a/src/images/features/tablet/rider.avif b/src/images/features/tablet/rider.avif new file mode 100644 index 000000000..9544fffaa Binary files /dev/null and b/src/images/features/tablet/rider.avif differ diff --git a/src/images/features/tablet/turtle.avif b/src/images/features/tablet/turtle.avif new file mode 100644 index 000000000..73436c531 Binary files /dev/null and b/src/images/features/tablet/turtle.avif differ diff --git a/src/images/features/turtle.jpg~ b/src/images/features/turtle.jpg~ new file mode 100644 index 000000000..855dd6e79 Binary files /dev/null and b/src/images/features/turtle.jpg~ differ diff --git "a/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/desert.avif" "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/desert.avif" new file mode 100644 index 000000000..a02a5f4d1 Binary files /dev/null and "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/desert.avif" differ diff --git "a/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/rider.avif" "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/rider.avif" new file mode 100644 index 000000000..94d9d10ee Binary files /dev/null and "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/rider.avif" differ diff --git "a/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/turtle.avif" "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/turtle.avif" new file mode 100644 index 000000000..4225c4e2c Binary files /dev/null and "b/src/images/features/\320\235\320\276\320\262\320\260\321\217 \320\277\320\260\320\277\320\272\320\260/turtle.avif" differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..9977a457b --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon-32.png b/src/images/icons/favicon-32.png new file mode 100644 index 000000000..f39d1a594 Binary files /dev/null and b/src/images/icons/favicon-32.png differ diff --git a/src/images/icons/favicon-64.png b/src/images/icons/favicon-64.png new file mode 100644 index 000000000..8282d5a2b Binary files /dev/null and b/src/images/icons/favicon-64.png differ diff --git a/src/images/icons/lang-en.svg b/src/images/icons/lang-en.svg new file mode 100644 index 000000000..5ac755af2 --- /dev/null +++ b/src/images/icons/lang-en.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/lang-ua.svg b/src/images/icons/lang-ua.svg new file mode 100644 index 000000000..a9d87fe4c --- /dev/null +++ b/src/images/icons/lang-ua.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/quots.svg b/src/images/icons/quots.svg new file mode 100644 index 000000000..02a5a3a0d --- /dev/null +++ b/src/images/icons/quots.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/facebook.svg b/src/images/icons/social/facebook.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/icons/social/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/instagram.svg b/src/images/icons/social/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/icons/social/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/twitter.svg b/src/images/icons/social/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/icons/social/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/specs/figure-1.svg b/src/images/icons/specs/figure-1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/icons/specs/figure-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/specs/figure-2.svg b/src/images/icons/specs/figure-2.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/icons/specs/figure-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/specs/figure-3.svg b/src/images/icons/specs/figure-3.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/icons/specs/figure-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/specs/figure-4.svg b/src/images/icons/specs/figure-4.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/icons/specs/figure-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/vector-left.svg b/src/images/icons/vector-left.svg new file mode 100644 index 000000000..cfab7d543 --- /dev/null +++ b/src/images/icons/vector-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/vector-right.svg b/src/images/icons/vector-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icons/vector-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/preview.png b/src/images/preview.png new file mode 100644 index 000000000..c0e7152c8 Binary files /dev/null and b/src/images/preview.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..247afc193 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,114 @@ 'use strict'; +import '../styles/base/styles.scss'; + +const form = document.querySelector('#feedback-form'); +const emailInput = document.querySelector('#email-field'); +const messageInput = document.querySelector('#text-field'); +const ERROR_CLASS = 'form__input--error'; + +form.addEventListener('submit', (event) => { + event.preventDefault(); + + emailInput.classList.remove(ERROR_CLASS); + messageInput.classList.remove(ERROR_CLASS); + + let hasError = false; + + if (!emailInput.value.includes('@') || emailInput.value.length < 5) { + emailInput.classList.add(ERROR_CLASS); + hasError = true; + } + + if (messageInput.value.trim() === '') { + messageInput.classList.add(ERROR_CLASS); + hasError = true; + } + + if (!hasError) { + console.log('Данные готовы к отправке:', { + email: emailInput.value, + message: messageInput.value + }); + form.reset(); + } +}); + +const langButton = document.getElementById('lang-select'); +const langBtnStyles = document.querySelector('.header__lang-btn'); + +langButton.addEventListener('click', () => { + langBtnStyles.classList.toggle('header__lang-btn--is-active'); +}); + +const burgerBtn = document.getElementById('burger-btn'); +const mobileMenu = document.getElementById('menu'); +const langContainer = document.querySelector('.header__lang-container'); +const body = document.body; +const menuLinks = document.querySelectorAll('.menu__link'); +const buyBtn = document.getElementById('header-btn'); + +function toggleMenu() { + mobileMenu.classList.toggle('menu--is-open'); + burgerBtn.classList.toggle('burger--is-active'); + langContainer.classList.toggle('header__lang-container--is-active'); + buyBtn.classList.toggle('header__prim-btn--menu-is-open'); + body.classList.toggle('body__no-scroll'); +} + +burgerBtn.addEventListener('click', toggleMenu); + +menuLinks.forEach(link => { + link.addEventListener('click', () => { + if (mobileMenu.classList.contains('menu--is-open')) { + toggleMenu(); + } + }); +}); + +buyBtn.addEventListener('click', () => { + if (mobileMenu.classList.contains('menu--is-open')) { + toggleMenu(); + } +}); + + +// 1. Находим элементы +const slides = document.querySelectorAll('.slider__slide'); +const currentNumDisplay = document.querySelector('.pagination__current'); +const btnPrev = document.querySelector('.pagination__arrow--prev'); +const btnNext = document.querySelector('.pagination__arrow--next'); +const viewport = document.querySelector('.slider__viewport'); + +let currentIndex = 0; // Начинаем с первого (01) + +// 2. Функция обновления интерфейса +function updateSlider() { + const slideWidth = viewport.offsetWidth; + + viewport.scrollTo({ + left: slideWidth * currentIndex, + behavior: 'smooth' + }); + + // Обновляем цифру (добавляем 0 перед числом, если оно меньше 10) + currentNumDisplay.textContent = (currentIndex + 1).toString().padStart(2, '0'); +} + +// 3. Обработчики кликов +btnNext.addEventListener('click', () => { + if (currentIndex < slides.length - 1) { + currentIndex++; + } else { + currentIndex = 0; // Зацикливаем (по желанию) + } + updateSlider(); +}); + +btnPrev.addEventListener('click', () => { + if (currentIndex > 0) { + currentIndex--; + } else { + currentIndex = slides.length - 1; // Возвращаемся в конец + } + updateSlider(); +}); 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..8345d2779 --- /dev/null +++ b/src/styles/base/_base.scss @@ -0,0 +1,16 @@ +html { + scroll-behavior: smooth; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; + font-family: 'Open Sans', sans-serif; + background: $c-main-bg; +} diff --git a/src/styles/base/_sr-only.scss b/src/styles/base/_sr-only.scss new file mode 100644 index 000000000..8020239f0 --- /dev/null +++ b/src/styles/base/_sr-only.scss @@ -0,0 +1,6 @@ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + visibility: hidden; +} diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss new file mode 100644 index 000000000..702dddef6 --- /dev/null +++ b/src/styles/base/_typography.scss @@ -0,0 +1,27 @@ +h1 { + @extend %h1; +} + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +h6 { + @extend %h6; +} + +p { + @extend %p; +} diff --git a/src/styles/base/_visualy-hiden.scss b/src/styles/base/_visualy-hiden.scss new file mode 100644 index 000000000..be02bf5ab --- /dev/null +++ b/src/styles/base/_visualy-hiden.scss @@ -0,0 +1,15 @@ +.visualy-hiden { + position: absolute; + + overflow: hidden; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + + white-space: nowrap; + + clip-path: inset(100%); +} diff --git a/src/styles/base/styles.scss b/src/styles/base/styles.scss new file mode 100644 index 000000000..f0359a958 --- /dev/null +++ b/src/styles/base/styles.scss @@ -0,0 +1,22 @@ +@import '../utils/utils'; +@import 'typography'; +@import 'base'; +@import 'visualy-hiden'; +@import 'sr-only'; +@import '../layout/body'; +@import '../layout/prim-btn'; +@import '../layout/menu'; +@import '../layout/header'; +@import '../layout/burger'; +@import '../layout/welcome'; +@import '../layout/about-us'; +@import '../layout/quots'; +@import '../layout/footer'; +@import '../layout/form'; +@import '../layout/main'; +@import '../layout/features'; +@import '../layout/slider'; +@import '../layout/pagination'; +@import '../layout/specs-card'; +@import '../layout/specs'; +@import '../layout/about-us-card'; diff --git a/src/styles/layout/_about-us-card.scss b/src/styles/layout/_about-us-card.scss new file mode 100644 index 000000000..b872b813b --- /dev/null +++ b/src/styles/layout/_about-us-card.scss @@ -0,0 +1,128 @@ +.about-us-card { + width: 100%; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(3, auto); + column-gap: 20px; + align-items: stretch; + } + + @include on-desktop { + column-gap: 30px; + } + + &__title { + margin: 0; + color: $c-typo; + + @include on-tablet { + grid-column: 2 / 3; + grid-row: 1; + } + + &--two { + @include on-tablet { + grid-column: 1 / 2; + } + } + } + + &__img-wrapper { + width: 100%; + height: 100%; + margin-top: 20px; + + @include on-tablet { + grid-column: 1 / 2; + grid-row: 1 / 4; + margin: 0; + } + + &--two { + @include on-tablet { + grid-column: 2 / 3; + } + } + } + &__img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + + @include hover(scale, 1.05); + } + + &__typo { + @extend %p-secondary; + + margin: 0; + margin-top: 20px; + color: $c-typo-secondary; + + @include on-tablet { + grid-column: 2 / 3; + grid-row: 2; + margin-top: 30px; + } + + &--two { + @include on-tablet { + grid-column: 1 / 2; + } + } + } + + &__link { + @extend %h-btn; + + position: relative; + + display: block; + + width: 130px; + height: 14px; + margin-top: 30px; + + color: $c-acent-light; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + transform-origin: left; + transform: scaleX(35%); + + display: block; + + width: 100%; + height: 1px; + + background-color: $c-acent-light; + + transition: all $transition-time ease-in-out; + } + + &:hover { + &::after { + transform: scaleX(100%); + } + } + + @include on-tablet { + grid-column: 2 / 3; + grid-row: 3; + margin-top: 60px; + } + + &--two { + @include on-tablet { + grid-column: 1 / 2; + } + } + } +} diff --git a/src/styles/layout/_about-us.scss b/src/styles/layout/_about-us.scss new file mode 100644 index 000000000..7237b7114 --- /dev/null +++ b/src/styles/layout/_about-us.scss @@ -0,0 +1,24 @@ +.about-us { + &__container { + @include make-container; + + display: flex; + flex-direction: column; + + @include on-tablet { + padding: 0; + } + } + + &__about-us-card { + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-desktop { + margin-top: 170px; + } + } +} diff --git a/src/styles/layout/_body.scss b/src/styles/layout/_body.scss new file mode 100644 index 000000000..dc9f5f46e --- /dev/null +++ b/src/styles/layout/_body.scss @@ -0,0 +1,7 @@ +.body { + width: 100%; + + &__no-scroll { + overflow: hidden; + } +} diff --git a/src/styles/layout/_burger.scss b/src/styles/layout/_burger.scss new file mode 100644 index 000000000..6980d23a8 --- /dev/null +++ b/src/styles/layout/_burger.scss @@ -0,0 +1,66 @@ +.burger { + cursor: pointer; + + position: relative; + transform: translateX(0); + + width: 24px; + height: 16px; + border: none; + + background: none; + + transition: all 0.3s ease; + + &::before { + top: 0; + } + + &::after { + bottom: 0; + } + + &__burger-line, + &::before, + &::after { + content: ''; + + position: absolute; + left: 0; + + width: 100%; + height: 2px; + + background-color: $c-acent-dark; + + transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); + } + + span { + top: 50%; + transform: translateY(-50%); + } + + &--is-active { + &::before { + top: 7px; + transform: rotate(45deg); + } + &::after { + bottom: 7px; + transform: rotate(-45deg); + } + span { + transform: translateX(-100%); + visibility: hidden; + opacity: 0; + } + + @include on-tablet { + transform: translateX(0); + order: 0; + } + } + + @include hover(scale, 1.05); +} diff --git a/src/styles/layout/_features.scss b/src/styles/layout/_features.scss new file mode 100644 index 000000000..14d5d2540 --- /dev/null +++ b/src/styles/layout/_features.scss @@ -0,0 +1,141 @@ +.features { + position: relative; + width: 100%; + + &__title { + width: 100%; + max-width: 1280px; + margin: 0 auto; + padding-bottom: 30px; + padding-inline: 30px; + + color: $c-typo; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } + } + + &__container { + @include make-container($padding: 0); + } + + &__content-wrapper { + display: flex; + flex-direction: column; + + width: 100%; + padding-inline: 30px; + + background-color: $c-features-bg; + + @include on-tablet { + @include grid-gap; + + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: 1fr autor; + padding: 0; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__list-wrapper { + @include on-tablet { + grid-column: 2 / 5; + grid-row: 1; + } + + @include on-desktop { + grid-column: 2 / 7; + grid-row: 2; + } + + &--first { + display: none; + + @include on-desktop { + display: block; + grid-column: 2 / 7; + grid-row: 1; + } + } + + &--second { + display: none; + + @include on-desktop { + display: block; + grid-column: 7 / -1; + grid-row: 1; + } + } + + &--third { + margin-bottom: 60px; + } + } + + &__subtitle { + margin: 0; + margin-top: 30px; + color: $c-feature-title; + + @include on-tablet { + margin-top: 60px; + } + } + + &__list { + margin: 0; + padding-left: 20px; + } + + &__list-item { + margin: 0; + padding: 0; + padding-top: 10px; + color: $c-typo; + &:first-child { + padding-top: 20px; + + @include on-desktop { + padding-top: 30px; + } + } + } + + &__slider { + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2 / 3; + align-self: end; + } + + @include on-desktop { + grid-column: 6 / -1; + grid-row: 2; + align-self: end; + } + } + + &__pagination { + @include on-tablet { + grid-column: 2 / 3; + } + + @include on-desktop { + grid-column: 11 / -1; + grid-row: 1; + align-self: end; + padding-right: 50px; + } + } +} diff --git a/src/styles/layout/_footer.scss b/src/styles/layout/_footer.scss new file mode 100644 index 000000000..d321405d0 --- /dev/null +++ b/src/styles/layout/_footer.scss @@ -0,0 +1,118 @@ +.footer { + width: 100%; + &__container { + @include make-container; + + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 90px; + padding-bottom: 20px; + + @include on-tablet { + @include grid-gap; + + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: auto 140px auto 60px auto 60px auto; + + padding-top: 140px; + padding-bottom: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-template-rows: auto 170px auto 70px auto 60px auto; + padding-top: 170px; + } + } + + &__title { + margin: 0; + color: $c-typo; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + align-self: start; + } + + @include on-desktop { + grid-column: 1 / 7; + line-height: 1.1; + } + } + + &__form { + margin-top: 30px; + + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1; + margin-top: 0; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__logo-container { + display: none; + justify-content: space-between; + width: 100%; + + @include on-tablet { + display: flex; + grid-column: 1 / -1; + grid-row: 3; + } + } + + &__logo { + @include hover(scale, 1.1); + } + + &__arrow { + @include hover(scale, 1.1); + } + + &__social-container { + display: flex; + gap: 40px; + align-items: center; + justify-content: center; + + margin-top: 110px; + + @include on-tablet { + transform: translateX(-11px); + + grid-column: 1 / -1; + grid-row: 5; + gap: 50px; + + margin-top: 0; + } + } + + &__social { + @include hover(scale, 1.1); + } + + &__small { + @extend %p-secondary; + + margin: 0; + margin-top: 30px; + color: $c-typo-tertiary; + text-align: center; + + @include on-tablet { + grid-column: 1 / -1; + grid-row: 7; + margin-top: 0; + } + } +} diff --git a/src/styles/layout/_form.scss b/src/styles/layout/_form.scss new file mode 100644 index 000000000..59297298d --- /dev/null +++ b/src/styles/layout/_form.scss @@ -0,0 +1,39 @@ +.form { + display: flex; + flex-direction: column; + width: 100%; + + &__input { + @include reset-form; + @include placeholder-style; + + width: 100%; + padding: 12px 20px; + border: solid 1px $c-form-border; + color: $c-placeholder-focused; + + &:hover { + border: solid 1px $c-acent-light; + } + + &--error { + border: solid 1px $c-form-border-error; + } + } + + &__email { + height: 48px; + } + + &__textarea { + resize: none; + min-height: 128px; + margin-top: 20px; + } + + &__prim-btn { + width: 102px; + height: 40px; + margin-top: 30px; + } +} diff --git a/src/styles/layout/_header.scss b/src/styles/layout/_header.scss new file mode 100644 index 000000000..9f6694b1a --- /dev/null +++ b/src/styles/layout/_header.scss @@ -0,0 +1,214 @@ +.header { + width: 100%; + height: 100dvh; + max-height: 700px; + padding-top: 25px; + + @include on-tablet { + padding-top: 30px; + } + + @include on-desktop { + max-height: 800px; + } + &__container { + @include make-container; + + position: relative; + display: flex; + flex-direction: column; + height: 100%; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: minmax(0, min-content) 1fr auto; + align-items: center; + + @include grid-gap; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-template-rows: minmax(0, min-content) 1fr auto; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + height: 48px; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__menu-container { + display: flex; + gap: 30px; + align-items: center; + } + + &__lang-container { + display: none; + gap: 30px; + align-items: center; + + @include on-tablet { + left: 34px; + display: flex; + } + + &--is-active { + position: absolute; + z-index: 101; + top: 290px; + left: 30px; + + display: flex; + } + } + + &__logo { + @include hover(scale, 1.05); + + position: relative; + z-index: 101; + } + + &__logo-link { + display: block; + } + + &__link { + color: $c-acent-dark; + text-decoration: none; + transition: all 0.5s ease-in-out; + + &:hover { + color: $c-acent-hover-dark; + text-shadow: 0.5px 0.8px 0.8px $c-acent-hover-dark; + } + } + + &__prim-btn { + @include prim-btn-base($c-acent-dark); + + display: none; + + width: 260px; + height: 48px; + + color: $c-main-bg; + text-decoration: none; + + @include on-tablet { + display: flex; + width: 100px; + } + + &--menu-is-open { + position: absolute; + z-index: 101; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + + display: flex; + + @include on-tablet { + display: none; + } + } + } + + &__burger { + position: relative; + z-index: 101; + + @include on-desktop { + display: none; + } + } + + &__lang-btn { + cursor: pointer; + + width: 50px; + height: 18px; + border: none; + + background-color: $c-main-bg; + background-image: url(../../images/icons/lang-en.svg); + background-repeat: no-repeat; + background-position: center; + + &--is-active { + background-image: url(../../images/icons/lang-ua.svg); + } + } + + &__bg { + display: block; + + width: 100%; + height: 100%; + max-height: 320px; + + background-image: url(../../images/bgi/luna-eye.png); + background-repeat: no-repeat; + background-position: 35%; + background-size: cover; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 2; + align-self: end; + } + + @include on-desktop { + align-self: center; + } + } + + &__typo-group { + display: flex; + flex-direction: column; + margin-top: 40px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + align-self: end; + } + + @include on-desktop { + grid-column: 1 / 5; + align-self: center; + } + } + + &__title { + margin: 0; + color: $c-typo; + } + + &__intro { + margin: 0; + margin-top: 20px; + color: $c-typo; + } + + &__menu { + @include on-desktop { + display: flex; + grid-column: 1 / -1; + grid-row: 3; + justify-self: center; + } + } +} diff --git a/src/styles/layout/_main.scss b/src/styles/layout/_main.scss new file mode 100644 index 000000000..c6ab51734 --- /dev/null +++ b/src/styles/layout/_main.scss @@ -0,0 +1,39 @@ +.main { + padding-top: 110px; + + @include on-tablet { + padding-top: 140px; + } + + @include on-desktop { + padding-top: 65px; + } + + &__features { + margin-top: 110px; + } + + &__welcome { + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-desktop { + margin-top: 170px; + } + } + + &__quots { + margin-top: 110px; + + @include on-tablet { + margin-top: 140px; + } + + @include on-desktop { + margin-top: 170px; + } + } +} diff --git a/src/styles/layout/_menu.scss b/src/styles/layout/_menu.scss new file mode 100644 index 000000000..4e743e3c8 --- /dev/null +++ b/src/styles/layout/_menu.scss @@ -0,0 +1,79 @@ +.menu { + position: relative; + position: fixed; + z-index: 100; + top: 0; + left: 0; + + width: 100%; + height: 100dvh; + + visibility: hidden; + opacity: 0; + background-color: $c-menu-bg; + + transition: + opacity 0.4s ease, + visibility 0.4s ease; + + &--is-open { + visibility: visible; + opacity: 1; + } + + @include on-desktop { + position: relative; + + display: flex; + align-items: center; + + width: auto; + height: auto; + height: 75px; + + visibility: visible; + opacity: 1; + } + + &__container { + @include make-container; + + height: 100dvh; + + @include on-desktop { + display: flex; + justify-content: center; + height: auto; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 0; + padding: 0; + padding-top: 105px; + + list-style: none; + + @include on-desktop { + flex-direction: row; + gap: 84px; + padding: 0; + } + } + + &__link { + @extend %p-secondary; + + color: $c-typo; + text-decoration: none; + transition: all 0.5s ease-in-out; + &:hover { + color: $c-acent-hover-dark; + text-shadow: 0.5px 0.8px 0.8px $c-acent-hover-dark; + } + } +} diff --git a/src/styles/layout/_pagination.scss b/src/styles/layout/_pagination.scss new file mode 100644 index 000000000..1ab7ee326 --- /dev/null +++ b/src/styles/layout/_pagination.scss @@ -0,0 +1,97 @@ +.pagination { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + + color: #555; + + &__arrow-container { + display: flex; + } + + &__count { + display: flex; + align-items: baseline; + font-family: sans-serif; + font-size: 18px; + } + + &__current { + font-size: 24px; + font-weight: bold; + } + + &__separator, + &__total { + margin-left: 4px; + font-size: 14px; + color: #88a; + } + + &__arrow { + cursor: pointer; + + position: relative; + + width: 48px; + height: 14px; + border: none; + + background: none; + + &--prev::before { + content: ''; + + position: absolute; + top: 0; + left: 1px; + + width: 100%; + height: 2px; + + background-color: $c-acent-hover-light; + } + + &--next::before { + content: ''; + + position: absolute; + right: 1px; + bottom: 0; + + width: 100%; + height: 2px; + + background-color: $c-acent-dark; + } + + &--prev::after { + content: ''; + + position: absolute; + top: 50%; + left: -1px; + transform: rotate(45deg); + + width: 20px; + height: 2px; + + background-color: $c-acent-hover-light; + } + + &--next::after { + content: ''; + + position: absolute; + right: -1px; + bottom: 50%; + transform: rotate(45deg); + + width: 20px; + height: 2px; + + background-color: $c-acent-dark; + } + } +} diff --git a/src/styles/layout/_prim-btn.scss b/src/styles/layout/_prim-btn.scss new file mode 100644 index 000000000..8614ac0bd --- /dev/null +++ b/src/styles/layout/_prim-btn.scss @@ -0,0 +1,3 @@ +.prim-btn { + @include prim-btn-base($c-acent-light); +} diff --git a/src/styles/layout/_quots.scss b/src/styles/layout/_quots.scss new file mode 100644 index 000000000..748461704 --- /dev/null +++ b/src/styles/layout/_quots.scss @@ -0,0 +1,67 @@ +.quots { + &__container { + @include make-container; + + display: flex; + flex-direction: column; + align-items: center; + max-width: 786px; + } + + &__typo-container { + position: relative; + width: 100%; + } + + &__typo { + @extend %p-quote; + + position: absolute; + z-index: 1; + bottom: 0; + + width: 100%; + height: 100%; + margin: 0; + + line-height: 1.5; + color: $c-typo; + text-align: center; + } + &__quots { + position: absolute; + z-index: -1; + width: 100%; + } + + &__svg { + width: 100%; + } + + &__img { + display: block; + + width: 62px; + height: 62px; + margin-top: 30px; + border-radius: 50%; + + @include hover(scale, 1.1); + } + + &__title { + margin: 0; + margin-top: 10px; + color: $c-typo; + + @include on-tablet { + margin-top: 20px; + } + } + + &__subtitle { + margin: 0; + margin-top: 5px; + color: $c-typo-secondary; + } +} diff --git a/src/styles/layout/_slider.scss b/src/styles/layout/_slider.scss new file mode 100644 index 000000000..ef5cada5a --- /dev/null +++ b/src/styles/layout/_slider.scss @@ -0,0 +1,63 @@ +.slider { + position: relative; + overflow: hidden; + width: 100%; + + &__viewport { + scroll-behavior: smooth; + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + + width: 100%; + height: 100%; + + -webkit-overflow-scrolling: touch; + + &::-webkit-scrollbar { + display: none; + } + } + + &__track { + display: flex; + flex-wrap: nowrap; + height: 100%; + } + + &__slide { + scroll-snap-align: center; + + overflow: hidden; + display: block; + flex: 0 0 100%; + + height: 175px; + margin-right: 25px; + + @include on-tablet { + height: 225px; + } + + @include on-desktop { + height: 300px; + } + + &--active { + scroll-behavior: smooth; + display: block; + } + } + + &__img { + display: block; + + width: 100%; + max-width: 100%; + height: 100%; + + object-fit: contain; + object-position: bottom; + } +} diff --git a/src/styles/layout/_specs-card.scss b/src/styles/layout/_specs-card.scss new file mode 100644 index 000000000..f5d3d0064 --- /dev/null +++ b/src/styles/layout/_specs-card.scss @@ -0,0 +1,22 @@ +.specs-card { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + &__title { + flex-grow: 1; + margin: 0; + margin-top: 40px; + color: $c-typo; + } + + &__typo { + margin: 0; + margin-top: 20px; + color: $c-typo; + text-align: center; + } + + @include hover(scale, 1.1); +} diff --git a/src/styles/layout/_specs.scss b/src/styles/layout/_specs.scss new file mode 100644 index 000000000..25d9958b5 --- /dev/null +++ b/src/styles/layout/_specs.scss @@ -0,0 +1,57 @@ +.specs { + &__container { + @include make-container; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: 1fr 1fr; + row-gap: 65px; + + @include grid-gap; + } + + @include on-desktop { + display: flex; + gap: 30px; + justify-content: space-between; + } + } + + &__specs-card { + display: none; + + &--one { + display: flex; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + } + + &--two { + @include on-tablet { + display: flex; + grid-column: 5 / -1; + grid-row: 1; + } + } + + &--three { + @include on-tablet { + display: flex; + grid-column: 1 / 5; + grid-row: 2; + } + } + + &--four { + @include on-tablet { + display: flex; + grid-column: 5 / -1; + grid-row: 2; + } + } + } +} diff --git a/src/styles/layout/_welcome.scss b/src/styles/layout/_welcome.scss new file mode 100644 index 000000000..74cd2085a --- /dev/null +++ b/src/styles/layout/_welcome.scss @@ -0,0 +1,10 @@ +.welcome { + &__container { + @include make-container; + } + + &__img { + display: block; + width: 100%; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..9b9bd049e 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,103 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + @include h1-tablet; + } + + @include on-desktop { + @include h1-desktop; + } +} + +%h2 { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 1.2; + text-transform: uppercase; + + @include on-tablet { + @include h2-tablet; + } + + @include on-desktop { + @include h2-desktop; + } +} + +%h3 { + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + text-transform: uppercase; + + @include on-tablet { + @include h3-tablet; + } + + @include on-desktop { + @include h3-desktop; + } +} + +%h4 { + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-transform: uppercase; +} + +%h5 { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; +} + +%h6 { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-transform: uppercase; +} + +%h-btn { + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + text-transform: uppercase; +} + +%p { + font-family: Inter, sans-serif; + font-size: 16px; font-weight: 400; + line-height: 24px; +} + +%p-secondary { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; +} + +%p-quote { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + + @include on-tablet { + @include p-quote-tablet; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..92fab006e 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,228 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} #{$transition-time}; &:hover { #{$_property}: $_toValue; } } + +@mixin make-container($max-w: 1280px, $padding: 30px, $display: block) { + display: $display; + + width: 100%; + max-width: $max-w; + margin: 0 auto; + padding-right: $padding; + padding-left: $padding; + + @include on-tablet { + padding-right: 34px; + padding-left: 34px; + } + + @include on-desktop { + padding-right: 123px; + padding-left: 123px; + } +} + +@mixin prim-btn-base($color) { + @extend %h-btn; + + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + border: none; + + @include hover(scale, 1.05); + + transition: all $transition-time ease; + + @if $color == $c-acent-light { + background-color: $c-acent-light; + &:hover { + background-color: $c-acent-hover-light; + } + &--is-disabled { + pointer-events: none; + + // cursor: not-allowed; + background-color: $c-acent-disabled-light; + } + } + + @if $color == $c-acent-dark { + background-color: $c-acent-dark; + &:hover { + background-color: $c-acent-hover-dark; + } + &--is-disabled { + pointer-events: none; + background-color: $c-acent-disabled-dark; + + // cursor: not-allowed; + } + } +} + +@mixin sec-btn-base($color) { + @extend %h-btn; + + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + + @include hover(scale, 1.05); + + transition: all $transition-time ease; + + @if $color == $c-acent-light { + border: solid 1px; + color: $c-acent-light; + &:hover { + background-color: $c-acent-hover-light; + } + &--is-disabled { + pointer-events: none; + background-color: $c-acent-disabled-light; + + // cursor: not-allowed; + } + } + + @if $color == $c-acent-dark { + border: solid 1px; + color: $c-acent-dark; + &:hover { + background-color: $c-acent-hover-dark; + } + &--is-disabled { + pointer-events: none; + background-color: $c-acent-disabled-dark; + + // cursor: not-allowed; + } + } +} + +@mixin cart-btn { + @extend %h-btn; + + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + + @include hover(scale, 1.05); + + color: $c-cart; + + &:hover { + border: solid 1px $c-cart; + } +} + +@mixin h1-tablet { + font-size: 48px; +} + +@mixin h1-desktop { + font-size: 62px; +} + +@mixin h2-tablet { + font-size: 36px; +} + +@mixin h2-desktop { + font-size: 56px; +} + +@mixin h3-tablet { + font-size: 24px; +} + +@mixin h3-desktop { + font-size: 34px; +} + +@mixin p-quote-tablet { + font-size: 24px; + line-height: 36; +} + +@mixin grid-gap { + column-gap: 20px; + + @include on-desktop { + column-gap: 30px; + } +} + +@mixin reset-form { + @extend %p; + + margin: 0; + padding: 0; + border: none; + border-radius: 0; + + color: $c-placeholder; + + appearance: none; + background: none; + outline: none; + box-shadow: none; + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + transition: background-color 5000s ease-in-out 0s; + + -webkit-shadow-box: 0 0 0 1000px white inset !important; + -webkit-text-fill-color: $c-placeholder-focused !important; + } +} + +@mixin placeholder-style { + &::placeholder { + @extend %p; + + color: $c-placeholder; + transition: all $transition-time ease-in-out; + } + &:hover { + &::placeholder { + color: $c-placeholder-hover; + } + } + &:focus { + &::placeholder { + color: $c-placeholder-focused; + + // opacity: 0; + } + } +} diff --git a/src/styles/utils/_utils.scss b/src/styles/utils/_utils.scss new file mode 100644 index 000000000..81987fa5b --- /dev/null +++ b/src/styles/utils/_utils.scss @@ -0,0 +1,3 @@ +@import 'vars'; +@import 'mixins'; +@import 'extends'; diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a2dfb684f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,23 @@ -$c-gray: #eee; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$transition-time: 0.3s; +$c-logo: #000; +$c-main-bg: #f7f7f7; +$c-menu-bg: #f9f9f9; +$c-features-bg: #d6ecec; +$c-feature-title: #0c797a; +$c-acent-light: #0db2b3; +$c-acent-hover-light: #0c797a; +$c-acent-disabled-light: #cfeff0; +$c-acent-dark: #333; +$c-acent-hover-dark: #131313; +$c-acent-disabled-dark: #d0d0d0; +$c-typo: #333; +$c-typo-secondary: #7c7c7c; +$c-typo-tertiary: #bdbdbd; +$c-cart: #4f4f4f; +$c-placeholder: #bdbdbd; +$c-placeholder-hover: #333; +$c-placeholder-focused: #333; +$c-form-border: #828282; +$c-form-border-error: #eb5757; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 000000000..b02c7f423 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,5 @@ +import { defineConfig } from 'vite'; + +export default defineConfig({ + base: '/Kickstarter/', +});