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..ac51c6963 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,8 @@ 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://dqmurre.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description + > To update you PR repeat steps 7-11 diff --git a/src/images/2.png b/src/images/2.png new file mode 100644 index 000000000..844f99fa0 Binary files /dev/null and b/src/images/2.png differ diff --git a/src/images/Frame23.png b/src/images/Frame23.png new file mode 100644 index 000000000..d1b70b248 Binary files /dev/null and b/src/images/Frame23.png differ diff --git a/src/images/Vector.png b/src/images/Vector.png new file mode 100644 index 000000000..f8b97dec2 Binary files /dev/null and b/src/images/Vector.png differ diff --git a/src/images/a347db2baba6b808980fb0422ff7f7f2_original (1).png b/src/images/a347db2baba6b808980fb0422ff7f7f2_original (1).png new file mode 100644 index 000000000..c1bc172de Binary files /dev/null and b/src/images/a347db2baba6b808980fb0422ff7f7f2_original (1).png differ diff --git a/src/images/abouts-usbg.png b/src/images/abouts-usbg.png new file mode 100644 index 000000000..3c206135c Binary files /dev/null and b/src/images/abouts-usbg.png differ diff --git a/src/images/arrow_l.png b/src/images/arrow_l.png new file mode 100644 index 000000000..20f0deedd Binary files /dev/null and b/src/images/arrow_l.png differ diff --git a/src/images/arrow_lh.png b/src/images/arrow_lh.png new file mode 100644 index 000000000..e2e1cfec1 Binary files /dev/null and b/src/images/arrow_lh.png differ diff --git a/src/images/arrow_r.png b/src/images/arrow_r.png new file mode 100644 index 000000000..aa9e39afa Binary files /dev/null and b/src/images/arrow_r.png differ diff --git a/src/images/arrow_rh.png b/src/images/arrow_rh.png new file mode 100644 index 000000000..b423a6dcb Binary files /dev/null and b/src/images/arrow_rh.png differ diff --git a/src/images/arrowdesk.png b/src/images/arrowdesk.png new file mode 100644 index 000000000..d6ab70838 Binary files /dev/null and b/src/images/arrowdesk.png differ diff --git a/src/images/features-image.png b/src/images/features-image.png new file mode 100644 index 000000000..e55ac0d42 Binary files /dev/null and b/src/images/features-image.png differ diff --git a/src/images/icons/Ellipse.png b/src/images/icons/Ellipse.png new file mode 100644 index 000000000..afec42111 Binary files /dev/null and b/src/images/icons/Ellipse.png differ diff --git a/src/images/icons/Frame 34.png b/src/images/icons/Frame 34.png new file mode 100644 index 000000000..ff742f123 Binary files /dev/null and b/src/images/icons/Frame 34.png differ diff --git a/src/images/icons/Frame 35.png b/src/images/icons/Frame 35.png new file mode 100644 index 000000000..a1c44eae4 Binary files /dev/null and b/src/images/icons/Frame 35.png differ diff --git a/src/images/icons/Frame 36.png b/src/images/icons/Frame 36.png new file mode 100644 index 000000000..d74343e75 Binary files /dev/null and b/src/images/icons/Frame 36.png differ diff --git a/src/images/icons/Frame 37.png b/src/images/icons/Frame 37.png new file mode 100644 index 000000000..f431e2b59 Binary files /dev/null and b/src/images/icons/Frame 37.png differ diff --git a/src/images/icons/Group.png b/src/images/icons/Group.png new file mode 100644 index 000000000..4b7ae7232 Binary files /dev/null and b/src/images/icons/Group.png differ diff --git a/src/images/icons/Icon-Burger-menu.png b/src/images/icons/Icon-Burger-menu.png new file mode 100644 index 000000000..f7f6a3db1 Binary files /dev/null and b/src/images/icons/Icon-Burger-menu.png differ diff --git a/src/images/icons/Icon-Close.png b/src/images/icons/Icon-Close.png new file mode 100644 index 000000000..b7aa3faa8 Binary files /dev/null and b/src/images/icons/Icon-Close.png differ diff --git a/src/images/icons/arrow.png b/src/images/icons/arrow.png new file mode 100644 index 000000000..e9cb0a6b8 Binary files /dev/null and b/src/images/icons/arrow.png differ diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png new file mode 100644 index 000000000..8bad19ce6 Binary files /dev/null and b/src/images/icons/facebook.png differ diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png new file mode 100644 index 000000000..7cb513f03 Binary files /dev/null and b/src/images/icons/instagram.png differ diff --git a/src/images/icons/twitter.png b/src/images/icons/twitter.png new file mode 100644 index 000000000..dd454593b Binary files /dev/null and b/src/images/icons/twitter.png differ diff --git a/src/images/luna-image.png b/src/images/luna-image.png new file mode 100644 index 000000000..2f93ad682 Binary files /dev/null and b/src/images/luna-image.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..fffba52d2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,468 @@ + - + - Title + + + + CrazyBaby - -

Hello Mate Academy

+ + + +
+
+ +
+ + SPECS + +
+ + EN/ + + + UA + +
+ + +
+ +
+
+
+ header-image +
+

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

+
+
+
+ + + + + +
+
+ +
+
+
+ frame1 +

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

+
+
+ frame1 +

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

+
+
+
+
+ frame1 +

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

+
+
+ frame1 +

Intuitive Lighting System

+

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

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

DESIGNED FOR THE FUTURE

+
+
+

DESIGNED FOR THE FUTURE

+

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

+ + See more about us + +
+
+
+

Luna Eye

+
+
+

Luna eye

+

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

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

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

+
+ +
+
+

Garrett Martin

+

Creative Director

+
+
+
+
+

FEATURES

+
+
+
+
+
+

Sound & Music

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

Connectivity

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

App Features

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

DO YOU HAVE ANY QUESTIONS?

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

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

+
+
+ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..a2ba14890 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,131 @@ 'use strict'; + +const slider = { + currentSlide: 0, + totalSlides: 3, + + init() { + const prevButton = document.querySelector('.features__prev'); + const nextButton = document.querySelector('.features__next'); + + if (prevButton) { + const handlePress = () => { + prevButton.classList.add('features__prev--pressed'); + }; + + const handleRelease = () => { + prevButton.classList.remove('features__prev--pressed'); + }; + + prevButton.addEventListener('mousedown', handlePress); + prevButton.addEventListener('touchstart', handlePress); + + prevButton.addEventListener('mouseup', handleRelease); + prevButton.addEventListener('touchend', handleRelease); + prevButton.addEventListener('mouseleave', handleRelease); + + prevButton.addEventListener('click', (e) => { + e.preventDefault(); + this.prev(); + }); + } + + if (nextButton) { + const handlePress = () => { + nextButton.classList.add('features__next--pressed'); + }; + + const handleRelease = () => { + nextButton.classList.remove('features__next--pressed'); + }; + + nextButton.addEventListener('mousedown', handlePress); + nextButton.addEventListener('touchstart', handlePress); + + nextButton.addEventListener('mouseup', handleRelease); + nextButton.addEventListener('touchend', handleRelease); + nextButton.addEventListener('mouseleave', handleRelease); + + nextButton.addEventListener('click', (e) => { + e.preventDefault(); + this.next(); + }); + } + + document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowLeft') { + this.prev(); + } + + if (e.key === 'ArrowRight') { + this.next(); + } + }); + + this.updateAll(); + }, + + next() { + if (this.currentSlide < this.totalSlides - 1) { + this.currentSlide += 1; + this.updateAll(); + } + }, + + prev() { + if (this.currentSlide > 0) { + this.currentSlide -= 1; + this.updateAll(); + } + }, + + updateAll() { + this.updateSlide(); + this.updatePagination(); + this.updateButtons(); + }, + + updateSlide() { + const slides = document.querySelectorAll('.features__slide'); + + slides.forEach((slide, index) => { + if (index === this.currentSlide) { + slide.classList.add('features__slide--active'); + } else { + slide.classList.remove('features__slide--active'); + } + }); + }, + + updatePagination() { + const currentElement = document.querySelector('.features__current'); + const currentNumber = String(this.currentSlide + 1).padStart(2, '0'); + + if (currentElement) { + currentElement.textContent = currentNumber; + } + }, + + updateButtons() { + const prevButton = document.querySelector('.features__prev'); + const nextButton = document.querySelector('.features__next'); + + if (prevButton) { + if (this.currentSlide === 0) { + prevButton.classList.add('features__prev--disabled'); + } else { + prevButton.classList.remove('features__prev--disabled'); + } + } + + if (nextButton) { + if (this.currentSlide === this.totalSlides - 1) { + nextButton.classList.add('features__next--disabled'); + } else { + nextButton.classList.remove('features__next--disabled'); + } + } + }, +}; + +slider.init(); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/block/about-us.scss b/src/styles/block/about-us.scss new file mode 100644 index 000000000..adcfa5533 --- /dev/null +++ b/src/styles/block/about-us.scss @@ -0,0 +1,421 @@ +.about-us { + margin: 0 30px 110px; + display: flex; + flex-direction: column; + gap: 110px; + + @include on-tablet { + gap: 140px; + margin: 140px 0; + } + + @include on-desktop { + gap: 170px; + margin: 170px 0; + } + + &__block1 { + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 20px; + margin-right: 34px; + } + + @include on-desktop { + width: 1194px; + height: 388px; + margin: 0 auto; + column-gap: 30px; + } + + &--title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 30px; + line-height: 40px; + letter-spacing: 0%; + text-transform: uppercase; + padding-bottom: 30px; + margin: 0; + color: #333; + + @include on-tablet { + display: none; + } + } + + &--name { + display: none; + + @include on-tablet { + display: block; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 36px; + line-height: 46px; + letter-spacing: 0%; + text-transform: uppercase; + padding-bottom: 30px; + margin: 0; + color: #333; + grid-column: 2; + grid-row: 1; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &--image { + background-image: url(../images/2.png); + width: 100%; + height: 210px; + background-position: center; + background-repeat: no-repeat; + margin-bottom: 20px; + background-size: cover; + + @include on-tablet { + grid-column: 1; + grid-row: 1 / -1; + height: 415px; + margin-bottom: 0; + } + + @include on-desktop { + width: 582; + height: 388; + } + } + + &--description1 { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 21px; + letter-spacing: 0%; + margin: 0; + padding-bottom: 30px; + color: #7c7c7c; + + @include on-tablet { + grid-column: 2; + grid-row: 2; + font-size: 16px; + line-height: 24px; + padding-bottom: 60px; + } + } + + &--link { + position: relative; + display: inline-block; + + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 14px; + letter-spacing: 0%; + text-transform: uppercase; + color: #0db2b3; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 100%; + height: 1px; + background-color: #0db2b3; + transform: scaleX(0.4); + transform-origin: left; + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(1); + } + + @include on-tablet { + grid-column: 2; + grid-row: 3; + } + } + } + + &__block2 { + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0 20px; + margin-left: 34px; + } + + @include on-desktop { + width: 1194px; + height: 388px; + margin: 0 auto; + column-gap: 30px; + } + + &--title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 30px; + line-height: 40px; + letter-spacing: 0%; + text-transform: uppercase; + padding-bottom: 30px; + margin: 0; + color: #333; + + @include on-tablet { + display: none; + } + } + + &--image { + background-image: url(../images/Frame23.png); + width: 100%; + height: 210px; + background-position: center; + background-repeat: no-repeat; + margin-bottom: 20px; + background-size: cover; + + @include on-tablet { + grid-column: 2; + grid-row: 1 / 4; + height: 415px; + margin-bottom: 0; + } + + @include on-desktop { + width: 582; + height: 388; + } + } + + &--name { + display: none; + + @include on-tablet { + display: block; + grid-column: 1; + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 30px; + line-height: 40px; + letter-spacing: 0%; + text-transform: uppercase; + padding-bottom: 30px; + margin: 0; + color: #333; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &--description { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 21px; + letter-spacing: 0%; + margin: 0; + padding-bottom: 30px; + color: #7c7c7c; + + @include on-tablet { + grid-column: 1; + font-size: 16px; + line-height: 24px; + padding-bottom: 60px; + } + } + + &--link { + position: relative; + display: inline-block; + + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 14px; + letter-spacing: 0%; + text-transform: uppercase; + color: #0db2b3; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 100%; + height: 1px; + background-color: #0db2b3; + transform: scaleX(0.4); + transform-origin: left; + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(1); + } + + @include on-tablet { + grid-column: 1; + } + } + } + + &__block3 { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + position: relative; + justify-content: flex-end; + + @include on-tablet { + margin-inline: 34px; + } + + @include on-desktop { + width: 786px; + height: 310px; + margin: 0 auto; + } + } + + &__container { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + margin-bottom: 30px; + position: relative; + + @include on-tablet { + margin-bottom: 40px; + padding: 5px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &__background { + background-image: url(../images/abouts-usbg.png); + width: 208px; + height: 171px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + z-index: 0; + position: absolute; + + @include on-tablet { + width: 233px; + height: 189px; + bottom: 12%; + } + + @include on-desktop { + height: 192px; + bottom: -35%; + } + } + + &__review { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 14px; + line-height: 20px; + letter-spacing: 0%; + margin: 0; + z-index: 1; + position: relative; + color: #333; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } + } + + &__director { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + &__photo { + background-image: url(../images/icons/Ellipse.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + width: 62px; + height: 62px; + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 20px; + z-index: 1; + } + } + + &__name { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 22px; + letter-spacing: 0%; + text-align: center; + margin: 0; + padding-bottom: 5px; + color: #333; + } + + &__owner { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 21px; + letter-spacing: 0%; + text-align: center; + margin: 0; + color: #7c7c7c; + } +} diff --git a/src/styles/block/features.scss b/src/styles/block/features.scss new file mode 100644 index 000000000..13cf5abb1 --- /dev/null +++ b/src/styles/block/features.scss @@ -0,0 +1,283 @@ +.features { + margin: 0 auto; + + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + margin: 0 30px; + color: #333; + + @include on-tablet { + margin: 0 34px; + } + + @include on-desktop { + margin: 0; + font-size: 56px; + line-height: 70px; + } + } + + &__slider { + overflow: hidden; + margin-block: 32px 90px; + background-color: #d6ecec; + + @include on-tablet { + margin: 30px 34px 140px; + position: relative; + z-index: 1; + height: 555px; + } + + @include on-desktop { + overflow: visible; + height: auto; + margin: 30px 0 170px; + } + } + + &__slides { + display: flex; + transition: transform 0.3s ease; + margin: 30px 30px 0; + flex-direction: column; + align-items: center; + + @include on-tablet { + margin: 60px 0 0 90px; + align-items: flex-start; + } + + @include on-desktop { + flex-direction: row; + padding: 60px 306px 59px 102px; + margin: 0; + gap: 132px; + } + } + + &__slide { + width: 100%; + display: none; + position: relative; + height: 100%; + + &--active { + display: block; + } + + @include on-desktop { + display: block; + width: auto; + flex: 1; + } + } + + &__container { + display: flex; + + @include on-desktop { + flex-direction: column; + gap: 56px; + } + + .features__slide:nth-child(1) { + order: 2; + } + + .features__slide:nth-child(2) { + order: 1; + } + } + + &__content { + @include on-tablet { + width: 260px; + position: relative; + z-index: 1; + } + + @include on-desktop { + width: 378px; + } + } + + &__subtitle { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + color: #0c797a; + margin: 0 0 30px; + + @include on-tablet { + margin: 0 0 20px; + } + + @include on-desktop { + margin: 0 0 30px; + + font-size: 34px; + line-height: 42px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 10px; + margin: 0 0 50px; + padding: 0; + list-style-position: outside; + padding-left: 1em; + height: 233px; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: #333; + + @include on-desktop { + font-size: 16px; + line-height: 24px; + margin: 0; + } + } + + &__scroll { + align-items: center; + display: flex; + flex-direction: column; + + @include on-desktop { + display: none; + } + } + + &__pagination { + display: flex; + align-items: center; + gap: 3px; + margin-top: 8px; + position: relative; + width: 43px; + justify-content: flex-end; + } + + &__current { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 24px; + color: #333; + position: absolute; + left: -1px; + top: -10px; + } + + &__separator { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 11px; + line-height: 100%; + color: #0c797a; + } + + &__total { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 11px; + line-height: 100%; + color: #0c797a; + } + + &__buttons { + align-items: center; + width: 93px; + display: flex; + } + + &__prev { + display: block; + background-image: url(../images/arrow_l.png); + background-size: contain; + background-position: center; + width: 48px; + height: 14px; + border: none; + background-color: #d6ecec; + background-repeat: no-repeat; + cursor: pointer; + user-select: none; + transition: + transform 0.3s, + background-image 0.3s; + -webkit-tap-highlight-color: transparent; + + &.features__prev--pressed, + &:active { + background-image: url(../images/arrow_lh.png) !important; + background-size: contain; + background-position: center; + transform: scale(1.1); + } + } + + &__next { + display: block; + background-image: url(../images/arrow_r.png); + background-size: contain; + background-position: center; + width: 48px; + height: 14px; + border: none; + background-color: #d6ecec; + background-repeat: no-repeat; + cursor: pointer; + user-select: none; + transition: + transform 0.3s, + background-image 0.3s; + -webkit-tap-highlight-color: transparent; + + &.features__next--pressed, + &:active { + background-image: url(../images/arrow_rh.png) !important; + background-size: contain; + background-position: center; + transform: scale(1.1); + } + } + + &__image { + background-image: url(../images/features-image.png); + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 173px; + + @include on-tablet { + width: 415px; + height: 225px; + position: absolute; + z-index: 0; + right: 0; + bottom: 0; + } + + @include on-desktop { + width: 543px; + height: 301px; + margin-right: 46px; + } + } +} diff --git a/src/styles/block/header.scss b/src/styles/block/header.scss new file mode 100644 index 000000000..117314d11 --- /dev/null +++ b/src/styles/block/header.scss @@ -0,0 +1,93 @@ +.header { + display: block; + margin: 0; + + &__container { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + margin: 0 34px 141px; + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: repeat(1, auto); + position: relative; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + margin: 0; + } + } + + &-image { + width: 100%; + height: 245px; + object-fit: contain; + + @include on-tablet { + height: 317px; + z-index: -1; + position: absolute; + grid-column: 4/-1; + bottom: 0; + } + + @include on-desktop { + height: 464px; + grid-column: 4/-1; + } + } + + &__information { + margin-inline: 30px; + + @include on-tablet { + position: relative; + margin: 0; + grid-column: 1/4; + } + } + + &-title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 40px; + line-height: 52px; + letter-spacing: 0%; + text-transform: uppercase; + color: #333; + + margin: 0; + padding-bottom: 20px; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + width: 339px; + padding-bottom: 30px; + } + + @include on-desktop { + font-size: 62px; + line-height: 78px; + letter-spacing: 0%; + } + } + + &-text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + letter-spacing: 0%; + + margin: 0; + + @include on-tablet { + width: 249px; + } + } +} diff --git a/src/styles/block/icon.scss b/src/styles/block/icon.scss new file mode 100644 index 000000000..7f8a372ce --- /dev/null +++ b/src/styles/block/icon.scss @@ -0,0 +1,77 @@ +.icon { + cursor: pointer; + + &--menu { + background-image: url(../images/icons/Icon-Burger-menu.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 32px; + height: 32px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-desktop { + display: none; + } + } + + &--close { + background-image: url(../images/icons/Icon-Close.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 24px; + height: 24px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + + &--facebook { + background-image: url(../images/icons/facebook.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 24px; + height: 24px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + + &--twitter { + background-image: url(../images/icons/twitter.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 24px; + height: 24px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + + &--instagram { + background-image: url(../images/icons/instagram.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 24px; + height: 24px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/styles/block/image.scss b/src/styles/block/image.scss new file mode 100644 index 000000000..86d5b75b8 --- /dev/null +++ b/src/styles/block/image.scss @@ -0,0 +1,35 @@ +.image { + align-items: center; + max-width: 846px; + margin: 110px 12px; + + @include on-tablet { + margin: 140px 34px; + } + + @include on-desktop { + margin: 170px auto; + } + + &__luna { + background-image: url(../images/luna-image.png); + width: 100%; + height: 195px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + height: 430px; + } + + @include on-desktop { + height: 520px; + } + } +} diff --git a/src/styles/block/main.scss b/src/styles/block/main.scss new file mode 100644 index 000000000..0ff359763 --- /dev/null +++ b/src/styles/block/main.scss @@ -0,0 +1,11 @@ +.main { + margin: 110px 0; + + @include on-tablet { + margin: 140px 0; + } + + @include on-desktop { + margin: 170px 0; + } +} diff --git a/src/styles/block/menu.scss b/src/styles/block/menu.scss new file mode 100644 index 000000000..31fd37603 --- /dev/null +++ b/src/styles/block/menu.scss @@ -0,0 +1,138 @@ +.menu { + box-sizing: border-box; + background-color: #f7f7f7; + + &__top { + align-items: center; + margin: 0; + padding: 25px 30px; + display: flex; + justify-content: space-between; + + @include on-tablet { + padding: 25px; + } + } + + &-logo { + cursor: pointer; + background-image: url(../images/Vector.png); + background-size: cover; + background-repeat: no-repeat; + width: 161px; + height: 26px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + + &__wrapper { + margin: 0; + padding: 30px; + + @include on-tablet { + padding: 40px; + } + } + + &__nav { + margin-bottom: 50px; + } + + &__container { + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + display: none; + } + } + + &-specs { + font-family: 'Helvetica Neue', sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + color: #4f4f4f; + text-decoration: none; + } + + &-english { + cursor: pointer; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + letter-spacing: 0%; + color: #333; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-desktop { + line-height: 20px; + } + } + + &-ukrainian { + cursor: pointer; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + letter-spacing: 0%; + color: #828282; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-desktop { + line-height: 20px; + } + } + + &__button { + position: fixed; + left: 30px; + right: 30px; + bottom: 30px; + margin: 0; + padding: 0; + background-color: #333; + color: #fff; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + text-transform: uppercase; + display: block; + cursor: pointer; + height: 48px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + background-color: #131313; + } + + &:disabled { + background-color: #d0d0d0; + } + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/block/nav.scss b/src/styles/block/nav.scss new file mode 100644 index 000000000..6889b27f5 --- /dev/null +++ b/src/styles/block/nav.scss @@ -0,0 +1,41 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 25px; + + @include on-tablet { + gap: 40px; + } + + @include on-desktop { + flex-direction: row; + gap: 84px; + padding: 28px; + } + } + + &__link { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Bold; + font-size: 14px; + line-height: 20px; + letter-spacing: 0%; + vertical-align: middle; + text-transform: uppercase; + text-decoration: none; + color: #333; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + font-weight: 700; + font-style: Bold; + color: #131313; + } + } +} diff --git a/src/styles/block/page.scss b/src/styles/block/page.scss new file mode 100644 index 000000000..e5f77411b --- /dev/null +++ b/src/styles/block/page.scss @@ -0,0 +1,43 @@ +html { + scroll-behavior: smooth; +} + +.page { + font-family: Inter, sans-serif; + + &__body { + padding: 0; + margin: 0; + min-width: 320px; + background-color: #f7f7f7; + + @include on-desktop { + margin: 0 auto; + max-width: 1194px; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + z-index: 1; + height: 100vh; + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: all 0.3s; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/block/questions.scss b/src/styles/block/questions.scss new file mode 100644 index 000000000..acda53669 --- /dev/null +++ b/src/styles/block/questions.scss @@ -0,0 +1,238 @@ +.questions { + margin: 0 30px 20px; + + @include on-tablet { + margin: 0 34px 30px; + } + + @include on-desktop { + margin: 0 0 30px; + } + + &__container { + margin-bottom: 110px; + + @include on-tablet { + display: flex; + gap: 21px; + } + + @include on-desktop { + margin-bottom: 170px; + gap: 28px; + } + } + + &__title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + color: #333; + margin: 0 0 27px; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + margin: 0; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } + } + + &__form { + @include on-tablet { + width: 340px; + } + + @include on-desktop { + width: 582px; + } + + &--input { + width: 100%; + height: 48px; + padding: 12px 0 12px 20px; + margin-bottom: 20px; + border: 1px solid #828282; + box-sizing: border-box; + outline: none; + + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 24px; + + &::placeholder { + color: #bdbdbd; + } + + &:focus { + border-color: #0c797a; + } + + &:valid { + border-color: #0c7a76; + } + } + + &--message { + box-sizing: border-box; + outline: none; + width: 100%; + height: 128px; + resize: none; + padding: 12px 20px; + margin-bottom: 30px; + border: 1px solid #828282; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + + &::placeholder { + color: #bdbdbd; + } + + &:focus { + border-color: #0c797a; + } + + &:valid { + border-color: #0c7a76; + } + + @include on-tablet { + height: 201px; + } + } + + &--button { + width: 102px; + height: 40px; + background-color: #0db2b3; + border: none; + + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 12px; + line-height: 14px; + color: #fff; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + background-color: #0c797a; + } + + &:disabled { + background-color: #cfeff0; + } + + @include on-desktop { + width: 124px; + height: 48px; + } + } + } + + &__bottom { + align-items: center; + } + + &__navigation { + display: flex; + justify-content: space-between; + } + + &__item { + @include on-tablet { + width: 50px; + height: 50px; + } + + @include on-desktop { + width: 24px; + height: 24px; + } + } + + &__logo { + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + background-image: url(../images/Vector.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 184px; + height: 25px; + margin-bottom: 60px; + } + + @include on-desktop { + width: 161px; + height: 26px; + } + } + + &__arrow { + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + width: 50px; + height: 50px; + background-image: url(../images/icons/group.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + } + + @include on-desktop { + height: 24px; + width: 24px; + background-image: url(../images/arrowdesk.png); + } + } + + &__icons { + margin: 0 54px 30px; + display: flex; + gap: 40px; + justify-content: center; + + @include on-tablet { + gap: 49px; + } + + @include on-desktop { + gap: 40px; + } + } + + &__text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + color: #bdbdbd; + margin: 0; + } +} diff --git a/src/styles/block/specs.scss b/src/styles/block/specs.scss new file mode 100644 index 000000000..aa1d38561 --- /dev/null +++ b/src/styles/block/specs.scss @@ -0,0 +1,94 @@ +.specs { + margin-inline: 30px; + align-items: center; + + &__nav { + display: none; + + @include on-desktop { + display: flex; + justify-content: center; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + margin-top: 62px; + flex-direction: row; + gap: 30px; + align-items: flex-start; + } + } + + &__container { + @include on-tablet { + display: flex; + gap: 20px; + + @include on-desktop { + gap: 30px; + } + } + } + + &__disabled { + display: none; + + @include on-tablet { + display: block; + } + } + + &__block { + text-align: center; + max-width: 260px; + + @include on-tablet { + max-width: 340px; + } + + @include on-desktop { + max-width: 276px; + } + } + + &-title { + font-family: Inter, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 22px; + line-height: 28px; + letter-spacing: 0%; + text-align: center; + text-transform: uppercase; + margin: 0; + padding: 40 0 20px; + color: #333; + } + + &-text { + font-family: Inter, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 21px; + letter-spacing: 0%; + text-align: center; + margin: 0; + color: #7c7c7c; + } + + &-image { + width: 50px; + height: 40px; + object-fit: cover; + } +} diff --git a/src/styles/block/top-bar.scss b/src/styles/block/top-bar.scss new file mode 100644 index 000000000..1512bbb9b --- /dev/null +++ b/src/styles/block/top-bar.scss @@ -0,0 +1,150 @@ +.top-bar { + padding: 22px 30px; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding: 29px 34px 130px; + } + + @include on-desktop { + padding: 30px 0 90px; + } + + &-logo { + cursor: pointer; + background-image: url(../images/Vector.png); + background-size: cover; + background-repeat: no-repeat; + width: 161px; + height: 26px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + + &__container { + display: flex; + gap: 30px; + align-items: center; + + @include on-desktop { + gap: 0; + } + } + + &__language { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + margin-left: 30px; + } + } + + &-english { + cursor: pointer; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + letter-spacing: 0%; + color: #333; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-desktop { + line-height: 20px; + } + } + + &-ukrainian { + cursor: pointer; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 18px; + letter-spacing: 0%; + color: #828282; + text-decoration: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + + @include on-desktop { + line-height: 20px; + } + } + + &__button { + display: none; + margin: 0; + padding: 0; + + @include on-tablet { + background-color: #333; + color: #fff; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 500; + font-size: 12px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + text-transform: uppercase; + + display: block; + cursor: pointer; + width: 100px; + height: 48px; + border: none; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + background-color: #131313; + } + + &:disabled { + background-color: #d0d0d0; + } + + @include on-desktop { + width: 102px; + margin-left: 47px; + } + } + } + + &-specs { + display: none; + + @include on-tablet { + display: block; + font-family: 'Helvetica Neue', sans-serif; + font-weight: 300; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + text-decoration: none; + color: #4f4f4f; + transition: transform 0.3s; + + &:hover { + transform: scale(1.1); + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 000000000..614590d86 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,14 @@ +@import './utils/mixins'; +@import './utils/variables'; +@import './block/page'; +@import './block/header'; +@import './block/top-bar'; +@import './block/icon'; +@import './block/menu'; +@import './block/nav'; +@import './block/main'; +@import './block/specs'; +@import './block/image'; +@import './block/about-us'; +@import './block/features'; +@import './block/questions'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..466bc4459 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,17 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-tv { + @media (min-width: $tv-min-width) { + @content; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..5b2d2027c --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,2 @@ +$tablet-min-width: 768px; +$desktop-min-width: 1280px;