diff --git a/.eslintignore b/.eslintignore index 9b1c8b133c..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ +/backstop_data /dist diff --git a/.eslintrc.js b/.eslintrc.js index 9af0c3ecfb..66c1bb9901 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,3 @@ module.exports = { - extends: ['@mate-academy/eslint-config', 'plugin:cypress/recommended'], + extends: '@mate-academy/eslint-config', }; 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/.gitignore b/.gitignore index ecb0748b03..1558091fd7 100644 --- a/.gitignore +++ b/.gitignore @@ -9,10 +9,7 @@ node_modules .DS_Store # Generated files +backstop_data dist .cache .parcel-cache -raw_reports -cypress/screenshots -cypress/videos -reports diff --git a/.stylelintignore b/.stylelintignore index 9b1c8b133c..f1d4bd2757 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,2 @@ +/backstop_data/ /dist diff --git a/README.md b/README.md index 2663d4520e..0d35bbd146 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Follow the videos in this and next lessons to implement the page block by block - 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://kkaminskayaa.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/package-lock.json b/package-lock.json index 919c878ea2..6fb3102859 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,15 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "aos": "^2.3.4" + }, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -1467,10 +1470,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -4798,6 +4802,17 @@ "node": ">= 8" } }, + "node_modules/aos": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz", + "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==", + "license": "MIT", + "dependencies": { + "classlist-polyfill": "^1.0.3", + "lodash.debounce": "^4.0.6", + "lodash.throttle": "^4.0.1" + } + }, "node_modules/arch": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", @@ -5558,6 +5573,12 @@ "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==", "dev": true }, + "node_modules/classlist-polyfill": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", + "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==", + "license": "Unlicense" + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -10302,6 +10323,12 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", @@ -10356,6 +10383,12 @@ "integrity": "sha512-EM7CVTzXfkTyusQdN7mgGPh2ZfkKfQ5lA9U+X7NNDeEgKEaO65dB5Kh8+Ppap0X1wQOndPjKP/VVTis7hFvkzg==", "dev": true }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", + "license": "MIT" + }, "node_modules/lodash.truncate": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", diff --git a/package.json b/package.json index 3d4833da3f..13ecafd6a4 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.5", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^13.13.0", @@ -54,5 +54,8 @@ "backstop": false, "cypress": true } + }, + "dependencies": { + "aos": "^2.3.4" } } diff --git a/src/images/Logo-4x.png b/src/images/Logo-4x.png new file mode 100644 index 0000000000..a57c69fee3 Binary files /dev/null and b/src/images/Logo-4x.png differ diff --git a/src/images/bang-olufsen__favicon.png b/src/images/bang-olufsen__favicon.png new file mode 100644 index 0000000000..0758c0e2e0 Binary files /dev/null and b/src/images/bang-olufsen__favicon.png differ diff --git a/src/images/beoplay-hx.png b/src/images/beoplay-hx.png new file mode 100644 index 0000000000..a3a686d2da Binary files /dev/null and b/src/images/beoplay-hx.png differ diff --git a/src/images/beosound-A5.png b/src/images/beosound-A5.png new file mode 100644 index 0000000000..55e6879802 Binary files /dev/null and b/src/images/beosound-A5.png differ diff --git a/src/images/beosound-theatre.png b/src/images/beosound-theatre.png new file mode 100644 index 0000000000..482f42020b Binary files /dev/null and b/src/images/beosound-theatre.png differ diff --git a/src/images/brand-picture.png b/src/images/brand-picture.png new file mode 100644 index 0000000000..ddf66296a8 Binary files /dev/null and b/src/images/brand-picture.png differ diff --git a/src/images/brand__picture-laptop.png b/src/images/brand__picture-laptop.png new file mode 100644 index 0000000000..9f77bc0850 Binary files /dev/null and b/src/images/brand__picture-laptop.png differ diff --git a/src/images/earphones-2.png b/src/images/earphones-2.png new file mode 100644 index 0000000000..24cd10c585 Binary files /dev/null and b/src/images/earphones-2.png differ diff --git a/src/images/earphones.png b/src/images/earphones.png new file mode 100644 index 0000000000..bb99ea97de Binary files /dev/null and b/src/images/earphones.png differ diff --git a/src/images/header-bg-mobile.png b/src/images/header-bg-mobile.png new file mode 100644 index 0000000000..8d1d1f4c81 Binary files /dev/null and b/src/images/header-bg-mobile.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 0000000000..83f18e4766 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 0000000000..bcde9505b3 Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-menu-hover.png b/src/images/icons/icon-menu-hover.png new file mode 100644 index 0000000000..e428692354 Binary files /dev/null and b/src/images/icons/icon-menu-hover.png differ diff --git a/src/images/icons/icon-menu.png b/src/images/icons/icon-menu.png new file mode 100644 index 0000000000..bff5deb065 Binary files /dev/null and b/src/images/icons/icon-menu.png differ diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png new file mode 100644 index 0000000000..379fad1b3a Binary files /dev/null and b/src/images/icons/icon-phone.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000000..5e10e362be Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/portable-speaker1.png b/src/images/portable-speaker1.png new file mode 100644 index 0000000000..b403931cfa Binary files /dev/null and b/src/images/portable-speaker1.png differ diff --git a/src/images/portable-speaker2.png b/src/images/portable-speaker2.png new file mode 100644 index 0000000000..194d42b1a4 Binary files /dev/null and b/src/images/portable-speaker2.png differ diff --git a/src/images/smart-home.png b/src/images/smart-home.png new file mode 100644 index 0000000000..45cf626013 Binary files /dev/null and b/src/images/smart-home.png differ diff --git a/src/images/smart-home2.png b/src/images/smart-home2.png new file mode 100644 index 0000000000..117ea6fa96 Binary files /dev/null and b/src/images/smart-home2.png differ diff --git a/src/index.html b/src/index.html index 428e3b54bb..b35e0db091 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,456 @@ + - + - Landing Page + BANG & OLUFSEN + + + + + + + - -

Landing Page

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

+ Your senses. +
+ Set free. +

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

Sound. Vision. It’s your pick.

+ +
+ + + + +
+
+ + Smart Home + + + + Smart Home + +
+ +

Smart Home

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

+ Timeless, for 50 years and counting +

+

+ Bang & Olufsen is expanding its Recreated Classics Program with the + launch of Beosystems – a limited edition music system that + transcends time by bridging the gap between one of our iconic + designs from 1972 and today’s cutting-edge digital technology. +

+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c1..1e33608504 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,4 @@ 'use strict'; + + + diff --git a/src/styles/blocks/brand-history.scss b/src/styles/blocks/brand-history.scss new file mode 100644 index 0000000000..4d51e5b383 --- /dev/null +++ b/src/styles/blocks/brand-history.scss @@ -0,0 +1,53 @@ +.brand { + &__history { + background-color: #fcfaef; + } + + &__picture-wrapper { + background-image: url(../images/brand__picture-laptop.png); + background-size: cover; + background-position: center; + + height: 200px; + + @include on-tablet { + height: 400px; + } + + @include on-desktop { + height: 460px; + } + } + + &__content { + @include content-padding-inline; + @include page-grid; + + padding-block: 48px; + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__description { + grid-column: 1 / -1; + line-height: 22.4px; + + @include on-tablet { + grid-column: 4 / 7; + } + + @include on-desktop { + grid-column: 8 / 13; + } + } +} diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss new file mode 100644 index 0000000000..f4fea5f235 --- /dev/null +++ b/src/styles/blocks/categories.scss @@ -0,0 +1,58 @@ +.categories { + &__wrapper { + display: grid; + row-gap: 40px; + + @include on-tablet { + row-gap: 56px; + } + } +} + +.category { + &__photos { + @include page-grid; + + margin-bottom: 16px; + } + + &__photo { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.6s ease-out; + } + + &__link { + &:hover .category__photo { + transform: scale(1.2); + transform-origin: 50% 50%; + } + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__title { + font-size: 18px; + font-weight: 700; + line-height: 25px; + + @include on-tablet { + font-size: 24px; + line-height: 33.5px; + } + } + + &__button { + width: 100%; + cursor: pointer; + + @include button; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 0000000000..6f89c53935 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,56 @@ +.connection-form { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + gap: 16px; + margin-bottom: 48px; + + @include on-desktop { + grid-column: span 6; + } + + &__input { + display: flex; + flex-direction: column; + gap: 14px; + + @each $input-type in $inputs { + &--#{$input-type} { + padding: 14px 16px; + border-radius: 8px; + background-color: #f9f9f9; + outline: none; + border: none; + font-family: $main-text-font; + color: #7e7e83; + + font-size: 14px; + font-weight: 400px; + line-height: 19px; + + // @include hover(box-shadow, 0 0 0 1px $input-border-hover); + + &:focus { + outline-style: none; + box-shadow: none; + box-shadow: 0 0 0 2px #f98921; + } + + &::placeholder { + color: F9F9F9; + } + } + } + + &--message { + height: 148px; + resize: none; + } + } + + &__btn { + @include button; + + cursor: pointer; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..ba4cabb224 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,46 @@ +.contacts { + @include page-grid; + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__item { + display: flex; + flex-direction: column; + gap: 8px; + font-family: $main-text-font; + } + + &__title { + color: #9393a3; + font-size: 14px; + line-height: 20px; + font-weight: 400px; + margin: 0; + } + + &__info { + text-decoration: none; + } + + &__info-text { + color: #191919; + font-size: 16px; + line-height: 22.5px; + font-weight: 400px; + text-decoration: none; + margin: 0; + + &:hover { + color: #f98921; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..e460aea3a1 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,35 @@ +.header { + // display: none !important; + + background-image: url(../images/header-bg.png); + background-size: cover; + background-position: center; + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + + height: 100vh; + } + + &__title { + margin: 0; + font-weight: 700; + font-size: 36px; + line-height: 100%; + color: white; + + @include on-tablet { + font-size: 48px; + } + } + + &__bottom { + padding-bottom: 40px; + + @include on-tablet { + padding-bottom: 64px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..2a40ef383e --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,30 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-image: url(../images/icons/icon-menu.png); + background-size: cover; + + @include on-tablet { + height: 32px; + width: 32px; + } + + @include hover(transform, scale(1.2)); + + &--phone { + background-image: url(../images/icons/icon-phone.png); + } + + &--menu { + background-image: url(../images/icons/icon-menu.png); + + &:hover { + background-image: url(../images/icons/icon-menu-hover.png); + } + } + + &--close { + background-image: url(../images/icons/icon-close.png); + } +} diff --git a/src/styles/blocks/main-menu.scss b/src/styles/blocks/main-menu.scss new file mode 100644 index 0000000000..5e07f64b5a --- /dev/null +++ b/src/styles/blocks/main-menu.scss @@ -0,0 +1,14 @@ +.main { + background-color: #fff; + + &__content { + display: grid; + row-gap: 48px; + padding-block: 64px; + + @include on-tablet { + row-gap: 120px; + padding-block: 120px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..aedf879c3b --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,46 @@ +.menu { + overflow: auto; /* to scroll the menu if needed */ + + box-sizing: border-box; + height: 100vh; + background-color: #f9f9f9; + font-weight: 700; + + &__nav { + margin-bottom: 48px; + } + + &__top { + margin-bottom: 32px; + position: sticky; /* to keep cross always visible */ + top: 0; + z-index: 1; + } + + &__connection { + color: inherit; + text-decoration: none; + font-size: 16px; + letter-spacing: 2px; + } + + &__connection:hover { + color: $main-text-color; + } + + &__phone-number { + display: block; + margin-bottom: 16px; + } + + &__call-to-order { + display: block; + text-transform: uppercase; + padding: 4px; + border-bottom: 1px solid #1b2129; + width: fit-content; + } +} + + + diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..ec1bbd517d --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,36 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 32px; + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + font-size: 22px; + line-height: 22px; + + &::after { + content: ' '; + position: absolute; + width: 100%; + bottom: -8px; + display: block; + height: 1px; + background-color: $main-text-color; + + transition: transform 0.3s; + transform: scale(0); + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..e97d70e696 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,31 @@ +.page { + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ +} + + font-family: Manrope, sans-serif; + color: $main-text-color; + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: all 0.5s; + transform: translateX(-100%); + opacity: 0; + pointer-events: none; + + &:target { + transform: translateX(0); + opacity: 1; + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss new file mode 100644 index 0000000000..ea2fb5df24 --- /dev/null +++ b/src/styles/blocks/product.scss @@ -0,0 +1,20 @@ +.product { + &__photo { + width: 100%; + transition: transform 0.6s ease-out; + + &:hover { + transform: scale(1.2); + transform-origin: 50% 50%; + cursor: pointer; + } + } + + &__title { + text-transform: uppercase; + } + + &__price { + font-weight: bold; + } +} diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss new file mode 100644 index 0000000000..b32042c52f --- /dev/null +++ b/src/styles/blocks/recommended.scss @@ -0,0 +1,19 @@ +.recommended { + &__products { + @include page-grid; + + row-gap: 40px; + } + + &__product { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..4b23c9020d --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,26 @@ +.section-title { + margin: 0; + margin-bottom: 48px; + + font-family: Manrope, sans-serif; + font-size: 32px; + font-weight: 700; + line-height: 48px; + text-align: left; + + @include on-tablet { + font-size: 40px; + line-height: 40px; + margin-bottom: 56px; + } + + @include on-desktop { + font-size: 48px; + line-height: 48px; + margin-bottom: 56px; + } + + &--contacts { + grid-column: 1 / -1; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..8fc09ce2cd --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,30 @@ +.top-bar { + padding-block: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 32px; + } + + &__icons { + display: flex; + gap: 24px; + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 16px; + + @include on-tablet { + height: 24px; + } + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f13..67f0e9d482 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,20 @@ body { margin: 0; } + +@import './utils/variables'; +@import './utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/icon'; +@import 'blocks/section-title'; +@import 'blocks/main-menu'; +@import 'blocks/product'; +@import 'blocks/recommended'; +@import 'blocks/brand-history'; +@import 'blocks/categories'; +@import 'blocks/contact-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..dce3a59e93 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,76 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-desktop { + margin-inline: auto; + padding-inline: 120px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin hover($property, $toValue) { + transition: #{$property} 0.3s; + + &:hover { + #{$property}: $toValue; + } +} + +/* Grid styles */ + +@mixin page-grid { + --column-count: 2; + + display: grid; + grid-template-columns: repeat(var(--column-count), 1fr); + column-gap: 20px; + + @include on-tablet { + --column-count: 6; + + column-gap: 24px; + } + + @include on-desktop { + --column-count: 12; + } +} + +/* Button styles */ + +@mixin button { + height: 56px; + background-color: #f98921; + color: #fff; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 700px; + + &:hover { + background-color: #1b2129; + } + + &:focus { + background-color: #010810; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..e0709cb2a6 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,11 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$main-text-color: #1b2129; +$main-text-font: Manrope, sans-serif; +$inputs: 'name', 'email', 'message'; + +// $brand__history-bg-height-mobile: 200px; +// $brand__history-bg-height-tablet: 400px; +// $brand__history-bg-height-desktop: 500px; + +// $brand__history-bg-color: #fcfaef;