diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 5f9e97051..530dc4e93 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 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/Museum/). + [DEMO LINK](https://Eksonurit.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..744a7c2f7 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,162 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Museum + -

Hello Mate Academy

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

ХУДОЖНІЙ МУЗЕЙ

+
+ ПОДІЇ +
+
+ +
+
+
+ diff --git a/package-lock.json b/package-lock.json index fbfeb1428..f13687b5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,15 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "bootstrap": "^5.3.8" + }, "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": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1878,11 @@ "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": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -2604,6 +2608,17 @@ "url": "https://opencollective.com/pkgr" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.53.3", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.3.tgz", @@ -3751,6 +3766,25 @@ "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.8", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz", + "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.12", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", diff --git a/package.json b/package.json index ab5f87b9b..8f7151f26 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.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -55,5 +55,8 @@ "backstop": false, "cypress": true } + }, + "dependencies": { + "bootstrap": "^5.3.8" } } diff --git a/src/fonts/IBMPlexSans-Bold.woff2 b/src/fonts/IBMPlexSans-Bold.woff2 new file mode 100644 index 000000000..ab6057b19 Binary files /dev/null and b/src/fonts/IBMPlexSans-Bold.woff2 differ diff --git a/src/fonts/IBMPlexSans-Light.woff2 b/src/fonts/IBMPlexSans-Light.woff2 new file mode 100644 index 000000000..e2e9d1bf0 Binary files /dev/null and b/src/fonts/IBMPlexSans-Light.woff2 differ diff --git a/src/fonts/IBMPlexSans-Medium.woff2 b/src/fonts/IBMPlexSans-Medium.woff2 new file mode 100644 index 000000000..9a1d06397 Binary files /dev/null and b/src/fonts/IBMPlexSans-Medium.woff2 differ diff --git a/src/fonts/IBMPlexSans-Regular.woff2 b/src/fonts/IBMPlexSans-Regular.woff2 new file mode 100644 index 000000000..527c791c1 Binary files /dev/null and b/src/fonts/IBMPlexSans-Regular.woff2 differ diff --git a/src/fonts/IBMPlexSans-SemiBold.woff2 b/src/fonts/IBMPlexSans-SemiBold.woff2 new file mode 100644 index 000000000..9cbe29929 Binary files /dev/null and b/src/fonts/IBMPlexSans-SemiBold.woff2 differ diff --git a/src/fonts/Montserrat-Bold.woff2 b/src/fonts/Montserrat-Bold.woff2 new file mode 100644 index 000000000..077c1acc7 Binary files /dev/null and b/src/fonts/Montserrat-Bold.woff2 differ diff --git a/src/fonts/Montserrat-Regular.woff2 b/src/fonts/Montserrat-Regular.woff2 new file mode 100644 index 000000000..69cd58e99 Binary files /dev/null and b/src/fonts/Montserrat-Regular.woff2 differ diff --git a/src/icons/NA MU.svg b/src/icons/NA MU.svg new file mode 100644 index 000000000..e560af0bd --- /dev/null +++ b/src/icons/NA MU.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Vector.svg b/src/icons/Vector.svg new file mode 100644 index 000000000..4bd4df415 --- /dev/null +++ b/src/icons/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/facebook-letter-logo.svg b/src/icons/facebook-letter-logo.svg new file mode 100644 index 000000000..6aa4f99a7 --- /dev/null +++ b/src/icons/facebook-letter-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/icons/instagram (3).svg b/src/icons/instagram (3).svg new file mode 100644 index 000000000..829b27f4e --- /dev/null +++ b/src/icons/instagram (3).svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png new file mode 100644 index 000000000..aa5c7ce24 Binary files /dev/null and b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png differ diff --git a/src/images/Rectangle 13.3.png b/src/images/Rectangle 13.3.png new file mode 100644 index 000000000..3490e93c8 Binary files /dev/null and b/src/images/Rectangle 13.3.png differ diff --git a/src/images/Rectangle 13.4.png b/src/images/Rectangle 13.4.png new file mode 100644 index 000000000..98d429c84 Binary files /dev/null and b/src/images/Rectangle 13.4.png differ diff --git a/src/images/Rectangle 13.5.png b/src/images/Rectangle 13.5.png new file mode 100644 index 000000000..8a88231c9 Binary files /dev/null and b/src/images/Rectangle 13.5.png differ diff --git a/src/images/Rectangle 2.1.png b/src/images/Rectangle 2.1.png new file mode 100644 index 000000000..be94f98dc Binary files /dev/null and b/src/images/Rectangle 2.1.png differ diff --git a/src/images/Rectangle 3.1.png b/src/images/Rectangle 3.1.png new file mode 100644 index 000000000..78d931d13 Binary files /dev/null and b/src/images/Rectangle 3.1.png differ diff --git a/src/images/Rectangle 4.1.png b/src/images/Rectangle 4.1.png new file mode 100644 index 000000000..6e8f37479 Binary files /dev/null and b/src/images/Rectangle 4.1.png differ diff --git a/src/images/boat-desktop.png b/src/images/boat-desktop.png new file mode 100644 index 000000000..77bfdd25f Binary files /dev/null and b/src/images/boat-desktop.png differ diff --git a/src/images/boat-mobile.jpg b/src/images/boat-mobile.jpg new file mode 100644 index 000000000..69bd1536b Binary files /dev/null and b/src/images/boat-mobile.jpg differ diff --git a/src/images/boat-tablet.png b/src/images/boat-tablet.png new file mode 100644 index 000000000..bdfabe1d3 Binary files /dev/null and b/src/images/boat-tablet.png differ diff --git a/src/images/subscribe-img-desktop.png b/src/images/subscribe-img-desktop.png new file mode 100644 index 000000000..55a926eec Binary files /dev/null and b/src/images/subscribe-img-desktop.png differ diff --git a/src/images/subscribe-img-mobile.png b/src/images/subscribe-img-mobile.png new file mode 100644 index 000000000..4bb670002 Binary files /dev/null and b/src/images/subscribe-img-mobile.png differ diff --git a/src/images/subscribe-img-tablet.png b/src/images/subscribe-img-tablet.png new file mode 100644 index 000000000..7538cb402 Binary files /dev/null and b/src/images/subscribe-img-tablet.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..a51b41726 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,57 @@ 'use strict'; +import '../styles/main.scss'; +import Swiper from 'swiper'; +import { Navigation, Pagination } from 'swiper/modules'; + +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; + +// eslint-disable-next-line no-new +new Swiper('.swiper', { + modules: [Navigation, Pagination], + + slidesPerView: 1.1, + spaceBetween: 20, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + breakpoints: { + 768: { + slidesPerView: 2.1, + }, + 1200: { + slidesPerView: 3.5, + }, + }, +}); + +const removeOverlay = () => { + menuOverlay.classList.remove('is-active'); +}; + +const openMenuButton = document.getElementById('header-burger'); + +const menuOverlay = document.getElementById('menu-overlay'); + +openMenuButton.addEventListener('click', () => { + menuOverlay.classList.add('is-active'); +}); + +const closeMenuButton = document.getElementById('aside-burger'); + +closeMenuButton.addEventListener('click', removeOverlay); + +const links = document.querySelectorAll('a'); + +links.forEach((link) => { + link.addEventListener('click', removeOverlay); +}); + +openMenuButton.removeEventListener('click', removeOverlay); diff --git a/src/styles/_burger.scss b/src/styles/_burger.scss new file mode 100644 index 000000000..b237c1530 --- /dev/null +++ b/src/styles/_burger.scss @@ -0,0 +1,60 @@ +.burger-menu { + @include size(24px, 24px); + + display: block; + position: absolute; + top: 27px; + left: 20px; + padding: 0; + + @include respond-to(md) { + left: 34px; + top: 39px; + } + @include respond-to(xl) { + left: 0; + } +} + +.burger-menu::before { + @include pseudo(block, absolute); + + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: $c-black; + width: 18px; + height: 2px; + filter: drop-shadow(0 5px $c-black) drop-shadow(0 -5px $c-black); +} + +.burger-menu-close { + @include size(24px, 24px); + + display: block; + position: relative; + padding: 0; + flex-shrink: 0; + transition-duration: 0.3s; +} + +.burger-menu-close::before, +.burger-menu-close::after { + @include pseudo(block, absolute); + + top: 50%; + left: 50%; + background-color: $c-white; + width: 18px; + height: 2px; +} + +.burger-menu-close::before { + transition: all 0.3s; + transform: translate(-50%, -50%) rotate(45deg); +} + +.burger-menu-close::after { + transition: all 0.3s; + transform: translate(-50%, -50%) rotate(-45deg); +} diff --git a/src/styles/_events.scss b/src/styles/_events.scss new file mode 100644 index 000000000..cf61e0208 --- /dev/null +++ b/src/styles/_events.scss @@ -0,0 +1,134 @@ +.relevant-events { + width: 100%; + padding: 0 20px; + display: flex; + flex-direction: column; + gap: 40px; + max-width: 1170px; + @include respond-to(md) { + padding: 0 34px; + } + + @include respond-to(xl) { + padding: 0; + } +} + +.event__list { + width: 100%; + display: flex; + flex-direction: column; + + gap: 60px; + + @include respond-to(md) { + gap: 64px; + } + + @include respond-to(xl) { + gap: 104px; + } +} + +.event { + display: flex; + flex-direction: column; + gap: 20px; + + @include respond-to(md) { + gap: 40px; + } + + @include respond-to(xl) { + flex-direction: row; + gap: 0; + justify-content: space-between; + align-items: center; + } + + &__img { + width: 100%; + aspect-ratio: 280 / 210; + + @include respond-to(xl) { + width: 670px; + height: 520px; + } + } + + &__content { + width: 100%; + display: flex; + flex-direction: column; + gap: 15px; + + @include respond-to(md) { + gap: 30px; + } + + @include respond-to(xl) { + width: 370px; + } + } + + &__desc { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 16px; + color: $c-secondary-text; + max-width: 460px; + } + + &__title::after { + content: ''; + display: inline-block; + margin-left: 10px; + margin-bottom: 2px; + + @include size(10px); + + background-color: $c-orange; + + @include respond-to(md) { + @include size(15px); + } + } +} + +.date__wrapper { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + @media screen and (min-width: 400px) { + justify-content: start; + gap: 10px; + } + + @include respond-to(xl) { + gap: 20px; + } +} + +.date__span { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + color: $c-gray; + + @include respond-to(md) { + font-size: 14px; + } +} + +.date__text { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 16px; + color: $c-accent; + + @include respond-to(md) { + font-size: 14px; + } +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..3ffb0ca4d 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,55 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-family: Montserrat; + src: url('../fonts/Montserrat-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: Montserrat; + src: url('../fonts/Montserrat-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../fonts/IBMPlexSans-Light.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; + font-display: swap; } diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 000000000..8fda5f489 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,201 @@ +.footer { + width: 100%; + display: flex; + justify-content: center; + padding-inline: 20px; + font-size: 14px; + + @include respond-to(md) { + padding-inline: 34px; + } + + @include respond-to(xl) { + padding-inline: 0; + } + + &__arrow-up__button { + @include size(50px); + + border-radius: 50%; + border: 1px solid $c-accent; + display: flex; + align-items: center; + justify-content: center; + grid-column: 2; + justify-self: end; + } + + &__divider { + grid-column: span 2; + background-color: rgba($c-accent, 0.5); + + @include respond-to(md) { + width: auto; + height: 1px; + grid-column: 2 / 6; + margin-top: 64px; + margin-bottom: 64px; + } + + @include respond-to(xl) { + width: 1px; + height: 260px; + grid-column: 7; + margin: 0 64px; + grid-row: 1; + justify-self: center; + } + } + + &__nav__list { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-column: span 2; + gap: 20px; + + @include respond-to(md) { + grid-column: 2 / 5; + grid-template-rows: 14px 14px; + } + + @include respond-to(xl) { + grid-column: 8 / 12; + grid-template-rows: 14px 14px; + } + } + + &-margin-top { + margin-top: 50px; + } +} + +.footer__link { + color: $c-main-text !important; +} + +.footer__wrapper { + width: 100%; + max-width: 1170px; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include respond-to(md) { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include respond-to(xl) { + grid-template-columns: repeat(12, 70px); + column-gap: 30px; + } +} + +.links__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + grid-column: span 2; + + margin-bottom: 40px; + + @include respond-to(md) { + grid-column: 1; + flex-direction: column; + } +} + +.footer__schedule { + grid-column: 1; + grid-row: 2; + + @include respond-to(md) { + grid-column: 2 / 4; + grid-row: 1; + display: flex; + gap: 20px; + width: 100%; + } + + @include respond-to(xl) { + grid-column: 3 / 6; + grid-row: 1; + } +} + +.footer__contacts { + display: flex; + flex-direction: column; + gap: 15px; + grid-column: 2; + grid-row: 2; + + @include respond-to(md) { + grid-column: 4 / 6; + grid-row: 1 ; + gap: 20px; + } + + @include respond-to(xl) { + grid-column: 5 / 7; + } +} + +.social-network__wrapper { + display: flex; + gap: 20px; + + @include respond-to(md) { + gap: 32px; + } + + @include respond-to(md) { + gap: 20px; + } +} + +.design-credentionals { + font-family: 'IBM Plex', sans-serif; + font-weight: 300; + font-size: 12px; + color: $c-main-text; + + &-author { + grid-column: span 2; + margin-top: 80px; + margin-bottom: 10px; + + @include respond-to(md) { + grid-column: 5 / -1; + grid-row: 4; + margin-top: 120px; + margin-bottom: 0; + width: 100%; + } + + @include respond-to(xl) { + grid-column: 11 / -1; + grid-row: 2; + margin-top: 87px; + } + } + + &-year { + grid-column: span 2; + + @include respond-to(md) { + grid-column: 1 / 3 ; + grid-row: 4; + margin-top: 120px; + } + + @include respond-to(xl) { + grid-column: 1 / 4 ; + grid-row: 2; + margin-top: 87px; + } + } +} + + diff --git a/src/styles/_gallery.scss b/src/styles/_gallery.scss new file mode 100644 index 000000000..959c3ff04 --- /dev/null +++ b/src/styles/_gallery.scss @@ -0,0 +1,108 @@ +.gallery{ + width: 100%; + padding-left: 20px; + + margin-top: clamp(183px, 50vw, 302px); + + @include respond-to(md) { + padding-left: 34px; + } + + @include respond-to(xl) { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .swiper { + width: 100%; + max-width: 100%; + padding-bottom: 35px; +} + + &-title { + margin-bottom: 40px; + + @include respond-to(md) { + margin-bottom: 48px; + } + + @include respond-to(xl) { + margin-bottom: 56px; + grid-column: span 3; + grid-row: 1; + } + } +} + + + +.swiper-img { + width: 100%; + height: 100%; + object-fit: cover; + aspect-ratio: 280 / 410; +} + +.swiper-button-prev, +.swiper-button-next { + opacity: 0 !important; + width: 20% !important; + height: 100% !important; + top: 10px !important; + transform: translateY(1%); + +} + + +.swiper-pagination { + display: flex !important; + justify-content: space-between; + bottom: 10px !important; + width: 102px !important; + transform: translateX(-50%) !important; + left: 50% !important; +} + +.swiper-pagination-bullet { + width: 9px !important; + height: 9px !important; + background-color: $c-gray-light !important; + opacity: 1 !important; + transition: all 0.3s ease !important; + + &-active { + background-color: $c-accent !important; + } +} + + +.gallery__wrapper { + display: grid; + max-width: 1170px; + grid-template-columns: repeat(12, 70px); + gap: 30px; + grid-template-rows: 3; +} + +.first-img { + grid-row: 2; + grid-column: span 4; +} + +.second-img { + grid-row: 2; + grid-column: 5 / -1; +} + +.third-img { + grid-row: 3; + grid-column: span 8; +} + +.fourth-img { + grid-row: 3; + grid-column: 9 / -1; +} \ No newline at end of file diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 000000000..62d301c39 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,43 @@ +.header { + @include respond-to(md) { + display: grid; + grid-template-columns: repeat(6, 90px); + column-gap: 30px; + padding-left: 34px; + max-width: 768px; + } + + @include respond-to(xl) { + position: relative; + grid-template-columns: repeat(12, 70px); + column-gap: 30px; + max-width: 1170px; + padding: 0; + } +} + +.header__events { + position: relative; + grid-column: span 1; + grid-row: 2; + + &-span { + position: absolute; + left: -20px; + top: 0; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 700; + color: $c-gray; + display: inline-block; + transform: rotate(-90deg); + white-space: nowrap; + } + + &-line { + width: 1px; + height: 70px; + background-color: $c-accent; + margin-top: 40px; + } +} diff --git a/src/styles/_lecture.scss b/src/styles/_lecture.scss new file mode 100644 index 000000000..4ea2592fb --- /dev/null +++ b/src/styles/_lecture.scss @@ -0,0 +1,70 @@ +.lecture { + width: 100%; + position: relative; + + @include respond-to(md) { + padding: 0 34px; + } + + @include respond-to(xl) { + padding: 0; + } + + &-margin { + margin-top: 60px; + + @include respond-to(md) { + margin-top: 112px; + } + + @include respond-to(xl) { + margin-top: 104px; + } + } + + &__img { + max-width: 100%; + width: 100%; + object-fit: cover; + object-position: center; + + } +} + +.lecture__content { + position: absolute; + top: 70%; + left: 50%; + transform: translateX(-50%); + background-color: $c-white; + width: 90%; + height: 140px; + max-width: 570px; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + filter: drop-shadow(0 2px 0 $c-accent); + + @include respond-to(md) { + height: 204px; + padding: 45px 55px 50px; + gap: 20px; + } + + @include respond-to(xl) { + top: 80%; + } +} + +.lecture-date__wrapper { + width: 80%; + display: flex; + gap: clamp(15px, 5%, 140px); + + @include respond-to(md) { + width: 100%; + justify-content: space-between; + } +} + diff --git a/src/styles/_sidebar.scss b/src/styles/_sidebar.scss new file mode 100644 index 000000000..2cff0420e --- /dev/null +++ b/src/styles/_sidebar.scss @@ -0,0 +1,194 @@ +.aside__menu { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 0; + right: 0; + z-index: 1000; + width: 100%; + + opacity: 0; + pointer-events: none; + + background-color: $c-accent; + box-sizing: border-box; + padding: 27px 20px; + height: 415px; + + @include respond-to(md) { + padding: 39px 34px; + height: 225px; + } + @include respond-to(xl) { + padding: 0; + } + +} + +.aside__menu:target { + transition: all 0.3s; + opacity: 1; + pointer-events: all; +} + +.menu { + width: 100%; + max-width: 1170px; + @include respond-to(md) { + display: flex; + gap: 38px; + justify-content: space-between; + } + + @include respond-to(xl) { + justify-content: space-between; + gap: 102px; + } + + &__nav { + display: flex; + justify-content: space-between; + gap: 28px; + @include respond-to(md) { + gap: 38px; + width: 50%; + } + + @include respond-to(xl) { + width: 50%; + gap: 102px; + justify-content: start; + } + } + + &__list { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + height: 72px; + text-align: start; + gap: 0 28px; + + @include respond-to(md) { + width: 80%; + column-gap: 0; + } + + @include respond-to(xl) { + font-size: 22px; + } + } + + &__list.row { + display: flex !important; + flex-wrap: wrap !important; + } + + &__item { + color: $c-white; + font-size: 16px; + width: 100px !important; + text-decoration: none; + display: block; + margin: 0 !important; + padding: 0 !important; + + @include respond-to(md) { + flex: 0 0 50% !important; + max-width: 50% !important; + } + } +} + +.list { + padding: 0; + margin: 0; + list-style: none; + text-decoration: none; +} + +.divider { + width: 100%; + margin: 20px 0; + height: 1px; + background-color: $c-white; + opacity: 0.5; + + @include respond-to(md) { + height: 145px; + width: 1px; + margin: 0; + } +} + +.schedule { + display: flex; + flex-direction: column; + gap: 16px; + font-family: 'IBM Plex Sans', sans-serif; + + @include respond-to(md) { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 40px 1fr; + gap: 0; + width: 50%; + } + + @include respond-to(xl) { + grid-template-columns: 170px 170px; + column-gap: 30px; + width: 50%; + } + + &-title { + font-size: 14px; + font-weight: 400; + } + + &__list { + font-family: 'IBM Plex Sans', sans-serif; + @include respond-to(md) { + grid-column: 1; + grid-row: 2; + } + + &__element { + font-size: 14px; + font-weight: 400; + } + } + + &-desc { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + @include respond-to(md) { + grid-column: 2; + grid-row: 2; + } + } +} + +.menu-overlay { + position: fixed; + top: 415px; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 1040; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + + &.is-active { + display: block; + opacity: 1; + } + @include respond-to(md) { + top: 225px; + } +} diff --git a/src/styles/_subscribe.scss b/src/styles/_subscribe.scss new file mode 100644 index 000000000..2dea6ab85 --- /dev/null +++ b/src/styles/_subscribe.scss @@ -0,0 +1,112 @@ +.subscribe { + width: 100%; + height: 386px; + position: relative; + + @include respond-to(md) { + height: 380px; + } + + @include respond-to(xl) { + height: 550px; + } + + &__img { + width: 100%; + max-height: 100%; + object-fit: cover; + } + + &__title__wrapper { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + } + + &__content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + width: 80%; + text-align: center; + align-items: center; + gap: 50px; + + @include respond-to(md) { + max-width: 460px; + gap: 64px; + } + @include respond-to(xl) { + max-width: 570px; + gap: 72px; + } + } + + &-desc { + font-family: 'IBM Plex', sans-serif; + font-weight: 400; + font-size: 18px; + color: $c-white; + } + + &__input { + width: 100%; + height: 100%; + padding: 18px 0 18px 24px; + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 14px; + color: $c-gray; + border: 0; + } + + &__input:focus { + outline: 2px solid $c-orange; + } + + &__button { + @include size(50px); + + @include respond-to(md) { + + @include size(70px) + } + } + + &__title { + color: $c-white; + } + + &__form { + height: 50px; + display: flex; + align-items: center; + width: 100%; + + @include respond-to(md) { + height: 70px; + gap: 16px; + } + + @include respond-to(xl) { + gap: 30px; + } + } + +} + +.for-subscribe-block { + background-color: $c-orange; +} + +.subscribe-margin-top { + margin-top: 130px; + + @include respond-to(xl) { + margin-top: 200px; + } +} \ No newline at end of file diff --git a/src/styles/_ticket-button.scss b/src/styles/_ticket-button.scss new file mode 100644 index 000000000..92802dfc4 --- /dev/null +++ b/src/styles/_ticket-button.scss @@ -0,0 +1,54 @@ +.ticket__button { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $c-accent; + height: 50px; + color: $c-black; + font-size: 16px; + box-sizing: content-box; + + @include hover(background-color, $c-accent); + @include hover(color, $c-white); + + @include respond-to(md) { + width: 90% !important; + height: 70px; + } + + @include respond-to(xl) { + grid-column: 4 / -1; + grid-row: 2; + width: 100% !important; + } + + &-text { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + margin-right: 20px; + + @include respond-to(xl) { + margin-right: 30px; + } + } +} + +.button-arrow { + @include size(50px, 50px); + + display: flex; + align-items: center; + justify-content: center; + background-color: $c-accent; + + @include respond-to(md) { + @include size(70px, 70px); + } +} + +.for-ticket-block { + position: absolute; + top: 0; + right: 0; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1ea471edd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,208 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import '../../node_modules/bootstrap/scss/functions'; +@import './utils/vars'; + +@import './utils/mixins'; +@import './utils/extends'; +@import './fonts'; + +@import './burger'; +@import './sidebar'; +@import './ticket-button'; +@import './header'; +@import './events'; +@import './lecture'; +@import './gallery'; +@import './subscribe'; +@import './footer'; + +@import '../../node_modules/bootstrap/scss/variables'; +@import '../../node_modules/bootstrap/scss/maps'; + +@import '../../node_modules/bootstrap/scss/mixins'; +@import '../../node_modules/bootstrap/scss/utilities'; +@import '../../node_modules/bootstrap/scss/bootstrap'; + +html, body { - background: $c-gray; + width: 100%; + overflow-x: hidden; + position: relative; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + list-style: none; + margin: 0; + padding: 0; +} + +p { + margin: 0; + padding: 0; +} + +main { + display: flex; + flex-direction: column; + align-items: center; +} + +a { + text-decoration: none; + color: auto; +} + +button { + margin: 0; + padding: 0; + border: none; + background-color: $c-white; + box-sizing: border-box; +} + +img { + @include hover(transform, scale(1.02)) +} + +.header__logo { + @include size(55px, 61px); + + @include respond-to(md) { + @include size(72px, 72px); + } +} + +.header__content { + width: 100%; + height: 300px; + background: url('../images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png'); + background-size: cover; + background-position: center; + padding: 10px 20px; + + @include respond-to(md) { + @include size(100%, 384px); + + grid-column: 4 / -1; + width: auto; + margin-right: calc(-50vw + 50%); + } + + @include respond-to(xl) { + grid-column: 7 / 14; + width: auto; + height: 665px; + margin-right: calc(-50vw + 50%); + } + + &__inner { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 61px; + + @include respond-to(md) { + width: 200px; + height: 72px; + } + } +} + +.title-wrapper { + margin-top: 20px; + padding: 10px 20px; + + @include respond-to(md) { + margin-top: 0; + padding: 0; + } +} + +.header__main { + row-gap: 20px; + + @include respond-to(md) { + grid-column: 1 / 4; + align-self: end; + flex-direction: column; + grid-row: 1; + row-gap: 38px; + } + + @include respond-to(xl) { + display: grid !important; + grid-template-columns: repeat(6, 70px); + grid-template-rows: 1fr 1fr; + grid-column: 1 / 7; + align-self: center; + flex-direction: column; + grid-row: 1; + margin: 0; + gap: 90px 30px; + } +} + +.header__title { + font-family: Montserrat, sans-serif; + font-weight: 700; + @include respond-to(xl) { + grid-column: 1 / -1 !important; + grid-row: 1 !important; + width: 100%; + } +} + +h1 { + font-size: 45px; + color: $c-black; + font-weight: 700; + margin: 0; + padding: 0; + + @include respond-to(md) { + font-size: 54px; + } + @include respond-to(xl) { + font-size: 72px; + } +} + +h2 { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + color: $c-main-text; + text-align: center; + margin: 0; + padding: 0; + + @include respond-to(md) { + font-size: 48px; + text-align: left; + } +} + +h3 { + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + text-align: left; + color: $c-main-text; + margin: 0; + padding: 0; + + @include respond-to(md) { + font-size: 36px; + } +} + +.margin-top-60 { + margin-top: 60px; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f50536052 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,45 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} 0.3s ease-in-out; &:hover { #{$_property}: $_toValue; } } + +@mixin flex-center($direction: row) { + display: flex; + justify-content: center; + align-items: center; + flex-direction: $direction; +} + +@mixin size($width, $height: $width) { + width: $width; + height: $height; +} +@mixin pseudo($display: block, $pos: absolute, $content: "") { + content: $content; + display: $display; + position: $pos; +} +@mixin respond-to($breakpoint) { + @if $breakpoint == "sm" { + @media (min-width: 576px) { @content; } + } @else if $breakpoint == "md" { + @media (min-width: 768px) { @content; } + } @else if $breakpoint == "lg" { + @media (min-width: 992px) { @content; } + } @else if $breakpoint == "xl" { + @media (min-width: 1200px) { @content; } + } @else { + @media (min-width: $breakpoint) { @content; } + } +} +@mixin container-gutters($mobile-padding: 15px, $desktop-padding: 30px) { + padding-right: $mobile-padding; + padding-left: $mobile-padding; + + @include respond-to(lg) { + padding-right: $desktop-padding; + padding-left: $desktop-padding; + } +} \ No newline at end of file diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..7fc3ed0fc 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,36 @@ -$c-gray: #eee; +$c-gray: #687480; +$c-accent: #1a5a4c; +$c-orange: #f14a27; +$c-main-text: #0f0e08; +$c-secondary-text: #4e4e4e; +$c-black: #000; +$c-white: #fff; +$c-gray-light: #e0e0e0; +$body-color: $c-main-text; +$theme-colors: ( + 'orange': $c-orange, + 'main-text': $c-main-text, + 'secondary-text': $c-secondary-text, + 'gray-light': $c-gray-light, + 'black': $c-black, + 'white': $c-white, + 'accent': $c-accent, + 'gray': $c-gray, +); +$grid-gutter-width: 20px; +$container-padding-x: 20px; +$spacers: ( + 0: 0, + 1: 4px, + 2: 8px, + 3: 20px, + 4: 30px, + 5: 80px, + 6: 150px, + 7: 210px, +); +$grid-breakpoints: ( + xs: 0, + md: 768px, + xl: 1280px, +);