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..520e08c64 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,78 @@ -# 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).** - -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. - - -## 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 - -> To update you PR repeat steps 7-11 +# Kickstarter Landing Page + +## πŸ“Œ Description +This project is a fully responsive landing page built based on a Figma design. +It includes multiple sections such as header, features, testimonials, and more, with smooth animations and a well-structured layout. + +The main goal of this project was to strengthen skills in semantic HTML, SCSS, BEM methodology, and responsive web design. + +## πŸ›  Technologies Used +- HTML5 +- SCSS (Sass) +- BEM methodology +- JavaScript (ES6) +- Flexbox & CSS Grid +- Responsive design +- Animations (WOW.js, Animate.css) +- Git & GitHub + +## πŸ”— Preview +[Live Preview](https://mariiamad.github.io/Kickstarter/) + +## 🎨 Design +[Figma Design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) + +## πŸš€ How to Run the Project Locally + +1. Clone the repository: +```bash +git clone https://github.com/mariiamad/Kickstarter.git +``` + +2. Go to the project folder: +```bash +cd Kickstarter +``` + +3. Install dependencies: +```bash +npm install +``` + +4. Run the project: +```bash +npm start +``` + +## ✨ Features + +- Fully responsive layout (desktop, tablet, mobile) +- Clean and structured code using BEM +- Smooth scroll animations +- Cross-browser compatibility + +## ⚑ Challenges & Solutions + +### πŸ”Ή Responsive Layout +**Challenge:** Adapting complex design across multiple breakpoints (1440px, 1280px, 640px, mobile). +**Solution:** Used a combination of Flexbox and CSS Grid, along with media queries to ensure smooth transitions between screen sizes. + +### πŸ”Ή BEM Structure +**Challenge:** Keeping styles scalable and maintainable in a large layout. +**Solution:** Applied BEM methodology to organize components clearly and avoid style conflicts. + +### πŸ”Ή Animations on Scroll +**Challenge:** Implementing smooth and performant animations without affecting user experience. +**Solution:** Integrated WOW.js with Animate.css and optimized animation triggers. + +### πŸ”Ή Cross-browser Compatibility +**Challenge:** Ensuring consistent appearance across different browsers. +**Solution:** Tested layout in multiple browsers and adjusted styles where necessary. + +### πŸ”Ή Code Maintainability +**Challenge:** Managing a growing codebase with many sections. +**Solution:** Split styles into SCSS partials and kept components modular and reusable. + +## 🧠 Lessons Learned +- Improved skills in building scalable layouts using BEM +- Gained experience in handling complex responsive designs diff --git a/index.html b/index.html index d339e6856..b6a2d8d28 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,576 @@ - + - Title + Kickstarter + + + + + + + - -

Hello Mate Academy

- + +
+
+
+ + + + +
+
+
+ SPECS +
+ +
+
+ + + + +
+
+ +
+
+ +

+ Futuristic +
+ Wireless +
+ Speaker +

+ +

+ Luna’s performance is balanced and smooth in all frequency ranges which makes the music both naturally pleasant and distinctlymore layered. +

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

Futuristic Design

+ +

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

+
+ +
+
+ +

Tweeter Speaker System

+ +

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

+
+ +
+
+ +

Multiroom System

+ +

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

+
+ +
+
+ +

Intuitive Lighting System

+ +

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

+
+
+
+ +
+
+ +
+
+

DESIGNED FOR THE FUTURE

+ + Ear (stick) + +
+

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

+
+ + Foto Garrett Martin + +

Garrett Martin

+ +

Creative Director

+
+
+
+ +
+

Features

+ +
+
+
+
+
+
+

Sound & Music

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

Connectivity

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

App Features

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

Connectivity

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

App Features

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

Sound & Music

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

+ DO YOU HAVE ANY QUESTIONS? +

+ +
+
+ +
+ +
+ +
+ + +
+
+
+
+
+ +
+
+
+
+ + + + + + arrow + +
+ +
+ + + + + +
+ +

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

+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..7d53e9732 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", @@ -13039,20 +13040,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", 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/benefits-icon/icon-1.svg b/src/images/benefits-icon/icon-1.svg new file mode 100644 index 000000000..ffa680dba --- /dev/null +++ b/src/images/benefits-icon/icon-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits-icon/icon-2.svg b/src/images/benefits-icon/icon-2.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/benefits-icon/icon-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits-icon/icon-3-wifi.svg b/src/images/benefits-icon/icon-3-wifi.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/benefits-icon/icon-3-wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/benefits-icon/icon-4.svg b/src/images/benefits-icon/icon-4.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/benefits-icon/icon-4.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..fa7e53627 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/footer-icons/arrow.svg b/src/images/footer-icons/arrow.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/footer-icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-icons/icon-f.svg b/src/images/footer-icons/icon-f.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/footer-icons/icon-f.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-icons/icon-i.svg b/src/images/footer-icons/icon-i.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/footer-icons/icon-i.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer-icons/icon-t.svg b/src/images/footer-icons/icon-t.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/footer-icons/icon-t.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/image-tablet.png b/src/images/image-tablet.png new file mode 100644 index 000000000..31d200272 Binary files /dev/null and b/src/images/image-tablet.png differ diff --git a/src/images/image.png b/src/images/image.png new file mode 100644 index 000000000..8b8aa1d35 Binary files /dev/null and b/src/images/image.png differ diff --git a/src/images/logo-2x.png b/src/images/logo-2x.png new file mode 100644 index 000000000..ff45acd20 Binary files /dev/null and b/src/images/logo-2x.png differ diff --git a/src/images/main-img/designos.png b/src/images/main-img/designos.png new file mode 100644 index 000000000..3b2782c9c Binary files /dev/null and b/src/images/main-img/designos.png differ diff --git a/src/images/main-img/ellipse.svg b/src/images/main-img/ellipse.svg new file mode 100644 index 000000000..551d3e805 --- /dev/null +++ b/src/images/main-img/ellipse.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/main-img/feature-background.png b/src/images/main-img/feature-background.png new file mode 100644 index 000000000..123915561 Binary files /dev/null and b/src/images/main-img/feature-background.png differ diff --git a/src/images/main-img/feature-img.png b/src/images/main-img/feature-img.png new file mode 100644 index 000000000..b185c3c93 Binary files /dev/null and b/src/images/main-img/feature-img.png differ diff --git a/src/images/main-img/icon-en-ua-hover.svg b/src/images/main-img/icon-en-ua-hover.svg new file mode 100644 index 000000000..a9d87fe4c --- /dev/null +++ b/src/images/main-img/icon-en-ua-hover.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main-img/icon-en-ua.svg b/src/images/main-img/icon-en-ua.svg new file mode 100644 index 000000000..5ac755af2 --- /dev/null +++ b/src/images/main-img/icon-en-ua.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/main-img/left-hover.svg b/src/images/main-img/left-hover.svg new file mode 100644 index 000000000..ecd550f93 --- /dev/null +++ b/src/images/main-img/left-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main-img/left.svg b/src/images/main-img/left.svg new file mode 100644 index 000000000..ecd550f93 --- /dev/null +++ b/src/images/main-img/left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main-img/luna-eye.png b/src/images/main-img/luna-eye.png new file mode 100644 index 000000000..a93b22ee1 Binary files /dev/null and b/src/images/main-img/luna-eye.png differ diff --git a/src/images/main-img/presentation-desktop.png b/src/images/main-img/presentation-desktop.png new file mode 100644 index 000000000..164e9934b Binary files /dev/null and b/src/images/main-img/presentation-desktop.png differ diff --git a/src/images/main-img/presentation-mobile.png b/src/images/main-img/presentation-mobile.png new file mode 100644 index 000000000..e6a68c262 Binary files /dev/null and b/src/images/main-img/presentation-mobile.png differ diff --git a/src/images/main-img/presentation-tablet.png b/src/images/main-img/presentation-tablet.png new file mode 100644 index 000000000..ef512c9cb Binary files /dev/null and b/src/images/main-img/presentation-tablet.png differ diff --git a/src/images/main-img/right-hover.svg b/src/images/main-img/right-hover.svg new file mode 100644 index 000000000..037f13419 --- /dev/null +++ b/src/images/main-img/right-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main-img/right.svg b/src/images/main-img/right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/main-img/right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/main-img/testimonilas-background.png b/src/images/main-img/testimonilas-background.png new file mode 100644 index 000000000..d4f7961ec Binary files /dev/null and b/src/images/main-img/testimonilas-background.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..345fea83c 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,40 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const slider = document.getElementById('featuresSlider'); + const prevButton = document.getElementById('featuresPrev'); + const nextButton = document.getElementById('featuresNext'); + const currentCounter = document.getElementById('featuresCurrent'); + + if (!slider || !prevButton || !nextButton || !currentCounter) { + return; + } + + const slides = slider.querySelectorAll('.features__slide'); + const totalSlides = slides.length; + let currentSlide = 0; + + const updateSlider = () => { + slider.style.transform = `translateX(-${currentSlide * 100}%)`; + currentCounter.textContent = String(currentSlide + 1).padStart(2, '0'); + + prevButton.disabled = currentSlide === 0; + nextButton.disabled = currentSlide === totalSlides - 1; + }; + + prevButton.addEventListener('click', () => { + if (currentSlide > 0) { + currentSlide -= 1; + updateSlider(); + } + }); + + nextButton.addEventListener('click', () => { + if (currentSlide < totalSlides - 1) { + currentSlide += 1; + updateSlider(); + } + }); + + updateSlider(); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..a30f65265 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,3 @@ +.about-us { + @include card-hover; +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..28e4f904e --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,89 @@ +.benefits { + padding: 0; + font-family: Inter, sans-serif; + + &__content { + margin-top: auto; + + @include page-grid; + } + + &__item { + cursor: pointer; + display: flex; + grid-column: span 4; + flex-direction: column; + + @include card-hover; + + &:nth-child(n + 2) { + display: none; + + @include on-tablet { + display: flex; + } + } + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + } + + &__icon { + display: block; + + width: 50px; + height: 40px; + margin: 0 auto 40px; + + background-image: url(../images/benefits-icon/icon-1.svg); + background-position: center; + background-size: cover; + + @include on-tablet { + margin: 0 auto 50px; + } + + @include on-desktop { + width: 70px; + height: 50px; + margin: 0 auto 30px; + } + + &--2 { + background-image: url(../images/benefits-icon/icon-2.svg); + } + + &--3 { + background-image: url(../images/benefits-icon/icon-3-wifi.svg); + } + + &--4 { + background-image: url(../images/benefits-icon/icon-4.svg); + } + } + + &__title { + margin-bottom: 20px; + + font-size: 22px; + font-weight: 700; + line-height: 28px; + text-align: center; + text-transform: uppercase; + } + + &__text { + margin-top: 0; + + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $main-color; + text-align: center; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..ad1990df7 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,59 @@ +.button { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + height: 48px; + margin-top: auto; + margin-bottom: 30px; + border: 0 solid transparent; + + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 100%; + color: $color-white; + text-align: center; + text-transform: uppercase; + + background-color: $main-text-color; + outline: none; + + transition: background-color $effectDuration; + + &:hover { + background-color: $menu-color-bold; + } + + &:active { + transform: scale(0.98); + background-color: $color-button-disabled; + } + + &:disabled { + pointer-events: none; + cursor: not-allowed; + background-color: $color-button-disabled; + } + + @include on-tablet { + display: none; + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + width: 100px; + margin: 0 auto; + } + + @include on-desktop { + width: 102px; + } + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..298e119f6 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,235 @@ +.features { + font-family: Inter, sans-serif; + + &__title { + margin-bottom: 30px; + + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + } + + &__container { + margin-inline: -30px; + background-color: $questions-button-disabled; + + @include on-tablet { + margin-inline: 0; + padding-top: 60px; + } + + @include on-desktop { + @include page-grid; + + overflow: visible; + padding-top: 0; + } + } + + &__content { + grid-column: 1 / -1; + + @include on-desktop { + display: none; + } + } + + &__slider-wrapper { + overflow: hidden; + } + + &__slider { + display: flex; + transition: transform $effectDuration ease; + } + + &__slide { + flex-shrink: 0; + box-sizing: border-box; + min-width: 100%; + } + + &__slide-content { + padding: 0 30px; + + @include on-tablet { + padding: 0 90px; + } + } + + &__subtitle { + margin-bottom: 30px; + + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: $color-features; + text-transform: uppercase; + + @include on-desktop { + margin-bottom: 30px; + font-size: 34px; + line-height: 42px; + } + } + + &__list { + margin: 0; + padding-left: 12px; + + font-size: 14px; + font-weight: 400; + line-height: 21px; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + } + } + + &__item:not(:last-child) { + margin-bottom: 10px; + } + + &__bottom { + @include on-tablet { + display: flex; + flex-direction: row; + padding-left: 90px; + } + } + + &__controls { + display: flex; + flex-direction: column; + gap: 0; + align-items: center; + justify-content: center; + + padding-top: 30px; + + @include on-desktop { + display: none; + } + } + + &__arrow { + cursor: pointer; + + width: 48px; + height: 14px; + padding: 0; + border: none; + + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + + &--left { + background-image: url(../images/main-img/left.svg); + + &:hover { + background-image: url(../images/main-img/left-hover.svg); + } + } + + &--right { + background-image: url(../images/main-img/right.svg); + + &:hover { + background-image: url(../images/main-img/right-hover.svg); + } + } + + &:disabled { + cursor: default; + opacity: 0.35; + } + } + + &__arrows { + display: flex; + } + + &__counter { + display: flex; + gap: 4px; + align-items: center; + + font-size: 16px; + font-weight: 400; + line-height: 24px; + } + + &__current { + color: $main-text-color; + } + + &__divider, + &__total { + margin-top: auto; + font-size: 11px; + line-height: 100%; + color: $color-features; + } + + &__image { + width: 100%; + height: 174px; + + background-image: url(../images/main-img/feature-background.png); + background-repeat: no-repeat; + background-position: center bottom; + background-size: contain; + + @include on-tablet { + height: 260px; + margin-top: -100px; + background-position: right bottom; + } + + @include on-desktop { + grid-column: 7 / -1; + grid-row: 2 / 4; + + height: 355px; + margin-top: auto; + + background-position: right bottom; + background-size: contain; + } + } + + &__desktop { + display: none; + + @include on-desktop { + display: block; + } + + &--left { + @include on-desktop { + grid-column: 2 / 5; + grid-row: 1 / 2; + } + } + + &--top-right { + @include on-desktop { + grid-column: 7 / 12; + grid-row: 1 / 2; + } + } + + &--bottom-left { + @include on-desktop { + grid-column: 2 / 5; + grid-row: 2 / 3; + padding-bottom: 60px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..d28bc503c --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,84 @@ +.footer { + &__content { + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + width: 100%; + padding-bottom: 20px; + + @include on-tablet { + gap: 60px; + } + } + + &__top { + display: none; + + @include on-tablet { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + } + } + + &__logo { + height: 26px; + + @include hover(transform, scale(1.2)); + } + + &__arrow { + position: absolute; + right: 0; + + @include hover(transform, scale(1.2)); + } + + &__icons { + display: flex; + gap: 40px; + } + + &__icon { + display: block; + + width: 24px; + height: 24px; + + background-position: center; + background-size: cover; + + &--facebook { + background-image: url(../images/footer-icons/icon-f.svg); + + @include hover(transform, scale(1.2)); + } + + &--twitter { + background-image: url(../images/footer-icons/icon-t.svg); + + @include hover(transform, scale(1.2)); + } + + &--instagram { + background-image: url(../images/footer-icons/icon-i.svg); + + @include hover(transform, scale(1.2)); + } + } + + &__line { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $color-footer; + text-align: center; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..894ba35fc --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,99 @@ +.header { + @include on-tablet { + padding-top: 29px; + } + + @include on-desktop { + padding-top: 30px; + } + + &__bottom { + @include on-tablet { + grid-auto-rows: minmax(auto, max-content); + align-items: end; + margin-top: 102px; + + @include page-grid; + } + + @include on-desktop { + margin-top: 32px; + } + } + + &__image { + width: 100%; + width: calc(100% + 60px); + height: 245px; + margin-top: 0; + margin-bottom: 40px; + margin-inline: -30px; + + background-image: url(../images/image-tablet.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + grid-column: 4 / 8; + grid-row: 1 / 3; + align-self: stretch; + + height: auto; + margin: 0; + + background-image: url(../images/image-tablet.png); + } + + @include on-desktop { + grid-column: 5 / 12; + height: 464px; + background-image: url(../images/image.png); + } + } + + &__title { + margin-bottom: 20px; + + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + grid-column: 1 / span 4; + grid-row: 1; + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + + @include on-tablet { + grid-column: 1 / span 3; + grid-row: 2; + } + } + + &__nav { + display: none; + + @include on-desktop { + display: flex; + justify-content: center; + margin-top: 100px; + margin-bottom: 62px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..50f5defac --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,28 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-position: center; + background-size: cover; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + width: 32px; + height: 32px; + } + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + + @include on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..bf15699b0 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,22 @@ +.main { + &__content { + @include page-grid; + + row-gap: 110px; + padding-block: 110px; + + @include on-tablet { + row-gap: 140px; + padding-block: 140px; + } + + @include on-desktop { + row-gap: 170px; + padding-block: 170px; + } + } + + &__content > * { + grid-column: 1 / -1; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..01236ecf3 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,24 @@ +.menu { + overflow: auto; + box-sizing: border-box; + background-color: $c-gray; + + @include on-tablet { + padding-top: 37px; + } + + &__content { + display: flex; + flex-direction: column; + height: 100vh; + } + + &__top { + margin-bottom: 32px; + background-color: $c-gray; + } + + &__nav { + margin-bottom: 50px; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..1a221375c --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,97 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-desktop { + display: flex; + flex-direction: row; + gap: 84px; + margin-block: 28px; + } + } + + &__link { + position: relative; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: inherit; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $main-text-color; + + transition: transform $effectDuration; + } + + &:hover::after { + transform: scale(1); + } + + &--bold { + font-weight: 700; + } + } +} + +.specs { + cursor: pointer; + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + display: none; + } + + &--tablet { + display: none; + + @include on-tablet { + display: flex; + gap: 30px; + } + } + + &__word { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 100%; + color: $speacs-color; + + @include hover(transform, scale(1.2)); + } + + &__icon { + display: block; + width: 50px; + height: 18px; + background-image: url(../images/main-img/icon-en-ua.svg); + + &:hover { + background-image: url(../images/main-img/icon-en-ua-hover.svg); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..214b495ec --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,33 @@ +.page { + scroll-behavior: smooth; + + font-family: Inter, sans-serif; + font-weight: 700; + color: $main-text-color; + letter-spacing: 0; + + &__body { + min-width: 320px; + margin: 0; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + + transition: all $effectDuration; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/presentation.scss b/src/styles/blocks/presentation.scss new file mode 100644 index 000000000..db3e5ef09 --- /dev/null +++ b/src/styles/blocks/presentation.scss @@ -0,0 +1,26 @@ +.presentation { + @include card-hover; + + aspect-ratio: 320 / 195; + width: calc(100% + 36px); + margin-inline: -18px; + + background-image: url(../images/main-img/presentation-tablet.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + aspect-ratio: 744 / 430; + width: 100%; + margin-inline: 0; + background-image: url(../images/main-img/presentation-tablet.png); + } + + @include on-desktop { + aspect-ratio: 1280px / 520; + width: 846px; + margin: 0 auto; + background-image: url(../images/main-img/presentation-desktop.png); + } +} diff --git a/src/styles/blocks/questions.scss b/src/styles/blocks/questions.scss new file mode 100644 index 000000000..3baabcafe --- /dev/null +++ b/src/styles/blocks/questions.scss @@ -0,0 +1,168 @@ +.questions { + @include on-tablet { + @include page-grid; + + align-items: start; + } + + &__title { + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + text-transform: uppercase; + letter-spacing: 0%; + + @include on-tablet { + grid-column: 1 / 5; + margin: 0; + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + grid-column: 1 / 7; + margin: 0; + font-size: 56px; + line-height: 70px; + } + } + + &__content { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__row { + margin-bottom: 16px; + } + + &__text { + display: block; + + box-sizing: border-box; + width: 100%; + height: 48px; + padding: 12px 20px; + border: 1px solid $questions-border; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $main-text-color; + + outline: none; + + &::placeholder { + color: #bdbdbd; + } + + &--textarea { + resize: none; + height: 148px; + padding: 14px 16px; + line-height: 140%; + + &::placeholder { + color: #bdbdbd; + } + } + + &:focus { + border: 1px solid $color-features; + color: $main-text-color; + } + + &:user-invalid { + border: 1px solid $user-invalid; + color: $user-invalid; + + &::placeholder { + color: $user-invalid; + } + } + } + + input:-webkit-autofill, + textarea:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px $row-background-color inset; + transition: background-color 5000s ease-in-out; + + -webkit-text-fill-color: $row-color; + } + + &__infos { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__info { + margin-bottom: 24px; + } + + &__item { + margin: 0; + + font-family: 'Space Mono', monospace; + font-size: 14px; + font-weight: 400; + color: $row-color; + text-decoration: none; + + @include hover(color, $row-color-dark); + + &--bold { + font-size: 16px; + color: $row-color-bold; + } + } + + &__button { + cursor: pointer; + + box-sizing: border-box; + width: 102px; + height: 40px; + border: 0 solid transparent; + + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 100%; + color: $color-white; + + background-color: $questions-button; + outline: none; + + transition: background-color $effectDuration; + + &:hover { + background-color: $color-features; + } + + &:active { + transform: scale(0.98); + background-color: $questions-button-disabled; + } + + &:disabled { + background-color: $questions-button-disabled; + } + + @include on-desktop { + width: 124px; + height: 48px; + } + } +} diff --git a/src/styles/blocks/technology.scss b/src/styles/blocks/technology.scss new file mode 100644 index 000000000..23e6172c2 --- /dev/null +++ b/src/styles/blocks/technology.scss @@ -0,0 +1,155 @@ +.technology { + font-family: Inter, sans-serif; + font-weight: 700; + letter-spacing: 0%; + + @include on-tablet { + @include page-grid; + + align-items: start; + } + + &__title { + margin-bottom: 30px; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + grid-column: 5 / 9; + grid-row: 1 / 2; + + margin-top: 0; + + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + grid-column: 7 / -1; + grid-row: 1 / 2; + } + } + + &__photo { + width: 100%; + height: 210px; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1 / 8; + + width: calc(100% + 34px); + height: 415px; + margin-bottom: 0; + margin-left: -34px; + + object-fit: cover; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 1 / 8; + } + } + + &__info { + @include on-tablet { + grid-column: 5 / 9; + grid-row: 2 / 3; + } + + @include on-desktop { + grid-column: 7 / -1; + grid-row: 2 / 3; + } + } + + &__text { + margin-bottom: 30px; + + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: $main-color; + + @include on-tablet { + align-self: stretch; + margin-bottom: 60px; + font-size: 16px; + line-height: 24px; + } + } + + &__link { + cursor: pointer; + + position: relative; + + font-size: 12px; + line-height: 14px; + color: $color-link; + text-transform: uppercase; + + &::after { + content: ''; + + position: absolute; + bottom: -6px; + left: 0; + transform-origin: left; + transform: scale(0.4); + + display: block; + + width: 100%; + height: 1px; + + background-color: $color-link; + + transition: transform $effectDuration; + + @include on-tablet { + bottom: -5px; + transform: scaleX(0.4); + } + + @include on-desktop { + transform: scaleX(0.5); + } + } + + &:hover::after { + transform: scale(1); + } + } + + &--eye { + @include on-tablet { + .technology__photo { + grid-column: 5 / 9; + margin-right: -34px; + margin-left: 0; + } + + .technology__title, + .technology__info { + grid-column: 1 / 5; + } + } + + @include on-desktop { + .technology__photo { + grid-column: 7 / -1; + margin-right: 0; + margin-left: 0; + } + + .technology__title, + .technology__info { + grid-column: 1 / 7; + } + } + } +} diff --git a/src/styles/blocks/testimonials.scss b/src/styles/blocks/testimonials.scss new file mode 100644 index 000000000..4fb0b59b9 --- /dev/null +++ b/src/styles/blocks/testimonials.scss @@ -0,0 +1,93 @@ +.testimonials { + display: flex; + flex-direction: column; + align-items: center; + + @include on-desktop { + margin-inline: 204px; + } + + @include card-hover; + + &__img { + display: flex; + flex-direction: column; + justify-content: flex-end; + + height: 171px; + margin-bottom: 30px; + + background-image: url(../images/main-img/testimonilas-background.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @include on-tablet { + justify-content: center; + height: 189px; + margin-bottom: 20px; + } + + @include on-desktop { + justify-content: center; + height: 192px; + margin-bottom: 0; + } + } + + &__text { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + margin-top: auto; + font-size: 20px; + line-height: 30px; + } + + @include on-desktop { + margin-top: 0; + font-size: 24px; + line-height: 36px; + } + + &--size { + margin-bottom: 5px; + font-size: 16px; + line-height: 22px; + + @include on-tablet { + font-size: 16px; + line-height: 22px; + } + } + + &--color { + font-weight: 400; + line-height: 21px; + color: $main-color; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + } + } + } + + &__photo { + display: block; + width: 62px; + height: 62px; + margin: 0 auto 10px; + + @include on-tablet { + margin-bottom: 20px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..33825ed98 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,21 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + padding-block: 24px; + + background-color: $c-gray; + + &__actions { + display: flex; + gap: 30px; + align-items: center; + } + + &__logo { + height: 26px; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..9848ea84f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,30 @@ +@import './utils/vars'; +@import './utils/mixins'; @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/main'; +@import 'blocks/button'; +@import 'blocks/benefits'; +@import 'blocks/presentation'; +@import 'blocks/about-us'; +@import 'blocks/technology'; +@import 'blocks/testimonials'; +@import 'blocks/features'; +@import 'blocks/questions'; +@import 'blocks/footer'; body { + overflow-x: hidden; background: $c-gray; + + &:has(.page__menu:target) { + overflow: hidden; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..5385189fd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,65 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + padding-inline: 123px; + } +} + +.container { + @include content-padding-inline; + + max-width: 100%; +} + +@mixin card-hover { + transition: + transform $effectDuration ease; + + &:hover { + transform: scale(1.03) translateY(-4px); + } +} + +@mixin page-grid { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..27da9fa9c 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,21 @@ -$c-gray: #eee; +$c-gray: #f7f7f7; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$effectDuration: 0.3s; +$main-text-color: #333; +$menu-color-bold: #131313; +$speacs-color: #4f4f4f; +$main-color: #7c7c7c; +$color-white: #fff; +$color-footer: #bdbdbd; +$color-link: #0db2b3; +$color-features: #0c797a; +$color-button-disabled: #d0d0d0; +$questions-button: #39bebf; +$questions-button-disabled: #cfeff0; +$row-color-bold: #828282; +$row-color-dark: #044f85; +$questions-border: #828282; +$row-color: #7e7e83; +$row-background-color: #f8f8fa; +$user-invalid: #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/', +});