diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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/.stylelintrc.js b/.stylelintrc.js index 2e345321d6..8865d477df 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -3,5 +3,7 @@ module.exports = { plugins: [ "stylelint-scss" ], - rules: {} + rules: { + "scss/at-mixin-pattern": ".*" + } }; diff --git a/README.md b/README.md index 8b16c19cb9..258591cec0 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Follow the instructions in this and next lessons to implement the page block by - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson. - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar. - When done check yourself using the [CHECKLIST](./checklist.md) when finished. -- Deploy and create a Pull Request with a [DEMO LINK](https://.github.io/layout_landing-page/). +- Deploy and create a Pull Request with a [DEMO LINK](https://valerij0412.github.io/layout_landing-page/). # Tips & Hints - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`. diff --git a/index.html b/index.html index 317e1141dd..c1de0f3b08 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + - + Landing Page + + + - -

Landing Page

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

Browse Nothing + products by + category +

+ +
+ + Product 1 + + + Product 2 + +
+

All products

+ +
+ + Audio 1 + + + Audio 2 + +
+

Audio

+ +
+ + Accessory 1 + + + Accessory 2 + +
+

Accessories

+ +
+ +
+
+
+ + + + + diff --git a/package-lock.json b/package-lock.json index 364ac94a81..975ec84eb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1816,9 +1816,9 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 771eb8165f..a16355c329 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/Image-adapter.webp b/src/images/Image-adapter.webp new file mode 100644 index 0000000000..3c29bd6460 Binary files /dev/null and b/src/images/Image-adapter.webp differ diff --git a/src/images/Image-camera.webp b/src/images/Image-camera.webp new file mode 100644 index 0000000000..47dff35fc1 Binary files /dev/null and b/src/images/Image-camera.webp differ diff --git a/src/images/Image-faes.png b/src/images/Image-faes.png new file mode 100644 index 0000000000..e4febe5cb0 Binary files /dev/null and b/src/images/Image-faes.png differ diff --git a/src/images/Image-hand-ear-stick.webp b/src/images/Image-hand-ear-stick.webp new file mode 100644 index 0000000000..52afe8b808 Binary files /dev/null and b/src/images/Image-hand-ear-stick.webp differ diff --git a/src/images/Image-hand-ear.webp b/src/images/Image-hand-ear.webp new file mode 100644 index 0000000000..b299f0b946 Binary files /dev/null and b/src/images/Image-hand-ear.webp differ diff --git a/src/images/Image-mobaile.webp b/src/images/Image-mobaile.webp new file mode 100644 index 0000000000..15bd6aa57f Binary files /dev/null and b/src/images/Image-mobaile.webp differ diff --git a/src/images/Image-one-ear.webp b/src/images/Image-one-ear.webp new file mode 100644 index 0000000000..31902962fc Binary files /dev/null and b/src/images/Image-one-ear.webp differ diff --git a/src/images/Image-parrot.webp b/src/images/Image-parrot.webp new file mode 100644 index 0000000000..202bbca79d Binary files /dev/null and b/src/images/Image-parrot.webp differ diff --git a/src/images/icon-burger-menu-hover.svg b/src/images/icon-burger-menu-hover.svg new file mode 100644 index 0000000000..1063135c93 --- /dev/null +++ b/src/images/icon-burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon-burger-menu.svg b/src/images/icon-burger-menu.svg new file mode 100644 index 0000000000..33ecac98ff --- /dev/null +++ b/src/images/icon-burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon-close.svg b/src/images/icon-close.svg new file mode 100644 index 0000000000..8590db1515 --- /dev/null +++ b/src/images/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon-phone-call.svg b/src/images/icon-phone-call.svg new file mode 100644 index 0000000000..9f3978b01d --- /dev/null +++ b/src/images/icon-phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/image-1.png b/src/images/image-1.png new file mode 100644 index 0000000000..52f9824b73 Binary files /dev/null and b/src/images/image-1.png differ diff --git a/src/images/image-ear(stick).png b/src/images/image-ear(stick).png new file mode 100644 index 0000000000..2e9b9e9dd0 Binary files /dev/null and b/src/images/image-ear(stick).png differ diff --git a/src/images/image-ear.png b/src/images/image-ear.png new file mode 100644 index 0000000000..3b27b4f604 Binary files /dev/null and b/src/images/image-ear.png differ diff --git a/src/images/logo-N.svg b/src/images/logo-N.svg new file mode 100644 index 0000000000..60ec50524b --- /dev/null +++ b/src/images/logo-N.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..18343c73bf 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,106 @@ 'use strict'; + +const phoneIcon = document.querySelector('.icon--phone-call'); + +if (phoneIcon) { + phoneIcon.addEventListener('click', (event) => { + event.preventDefault(); + + // додаємо клас активності (збільшення) + phoneIcon.classList.add('icon--phone-call--active'); + + // через 3 секунди прибираємо клас + setTimeout(() => { + phoneIcon.classList.remove('icon--phone-call--active'); + }, 3000); + }); +} + +const burger = document.getElementById('burger'); +const menu = document.getElementById('menu'); +const closeIcon = document.querySelector('.icon--close'); // Додано + +burger.addEventListener('click', (event) => { + event.preventDefault(); + + const isActive = menu.classList.toggle('page__menu--active'); + + if (isActive) { + burger.classList.remove('icon--burger-menu', 'icon-burger-menu-hover'); + burger.classList.add('icon--close'); + document.body.style.overflow = 'hidden'; + } else { + burger.classList.remove('icon--close', 'icon-burger-menu-hover'); + burger.classList.add('icon--burger-menu'); + document.body.style.overflow = ''; + } +}); + +// Додано: клік по хрестику всередині меню +closeIcon.addEventListener('click', (event) => { + event.preventDefault(); + + menu.classList.remove('page__menu--active'); + burger.classList.remove('icon--close'); + burger.classList.add('icon--burger-menu'); + document.body.style.overflow = ''; +}); + +const footerForm = document.querySelector('.footer__form'); + +if (footerForm) { + footerForm.addEventListener('submit', function (event) { + event.preventDefault(); + + const submitBtn = this.querySelector('.footer__button'); + const originalText = submitBtn.textContent; // Зберігаємо "SEND" + + // 1. Очищуємо поля форми + this.reset(); + + // 2. Знімаємо фокус, щоб прибрати "темний" стан + submitBtn.blur(); + + // 3. Міняємо текст на кнопці + submitBtn.textContent = 'Your message has been sent!'; + + // Блокуємо кнопку, щоб користувач не натискав багато разів під час паузи + submitBtn.disabled = true; + + // 4. Через 3 секунди повертаємо все назад + setTimeout(() => { + submitBtn.textContent = originalText; + submitBtn.disabled = false; + }, 3000); + }); +} + +const navLinks = document.querySelectorAll('.nav__link'); + +navLinks.forEach((link) => { + link.addEventListener('click', (e) => { + const targetId = link.getAttribute('href'); + + if (targetId.startsWith('#')) { + e.preventDefault(); + + const targetElement = document.querySelector(targetId); + + if (targetElement) { + // Закриваємо меню + if (menu) { + menu.classList.remove('page__menu--active'); + } + document.body.style.overflow = 'auto'; + + // Плавна прокрутка через scrollTo + const topOffset = targetElement.offsetTop; + + window.scrollTo({ + top: topOffset, + behavior: 'smooth', + }); + } + } + }); +}); diff --git a/src/styles/_base.scss b/src/styles/_base.scss new file mode 100644 index 0000000000..7aa95c640d --- /dev/null +++ b/src/styles/_base.scss @@ -0,0 +1,29 @@ +.page__body { + margin: 0; + +} + +.page { + font-family: $font-main; + color: $color-dark; + font-size: 16px; + line-height: 140%; + scroll-behavior: smooth; +} + +ul, +ol { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +h1, +h2, +h3 { + font-weight: 700; + line-height: 140%; +} diff --git a/src/styles/_browse.scss b/src/styles/_browse.scss new file mode 100644 index 0000000000..63e48ef2a9 --- /dev/null +++ b/src/styles/_browse.scss @@ -0,0 +1,180 @@ +.browse { + width: 100%; + margin: 0; + padding: 0 20px; + box-sizing: border-box; + +@include onTablet { + padding-inline: 72px; +} + +@include onDesktop { + padding-inline: 120px; + +} + + +&__title { + font-family: $font-main; + font-weight: 700; + font-size: 32px; + line-height: 100%; + margin-bottom: 48px; + +@include onTablet { + font-size: 40px; + } + +@include onDesktop { + font-size: 48px; + grid-column: span 7; + margin-bottom: 48px; + } +} + +&__section { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + gap: 40px 20px; + display: grid; + +@include onTablet { + --columns: 6; + + grid-template-columns: repeat(var(--columns), 1fr); + + column-gap: 24px; + } + +@include onDesktop { + --columns: 12; + + column-gap: 24px; + grid-template-columns: repeat(var(--columns), 1fr); + + } +} + + +&__item { + position: relative; + aspect-ratio: 1 / 1; + display: block; + object-fit: contain; + width: 100%; + + overflow: hidden; + +&--big { + @include onTablet { + grid-column: span 4; + aspect-ratio: 392 / 184; +} + + @include onDesktop { + grid-column: span 8; + aspect-ratio: 672 / 324; +} +} + +&--small { + @include onTablet { + grid-column: span 2; + aspect-ratio: 184 / 186; + } + + @include onDesktop { + grid-column: span 4; + aspect-ratio: 1 / 1; + } + } +} + +&__image { + position: absolute; + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + + transition: transform 0.3s; + +&:hover { + transform: scale(1.05); + } + + + } + +&__subtitle { + font-family: $font-main; + font-weight: 700; + font-size: 18px; + line-height: 140%; + letter-spacing: 0; + margin: 16px 0 40px; + +@include onDesktop { + font-size: 24px; + margin: 16px 0 56px; + } + } +} + +.browse__button { + --columns: 2; + + gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + display: grid; + grid-column: 1 / -1; + +@include onDesktop { + --columns: 12; + + } +} + + +.category__button { + color: $color-light; + cursor: pointer; + background-color: $color-dark; + border: 2px solid transparent; + border-radius: 8px; + place-items: center center; + grid-column: 1 / -1; + width: 100%; + height: 56px; + font-weight: 700; + text-decoration: none; + + transition: 0.2s ease; + + + @include onDesktop { + grid-column: span 4; + } + + &:hover { + background-color: $color-light; + color: $color-dark; + border-color: $color-dark; + } + + &:focus { + background-color: $color-dark; + color: $color-light; + + } + + &:active { + background-color: $color-dark; + color: $color-light; + + transform: scale(0.96); + } + } diff --git a/src/styles/_contact.scss b/src/styles/_contact.scss new file mode 100644 index 0000000000..b943f7820d --- /dev/null +++ b/src/styles/_contact.scss @@ -0,0 +1,7 @@ +.menu__phone-namber { + font-family: 'Space Grotesk', sans-serif; +} + +.menu__call-to-order { + font-family: 'Space Grotesk', sans-serif; +} diff --git a/src/styles/_footers.scss b/src/styles/_footers.scss new file mode 100644 index 0000000000..9334179681 --- /dev/null +++ b/src/styles/_footers.scss @@ -0,0 +1,223 @@ +/* #region footer */ + +.footer { + background-color: $color-light; + width: 100%; + margin: 0; + box-sizing: border-box; + + &__logo { + display: block; + width: 100%; + } + + &__image { + display: block; + width: 100%; + height: 200px; + + @include onTablet { + min-height: 400px; + } + } + + &__container { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 0 20px; + padding: 56px 20px; + margin: 0; + + @include onTablet { + --columns: 6; + + padding-inline: 72px; + column-gap: 24px; + } + + @include onDesktop { + --columns: 12; + + max-width: 1020px; + margin-inline: auto; + padding-inline: 120px; + } + } + + &__title { + font-size: 32px; + font-weight: 700; + margin: 20px 0 24px; + grid-column: 1 / -1; + + @include onTablet { + font-size: 40px; + grid-column: 1 / 4; + margin: 0; + } + + @include onDesktop { + grid-column: 1 / 4; + } + } + + &__text-block { + display: flex; + flex-direction: column; + gap: 8px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / -1; + } + + @include onDesktop { + grid-column: 7 / -1; + } + } + + &__text { + font-family: $font-mono; + font-weight: 400; + font-size: 16px; + line-height: 1.4; + } + + &__form { + display: grid; + row-gap: 16px; + grid-column: 1 / -1; + + @include onDesktop { + display: contents; + } + } + + + + + &__subtitle { + font-size: 32px; + font-weight: 700; + margin-bottom: 48px; + grid-column: 1 / -1; + + @include onTablet { + font-size: 40px; + grid-column: 1 / 5; + margin: 120px 0 56px; + } + } + + &__input, + &__textarea { + font-family: $font-mono; + gap: 16px; + padding: 20px; + border: none; + border-radius: 8px; + font-size: 14px; + grid-column: 1 / -1; + background-color: $color-input; + + @include onDesktop { + grid-column: 1 / 7; + align-self: start; + margin-bottom: 10px; + } + } + + &__textarea { + min-height: 100px; + resize: vertical; + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__button { + height: 56px; + grid-column: 1 / -1; + margin-bottom: 48px; + padding: 12px 24px; + font-size: 16px; + font-weight: 700; + background-color: $color-dark; + color: $color-light; + border: 2px solid rgba(240, 241, 244, 1); + border-radius: 8px; + cursor: pointer; + + transition: background-color 0.3s ease; + + @include onDesktop { + grid-column: 1 / 7; + height: 56px; + } + + &:hover { + background-color: $color-light; + color: $color-dark; + border-color: $color-dark; + } + + &:focus { + background-color: $color-dark; + color: $color-light; + + } + + &:active { + background-color: $color-dark; + color: $color-light; + + transform: scale(0.96); + } + } + + &__contacts { + row-gap: 8px; + grid-column: 1 / -1; + + @include onTablet { + font-size: 16px; + margin: 0; + } + + @include onDesktop { + margin-top: 0; + grid-row: 3 / span 5; + align-self: start; + grid-column: 8 / 13; + + + display: flex; + flex-direction: column; + gap: 12px; + } + + } + + &__contact { + font-family: $font-main; + font-size: 14px; + font-weight: 400; + margin: 0; + color: rgba(147, 147, 163, 1); + + } + +.footer__link { + font-family: $font-mono; + } +.footer__input:-webkit-autofill, +.footer__textarea:-webkit-autofill { + box-shadow: 0 0 0 1000px $color-input inset !important; + -webkit-text-fill-color: $color-dark !important; + border: 1px solid #ccc !important; + } + +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 0000000000..2de6010c71 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,99 @@ + + +.header { + position: relative; + + box-sizing: border-box; + + height: 100vh; + background-image: url(../images/image-faes.png); + background-size: cover; + background-position: center; + + + display: flex; + flex-direction: column; + justify-content: space-between; + + transition: transform 0.3s ease; + z-index: 1000; + + + +.header__title { + margin: 0; + font-family: $font-main; + font-weight: 700; + font-style: Bold; + font-size: $font-size-heading; + line-height: 100%; +} + +.header__bottom { + padding: 0 20px 20px; + + @include onTablet { + padding: 0 72px 20px; + +} + +@include onDesktop { + padding: 0 120px 30px; + + } + +} + +.logo--N { + display: block; + background-image: url(../images/logo-N.svg); + height: 16px; + width: 125px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + position: relative; + z-index: 3000; +} + +.top-bar--header { + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + +@include onTablet { + padding: 36px 72px; + +} + +@include onDesktop { + padding: 36px 120px; + + } + +} + +.top-bar--menu { + box-sizing: border-box; + padding: 20px 24px; + height: 100vh; + background-color: $color-light; + font-weight: 700; + +@include onTablet { + padding: 36px 72px; + +} + +@include onDesktop { + padding: 36px 120px; + + } +} + +.menu__top { + margin-bottom: 32px; + } +} diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss new file mode 100644 index 0000000000..6a72696ebd --- /dev/null +++ b/src/styles/_icons.scss @@ -0,0 +1,66 @@ + +.icon { + display: block; + height: 24px; + width: 24px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include onDesktop { + height: 32px; + width: 32px; + } +} + +.top-bar__icons { + display: flex; + gap: 24px; + position: relative; + +@include onDesktop { + gap: 32px; + } + +.icon--phone-call { + background-image: url(../images/icon-phone-call.svg); + position: relative; + cursor: pointer; + transition: transform 0.3s ease, color 0.3s ease; + +&:hover { + transform: scale(1.2); + color: $color-dark; + } +} + +.phone-number { + position: absolute; + right: 100%; + margin-left: 12px; + opacity: 0; + transition: opacity 0.3s ease; + font-size: 12px; + font-weight: 700; + color: $color-dark; + white-space: nowrap; + + } + +.icon--phone-call:hover + .phone-number { + opacity: 0; + } +} + +.icon--burger-menu { + background-image: url(../images/icon-burger-menu.svg); + +&:hover { + background-image: url(../images/icon-burger-menu-hover.svg); +} + +} + +.icon--close { + background-image: url(../images/icon-close.svg); +} diff --git a/src/styles/_main.scss b/src/styles/_main.scss new file mode 100644 index 0000000000..f8d10098ef --- /dev/null +++ b/src/styles/_main.scss @@ -0,0 +1,9 @@ +.main { + row-gap: 96px; + padding-top: 96px; + padding-bottom: 96px; + display: grid; + background: rgba(255, 255, 255, 1); + + +} diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss new file mode 100644 index 0000000000..de1fbe940b --- /dev/null +++ b/src/styles/_menu.scss @@ -0,0 +1,107 @@ +.page__menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(-100%); // приховано за межами екрана + transition: transform 0.3s ease; + z-index: 2000; // нижче за головний контент +} + +.page__menu--active { + transform: translateX(0); + pointer-events: auto; +} + +.top-bar--menu { + box-sizing: border-box; + padding: 20px 24px; + height: 100vh; + background-color: rgba(229, 230, 232, 1); + font-weight: 700; + + /* text-transform: uppercase; */ +} + +.menu__top { + margin-bottom: 32px; +} + +.menu__nav { + margin-bottom: 40px; +} + +.menu__content { + /* padding-inline: 20px; */ + display: flex; + justify-content: space-between; + align-items: center; + + @include onTablet { + padding: 16px 50px; + +} + +@include onDesktop { + padding: 17px 98px; + + } + +.logo--N { + display: block; + background-image: url(../images/logo-N.svg); + height: 16px; + width: 125px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + position: relative; + z-index: 3000; +} + +} + +.menu__phone-namber { + display: block; + margin-bottom: 16px; + font-size: 16px; + line-height: 27px; + color: inherit; + text-decoration: none; + +@include onTablet { + padding: 0 50px; + +} + +@include onDesktop { + padding: 0 100px; + + } +} + +.menu__call-to-order { + display: inline-block; + padding-bottom: 7px; + text-decoration: none; + text-decoration-thickness: 1px; + text-underline-offset: 4px; + width: fit-content; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + color: inherit; + + +@include onTablet { + margin: 0 50px; + +} + +@include onDesktop { + margin: 0 100px; + width: fit-content; + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 0000000000..d9054edaa6 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,35 @@ + +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin contentPaddingInline { + padding-inline: 20px; + +@include onTablet { + padding-inline: 72px; + +} + +@include onDesktop { + max-width: 1020px; + margin-inline: auto; + padding-inline: 120px; + + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}:$toValue; + } +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000000..787f80dca1 --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,88 @@ +.menu__nav { + margin: 5px 0 40px; + +@include onTablet { + padding: 0 50px; + +} + +@include onDesktop { + padding: 36px 100px; + + } + + +} + + + + +.menu__content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.menu__phone-namber { + display: block; + margin-bottom: 16px; + font-size: 16px; + line-height: 27px; + color: inherit; + text-decoration: none; +} + +.menu__call-to-order { + display: block; + padding-bottom: 7px; + border-bottom: 1px solid rgba(41, 41, 41, 1); + width: fit-content; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + color: inherit; + text-decoration: none; +} + +.nav__link { + position: relative; + display: inline-block; + font-family: 'Space Grotesk', sans-serif; + color: inherit; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav__link::after { + content: ''; + position: absolute; + left: 0; + bottom: -3px; + width: 0%; + height: 2px; + background-color: #292929; + transition: width 0.3s ease; +} + +.nav__link:hover { + color: #292929; +} + +.nav__link:hover::after { + width: 100%; +} + +.nav__list { + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 25px; +} + +.nav_list li::marker { + content: none; +} diff --git a/src/styles/_recommended.scss b/src/styles/_recommended.scss new file mode 100644 index 0000000000..d5fda6bbb9 --- /dev/null +++ b/src/styles/_recommended.scss @@ -0,0 +1,120 @@ + +.recommended { + width: 100%; + margin: 0; + padding: 0 20px; + box-sizing: border-box; + +@include onTablet { + padding-inline: 72px; +} + +@include onDesktop { + padding-inline: 120px; + +} + + + + + &__title { + font-family: $font-main; + font-weight: 700; + font-size: 32px; + line-height: 100%; + margin-bottom: 48px; + } + + +&__products { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + gap: 40px 20px; + display: grid; + +@include onTablet { + --columns: 6; + + grid-template-columns: repeat(var(--columns), 1fr); +} + +@include onDesktop { + --columns: 12; + + grid-template-columns: repeat(var(--columns), 1fr); + } + + + +.product { + display: grid; + height: 100%; + + grid-column: 1 / -1; + +@include onTablet { + grid-column: span 6; +} + +@include onDesktop { + grid-column: span 4; + + } + + +&__image--large { + cursor: pointer; + width: 100%; + height: auto; + object-fit: cover; + display: block; + + transition: transform 0.3s ease; + +&:hover { + transform: scale(1.05); + } +} + +&__title { + font-family: $font-main; + font-weight: 700; + + font-size: 18px; + + line-height: 140%; + letter-spacing: 0; + + } + +&__description { + font-family: $font-mono; + font-weight: 400; + + font-size: 16px; + + line-height: 140%; + letter-spacing: 0; + + } + +&__intro { + @media (min-width: 1024px) { + display: none; + } + } + +&__price { + font-family: $font-main; + font-weight: 700; + + font-size: 16px; + + line-height: 140%; + letter-spacing: 0; + + } + } + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000000..a802f2cfb1 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,12 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$font-main: 'Space Grotesk', sans-serif; +$font-mono: 'Space Mono', monospace; +$font-size-link: 22px; +$font-size-heading: 36px; +$font-size-subheading: 32px; +$font-size-caption: 18px; +$color-dark: rgba(41, 41, 41, 1); +$color-light: rgba(255, 255, 255, 1); +$color-input: rgba(248, 248, 250, 1); +$effectDuration: 0.3s diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000000..9d93a416e9 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,12 @@ +@import 'variables'; +@import 'mixins'; +@import 'base'; +@import 'icons'; +@import 'header'; +@import 'menu'; +@import 'nav'; +@import 'main'; +@import 'recommended'; +@import 'browse'; +@import 'contact'; +@import 'footers'; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -}