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..a8a71fecd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 11. `git push origin develop` - to send you code for PR 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Kickstarter/) + [DEMO LINK](https://kristinakovalchuk.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..95a02f599 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,328 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Kickstarter + + + + + -

Hello Mate Academy

- + +
+
+
+ +
+ + + +
+
+ + SPECS + +
+ EN + / + UA +
+ + 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.

+ +
+
+ + photo + +
+
+ +
+
+
+ +
+

DESIGNED FOR THE FUTURE

+ + photo + +
+

+ 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

+ + photo + +
+

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

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

+ + people-photo + +
+

Garrett Martin

+

Creative Director

+
+
+
+ +
+
+ +
+
+ +

FEATURES

+ +
+ +
+ +
+
+

Connectivity

+
    +

  • Hands Free Wireless Audio

    • +

  • Bluetooth 4.0 LE

    • +

  • Wi-Fi 2.4 GHz (802.11 b/g/n)

    • +

  • Smart Multiroom System Set Up

    • +

  • Party Mode with 6.0 Units and above

    • +

  • MESHNET Multi Speaker Network

    • +
+ +
+ +
+

App Features

+
    +

  • Customize Music Schedule

    • +

  • Wake Up with Favorite Songs

    • +

  • Home Detection Auto Wake Up

    • +

  • Color Wheel

    • +
+ +
+

Sound & Music

+
    +

  • Feel-in-chest 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

    • +
+
+
+ +
+
+ + +
+
+

01

+

/

+

03

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

DO YOU HAVE ANY QUESTIONS?

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

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

+
+
diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..5a7b50f8b 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", @@ -26,7 +26,7 @@ "mochawesome-merge": "^4.3.0", "mochawesome-report-generator": "^6.2.0", "prettier": "^3.3.2", - "sass": "^1.93.2", + "sass": "^1.97.3", "stylelint": "^16.7.0", "stylelint-scss": "^6.4.1", "vite": "^6.3.6" @@ -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", @@ -10917,10 +10918,11 @@ "dev": true }, "node_modules/sass": { - "version": "1.94.2", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", - "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", + "version": "1.97.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz", + "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==", "dev": true, + "license": "MIT", "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", diff --git a/package.json b/package.json index 19d2ac56e..9956beabe 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", @@ -36,7 +36,7 @@ "mochawesome-merge": "^4.3.0", "mochawesome-report-generator": "^6.2.0", "prettier": "^3.3.2", - "sass": "^1.93.2", + "sass": "^1.97.3", "stylelint": "^16.7.0", "stylelint-scss": "^6.4.1", "vite": "^6.3.6" diff --git a/src/images/about_us/2.svg b/src/images/about_us/2.svg new file mode 100644 index 000000000..9fca8c915 --- /dev/null +++ b/src/images/about_us/2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/about_us/about_us-bg-img.svg b/src/images/about_us/about_us-bg-img.svg new file mode 100644 index 000000000..9466167de --- /dev/null +++ b/src/images/about_us/about_us-bg-img.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/about_us/about_us-people.svg b/src/images/about_us/about_us-people.svg new file mode 100644 index 000000000..3fbd92b54 --- /dev/null +++ b/src/images/about_us/about_us-people.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/about_us/image 6.svg b/src/images/about_us/image 6.svg new file mode 100644 index 000000000..c97e55dc6 --- /dev/null +++ b/src/images/about_us/image 6.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/favicon-icon.svg b/src/images/favicon-icon.svg new file mode 100644 index 000000000..f8f13f02c --- /dev/null +++ b/src/images/favicon-icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/fetures/26c019c738ec68ad3dc880e586e67c94816ab87c-removebg-preview.png b/src/images/fetures/26c019c738ec68ad3dc880e586e67c94816ab87c-removebg-preview.png new file mode 100644 index 000000000..112057d3e Binary files /dev/null and b/src/images/fetures/26c019c738ec68ad3dc880e586e67c94816ab87c-removebg-preview.png differ diff --git a/src/images/fetures/f-arrow-left.svg b/src/images/fetures/f-arrow-left.svg new file mode 100644 index 000000000..863725ea2 --- /dev/null +++ b/src/images/fetures/f-arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/fetures/f-arrow-right.svg b/src/images/fetures/f-arrow-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/fetures/f-arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/footer/arrow-top-f.svg b/src/images/footer/arrow-top-f.svg new file mode 100644 index 000000000..bc809f94c --- /dev/null +++ b/src/images/footer/arrow-top-f.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/facebook-f.svg b/src/images/footer/facebook-f.svg new file mode 100644 index 000000000..2f5d0bec2 --- /dev/null +++ b/src/images/footer/facebook-f.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram-f.svg b/src/images/footer/instagram-f.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/footer/instagram-f.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/twitter-f.svg b/src/images/footer/twitter-f.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/footer/twitter-f.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header-img.svg b/src/images/header-img.svg new file mode 100644 index 000000000..2791ad7ee --- /dev/null +++ b/src/images/header-img.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icon/Icon-Burger-menu (1).svg b/src/images/icon/Icon-Burger-menu (1).svg new file mode 100644 index 000000000..42d0ecd63 --- /dev/null +++ b/src/images/icon/Icon-Burger-menu (1).svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/Icon-Close (1).svg b/src/images/icon/Icon-Close (1).svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icon/Icon-Close (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-k.svg b/src/images/logo-k.svg new file mode 100644 index 000000000..fcb8169eb --- /dev/null +++ b/src/images/logo-k.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/our-story/icon-figure.svg b/src/images/our-story/icon-figure.svg new file mode 100644 index 000000000..55b340246 --- /dev/null +++ b/src/images/our-story/icon-figure.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/our-story/icon-sound.svg b/src/images/our-story/icon-sound.svg new file mode 100644 index 000000000..945253101 --- /dev/null +++ b/src/images/our-story/icon-sound.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/our-story/icon-sun.svg b/src/images/our-story/icon-sun.svg new file mode 100644 index 000000000..60c45a669 --- /dev/null +++ b/src/images/our-story/icon-sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/our-story/icon-wifi.svg b/src/images/our-story/icon-wifi.svg new file mode 100644 index 000000000..a15bc32b2 --- /dev/null +++ b/src/images/our-story/icon-wifi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/our-story/our-story.svg b/src/images/our-story/our-story.svg new file mode 100644 index 000000000..3669c2550 --- /dev/null +++ b/src/images/our-story/our-story.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..aebe34aaf 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,76 @@ 'use strict'; + +document.addEventListener("DOMContentLoaded", function () { + const slides = document.querySelectorAll( + ".features__list-first, .features__list-second, .features__list-third" + ); + + const btnLeft = document.querySelector(".features__button__left"); + const btnRight = document.querySelector(".features__button__right"); + + const currentNumber = document.querySelector( + ".features__button__number__left" + ); + + let currentIndex = 0; + const totalSlides = slides.length; + + function showSlide(index) { + slides.forEach((slide) => { + slide.classList.remove("active"); + }); + + slides[index].classList.add("active"); + + currentNumber.textContent = String(index + 1).padStart(2, "0"); + } + + btnRight.addEventListener("click", function (e) { + e.preventDefault(); + + currentIndex++; + if (currentIndex >= totalSlides) { + currentIndex = 0; + } + + showSlide(currentIndex); + }); + + btnLeft.addEventListener("click", function (e) { + e.preventDefault(); + + currentIndex--; + if (currentIndex < 0) { + currentIndex = totalSlides - 1; + } + + showSlide(currentIndex); + }); + + showSlide(currentIndex); +}); + + +document.addEventListener("DOMContentLoaded", function () { + const langLinks = document.querySelectorAll('.top-bar__lang-switcher__link'); + + langLinks.forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + + langLinks.forEach(l => l.classList.remove('top-bar__lang-switcher__link--active')); + link.classList.add('top-bar__lang-switcher__link--active'); + + const lang = link.dataset.lang; + console.log('Selected language:', lang); + + // setLanguage(lang) + // localStorage.setItem('lang', lang) + }); + }); +}); + + + + + diff --git a/src/styles/about_us.scss b/src/styles/about_us.scss new file mode 100644 index 000000000..0e8af159e --- /dev/null +++ b/src/styles/about_us.scss @@ -0,0 +1,231 @@ +.about_us { + &__content { + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + } + + @include on-desktop { + gap: 170px; + } + } + + &__left { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__right { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__card { + align-items: start; + + @include page-grid; + + &__img { + width: 100%; + height: auto; + margin-block: 20px; + object-fit: cover; + + @include on-tablet { + margin: 0; + height: 415px; + grid-row: 1/4; + } + + @include on-desktop { + height: 388px; + } + } + + &__title { + align-self: start; + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: $main-text-color; + margin: 0; + height: auto; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 1.25; + } + } + + &__description { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 0 0 30px; + color: $our-story-descr-color; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + margin: 30px 0 60px; + } + } + + &__link { + color: #0db2b3; + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 14px; + margin: 0; + text-decoration: none; + text-transform: uppercase; + width: 127px; + + &::after { + content: ''; + display: block; + width: 53px; + height: 2px; + background-color: #0db2b3; + margin-top: 5px; + transition: width 0.3s; + } + + &:hover::after { + width: 128px; + } + + @include on-desktop { + margin-bottom: 68px; + } + + @include on-desktop { + margin-bottom: 48px; + } + } + } + + &__coment { + display: flex; + flex-direction: column; + align-items: center; + margin-inline: auto; + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + + &__description { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 20px; + text-align: center; + color: $main-text-color; + margin: 0; + padding-top: 50px; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + font-size: 24px; + line-height: 36px; + max-width: 786px; + padding-top: 60px; + } + + @include on-desktop { + padding-top: 42px; + } + } + + &__bg-img { + z-index: -3; + position: absolute; + width: 208px; + height: 171px; + object-fit: contain; + + @include on-tablet { + width: 233px; + height: 189px; + } + + @include on-desktop { + width: 233px; + height: 192px; + } + } + + &__people-img { + height: 62px; + width: 62px; + border-radius: 50px; + margin-block: 30px 10px; + margin-inline: auto; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + margin-block: 40px 20px; + } + + @include on-desktop { + margin-block: 30px 20px; + } + } + + &__name { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 22px; + text-align: center; + color: $main-text-color; + margin: 0 0 5px; + } + + &__position { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + color: $our-story-descr-color; + margin: 0; + } + } +} diff --git a/src/styles/features.scss b/src/styles/features.scss new file mode 100644 index 000000000..fc16204c9 --- /dev/null +++ b/src/styles/features.scss @@ -0,0 +1,215 @@ +.features { + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: $main-text-color; + margin: 0 0 32px; + + @include on-tablet { + margin: 0 0 30px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__img { + display: flex; + position: relative; + background-image: url('../images/fetures/26c019c738ec68ad3dc880e586e67c94816ab87c-removebg-preview.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + margin-inline: -30px; + + left: 60%; + transform: translateX(-50%); + + grid-column: 1 /-1; + + max-width: 548px; + min-height: 200px; + + @include on-tablet { + left: auto; + transform: none; + right: 0; + width: 500px; + margin-inline: auto; + min-height: 250px; + grid-column: 3/-1; + margin-top: -100px; + + } + + @include on-desktop { + grid-column: 7/-1; + height: 302px; + margin-top: -300px; + } + } + + &__wrapper { + margin-inline: 30px; + + @include page-grid; + + @include on-tablet { + margin-inline: 0; + } + } + + &__content { + padding-top: 30px; + background-color: $bg-features-color; + margin-inline: -30px; + + @include on-tablet { + margin-inline: 0; + padding: 60px 0 0; + } + + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + color: $green-color; + margin: 0 0 20px; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + margin: 0 0 30px; + font-size: 34px; + line-height: 42px; + } + } + } + + &__slyder { + position: relative; + overflow: hidden; + margin-inline: auto; + grid-column: 1 /-1; + + @include on-tablet { + margin-inline: 0; + grid-column: 2/-1; + } + + @include on-desktop { + grid-column: 1/-1; + + @include page-grid; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0; + padding-left: 16px; + margin-bottom: 50px; + height: 176px; + + &-first { + grid-column: 2/6; + } + + &-second { + grid-column: 7/-1; + } + + &-third { + grid-column: 2/6; + } + } + + &__item { + display: inline-block; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + margin: 0; + + @include hover(transform, scale(1.05)); + } + + &__button { + display: flex; + flex-direction: column; + gap: 8px; + width: 93px; + margin-inline: auto; + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 2/-1; + margin-inline: 0; + } + + @include on-desktop { + display: none; + } + + &__switch { + display: flex; + } + + &__number { + display: flex; + align-items: center; + text-align: center; + justify-content: center; + gap: 4px; + color: $green-color; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 11px; + line-height: 1; + transition: all 0.3s; + transform: translateY(0); + + &__number { + margin: 0; + + &--active { + font-size: 16px; + line-height: 24px; + color: $main-text-color; + transform: translateY(-20%); + } + } + + &__line { + margin: 0; + } + } + } +} + +.features__list-first, +.features__list-second, +.features__list-third { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + } +} + +.active { + display: flex; + flex-direction: column; +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..529473cf5 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,50 @@ +.footer { + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 30px; + } + + &__top { + display: none; + margin-bottom: 60px; + width: 100%; + + @include on-tablet { + @include page-grid; + } + } + + &__logo { + width: 161px; + height: 26px; + grid-column: 4/6; + margin-inline: auto; + + @include hover(transform, scale(1.1)); + + @include on-desktop { + grid-column: 6/8; + } + } + + &__icons { + display: flex; + gap: 40px; + justify-content: center; + margin: 0 0 30px; + + @include on-tablet { + margin: 0 0 60px; + } + } + + &__text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #bdbdbd; + } +} diff --git a/src/styles/get_in_touch.scss b/src/styles/get_in_touch.scss new file mode 100644 index 000000000..e8c80b8ea --- /dev/null +++ b/src/styles/get_in_touch.scss @@ -0,0 +1,114 @@ +.get_in_touch { + &__content { + @include page-grid; + } + + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: $main-text-color; + margin: 0 0 27px; + + grid-column: 1 / -1; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + grid-column: 1 / 5; + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + grid-column: 1 / 7; + font-size: 56px; + line-height: 70px; + } + } + + &__input { + display: flex; + flex-direction: column; + width: 100%; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + + &-email { + box-sizing: border-box; + background-color: $c-gray; + padding: 12px 20px; + border: 1px solid $light-gray-color; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $main-text-color; + + margin-bottom: 20px; + outline: none; + + &::placeholder { + color: #bdbdbd; + } + + &:hover { + border: 1px solid $green-color; + } + } + + &-massage { + box-sizing: border-box; + background-color: $c-gray; + padding: 12px 20px; + border: 1px solid $light-gray-color; + max-width: 100%; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + height: 104px; + text-align: start; + + margin-bottom: 30px; + outline: none; + color: $main-text-color; + + &::placeholder { + color: #bdbdbd; + } + + &:hover { + border: 1px solid $green-color; + } + } + + &__button { + width: 102px; + height: 40px; + background-color: #0db2b3; + color: #fff; + align-items: center; + justify-content: center; + border: none; + transition: all 0.3s; + cursor: pointer; + + &:hover { + background-color: $green-color; + } + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..7f2a9c79c --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,106 @@ +.header { + margin-bottom: 110px; + overflow: hidden; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 0; + } + + &__bottom { + position: relative; + height: 100%; + + @include page-grid; + + @include on-tablet { + padding-top: 130px; + } + + @include on-desktop { + padding-top: 171px; + margin-top: 0; + } + } + + &__img { + position: relative; + + min-width: 320px; + max-width: 500px; + min-height: 245px; + grid-column: 1 / -1; + z-index: -1; + + background-image: url('../images/header-img.svg'); + background-position: left; + background-size: cover; + background-repeat: no-repeat; + + margin-inline: -30px; + left: 70%; + transform: translateX(-55%); + + @include on-tablet { + left: 0; + transform: translateX(0); + position: absolute; + background-size: cover; + width: 100%; + min-height: 260px; + max-width: 524px; + grid-column: 4 / -1; + margin-inline: 0; + margin-top: auto; + bottom: 0; + } + + @include on-desktop { + max-width: 816px; + height: 464px; + background-size: contain; + grid-column: 5 / -1; + } + } + + &__title { + display: flex; + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 40px; + line-height: 52px; + text-transform: uppercase; + margin-bottom: 20px; + + grid-column: 1 / -1; + + @include on-tablet { + font-size: 48px; + width: 320px; + margin: 0 0 30px; + grid-column: 1 / 5; + } + + @include on-desktop { + font-size: 62px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 0; + + grid-column: 1 / -1; + + @include on-tablet { + max-width: 290px; + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..e9adbc1c8 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,111 @@ +.icon { + display: flex; + width: 32px; + height: 32px; + + background-repeat: no-repeat; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url('../images/icon/Icon-Burger-menu\ \(1\).svg'); + + @include on-desktop { + display: none; + } + } + + &--close { + width: 24px; + height: 24px; + background-image: url('../images/icon/Icon-Close\ \(1\).svg'); + } + + &--figure { + width: 50px; + height: 40px; + margin-inline: auto; + + background-image: url('../images/our-story/icon-figure.svg'); + } + + &--sound { + width: 50px; + height: 40px; + margin-inline: auto; + + background-image: url('../images/our-story/icon-sound.svg'); + } + + &--wifi { + width: 50px; + height: 40px; + margin-inline: auto; + + background-image: url('../images/our-story/icon-wifi.svg'); + } + + &--sun { + width: 50px; + height: 40px; + margin-inline: auto; + + background-image: url('../images/our-story/icon-sun.svg'); + } + + &--arrow-left { + width: 48px; + height: 14px; + background-color: #333; + mask: url('../images/fetures/f-arrow-left.svg') no-repeat center; + mask-size: contain; + transition: all 0.3s; + + &:hover { + background-color: $green-color; + } + } + + &--arrow-right { + width: 48px; + height: 14px; + background-color: #333; + mask: url('../images/fetures/f-arrow-right.svg') no-repeat center; + mask-size: contain; + transition: all 0.3s; + + &:hover { + background-color: $green-color; + } + } + + &--facebook { + width: 24px; + height: 24px; + background-image: url('../images/footer/facebook-f.svg'); + } + + &--twitter { + width: 24px; + height: 24px; + background-image: url('../images/footer/twitter-f.svg'); + } + + &--instagram { + width: 24px; + height: 24px; + background-image: url('../images/footer/instagram-f.svg'); + } + + &--arrow-top { + width: 24px; + height: 24px; + justify-self: end; + grid-column: 8/9; + background-image: url('../images/footer/arrow-top-f.svg'); + + @include on-desktop { + grid-column: 12/13; + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..0fc07bbe2 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1554 @@ +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + font-weight: normal; + font-style: normal; + src: url("../fonts/Roboto-Regular-webfont.woff") format("woff"); +} + +.header { + overflow: hidden; + margin-bottom: 110px; +} + +@media (min-width: 640px) { + .header { + margin-bottom: 140px; + } +} + +@media (min-width: 1440px) { + .header { + margin-bottom: 0; + } +} + +.header__bottom { + --columns: 4; + + position: relative; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + height: 100%; +} + +@media (min-width: 640px) { + .header__bottom { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .header__bottom { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .header__bottom { + padding-top: 130px; + } +} + +@media (min-width: 1440px) { + .header__bottom { + margin-top: 0; + padding-top: 171px; + } +} + +.header__img { + position: relative; + z-index: -1; + left: 70%; + transform: translateX(-55%); + + grid-column: 1/-1; + + min-width: 320px; + max-width: 500px; + min-height: 245px; + margin-inline: -30px; + + background-image: url("../images/header-img.svg"); + background-repeat: no-repeat; + background-position: left; + background-size: cover; +} + +@media (min-width: 640px) { + .header__img { + position: absolute; + bottom: 0; + left: 0; + transform: translateX(0); + + grid-column: 4/-1; + + width: 100%; + max-width: 524px; + min-height: 260px; + margin-top: auto; + margin-inline: 0; + + background-size: cover; + } +} + +@media (min-width: 1440px) { + .header__img { + grid-column: 5/-1; + max-width: 816px; + height: 464px; + background-size: contain; + } +} + +.header__title { + display: flex; + grid-column: 1/-1; + + margin-bottom: 20px; + + font-family: Inter, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + text-transform: uppercase; +} + +@media (min-width: 640px) { + .header__title { + grid-column: 1/5; + width: 320px; + margin: 0 0 30px; + font-size: 48px; + } +} + +@media (min-width: 1440px) { + .header__title { + font-size: 62px; + } +} + +.header__description { + grid-column: 1/-1; + + margin: 0; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; +} + +@media (min-width: 640px) { + .header__description { + grid-column: 1/4; + max-width: 290px; + } +} + +.icon { + display: flex; + + width: 32px; + height: 32px; + + background-repeat: no-repeat; + + transition: transform 0.3s; +} + +.icon:hover { + transform: scale(1.2); +} + +.icon--menu { + background-image: url("../images/icon/Icon-Burger-menu (1).svg"); +} + +@media (min-width: 1440px) { + .icon--menu { + display: none; + } +} + +.icon--close { + width: 24px; + height: 24px; + background-image: url("../images/icon/Icon-Close (1).svg"); +} + +.icon--figure { + width: 50px; + height: 40px; + margin-inline: auto; + background-image: url("../images/our-story/icon-figure.svg"); +} + +.icon--sound { + width: 50px; + height: 40px; + margin-inline: auto; + background-image: url("../images/our-story/icon-sound.svg"); +} + +.icon--wifi { + width: 50px; + height: 40px; + margin-inline: auto; + background-image: url("../images/our-story/icon-wifi.svg"); +} + +.icon--sun { + width: 50px; + height: 40px; + margin-inline: auto; + background-image: url("../images/our-story/icon-sun.svg"); +} + +.icon--arrow-left { + width: 48px; + height: 14px; + + background-color: #333; + + mask: url("../images/fetures/f-arrow-left.svg") no-repeat center; + + transition: all 0.3s; + + mask-size: contain; +} + +.icon--arrow-left:hover { + background-color: #0c797a; +} + +.icon--arrow-right { + width: 48px; + height: 14px; + + background-color: #333; + + mask: url("../images/fetures/f-arrow-right.svg") no-repeat center; + + transition: all 0.3s; + + mask-size: contain; +} + +.icon--arrow-right:hover { + background-color: #0c797a; +} + +.icon--facebook { + width: 24px; + height: 24px; + background-image: url("../images/footer/facebook-f.svg"); +} + +.icon--twitter { + width: 24px; + height: 24px; + background-image: url("../images/footer/twitter-f.svg"); +} + +.icon--instagram { + width: 24px; + height: 24px; + background-image: url("../images/footer/instagram-f.svg"); +} + +.icon--arrow-top { + grid-column: 8/9; + justify-self: end; + + width: 24px; + height: 24px; + + background-image: url("../images/footer/arrow-top-f.svg"); +} + +@media (min-width: 1440px) { + .icon--arrow-top { + grid-column: 12/13; + } +} + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-block: 25px; +} + +@media (min-width: 640px) { + .top-bar { + padding-block: 29px 0; + } +} + +@media (min-width: 1440px) { + .top-bar { + padding-block: 30px 0; + } +} + +.top-bar__menu-right { + display: flex; + align-items: center; +} + +.top-bar__hidden-menu { + display: none; + align-items: center; +} + +@media (min-width: 640px) { + .top-bar__hidden-menu { + display: flex; + } +} + +.top-bar__lang-switcher { + display: flex; +} + +.top-bar__lang-switcher__link { + font-family: "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 18px; + color: #828282; + text-decoration: none; + + transition: color 0.3s; +} + +.top-bar__lang-switcher__link--active { + font-weight: 400; + color: #333; +} + +.top-bar__lang-switcher__separator { + margin-inline: 3px 4px; + color: #333; +} + +.top-bar__logo { + height: 26px; + transition: transform 0.3s; +} + +.top-bar__logo:hover { + transform: scale(1.1); +} + +.top-bar__button { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 48px; + + font-family: "Helvetica Neue", sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 1; + color: #fff; + text-decoration: none; + text-transform: uppercase; + + background-color: #333; + + transition: all 0.3s; +} + +.top-bar__button:hover { + background-color: #131313; +} + +@media (min-width: 640px) { + .top-bar__button { + width: 100px; + margin-inline: 30px; + } +} + +@media (min-width: 1440px) { + .top-bar__button { + width: 102px; + margin-inline: 47px 0; + } +} + +.top-bar__link { + margin-right: 20px; + + font-family: "Helvetica Neue", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 1; + color: #4f4f4f; + text-decoration: none; +} + +@media (min-width: 640px) { + .top-bar__link { + margin-right: 30px; + } +} + +.menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + display: flex; + flex-direction: column; + + width: 100%; + height: 100vh; + + opacity: 0; + background-color: #f7f7f7; + + transition: all 0.5s; +} + +.menu:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; +} + +@media (min-width: 1440px) { + .menu { + pointer-events: all; + + position: relative; + transform: translateX(0); + + align-items: center; + justify-content: center; + + width: 100%; + height: 76px; + margin-block: 170px 62px; + + opacity: 1; + + transition: none; + } +} + +.menu__nav__list { + display: flex; + flex-direction: column; + gap: 25px; + + margin: 0; + padding: 0; + + list-style: none; +} + +@media (min-width: 640px) { + .menu__nav__list { + gap: 40px; + } +} + +@media (min-width: 1440px) { + .menu__nav__list { + display: flex; + flex-direction: row; + gap: 84px; + } +} + +.menu__nav__link { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 20px; + color: #333; + text-decoration: none; +} + +.menu__nav__link:hover { + font-weight: 700; +} + +@media (min-width: 640px) { + .menu__nav__link { + font-size: 22px; + line-height: 28px; + } +} + +@media (min-width: 1440px) { + .menu__nav__link { + font-size: 14px; + line-height: 20px; + } +} + +.menu__link { + display: flex; + align-items: center; + margin-block: 50.5px 162.5px; +} + +.menu__top-bar { + margin-bottom: 31px; + padding-block: 25px; +} + +@media (min-width: 640px) { + .menu__top-bar { + margin-bottom: 40px; + } +} + +@media (min-width: 1440px) { + .menu__top-bar { + display: none; + } +} + +.menu__bottom { + display: flex; + flex-direction: column; +} + +@media (min-width: 640px) { + .menu__bottom { + display: none; + } +} + +.our_story__img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.our_story__content { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 65px 20px; + align-items: start; + + margin-bottom: 110px; +} + +@media (min-width: 640px) { + .our_story__content { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .our_story__content { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .our_story__content { + margin-bottom: 140px; + } +} + +@media (min-width: 1440px) { + .our_story__content { + margin-bottom: 170px; + } +} + +.our_story__card { + display: flex; + grid-column: 1/-1; + flex-direction: column; + justify-content: center; + + width: 100%; +} + +@media (min-width: 640px) { + .our_story__card { + grid-column: span 4; + } +} + +@media (min-width: 1440px) { + .our_story__card { + grid-column: span 3; + } +} + +.our_story__title { + margin-block: 50px 20px; + + font-family: Inter, sans-serif; + font-size: 22px; + font-weight: 700; + line-height: 28px; + color: #333; + text-align: center; + text-transform: uppercase; +} + +@media (min-width: 640px) { + .our_story__title { + height: 56px; + } +} + +.our_story__description { + width: 100%; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #7c7c7c; + text-align: center; + + transition: transform 0.3s; +} + +.our_story__description:hover { + transform: scale(1.05); +} + +.about_us__content { + display: flex; + flex-direction: column; + gap: 110px; +} + +@media (min-width: 640px) { + .about_us__content { + gap: 140px; + } +} + +@media (min-width: 1440px) { + .about_us__content { + gap: 170px; + } +} + +.about_us__left { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .about_us__left { + grid-column: 1/5; + } +} + +@media (min-width: 1440px) { + .about_us__left { + grid-column: 1/7; + } +} + +.about_us__right { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .about_us__right { + grid-column: 5/-1; + } +} + +@media (min-width: 1440px) { + .about_us__right { + grid-column: 7/-1; + } +} + +.about_us__card { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + align-items: start; +} + +@media (min-width: 640px) { + .about_us__card { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .about_us__card { + --columns: 12; + + column-gap: 30px; + } +} + +.about_us__card__img { + width: 100%; + height: auto; + margin-block: 20px; + object-fit: cover; +} + +@media (min-width: 640px) { + .about_us__card__img { + grid-row: 1/4; + height: 415px; + margin: 0; + } +} + +@media (min-width: 1440px) { + .about_us__card__img { + height: 388px; + } +} + +.about_us__card__title { + align-self: start; + + height: auto; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: #333; + text-transform: uppercase; + + transition: transform 0.3s; +} + +.about_us__card__title:hover { + transform: scale(1.05); +} + +@media (min-width: 640px) { + .about_us__card__title { + font-size: 36px; + line-height: 46px; + } +} + +@media (min-width: 1440px) { + .about_us__card__title { + font-size: 56px; + line-height: 1.25; + } +} + +.about_us__card__description { + margin: 0 0 30px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #7c7c7c; + + transition: transform 0.3s; +} + +.about_us__card__description:hover { + transform: scale(1.05); +} + +@media (min-width: 640px) { + .about_us__card__description { + margin: 30px 0 60px; + } +} + +.about_us__card__link { + width: 127px; + margin: 0; + + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 14px; + color: #0db2b3; + text-decoration: none; + text-transform: uppercase; +} + +.about_us__card__link::after { + content: ""; + + display: block; + + width: 53px; + height: 2px; + margin-top: 5px; + + background-color: #0db2b3; + + transition: width 0.3s; +} + +.about_us__card__link:hover::after { + width: 128px; +} + +@media (min-width: 1440px) { + .about_us__card__link { + margin-bottom: 68px; + } +} + +@media (min-width: 1440px) { + .about_us__card__link { + margin-bottom: 48px; + } +} + +.about_us__coment { + display: flex; + flex-direction: column; + align-items: center; + + margin-bottom: 110px; + margin-inline: auto; +} + +@media (min-width: 640px) { + .about_us__coment { + margin-bottom: 140px; + } +} + +@media (min-width: 1440px) { + .about_us__coment { + margin-bottom: 170px; + } +} + +.about_us__coment__description { + margin: 0; + padding-top: 50px; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + color: #333; + text-align: center; + + transition: transform 0.3s; +} + +.about_us__coment__description:hover { + transform: scale(1.05); +} + +@media (min-width: 640px) { + .about_us__coment__description { + max-width: 786px; + padding-top: 60px; + font-size: 24px; + line-height: 36px; + } +} + +@media (min-width: 1440px) { + .about_us__coment__description { + padding-top: 42px; + } +} + +.about_us__coment__bg-img { + position: absolute; + z-index: -3; + + width: 208px; + height: 171px; + + object-fit: contain; +} + +@media (min-width: 640px) { + .about_us__coment__bg-img { + width: 233px; + height: 189px; + } +} + +@media (min-width: 1440px) { + .about_us__coment__bg-img { + width: 233px; + height: 192px; + } +} + +.about_us__coment__people-img { + width: 62px; + height: 62px; + margin-block: 30px 10px; + margin-inline: auto; + border-radius: 50px; + + transition: transform 0.3s; +} + +.about_us__coment__people-img:hover { + transform: scale(1.1); +} + +@media (min-width: 640px) { + .about_us__coment__people-img { + margin-block: 40px 20px; + } +} + +@media (min-width: 1440px) { + .about_us__coment__people-img { + margin-block: 30px 20px; + } +} + +.about_us__coment__name { + margin: 0 0 5px; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 22px; + color: #333; + text-align: center; +} + +.about_us__coment__position { + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #7c7c7c; + text-align: center; +} + +.features__title { + margin: 0 0 32px; + + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: #333; + text-transform: uppercase; +} + +@media (min-width: 640px) { + .features__title { + margin: 0 0 30px; + } +} + +@media (min-width: 1440px) { + .features__title { + font-size: 56px; + line-height: 70px; + } +} + +.features__img { + position: relative; + left: 60%; + transform: translateX(-50%); + + display: flex; + grid-column: 1/-1; + + max-width: 548px; + min-height: 200px; + margin-inline: -30px; + + background-image: url("../images/fetures/26c019c738ec68ad3dc880e586e67c94816ab87c-removebg-preview.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} + +@media (min-width: 640px) { + .features__img { + right: 0; + left: auto; + transform: none; + + grid-column: 3/-1; + + width: 500px; + min-height: 250px; + margin-top: -100px; + margin-inline: auto; + } +} + +@media (min-width: 1440px) { + .features__img { + grid-column: 7/-1; + height: 302px; + margin-top: -300px; + } +} + +.features__wrapper { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + margin-inline: 30px; +} + +@media (min-width: 640px) { + .features__wrapper { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .features__wrapper { + --columns: 12; + + column-gap: 30px; + } +} + +@media (min-width: 640px) { + .features__wrapper { + margin-inline: 0; + } +} + +.features__content { + margin-inline: -30px; + padding-top: 30px; + background-color: #d6ecec; +} + +@media (min-width: 640px) { + .features__content { + margin-inline: 0; + padding: 60px 0 0; + } +} + +.features__content__title { + margin: 0 0 20px; + + font-family: Inter, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 22px; + color: #0c797a; + text-transform: uppercase; + + transition: transform 0.3s; +} + +.features__content__title:hover { + transform: scale(1.05); +} + +@media (min-width: 640px) { + .features__content__title { + margin: 0 0 30px; + font-size: 34px; + line-height: 42px; + } +} + +.features__slyder { + position: relative; + overflow: hidden; + grid-column: 1/-1; + margin-inline: auto; +} + +@media (min-width: 640px) { + .features__slyder { + grid-column: 2/-1; + margin-inline: 0; + } +} + +@media (min-width: 1440px) { + .features__slyder { + --columns: 4; + + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + } +} + +@media (min-width: 1440px) and (min-width: 640px) { + .features__slyder { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) and (min-width: 1440px) { + .features__slyder { + --columns: 12; + + column-gap: 30px; + } +} + +.features__list { + display: flex; + flex-direction: column; + gap: 10px; + + height: 176px; + margin: 0; + margin-bottom: 50px; + padding-left: 16px; +} + +.features__list-first { + grid-column: 2/6; +} + +.features__list-second { + grid-column: 7/-1; +} + +.features__list-third { + grid-column: 2/6; +} + +.features__item { + display: inline-block; + + margin: 0; + + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + + transition: transform 0.3s; +} + +.features__item:hover { + transform: scale(1.05); +} + +.features__button { + display: flex; + grid-column: 1/-1; + flex-direction: column; + gap: 8px; + + width: 93px; + margin-inline: auto; +} + +@media (min-width: 640px) { + .features__button { + grid-column: 2/-1; + margin-inline: 0; + } +} + +@media (min-width: 1440px) { + .features__button { + display: none; + } +} + +.features__button__switch { + display: flex; +} + +.features__button__number { + transform: translateY(0); + + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + + font-family: Inter, sans-serif; + font-size: 11px; + font-weight: 400; + line-height: 1; + color: #0c797a; + text-align: center; + + transition: all 0.3s; +} + +.features__button__number__number { + margin: 0; +} + +.features__button__number__number--active { + transform: translateY(-20%); + font-size: 16px; + line-height: 24px; + color: #333; +} + +.features__button__number__line { + margin: 0; +} + +.features__list-first, +.features__list-second, +.features__list-third { + display: none; +} + +@media (min-width: 1440px) { + .features__list-first, + .features__list-second, + .features__list-third { + display: flex; + flex-direction: column; + } +} + +.active { + display: flex; + flex-direction: column; +} + +.get_in_touch__content { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; +} + +@media (min-width: 640px) { + .get_in_touch__content { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 1440px) { + .get_in_touch__content { + --columns: 12; + + column-gap: 30px; + } +} + +.get_in_touch__title { + grid-column: 1/-1; + + margin: 0 0 27px; + + font-family: Inter, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 40px; + color: #333; + text-transform: uppercase; + + transition: transform 0.3s; +} + +.get_in_touch__title:hover { + transform: scale(1.05); +} + +@media (min-width: 640px) { + .get_in_touch__title { + grid-column: 1/5; + font-size: 36px; + line-height: 46px; + } +} + +@media (min-width: 1440px) { + .get_in_touch__title { + grid-column: 1/7; + font-size: 56px; + line-height: 70px; + } +} + +.get_in_touch__input { + display: flex; + grid-column: 1/-1; + flex-direction: column; + width: 100%; +} + +@media (min-width: 640px) { + .get_in_touch__input { + grid-column: 5/-1; + } +} + +@media (min-width: 1440px) { + .get_in_touch__input { + grid-column: 7/-1; + } +} + +.get_in_touch__input-email { + box-sizing: border-box; + margin-bottom: 20px; + padding: 12px 20px; + border: 1px solid #828282; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #333; + + background-color: #f7f7f7; + outline: none; +} + +.get_in_touch__input-email::placeholder { + color: #bdbdbd; +} + +.get_in_touch__input-email:hover { + border: 1px solid #0c797a; +} + +.get_in_touch__input-massage { + box-sizing: border-box; + max-width: 100%; + height: 104px; + margin-bottom: 30px; + padding: 12px 20px; + border: 1px solid #828282; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: #333; + text-align: start; + + background-color: #f7f7f7; + outline: none; +} + +.get_in_touch__input-massage::placeholder { + color: #bdbdbd; +} + +.get_in_touch__input-massage:hover { + border: 1px solid #0c797a; +} + +.get_in_touch__input__button { + cursor: pointer; + + align-items: center; + justify-content: center; + + width: 102px; + height: 40px; + border: none; + + color: #fff; + + background-color: #0db2b3; + + transition: all 0.3s; +} + +.get_in_touch__input__button:hover { + background-color: #0c797a; +} + +.footer { + margin-bottom: 20px; +} + +@media (min-width: 640px) { + .footer { + margin-bottom: 30px; + } +} + +.footer__top { + display: none; + width: 100%; + margin-bottom: 60px; +} + +@media (min-width: 640px) { + .footer__top { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + } +} + +@media (min-width: 640px) and (min-width: 640px) { + .footer__top { + --columns: 8; + + column-gap: 20px; + } +} + +@media (min-width: 640px) and (min-width: 1440px) { + .footer__top { + --columns: 12; + + column-gap: 30px; + } +} + +.footer__logo { + grid-column: 4/6; + + width: 161px; + height: 26px; + margin-inline: auto; + + transition: transform 0.3s; +} + +.footer__logo:hover { + transform: scale(1.1); +} + +@media (min-width: 1440px) { + .footer__logo { + grid-column: 6/8; + } +} + +.footer__icons { + display: flex; + gap: 40px; + justify-content: center; + margin: 0 0 30px; +} + +@media (min-width: 640px) { + .footer__icons { + margin: 0 0 60px; + } +} + +.footer__text { + font-family: Inter, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #bdbdbd; + text-align: center; +} + +body { + overflow-x: hidden; + + max-width: 1440px; + margin: 0; + margin-inline: auto; + + background: #f7f7f7; +} + +body:has(.menu:target) { + overflow: hidden; +} + +html { + scroll-behavior: smooth; +} + +.container { + padding-inline: 30px; +} + +@media (min-width: 640px) { + .container { + padding-inline: 34px; + } +} + +@media (min-width: 1440px) { + .container { + padding-inline: 123px; + } +} + +.main__content { + display: flex; + flex-direction: column; + gap: 110px; + margin-bottom: 110px; +} + +@media (min-width: 640px) { + .main__content { + gap: 140px; + margin-bottom: 140px; + } +} + +@media (min-width: 1440px) { + .main__content { + gap: 170px; + margin-bottom: 170px; + } +} diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..84dea368c --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["utils/_extends.scss","_fonts.scss","header.scss","utils/_mixins.scss","icon.scss","utils/_vars.scss","top-bar.scss","menu.scss","our-story.scss","about_us.scss","features.scss","get_in_touch.scss","footer.scss","main.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..225dde8f7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,49 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './header'; +@import './icon'; +@import './top-bar'; +@import './menu'; +@import './our-story'; +@import './about_us'; +@import './features'; +@import './get_in_touch'; +@import './footer'; body { + margin: 0; background: $c-gray; + max-width: 1440px; + margin-inline: auto; + overflow-x: hidden; + + &:has(.menu:target) { + overflow: hidden; + } +} + +html { + scroll-behavior: smooth; +} + +.container { + @include padding-inline; +} + +.main__content { + display: flex; + flex-direction: column; + margin-bottom: 110px; + gap: 110px; + + @include on-tablet { + gap: 140px; + margin-bottom: 140px; + } + + @include on-desktop { + gap: 170px; + margin-bottom: 170px; + } } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..7776745af --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,112 @@ +.menu { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + height: 100vh; + width: 100%; + + background-color: $c-gray; + + transition: all 0.5s; + transform: translateX(-100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); + } + + @include on-desktop { + position: relative; + justify-content: center; + align-items: center; + + opacity: 1; + height: 76px; + width: 100%; + + transform: translateX(0); + transition: none; + pointer-events: all; + margin-block: 170px 62px; + } + + &__nav { + &__list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + gap: 25px; + + @include on-tablet { + gap: 40px; + } + + @include on-desktop { + display: flex; + flex-direction: row; + gap: 84px; + } + } + + &__link { + text-decoration: none; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: $main-text-color; + + &:hover { + font-weight: 700; + } + + @include on-tablet { + font-size: 22px; + line-height: 28px; + } + + @include on-desktop { + font-size: 14px; + line-height: 20px; + } + } + } + + &__link { + display: flex; + margin-block: 50.5px 162.5px; + align-items: center; + } + + &__top-bar { + padding-block: 25px; + margin-bottom: 31px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + display: none; + } + } + + &__bottom { + display: flex; + flex-direction: column; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/our-story.scss b/src/styles/our-story.scss new file mode 100644 index 000000000..767afff11 --- /dev/null +++ b/src/styles/our-story.scss @@ -0,0 +1,69 @@ +.our_story { + &__img { + width: 100%; + height: 100%; + object-fit: contain; + } + + &__content { + align-items: start; + row-gap: 65px; + margin-bottom: 110px; + + @include page-grid; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 170px; + } + } + + &__card { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + } + + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-size: 22px; + line-height: 28px; + text-align: center; + text-transform: uppercase; + color: $main-text-color; + + margin-block: 50px 20px; + + @include on-tablet { + height: 56px; + } + } + + &__description { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + color: $our-story-descr-color; + margin: 0; + width: 100%; + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 000000000..870a1cb43 --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,108 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 25px; + + @include on-tablet { + padding-block: 29px 0; + } + + @include on-desktop { + padding-block: 30px 0; + } + + &__menu-right { + display: flex; + align-items: center; + } + + &__hidden-menu { + display: none; + align-items: center; + + @include on-tablet { + display: flex; + } + } + + &__lang-switcher { + display: flex; + + &__link { + text-decoration: none; + color: $light-gray-color; + + font-family: 'Helvetica Neue', sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 18px; + transition: color 0.3s; + + &--active { + font-weight: 400; + color: $main-text-color; + } + } + + &__separator { + color: $main-text-color; + margin-inline: 3px 4px; + } + } + + &__logo { + height: 26px; + + @include hover(transform, scale(1.1)); + } + + &__button { + display: flex; + height: 48px; + width: 100%; + background-color: $main-text-color; + color: #fff; + align-items: center; + justify-content: center; + + font-family: 'Helvetica Neue', sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 1; + text-transform: uppercase; + + text-decoration: none; + + transition: all 0.3s; + + &:hover { + background-color: #131313; + } + + @include on-tablet { + width: 100px; + margin-inline: 30px; + } + + @include on-desktop { + width: 102px; + margin-inline: 47px 0; + } + } + + &__link { + color: $grey-color; + text-decoration: none; + + font-family: 'Helvetica Neue', sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 1; + margin-right: 20px; + + @include on-tablet { + margin-right: 30px; + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..bebdb8ccd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,47 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-widtx) { + @content; + } +} + +@mixin padding-inline { + padding-inline: 30px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 123px; + } +} + +@mixin page-grid { + --columns: 4; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + + column-gap: 20px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..33d4eee46 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$c-gray: #f7f7f7; +$tablet-min-width: 640px; +$desktop-min-widtx: 1440px; +$main-text-color: #333; +$grey-color: #4f4f4f; +$light-gray-color: #828282; +$our-story-descr-color: #7c7c7c; +$green-color: #0c797a; +$bg-features-color: #d6ecec;