diff --git a/README.md b/README.md index a95e97afe..717ead17f 100644 --- a/README.md +++ b/README.md @@ -1,40 +1 @@ -# Kickstarter landing page (HARD) - -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** - -Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) - -1. Implement the header with `nav`. -1. Implement `Benefits` block. -1. Implement `Presentation` block. -1. Implement `About us` block. -1. Implement `Technology` block. -1. Implement `Testimonilas` block. -1. Implement `Features` block. -1. Implement `Questions` block -1. Implement the footer. - - -## Github flow - -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`) -4. Run `npm start`. -5. Open one more terminal window for the next steps -6. `git checkout -b develop` - to create new branch and switch on it -7. Write you code in `src` folder -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages` -10. `git add . && git commit -m 'solution'` to save your changes -11. `git push origin develop` - to send you code for PR -12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. -13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Kickstarter/) -14. Copy `DEMO LINK` to the PR description - -> To update you PR repeat steps 7-11 +[DEMO LINK](https://vlad14982.github.io/Kickstarter/) diff --git a/src/images/about-desktop.png b/src/images/about-desktop.png new file mode 100644 index 000000000..c0561d66e Binary files /dev/null and b/src/images/about-desktop.png differ diff --git a/src/images/about-phone.png b/src/images/about-phone.png new file mode 100644 index 000000000..73b09d032 Binary files /dev/null and b/src/images/about-phone.png differ diff --git a/src/images/about-tablet.png b/src/images/about-tablet.png new file mode 100644 index 000000000..d3df413d9 Binary files /dev/null and b/src/images/about-tablet.png differ diff --git a/src/images/avatar.png b/src/images/avatar.png new file mode 100644 index 000000000..497c01499 Binary files /dev/null and b/src/images/avatar.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..cd708eef4 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/features.png b/src/images/features.png new file mode 100644 index 000000000..d2dbf59d4 Binary files /dev/null and b/src/images/features.png differ diff --git a/src/images/features2.png b/src/images/features2.png new file mode 100644 index 000000000..fca33c48a Binary files /dev/null and b/src/images/features2.png differ diff --git a/src/images/header-img-desktop.png b/src/images/header-img-desktop.png new file mode 100644 index 000000000..b745795c2 Binary files /dev/null and b/src/images/header-img-desktop.png differ diff --git a/src/images/header-img-phone.png b/src/images/header-img-phone.png new file mode 100644 index 000000000..0ab402981 Binary files /dev/null and b/src/images/header-img-phone.png differ diff --git a/src/images/header-img-tablet.png b/src/images/header-img-tablet.png new file mode 100644 index 000000000..cfc49c097 Binary files /dev/null and b/src/images/header-img-tablet.png differ diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..0bfb2174c --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/design.svg b/src/images/icons/design.svg new file mode 100644 index 000000000..ffa680dba --- /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..2f5d0bec2 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-burger-menu.svg b/src/images/icons/icon-burger-menu.svg new file mode 100644 index 000000000..4df42c36f --- /dev/null +++ b/src/images/icons/icon-burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..df1397add --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..acc91ab7f --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/lighting.svg b/src/images/icons/lighting.svg new file mode 100644 index 000000000..df0cb9b4c --- /dev/null +++ b/src/images/icons/lighting.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/icons/slider-left.svg b/src/images/icons/slider-left.svg new file mode 100644 index 000000000..08075b745 --- /dev/null +++ b/src/images/icons/slider-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/slider-right.svg b/src/images/icons/slider-right.svg new file mode 100644 index 000000000..bf3bd358a --- /dev/null +++ b/src/images/icons/slider-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/speaker.svg b/src/images/icons/speaker.svg new file mode 100644 index 000000000..fd4b7550f --- /dev/null +++ b/src/images/icons/speaker.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/system.svg b/src/images/icons/system.svg new file mode 100644 index 000000000..203f2f68d --- /dev/null +++ b/src/images/icons/system.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..1d928f615 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..2928bf4d0 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/meet-luna-desktop.png b/src/images/meet-luna-desktop.png new file mode 100644 index 000000000..153f96b88 Binary files /dev/null and b/src/images/meet-luna-desktop.png differ diff --git a/src/images/meet-luna-phone.png b/src/images/meet-luna-phone.png new file mode 100644 index 000000000..60e665fce Binary files /dev/null and b/src/images/meet-luna-phone.png differ diff --git a/src/images/meet-luna-tablet.png b/src/images/meet-luna-tablet.png new file mode 100644 index 000000000..4e1721aee Binary files /dev/null and b/src/images/meet-luna-tablet.png differ diff --git a/src/images/quotes.png b/src/images/quotes.png new file mode 100644 index 000000000..663b86de7 Binary files /dev/null and b/src/images/quotes.png differ diff --git a/src/images/story-desktop.png b/src/images/story-desktop.png new file mode 100644 index 000000000..a9ba087e3 Binary files /dev/null and b/src/images/story-desktop.png differ diff --git a/src/images/story-phone.png b/src/images/story-phone.png new file mode 100644 index 000000000..508fa9f28 Binary files /dev/null and b/src/images/story-phone.png differ diff --git a/src/images/story-tablet.png b/src/images/story-tablet.png new file mode 100644 index 000000000..26e790071 Binary files /dev/null and b/src/images/story-tablet.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..f0eb7d0cc 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,731 @@ + - + - Title + + + + + + + + + + CRAZYBABY + + + + + + - -

Hello Mate Academy

- + + + +
+
+
+ + + + +
+
+ + SPECS + + +
+ + EN + + + / + + + UA + +
+ + +
+ +
+
+
+ +
+
+
+

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

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

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

+
+
+
+
+ +
+ Meet Luna +
+ +
+
+
+

+ DESIGNED FOR THE FUTURE +

+ +
+ story +
+ +

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

+ +
+ product +
+ +

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

+
+ + avatar + +
+ 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 + +
+
+ +
+ features +
+
+
+ +
+
+

+ DO YOU HAVE ANY QUESTIONS? +

+
+ + + + + +
+
+
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..9f002dd09 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,250 @@ 'use strict'; + +// Зміна зображень для різної ширини екранів + +import headerPhone from '../images/header-img-phone.png'; +import headerTablet from '../images/header-img-tablet.png'; +import headerDesktop from '../images/header-img-desktop.png'; + +import mainPhone from '../images/meet-luna-phone.png'; +import mainTablet from '../images/meet-luna-tablet.png'; +import mainDesktop from '../images/meet-luna-desktop.png'; + +import storyPhone from '../images/story-phone.png'; +import storyTablet from '../images/story-tablet.png'; +import storyDesktop from '../images/story-desktop.png'; + +import aboutPhone from '../images/about-phone.png'; +import aboutTablet from '../images/about-tablet.png'; +import aboutDesktop from '../images/about-desktop.png'; + +function updateImageSrc(imageId, phoneSrc, tabletSrc, desktopSrc) { + const img = document.getElementById(imageId); + + const tabletMinWidth = getComputedStyle(document.documentElement).getPropertyValue('--tablet-min-width').trim(); + const desktopMinWidth = getComputedStyle(document.documentElement).getPropertyValue('--desktop-min-width').trim(); + + const screenWidth = window.innerWidth; + + if (screenWidth >= parseInt(desktopMinWidth)) { + img.src = desktopSrc; + } else if (screenWidth >= parseInt(tabletMinWidth)) { + img.src = tabletSrc; + } else { + img.src = phoneSrc; + } +} + +function updateAllImages() { + updateImageSrc('headerImage', headerPhone, headerTablet, headerDesktop); + updateImageSrc('mainImage', mainPhone, mainTablet, mainDesktop); + updateImageSrc('storyImage', storyPhone, storyTablet, storyDesktop); + updateImageSrc('aboutImage', aboutPhone, aboutTablet, aboutDesktop); +} + +window.addEventListener('load', updateAllImages); +window.addEventListener('resize', updateAllImages); + + +// Встановлення висоти заголовків в Benefits + +function setEqualTitleHeights() { + const titles = document.querySelectorAll('.benefits__item-title'); + let maxHeight = 0; + + titles.forEach(title => { + const height = title.offsetHeight; + if (height > maxHeight) { + maxHeight = height; + } + }); + + titles.forEach(title => { + title.style.height = `${maxHeight}px`; + }); +} + +window.addEventListener('load', setEqualTitleHeights); +window.addEventListener('resize', setEqualTitleHeights); + + +// Слайдер + +document.addEventListener('DOMContentLoaded', () => { + const prevButton = document.querySelector('.slider__button--prev'); + const nextButton = document.querySelector('.slider__button--next'); + const slides = document.querySelectorAll('.slider__content'); + let currentIndex = 0; + + function updateSlides() { + slides.forEach((slide, index) => { + slide.classList.remove('left', 'right'); + if (index < currentIndex) { + slide.classList.add('left'); + } else if (index > currentIndex) { + slide.classList.add('right'); + } + }); + + if (currentIndex === 0) { + prevButton.classList.add('disabled'); + } else { + prevButton.classList.remove('disabled'); + } + + if (currentIndex === slides.length - 1) { + nextButton.classList.add('disabled'); + } else { + nextButton.classList.remove('disabled'); + } + + document.querySelector('.slider__current-slide').textContent = String(currentIndex + 1).padStart(2, '0'); + } + + function showNextSlide() { + if (currentIndex < slides.length - 1) { + currentIndex++; + updateSlides(); + } + } + + function showPrevSlide() { + if (currentIndex > 0) { + currentIndex--; + updateSlides(); + } + } + + prevButton.addEventListener('click', showPrevSlide); + nextButton.addEventListener('click', showNextSlide); + + updateSlides(); +}); + + +// Встановлення висоти блоку слайдера + +function setMaxHeight() { + const sliderContents = document.querySelectorAll('.slider__content'); + + let maxHeight = 0; + + sliderContents.forEach(content => { + const contentHeight = content.offsetHeight; + if (contentHeight > maxHeight) { + maxHeight = contentHeight; + } + }); + + const sliderControls = document.querySelector('.slider__controls'); + sliderControls.style.marginTop = maxHeight + 'px'; +} + +setMaxHeight(); +window.addEventListener('resize', setMaxHeight); + + +// Перевірка форми на валідність + +const form = document.getElementById('contactForm'); +const submitButton = document.getElementById('submitButton'); + +function checkFormValidity() { + if (form.checkValidity()) { + submitButton.classList.add('active'); + submitButton.disabled = false; + } else { + submitButton.classList.remove('active'); + submitButton.disabled = true; + } +} + +form.addEventListener('input', checkFormValidity); + + +// Обробник події для відправки форми + +form.addEventListener('submit', function(event) { + event.preventDefault(); + + alert('The form is successfully sent!'); + + form.reset(); + + submitButton.classList.remove('active'); + submitButton.disabled = true; +}); + + + +// Ефект магнетизму + +const parents = document.querySelectorAll('.magnet-parent'); + +const attractionStrength = 0.7; // Коефіцієнт сили примагнічення + +parents.forEach(parent => { + const magnet = parent.querySelector('.magnet'); + + const parentSize = parent.offsetWidth; + const magnetSize = magnet.offsetWidth; + + const parentCenter = { + x: parentSize / 2, + y: parentSize / 2 + }; + + const maxDistance = (parentSize - magnetSize) / 2; + + parent.addEventListener('mousemove', (e) => { + const rect = parent.getBoundingClientRect(); + + const cursorX = e.clientX - rect.left; + const cursorY = e.clientY - rect.top; + + const distanceX = cursorX - parentCenter.x; + const distanceY = cursorY - parentCenter.y; + + const influenceX = (distanceX / (parentSize / 2)) * maxDistance * attractionStrength; + const influenceY = (distanceY / (parentSize / 2)) * maxDistance * attractionStrength; + + magnet.style.transform = `translate(calc(-50% + ${influenceX}px), calc(-50% + ${influenceY}px))`; + }); + + parent.addEventListener('mouseleave', () => { + magnet.style.transform = `translate(-50%, -50%)`; + }); +}); + + +// Ефект відштовхування + +const containers = document.querySelectorAll('.image-container'); + +const maxOffsetPercentage = 8; // Коефіцієнт сили відштовхування + +containers.forEach(container => { + const image = container.querySelector('.magnetic-image'); + + container.addEventListener('mousemove', (e) => { + const rect = container.getBoundingClientRect(); + + const mouseX = e.clientX - rect.left; + const mouseY = e.clientY - rect.top; + + const centerX = rect.width / 2; + const centerY = rect.height / 2; + + const deltaX = mouseX - centerX; + const deltaY = mouseY - centerY; + + const offsetX = (deltaX / centerX) * maxOffsetPercentage; + const offsetY = (deltaY / centerY) * maxOffsetPercentage; + + image.style.transform = `translate(${ -offsetX }%, ${ -offsetY }%) scale(1.16)`; + }); + + container.addEventListener('mouseleave', () => { + image.style.transform = 'translate(0, 0)'; + }); +}); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..8e9f50724 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,23 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +p { + @extend %p; +} diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..28a6d68b5 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,185 @@ +.about { + &__story { + @include block-margin-bottom; + @include page-grid; + + &__title { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 5 / -1; + grid-row: 1 / 2; + } + + @include desktop-width { + grid-column: 7 / -1; + } + } + + &__img { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 1 / 5; + grid-row: 1 / 5; + + transform: translateX(-$tablet-padding-inline); + } + + @include desktop-width { + grid-column: 1 / 7; + + transform: translateX(0); + } + } + + &__description { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 5 / -1; + grid-row: 2 / 3; + } + + @include desktop-width { + grid-column: 7 / -1; + } + } + + &__link { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 5 / -1; + grid-row: 3 / 4; + } + + @include desktop-width { + grid-column: 7 / -1; + } + } + } + + &__product { + @include block-margin-bottom; + @include page-grid; + + &__title { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 1 / 5; + grid-row: 1 / 2; + } + + @include desktop-width { + grid-column: 1 / 7; + } + } + + &__img { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 5 / -1; + grid-row: 1 / 5; + } + + @include desktop-width { + grid-column: 7 / -1; + } + } + + &__description { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 1 / 5; + grid-row: 2 / 3; + } + + @include desktop-width { + grid-column: 1 / 7; + } + } + + &__link { + grid-column: 1 / -1; + + @include tablet-width { + grid-column: 1 / 5; + grid-row: 3 / 4; + } + + @include desktop-width { + grid-column: 1 / 7; + } + } + } + + &__img { + margin-top: 30px; + width: 100%; + overflow: hidden; + position: relative; + + @include tablet-width { + margin-top: 0; + width: calc(100% + $tablet-padding-inline); + } + + @include desktop-width { + width: 100%; + } + + .magnetic-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease-out; + } + } + + &__description { + margin-top: 20px; + color: $text-color-gray; + + @include tablet-width { + margin-top: 30px; + } + } + + &__link { + position: relative; + width: max-content; + color: $about-link-color; + text-decoration: none; + text-transform: uppercase; + font-size: 12px; + line-height: 14px; + font-weight: 700; + + margin-top: 30px; + + @include tablet-width { + margin-top: 60px; + } + + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + height: 1px; + width: 53px; + background-color: $about-link-color; + + transition: width 0.3s; + transform-origin: left; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/benefits.scss b/src/styles/blocks/benefits.scss new file mode 100644 index 000000000..7aabd3f3d --- /dev/null +++ b/src/styles/blocks/benefits.scss @@ -0,0 +1,81 @@ +.benefits { + @include block-margin-bottom; + + &__items { + row-gap: 65px; + + @include page-grid; + + @include desktop-width { + margin-top: 62px; + } + + & > *:not(:first-child) { + display: none; + + @include tablet-width { + display: flex; + } + } + } + + &__item { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + + @include tablet-width { + grid-column: span 4; + } + + @include desktop-width { + grid-column: span 3; + } + + &-icon { + display: block; + background-size: cover; + background-position: center; + height: 50px; + width: 70px; + + &--design { + background-image: url(../images/icons/design.svg); + } + + &--speaker { + background-image: url(../images/icons/speaker.svg); + } + + &--system { + background-image: url(../images/icons/system.svg); + } + + &--lighting { + background-image: url(../images/icons/lighting.svg); + } + } + + &-title { + text-align: center; + margin-block: 40px 20px; + + @include tablet-width { + margin-block: 50px 20px; + } + + @include desktop-width { + margin-block: 30px 24px; + } + } + + &-description { + font-size: 14px; + line-height: 21px; + font-weight: 400; + text-align: center; + color: $text-color-gray; + } + } +} diff --git a/src/styles/blocks/contact-form.scss b/src/styles/blocks/contact-form.scss new file mode 100644 index 000000000..574dd58c3 --- /dev/null +++ b/src/styles/blocks/contact-form.scss @@ -0,0 +1,137 @@ +.contact-form { + display: flex; + flex-direction: column; + + @include block-margin-bottom; + + @include tablet-width { + flex-direction: row; + gap: $mobile-column-gap; + } + + @include desktop-width { + gap: $desktop-column-gap; + } + + &__title { + @include tablet-width { + width: 50%; + } + } + + &__form { + display: flex; + flex-direction: column; + margin-top: 27px; + + @include tablet-width { + width: 50%; + margin-top: 0; + } + } + + &__input { + box-sizing: border-box; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + background-color: inherit; + color: #bdbdbd; + + padding-inline: 20px; + + border: 1px solid #828282; + transition: + border-color $effectDuration, + color $effectDuration; + + @include tablet-width { + padding-inline: 30px; + } + + @include desktop-width { + padding-inline: 36px; + } + + &::placeholder { + color: inherit; + opacity: 1; + } + + &:focus { + color: $main-text-color; + border-color: #0c797a; + } + + &:valid { + color: $text-color-yellow; + border-color: #eb5757; + } + + &:focus-visible { + outline: none; + } + + &:-webkit-autofill { + -webkit-text-fill-color: #bdbdbd; + transition: background-color 5000s ease 5000s; + } + + &:-webkit-autofill:focus { + -webkit-text-fill-color: $main-text-color; + } + + &:-webkit-autofill:valid { + -webkit-text-fill-color: $text-color-yellow; + } + + &--email { + height: 48px; + } + + &--message { + margin-top: 20px; + padding-block: 12px; + height: 128px; + resize: none; + + @include tablet-width { + height: 201px; + } + + @include desktop-width { + padding-block: 16px; + height: 128px; + } + } + } + + &__submit { + border: 0; + margin-top: 30px; + height: 40px; + width: 102px; + background-color: #cfeff0; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 500; + color: #fff; + text-transform: uppercase; + transition: background-color $effectDuration; + + @include desktop-width { + height: 48px; + width: 124px; + } + + &.active { + background-color: #0db2b3; + cursor: pointer; + + &:hover { + background-color: #0c797a; + } + } + } +} diff --git a/src/styles/blocks/features.scss b/src/styles/blocks/features.scss new file mode 100644 index 000000000..c668f1944 --- /dev/null +++ b/src/styles/blocks/features.scss @@ -0,0 +1,235 @@ +.features { + @include block-margin-bottom; + + &__title { + @include inline-padding; + } + + .slider { + display: flex; + flex-direction: column; + margin-top: 32px; + background-color: #d6ecec; + overflow: hidden; + + @include tablet-width { + margin-top: 30px; + margin-inline: $tablet-padding-inline; + } + + @include desktop-width { + margin-inline: $desktop-padding-inline; + } + + &__content-container { + display: flex; + position: relative; + margin-inline: 30px; + width: 100%; + + @include tablet-width { + margin-inline: 90px; + } + + @include desktop-width { + width: auto; + flex-wrap: wrap; + margin-inline: 102px; + } + } + + &__content { + position: absolute; + width: 260px; + top: 0; + left: 0; + opacity: 1; + transform: translateX(0) scale(1); + transition: + transform 0.9s ease, + opacity 0.9s ease; + + &:first-child { + order: 1; + } + + @include desktop-width { + position: relative; + width: 50%; + } + + &.left { + transform: translateX(-100%) scale(0.6); + opacity: 0; + + @include desktop-width { + transform: translateX(0) scale(1); + opacity: 1; + } + } + + &.right { + transform: translateX(100%) scale(0.6); + opacity: 0; + + @include desktop-width { + transform: translateX(0) scale(1); + opacity: 1; + } + } + } + + &__title { + margin-top: 30px; + + @include tablet-width { + margin-top: 60px; + } + } + + &__list { + margin: 0; + margin-top: 20px; + padding: 0; + display: flex; + flex-direction: column; + gap: 10px; + + @include desktop-width { + margin-top: 30px; + } + } + + &__item { + list-style: none; + display: flex; + position: relative; + align-items: center; + padding-left: 16px; + font-size: 14px; + line-height: 21px; + font-weight: 400; + + @include desktop-width { + font-size: 16px; + line-height: 24px; + } + + &::before { + content: ''; + position: absolute; + left: 1px; + top: 50%; + transform: translateY(-50%); + height: 4px; + width: 4px; + border-radius: 50%; + background-color: #333; + box-sizing: content-box; + } + } + + &__controls { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 50px; + + @include tablet-width { + padding-inline: 90px; + align-items: start; + } + + @include desktop-width { + display: none; + } + + &-container { + display: flex; + flex-direction: column; + align-items: center; + width: fit-content; + } + } + + &__buttons { + display: flex; + } + + &__button { + display: flex; + position: relative; + background: none; + border: none; + cursor: pointer; + fill: #333; + padding: 0; + transition: fill 0.3s; + + &:hover { + fill: #0c797a; + } + + &.disabled { + fill: #bdbdbd; + cursor: default; + } + + &--prev { + left: 1px; + top: 1px; + } + + &--next { + left: -1px; + top: -1px; + } + } + + &__counter { + display: flex; + align-items: end; + gap: 3px; + margin-top: 8px; + font-size: 11px; + line-height: 13px; + font-weight: 400; + color: #0c797a; + } + + &__current-slide { + color: $main-text-color; + font-size: 16px; + line-height: 24px; + } + + &__img { + width: 100%; + + @include tablet-width { + align-self: flex-end; + width: 415px; + margin-right: 20px; + } + + @include desktop-width { + width: 582px; + margin-right: 30px; + } + + &-container { + display: flex; + position: relative; + justify-content: end; + + @include tablet-width { + height: 123px; + } + + @include desktop-width { + height: 60px; + } + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..4e2a70658 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,119 @@ +.footer { + &-container { + position: relative; + } + + &__logo { + display: flex; + width: 184px; + height: 25px; + transition: transform $effectDuration; + + @include desktop-width { + width: 161px; + height: 26px; + } + + &:hover { + transform: scale(1.1); + } + + &-link { + display: none; + width: max-content; + margin-inline: auto; + margin-bottom: 42px; + + @include tablet-width { + display: block; + } + } + } + + &__button--scroll-top { + display: none; + position: absolute; + top: 0; + right: 0; + background-image: url(../images/icons/arrow-up.svg); + background-size: contain; + background-position: center; + height: 24px; + width: 24px; + margin: 12px; + transition: transform $effectDuration; + + &:hover { + transform: scale(1.2); + } + + @include tablet-width { + display: flex; + } + + @include desktop-width { + margin: 0; + } + } + + &__social-links { + display: flex; + justify-content: center; + gap: 4px; + } + + .social-link { + width: 60px; + height: 60px; + position: relative; + + &__icon { + background-size: contain; + background-position: center; + height: 24px; + width: 24px; + + &--facebook { + background-image: url(../images/icons/facebook.svg); + } + + &--twitter { + background-image: url(../images/icons/twitter.svg); + } + + &--instagram { + background-image: url(../images/icons/instagram.svg); + } + } + + .magnet { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: transform 0.2s ease-out; + } + } + + &__additional-info { + color: #bdbdbd; + font-size: 14px; + line-height: 21px; + text-align: center; + margin-block: 12px 20px; + + @include tablet-width { + margin-block: 42px 30px; + } + + &-link { + color: inherit; + text-decoration: none; + transition: color $effectDuration; + + &:hover { + color: $main-text-color; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..26665b3d1 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,70 @@ +.header { + display: flex; + flex-direction: column; + + &__content { + @include block-margin-bottom; + + &__info { + @include page-grid; + + @include tablet-width { + margin-top: 130px; + } + + &-title { + margin-top: 40px; + grid-column: 1 / -1; + align-self: end; + + @include tablet-width { + margin-top: 0; + grid-column: 1 / 5; + grid-row: 1; + } + + @include desktop-width { + grid-row: 2; + } + } + + &-description { + margin-top: 20px; + grid-column: 1 / -1; + + @include tablet-width { + margin-top: 30px; + grid-column: 1 / 4; + grid-row: 2; + } + + @include desktop-width { + grid-row: 3; + } + } + + &-img { + display: flex; + width: calc(100% + $mobile-padding-inline * 2); + transform: translateX(-$mobile-padding-inline); + align-self: center; + z-index: -1; + grid-column: 1 / -1; + grid-row: 1 / 3; + + @include tablet-width { + width: 100%; + transform: translateX(0); + grid-column: 4 / -1; + } + + @include desktop-width { + width: calc(100% + $desktop-column-gap); + transform: translateX(-$desktop-column-gap); + grid-column: 5 / -1; + grid-row: 1 / 4; + } + } + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..ff182994f --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,27 @@ +.main { + &-image { + padding-inline: 12px; + + @include block-margin-bottom; + @include page-grid; + + @include tablet-width { + padding-inline: $tablet-padding-inline; + } + + @include desktop-width { + padding-inline: $desktop-padding-inline; + } + + &__img { + width: 100%; + grid-column: 1 / -1; + + @include desktop-width { + width: calc(100% + ($desktop-column-gap * 2)); + transform: translateX(-$desktop-column-gap); + grid-column: 3 / 11; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..0ca39c616 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,88 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #f9f9f9; + overflow: auto; + + &__info { + display: flex; + flex-direction: column; + gap: 50px; + + &--container { + display: flex; + box-sizing: border-box; + flex-direction: column; + justify-content: space-between; + height: calc(100vh - 70px); + padding-block: 30px; + } + } + + &__language { + display: flex; + } + + &__additional { + display: flex; + gap: 20px; + + @include tablet-width { + display: none; + } + + &--link { + font-size: 14px; + line-height: 18px; + font-weight: 300; + color: #828282; + text-decoration: none; + transition: all $effectDuration; + + &:hover { + color: $main-text-color; + font-weight: 400; + } + } + + &--link.active { + color: $main-text-color; + font-weight: 400; + } + + &--separator { + font-family: Helvetica, sans-serif; + font-size: 14px; + line-height: 18px; + font-weight: 400; + padding-inline: 3px; + } + } + + &__button { + font-family: Helvetica, sans-serif; + border: none; + background-color: #333; + color: #fff; + font-size: 12px; + line-height: 14.65px; + font-weight: 500; + height: 48px; + width: 100%; + cursor: pointer; + transition: background-color $effectDuration; + + @include tablet-width { + display: none; + } + + &:hover { + background-color: #131313; + } + + &--top-bar { + display: block; + width: 100px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..25d45e678 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,66 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 25px; + } + + &__link { + position: relative; + color: $main-text-color; + font-weight: 400; + text-decoration: none; + font-size: 14px; + line-height: 20px; + + &::after { + content: ''; + position: absolute; + bottom: -4px; + display: block; + height: 1px; + width: 100%; + background-color: #333; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + &__item:first-child .nav__link { + font-weight: 700; + } +} + +.benefits { + .nav { + display: none; + height: 76px; + align-items: center; + justify-content: center; + + @include desktop-width { + display: flex; + } + + &__list { + flex-direction: row; + height: 100%; + align-items: center; + gap: 84px; + } + + &__item { + padding-block: 10px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..27e15d6df --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + font-family: Inter, sans-serif; + background: $main-bg-color; + margin-inline: auto; + inline-size: fit-content; + + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + 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/blocks/quote.scss b/src/styles/blocks/quote.scss new file mode 100644 index 000000000..d1daf9a47 --- /dev/null +++ b/src/styles/blocks/quote.scss @@ -0,0 +1,80 @@ +.quote { + display: flex; + flex-direction: column; + align-items: center; + + @include block-margin-bottom; + + &__background { + background-image: url(../images/quotes.png); + background-position: center; + background-size: contain; + height: 171px; + width: 208px; + position: absolute; + z-index: -1; + + @include tablet-width { + height: 189px; + width: 233px; + } + + @include desktop-width { + height: 192px; + } + } + + &__text-container { + @include page-grid; + } + + &__text { + margin-top: 50px; + font-size: 14px; + line-height: 20px; + font-weight: 700; + text-align: center; + + grid-column: 1 / -1; + + @include tablet-width { + font-size: 24px; + line-height: 36px; + margin-top: 60px; + } + + @include desktop-width { + grid-column: 3 / 11; + margin-top: 42px; + } + } + + &__avatar { + margin-top: 30px; + width: 62px; + height: auto; + + @include tablet-width { + margin-top: 40px; + } + + @include desktop-width { + margin-top: 30px; + } + } + + &__author { + margin-top: 10px; + + @include tablet-width { + margin-top: 20px; + } + + &-position { + margin-top: 5px; + font-size: 14px; + line-height: 21px; + color: $text-color-gray; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..950d6ae33 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,69 @@ +.top-bar { + padding-block: 22px; + + display: flex; + justify-content: space-between; + align-items: center; + + @include tablet-width { + padding-block: 29px 0; + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 26px; + transition: transform $effectDuration; + + &:hover { + transform: scale(1.1); + } + } + + &__buttons { + display: flex; + align-items: center; + flex-direction: row; + gap: 30px; + + &--tablet { + display: none; + align-items: center; + flex-direction: row; + gap: 30px; + + @include tablet-width { + display: flex; + } + } + } +} + +.icon { + display: block; + background-size: cover; + background-position: center; + height: 32px; + width: 32px; + transition: transform $effectDuration; + + @include desktop-width { + display: none; + } + + &:hover { + transform: scale(1.2); + } + + &--menu { + background-image: url(../images/icons/icon-burger-menu.svg); + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + height: 24px; + width: 24px; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 000000000..75c86fb31 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,15 @@ +@import 'utils'; +@import 'fonts'; +@import 'typography'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/main'; +@import 'blocks/nav'; +@import 'blocks/benefits'; +@import 'blocks/about'; +@import 'blocks/quote'; +@import 'blocks/features'; +@import 'blocks/contact-form'; +@import 'blocks/footer'; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..0d3b9f9b3 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,75 @@ %h1 { - font-family: Roboto, sans-serif; + font-size: 40px; + font-weight: 700; + line-height: 52px; + color: $main-text-color; + text-transform: uppercase; + margin: 0; + + @include tablet-width { + font-size: 48px; + line-height: 62px; + } + + @include desktop-width { + font-size: 62px; + line-height: 78px; + } +} + +%h2 { + font-size: 30px; + line-height: 40px; + font-weight: 700; + color: $main-text-color; + text-transform: uppercase; + margin: 0; + + @include tablet-width { + font-size: 36px; + line-height: 46px; + } + + @include desktop-width { + font-size: 56px; + line-height: 70px; + } +} + +%h3 { + font-size: 18px; + line-height: 22px; + font-weight: 700; + color: #0c797a; + text-transform: uppercase; + margin: 0; + + @include desktop-width { + font-size: 34px; + line-height: 42px; + } +} + +%h4 { + font-size: 22px; + line-height: 28px; + font-weight: 700; + text-transform: uppercase; + color: $main-text-color; +} + +%h5 { + font-size: 16px; + line-height: 22px; + font-weight: 700; + color: $main-text-color; + margin: 0; +} + +%p { + font-size: 16px; font-weight: 400; + line-height: 24px; + color: $main-text-color; + margin: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..5ebadfef6 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,67 @@ #{$_property}: $_toValue; } } + +@mixin tablet-width { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin desktop-width { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin inline-padding { + padding-inline: $mobile-padding-inline; + + @include tablet-width { + padding-inline: $tablet-padding-inline; + } + + @include desktop-width { + max-width: 1194px; + padding-inline: $desktop-padding-inline; + } +} + +.container { + @include inline-padding; +} + +@mixin page-grid { + display: grid; + column-gap: 20px; + grid-template-columns: repeat(4, 1fr); + + @include tablet-width { + grid-template-columns: repeat(8, 1fr); + } + + @include desktop-width { + grid-template-columns: repeat(12, 1fr); + column-gap: $desktop-column-gap; + } +} + +@mixin header-img-start-style { + display: none; + width: 100%; + align-self: center; + z-index: -1; + grid-row: 1 / 3; +} + +@mixin block-margin-bottom { + margin-bottom: 110px; + + @include tablet-width { + margin-bottom: 140px; + } + + @include desktop-width { + margin-bottom: 170px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..016c3ed29 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,20 @@ $c-gray: #eee; +$main-bg-color: #f7f7f7; +$main-text-color: #333; +$text-color-gray: #7c7c7c; +$text-color-yellow: rgba(235, 87, 87, 0.3); +$about-link-color: #0db2b3; +$mobile-padding-inline: 30px; +$tablet-padding-inline: 34px; +$desktop-padding-inline: 123px; +$mobile-column-gap: 20px; +$desktop-column-gap: 30px; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$effectDuration: 0.3s; + +:root { + --tablet-min-width: #{$tablet-min-width}; + --desktop-min-width: #{$desktop-min-width}; + --animate-duration: #{$effectDuration}; +}