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/index.html b/index.html index d339e6856..86430313f 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,366 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Crazy baby + + + + - -

Hello Mate Academy

- + + +
+
+
+ + + + + +
+ +
+

+ Futuristic Wireless Speaker +

+ +

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

+ + + + + speakers + +
+
+ + + +
+ + +
+
+ function design +

Futuristic Design

+

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

+
+ +
+ Speaker System +

Tweeter Speaker System

+

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

+
+ +
+ multiroom System +

Multiroom System

+

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

+
+ +
+ function design +

Intuitive Lighting System

+

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

+
+
+
+ +
+ + + + meet luna + +
+ +
+
+ + + + about-us + +

+ DESIGNED FOR THE FUTURE +

+ +
+

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

+ +
+
+ +
+

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

+ + +
+ + + + + speaker + +
+
+ +
+
+

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

+ +
+ avatar +
Garrett Martin
+

Creative Director

+
+
+
+ +
+

FEATURES

+
+
+

Connectivity

+ +
    +
  1. Hands Free Wireless Audio
  2. +
  3. Bluetooth 4.0 LE
  4. +
  5. Wi-Fi 2.4 GHz (802.11 b/g/n)
  6. +
  7. Smart Multiroom System Set Up
  8. +
  9. + Party Mode with 6.0 Units and above +
  10. +
  11. MESHNET Multi Speaker Network
  12. +
+
+ +
+

App Features

+
    +
  1. Customize Music Schedule
  2. +
  3. Wake Up with Favorite Songs
  4. +
  5. Home Detection Auto Wake Up
  6. +
  7. Color Wheel
  8. +
+
+ +
+

Sound & Music

+
    +
  1. Feel-in-chest Base Power
  2. +
  3. + Lossless Digital Audio Transmission +
  4. +
  5. Easy & Stable Stereo Pairing
  6. +
  7. + Crisp and Clear High Frequency Sound +
  8. +
  9. + Streams from Cloud Music and Local Library +
  10. +
  11. Auto Music from Last Song Stopped
  12. +
+
+ +
+
+ + +
+ +
+

1

+

/ 3

+
+
+ + + + + speaker feature + +
+
+ +
+

+ DO YOU HAVE ANY QUESTIONS? +

+
+ + + +
+
+ + +
+ + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..ae255cd0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2581,17 +2581,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@pkgr/core": { "version": "0.2.9", "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz", @@ -13039,20 +13028,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..799911f8c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "kickstarter", "version": "1.0.0", "description": "Kickstarter", - "homepage": "Kickstarter", + "homepage": "https://linado1609.github.io/Kickstarter", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", diff --git a/src/images/icons/Icon-Burger-menu.png b/src/images/icons/Icon-Burger-menu.png new file mode 100644 index 000000000..5c194c7aa Binary files /dev/null and b/src/images/icons/Icon-Burger-menu.png differ diff --git a/src/images/icons/brightness.svg b/src/images/icons/brightness.svg new file mode 100644 index 000000000..49ba7eac6 --- /dev/null +++ b/src/images/icons/brightness.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/close.png b/src/images/icons/close.png new file mode 100644 index 000000000..5d7801c11 Binary files /dev/null and b/src/images/icons/close.png differ diff --git a/src/images/icons/design.svg b/src/images/icons/design.svg new file mode 100644 index 000000000..ff5307f10 --- /dev/null +++ b/src/images/icons/design.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..d617dc785 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon2.png b/src/images/icons/favicon2.png new file mode 100644 index 000000000..90e960f76 Binary files /dev/null and b/src/images/icons/favicon2.png differ diff --git a/src/images/icons/favicon2.svg b/src/images/icons/favicon2.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/icons/favicon2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..a44d7ed05 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..d830ed06f --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/next.png b/src/images/icons/next.png new file mode 100644 index 000000000..a3524255a Binary files /dev/null and b/src/images/icons/next.png differ diff --git a/src/images/icons/prev.png b/src/images/icons/prev.png new file mode 100644 index 000000000..f59d92fe0 Binary files /dev/null and b/src/images/icons/prev.png differ diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..1caf29353 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/up.png b/src/images/icons/up.png new file mode 100644 index 000000000..2e9d4db7e Binary files /dev/null and b/src/images/icons/up.png differ diff --git a/src/images/icons/volume.svg b/src/images/icons/volume.svg new file mode 100644 index 000000000..294373872 --- /dev/null +++ b/src/images/icons/volume.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/wi-fi.svg b/src/images/icons/wi-fi.svg new file mode 100644 index 000000000..68188e3c9 --- /dev/null +++ b/src/images/icons/wi-fi.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/img/avatar.png b/src/images/img/avatar.png new file mode 100644 index 000000000..6bdae6e83 Binary files /dev/null and b/src/images/img/avatar.png differ diff --git a/src/images/img/draws-mob.png b/src/images/img/draws-mob.png new file mode 100644 index 000000000..b89432db4 Binary files /dev/null and b/src/images/img/draws-mob.png differ diff --git a/src/images/img/draws-tab.png b/src/images/img/draws-tab.png new file mode 100644 index 000000000..154474c9b Binary files /dev/null and b/src/images/img/draws-tab.png differ diff --git a/src/images/img/draws.png b/src/images/img/draws.png new file mode 100644 index 000000000..366b39661 Binary files /dev/null and b/src/images/img/draws.png differ diff --git a/src/images/img/meet_luna-mob.png b/src/images/img/meet_luna-mob.png new file mode 100644 index 000000000..13c04427a Binary files /dev/null and b/src/images/img/meet_luna-mob.png differ diff --git a/src/images/img/meet_luna-tab.png b/src/images/img/meet_luna-tab.png new file mode 100644 index 000000000..c992603cf Binary files /dev/null and b/src/images/img/meet_luna-tab.png differ diff --git a/src/images/img/meet_luna.png b/src/images/img/meet_luna.png new file mode 100644 index 000000000..0e76ce664 Binary files /dev/null and b/src/images/img/meet_luna.png differ diff --git a/src/images/img/quote.png b/src/images/img/quote.png new file mode 100644 index 000000000..03986a7fb Binary files /dev/null and b/src/images/img/quote.png differ diff --git a/src/images/img/speaker_2-mob.png b/src/images/img/speaker_2-mob.png new file mode 100644 index 000000000..b5b2d9550 Binary files /dev/null and b/src/images/img/speaker_2-mob.png differ diff --git a/src/images/img/speaker_2-tab.png b/src/images/img/speaker_2-tab.png new file mode 100644 index 000000000..63942e9e4 Binary files /dev/null and b/src/images/img/speaker_2-tab.png differ diff --git a/src/images/img/speaker_2.png b/src/images/img/speaker_2.png new file mode 100644 index 000000000..65768e45c Binary files /dev/null and b/src/images/img/speaker_2.png differ diff --git a/src/images/img/speaker_3-mob.png b/src/images/img/speaker_3-mob.png new file mode 100644 index 000000000..fbd53c271 Binary files /dev/null and b/src/images/img/speaker_3-mob.png differ diff --git a/src/images/img/speaker_3-tab.png b/src/images/img/speaker_3-tab.png new file mode 100644 index 000000000..df35c2650 Binary files /dev/null and b/src/images/img/speaker_3-tab.png differ diff --git a/src/images/img/speaker_3.png b/src/images/img/speaker_3.png new file mode 100644 index 000000000..6c1e4be16 Binary files /dev/null and b/src/images/img/speaker_3.png differ diff --git a/src/images/img/speakers-mob.png b/src/images/img/speakers-mob.png new file mode 100644 index 000000000..fd0965b47 Binary files /dev/null and b/src/images/img/speakers-mob.png differ diff --git a/src/images/img/speakers-tab.png b/src/images/img/speakers-tab.png new file mode 100644 index 000000000..80fa1e6d9 Binary files /dev/null and b/src/images/img/speakers-tab.png differ diff --git a/src/images/img/speakers.png b/src/images/img/speakers.png new file mode 100644 index 000000000..8c0ade625 Binary files /dev/null and b/src/images/img/speakers.png differ diff --git a/src/images/img/test.svg b/src/images/img/test.svg new file mode 100644 index 000000000..685879166 --- /dev/null +++ b/src/images/img/test.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2977f5555 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,91 @@ 'use strict'; + +const languages = document.querySelectorAll('.header__link'); + +languages.forEach(language => { + language.addEventListener('click', (event) => { + event.preventDefault(); + + languages.forEach(l => l.classList.remove('header__link--active')); + + + language.classList.add('header__link--active'); + }); +}); + + +const sliders = document.querySelectorAll('.features__section'); +const next = document.querySelector('.swipper-nav__next'); +const prev = document.querySelector('.swipper-nav__prev'); +const currentPage = document.querySelector('.swipper-nav__current-page'); +let currentSlider = 0; + +function updateSlider() { + sliders.forEach(slider => { + slider.classList.remove('features__section--active', 'grid--2-5-tab', 'grid--1-5-mob'); + }); + + sliders[currentSlider].classList.add('features__section--active', 'grid--2-5-tab', 'grid--1-5-mob'); + currentPage.textContent = currentSlider + 1; +} + +next.addEventListener('click', (event) => { + event.preventDefault(); + + if (currentSlider < sliders.length - 1) { + currentSlider++; + updateSlider(); + } +}); + +prev.addEventListener('click', (event) => { + event.preventDefault(); + + if (currentSlider > 0) { + currentSlider--; + updateSlider(); + } +}); + +updateSlider(); + + +const openAside = document.querySelector('.header__burger'); +const closeAside = document.querySelector('.aside__close-button'); +const aside = document.querySelector('.aside'); +const page = document.querySelector('.page') +const menuItem = document.querySelectorAll('.aside__nav-item') + + +openAside.addEventListener('click', ()=>{ + aside.classList.add('aside--open'); + page.classList.add('page--no-scroll') +}) + +closeAside.addEventListener('click', ()=>{ + aside.classList.remove('aside--open'); + page.classList.remove('page--no-scroll') +}) + +menuItem.forEach(item =>{ + item.addEventListener('click', (event)=>{ + page.classList.remove('page--no-scroll'); + aside.classList.remove('aside--open'); + + }) +}) + +const elements = document.querySelectorAll('.animate'); + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('animate--show'); + observer.unobserve(entry.target); + } + }); +}, { + threshold: 0.5 +}); + +elements.forEach(el => observer.observe(el)); \ No newline at end of file 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/_typography.scss b/src/styles/_typography.scss index 1837eb46e..94ed16452 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,110 @@ h1 { @extend %h1; } + +%h1 { + font-size: 64px; + font-weight: bold; + line-height: 78px; + text-transform: uppercase; + + @include tablet { + font-size: 48px; + line-height: 62px; + } + + @include mobile { + font-size: 40px; + line-height: 52px; + } +} + +%h2 { + font-size: 56px; + font-weight: bold; + line-height: 70px; + text-transform: uppercase; + + @include tablet { + font-size: 36px; + line-height: 46px; + } + + @include mobile { + font-size: 30px; + line-height: 40px; + } +} + +%h3 { + font-size: 34px; + font-weight: bold; + line-height: 42px; + text-transform: uppercase; + + @include tablet { + font-size: 24px; + line-height: 30px; + } + + @include mobile { + font-size: 18px; + line-height: 22px; + } +} + +%h4 { + font-size: 22px; + font-weight: bold; + line-height: 28px; + text-transform: uppercase; +} + +%h5 { + font-size: 16px; + font-weight: bold; + line-height: 22px; +} + +%h6 { + font-size: 14px; + font-weight: bold; + line-height: 20px; + text-transform: uppercase; +} + +%button { + font-size: 12px; + font-weight: bold; + line-height: 14px; + text-transform: uppercase; +} + +%main-text { + font-size: 16px; + font-weight: normal; + line-height: 24px; +} + +%secondary-text { + font-size: 14px; + font-weight: normal; + line-height: 21px; +} + +%thirdary-text { + font-size: 14px; + font-weight: normal; + line-height: 21px; +} + +%quote { + font-size: 24px; + font-weight: bold; + line-height: 36px; + + @include mobile { + font-size: 18px; + line-height: 20px; + } +} diff --git a/src/styles/animations/animations.scss b/src/styles/animations/animations.scss new file mode 100644 index 000000000..011615498 --- /dev/null +++ b/src/styles/animations/animations.scss @@ -0,0 +1,53 @@ +@keyframes slide-in-left { + from { + transform: translateX(-40px); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-right { + from { + transform: translateX(40px); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes scale-in { + from { + transform: scale(0.5); + opacity: 0; + } + + to { + transform: scale(1); + opacity: 1; + } +} + +.animate { + opacity: 0; + + &--show { + &[data-animate='slide-left'] { + animation: slide-in-left 1s ease forwards; + } + + &[data-animate='slide-right'] { + animation: slide-in-right 1s ease forwards; + } + + &[data-animate='scale'] { + animation: scale-in 1s ease-out forwards; + } + } +} diff --git a/src/styles/components/aboutUs.scss b/src/styles/components/aboutUs.scss new file mode 100644 index 000000000..f4d9462b1 --- /dev/null +++ b/src/styles/components/aboutUs.scss @@ -0,0 +1,94 @@ +.about-us { + display: flex; + flex-direction: column; + gap: 170px; + + @include tablet { + gap: 140px; + } + + @include mobile { + gap: 110px; + } + + &__container { + @include mobile { + display: flex; + flex-direction: column; + gap: 20px; + } + } + + &__title { + @extend %h2; + + @include mobile { + order: 1; + } + } + + &__info { + @include mobile { + order: 3; + } + } + + &__desc { + @extend %main-text; + } + + &__more { + position: relative; + margin-top: 60px; + border: none; + background-color: $c-white; + + &::after { + content: ' '; + + position: absolute; + bottom: -5px; + left: 0; + + width: 50%; + height: 1px; + + background-color: #0db2b3; + + transition: width 1s ease; + } + + &:hover { + &::after { + width: 100%; + transition: width 1s ease; + } + } + + @include mobile { + margin-top: 30px; + } + } + + &__link { + @extend %button; + + color: #0db2b3; + text-decoration: none; + } + + &__img { + grid-row: 1/3; + + width: 100%; + height: 100%; + max-height: 415px; + + object-fit: cover; + + @include mobile { + grid-row: 1/2; + order: 2; + } + } +} diff --git a/src/styles/components/aside.scss b/src/styles/components/aside.scss new file mode 100644 index 000000000..c5c41f6a5 --- /dev/null +++ b/src/styles/components/aside.scss @@ -0,0 +1,88 @@ +.aside { + display: none; + + @include tablet { + position: fixed; + z-index: 100; + top: 0; + right: -100%; + + display: block; + + width: 100%; + height: 100vh; + padding: 30px 34px; + + background-color: $c-white; + + @include mobile { + padding: 20px 30px; + } + + &--open { + right: 0; + transition: right 1s ease; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + + @include mobile { + height: 35.5px; + } + } + + &__close-button { + cursor: pointer; + border: none; + background-color: $c-white; + } + + &__nav { + margin-top: 64px; + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 40px; + list-style: none; + } + + &__nav-link { + font-size: 22px; + font-weight: 400; + line-height: 28px; + color: #333; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ' '; + + position: absolute; + bottom: -10px; + left: 0; + + width: 0; + height: 2px; + + background-color: #0c797a; + + transition: width 1s ease; + } + + &:hover { + color: #0c797a; + + &::after { + width: 100%; + transition: width 1s ease; + } + } + } +} diff --git a/src/styles/components/benefits.scss b/src/styles/components/benefits.scss new file mode 100644 index 000000000..a14118d43 --- /dev/null +++ b/src/styles/components/benefits.scss @@ -0,0 +1,43 @@ +.benefits { + display: flex; + flex-direction: column; + gap: 90px; + + &__block { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + min-height: 286px; + padding: 15px; + + &:hover { + border-radius: 15px; + box-shadow: + 0 4px 10px rgba(42, 169, 171, 0.6), + 0 8px 25px rgba(112, 238, 238, 0.4); + } + } + + &__title { + @extend %h4; + + min-height: 48px; + margin-top: 30px; + } + + &__desc { + @extend %secondary-text; + + min-height: 120px; + margin-top: 30px; + } + + &__icon { + width: 70px; + height: 50px; + object-fit: contain; + } +} diff --git a/src/styles/components/features.scss b/src/styles/components/features.scss new file mode 100644 index 000000000..c799846b4 --- /dev/null +++ b/src/styles/components/features.scss @@ -0,0 +1,71 @@ +.features { + position: relative; + width: 100%; + + &__title { + @extend %h2; + } + + &__container { + row-gap: 56px; + + min-height: 555px; + margin-top: 30px; + padding: 60px 0 59px; + + background-color: #d6ecec; + + @include mobile { + row-gap: 30px; + width: calc(100% + 30px + 30px); + margin-left: -30px; + padding: 30px 30px 0; + + } + } + + &__section { + z-index: 100; + min-height: 280px; + + @include tablet { + display: none; + + &--active { + display: block; + } + } + } + + &__subtitle { + @extend %h3; + + color: #0c797a; + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + + margin-top: 30px; + + list-style: disc; + } + + &__point { + @extend %main-text; + } + + &__img { + position: absolute; + right: 0; + bottom: 0; + + @include mobile { + position: relative; + width: 100%; + object-fit: contain; + } + } +} diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss new file mode 100644 index 000000000..51b929774 --- /dev/null +++ b/src/styles/components/footer.scss @@ -0,0 +1,27 @@ +.footer { + position: relative; + + display: flex; + flex-direction: column; + gap: 60px; + align-items: center; + + width: 100%; + + &__social { + display: flex; + gap: 40px; + } + + &__up { + position: absolute; + top: 0; + right: 0; + } + + &__right { + @extend %secondary-text; + + color: #bdbdbd; + } +} diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss new file mode 100644 index 000000000..42ce10dcf --- /dev/null +++ b/src/styles/components/header.scss @@ -0,0 +1,94 @@ +.header { + display: flex; + flex-direction: column; + gap: 90px; + + @include tablet { + gap: 130px; + } + + @include mobile { + gap: 25px; + } + + &__upper { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + } + + &__nav { + display: flex; + gap: 30px; + align-items: center; + } + + &__spec { + @extend %thirdary-text; + + color: #333; + text-decoration: none; + text-transform: uppercase; + + @include mobile { + display: none; + } + } + + &__link { + @extend %thirdary-text; + + font-weight: 300; + color: #828282; + text-decoration: none; + text-transform: uppercase; + + &:hover { + color: #0db2b3; + } + + &--active { + font-weight: 400; + color: #333; + + &:hover { + color: #333; + } + } + + @include mobile { + display: none; + } + } + + &__buy { + cursor: pointer; + + width: 102px; + height: 48px; + border: none; + + color: $c-white; + + background-color: #333; + + &:hover { + background-color: #131313; + } + + @include mobile { + display: none; + } + } + + &__burger { + display: none; + + @include tablet { + display: block; + border: none; + background-color: $c-white; + } + } +} diff --git a/src/styles/components/main-info.scss b/src/styles/components/main-info.scss new file mode 100644 index 000000000..fe5437f8a --- /dev/null +++ b/src/styles/components/main-info.scss @@ -0,0 +1,42 @@ +.main-info { + position: relative; + width: 100%; + max-height: 465px; + + &__title { + @extend %h1; + + @include mobile { + order: 2; + } + } + + &__desc { + @extend %main-text; + + margin-top: 30px; + + @include mobile { + order: 3; + margin-top: 20px; + } + } + + &__img { + position: absolute; + z-index: -1; + right: 0; + bottom: 0; + + height: 100%; + + object-fit: contain; + + @include mobile { + position: relative; + order: 1; + width: 100%; + object-fit: contain; + } + } +} diff --git a/src/styles/components/menu.scss b/src/styles/components/menu.scss new file mode 100644 index 000000000..bdf5f7f2f --- /dev/null +++ b/src/styles/components/menu.scss @@ -0,0 +1,45 @@ +.menu { + @include tablet { + display: none; + } + + &__list { + display: flex; + gap: 84px; + justify-content: center; + list-style: none; + } + + &__link { + @extend %thirdary-text; + + position: relative; + color: #333; + text-decoration: none; + text-transform: uppercase; + + &::after { + content: ' '; + + position: absolute; + bottom: -10px; + left: 0; + + width: 0; + height: 2px; + + background-color: #0c797a; + + transition: width 1s ease; + } + + &:hover { + color: #0c797a; + + &::after { + width: 100%; + transition: width 1s ease; + } + } + } +} diff --git a/src/styles/components/page.scss b/src/styles/components/page.scss new file mode 100644 index 000000000..80898d281 --- /dev/null +++ b/src/styles/components/page.scss @@ -0,0 +1,31 @@ +.page { + position: relative; + width: 100vw; + background-color: $c-white; + + &--no-scroll { + overflow: hidden; + } + + &__container { + display: flex; + flex-direction: column; + gap: 170px; + align-items: center; + + width: 100%; + margin: 0 auto; + padding: 30px 123px; + + @include tablet { + gap: 140px; + width: 100%; + padding: 30px 34px; + } + + @include mobile { + gap: 110px; + padding: 25px 30px; + } + } +} diff --git a/src/styles/components/presentation.scss b/src/styles/components/presentation.scss new file mode 100644 index 000000000..b8df02b66 --- /dev/null +++ b/src/styles/components/presentation.scss @@ -0,0 +1,16 @@ +.presentation { + transform: scale(1); + display: flex; + justify-content: center; + transition: transform 1s ease; + + &:hover { + transform: scale(1.1); + transition: transform 1s ease; + } + + &__img { + width: 100%; + object-fit: contain; + } +} diff --git a/src/styles/components/questions.scss b/src/styles/components/questions.scss new file mode 100644 index 000000000..126088e63 --- /dev/null +++ b/src/styles/components/questions.scss @@ -0,0 +1,58 @@ +.questions { + &__title { + @extend %h2; + } + + &__form { + display: flex; + flex-direction: column; + + @include mobile { + margin-top: 27px; + } + } + + &__email { + @extend %main-text; + + height: 48px; + padding: 12px 36px; + border: 1px solid #828282; + color: #333; + } + + &__text { + @extend %main-text; + + resize: none; + + height: 128px; + margin-top: 20px; + padding: 16px 36px; + border: 1px solid #828282; + + color: #333; + text-align: top; + + &::placeholder { + @extend %main-text; + } + } + + &__submit { + @extend %button; + + width: 124px; + height: 48px; + margin-top: 30px; + border: none; + + color: #fff; + + background-color: #0db2b3; + + &:hover { + background-color: #0c797a; + } + } +} diff --git a/src/styles/components/testimonials.scss b/src/styles/components/testimonials.scss new file mode 100644 index 000000000..59f3abdbd --- /dev/null +++ b/src/styles/components/testimonials.scss @@ -0,0 +1,40 @@ +.testimonials { + padding-top: 42px; + background-image: url('../images/img/quote.png'); + background-repeat: no-repeat; + background-position: top center; + + &__wrapper { + display: flex; + flex-direction: column; + gap: 30px; + align-items: center; + + @include tablet { + gap: 40px; + } + } + + &__author { + display: flex; + flex-direction: column; + align-items: center; + } + + &__text { + @extend %quote; + } + + &__name { + @extend %h5; + + margin-top: 20px; + } + + &__position { + @extend %secondary-text; + + margin-top: 5px; + color: #7c7c7c; + } +} diff --git a/src/styles/layout/gridTemplate.scss b/src/styles/layout/gridTemplate.scss new file mode 100644 index 000000000..65e7d4b84 --- /dev/null +++ b/src/styles/layout/gridTemplate.scss @@ -0,0 +1,41 @@ +.grid { + display: grid; + grid-auto-rows: min-content; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + + width: 100%; + + @for $start from 1 through 12 { + @for $end from 1 through 13 { + &--#{$start}-#{$end} { + grid-column: #{$start} / #{$end}; + } + } + } + + @include tablet { + grid-template-columns: repeat(8, 1fr); + column-gap: 20px; + + @for $start from 1 through 8 { + @for $end from 1 through 9 { + &--#{$start}-#{$end}-tab { + grid-column: #{$start} / #{$end}; + } + } + } + } + + @include mobile { + grid-template-columns: repeat(4, 1fr); + + @for $start from 1 through 4 { + @for $end from 1 through 5 { + &--#{$start}-#{$end}-mob { + grid-column: #{$start} / #{$end}; + } + } + } + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..3eeda66b5 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,15 @@ +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'); +} + +body { + background: #eee; +} /*# sourceMappingURL=main.css.map */ diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..bfab7ea54 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["utils/_extends.scss","main.css","_fonts.scss","main.scss","utils/_vars.scss"],"names":[],"mappings":"AAAA;EACE,+BAAA;EACA,gBAAA;ACCF;;ACHA;EACE,iDAAA;EACA,+DAAA;EACA,mBAAA;EACA,kBAAA;ADMF;AENA;EACE,gBCLO;AHaT","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..6494e1486 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,37 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './layout/gridTemplate'; +@import './ui/logo'; +@import './components/page'; +@import './components/header'; +@import './components/main-info'; +@import './components/benefits'; +@import './components/menu'; +@import './components/presentation'; +@import './components/aboutUs'; +@import './components/testimonials'; +@import './components/features'; +@import './components/questions'; +@import './components/footer'; +@import './ui/swipper-nav'; +@import './components/aside'; +@import './animations/animations'; + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + overflow-x: hidden; + font-family: Inter, Roboto, serif; + background: $c-white; } diff --git a/src/styles/ui/logo.css b/src/styles/ui/logo.css new file mode 100644 index 000000000..5b1c61221 --- /dev/null +++ b/src/styles/ui/logo.css @@ -0,0 +1,3 @@ +.logo { + width: 161px; +} /*# sourceMappingURL=logo.css.map */ diff --git a/src/styles/ui/logo.css.map b/src/styles/ui/logo.css.map new file mode 100644 index 000000000..53ad69ac2 --- /dev/null +++ b/src/styles/ui/logo.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["logo.scss","logo.css"],"names":[],"mappings":"AAAA;EACE,YAAA;ACCF","file":"logo.css"} \ No newline at end of file diff --git a/src/styles/ui/logo.scss b/src/styles/ui/logo.scss new file mode 100644 index 000000000..e3fc23318 --- /dev/null +++ b/src/styles/ui/logo.scss @@ -0,0 +1,3 @@ +.logo { + width: 161px; +} diff --git a/src/styles/ui/swipper-nav.scss b/src/styles/ui/swipper-nav.scss new file mode 100644 index 000000000..ee5c8c019 --- /dev/null +++ b/src/styles/ui/swipper-nav.scss @@ -0,0 +1,44 @@ +.swipper-nav { + display: none; + + @include tablet { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + } + + &__next, + &__prev { + cursor: pointer; + + width: 48px; + height: 13px; + border: none; + + background-color: #d6ecec; + } + + &__prev { + background-image: url('../images/icons/prev.png'); + } + &__next { + background-image: url('../images/icons/next.png'); + } + + &__pages { + display: flex; + gap: 5px; + } + + &__current-page { + @extend %main-text; + } + + &__total-page { + position: relative; + top: 10px; + font-size: 11px; + color: #0c797a; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..232abcd78 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,11 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin tablet { + @media (max-width: 1279px) { + @content; + } +} + +@mixin mobile { + @media (max-width: 639px) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..4ef793453 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ -$c-gray: #eee; +$c-white: #f7f7f7; +$c-light-gray: #d0d0d0; +$c-gray: #7c7c7c;