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..f868262d0 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://skoulskiy.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..f431d28ae 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,236 @@ - - Title - + + NAMU | Художній музей + + + + + + - -

Hello Mate Academy

- + +
+
+ + Burger menu + +

+ NA
MU +

+
+
+

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

+ Квитки +
+
+ Події +
+
+
+
+ + +
+
+
+

Актуальні події

+ +
+
+
+ Йду і повертаюсь +
+
+
+ Виставка + 26.08-29.11.2019 +
+ Йду і повертаюсь + Національний Художній Музей України презентує унікальну частину колекції Градобанку... +
+
+
+
+ І спогади і мрії +
+
+
+ Виставка + 26.08-29.11.2019 +
+ І спогади і мрії + Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії». +
+
+
+
+
+
+
+
+ About us + +
+
+ ЛЕКЦІЯ + 26/08/2019 - 11:00 +
+

Від класицизму до романтизму

+
+
+
+
+ + +
+ diff --git a/package-lock.json b/package-lock.json index fbfeb1428..7be3faaf3 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.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,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", @@ -13039,23 +13040,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - }, - "funding": { - "url": "https://github.com/sponsors/eemeli" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index ab5f87b9b..5da66ccb1 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "museum", "version": "1.0.0", "description": "museum", - "homepage": "Museum", + "homepage": "/Museum/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -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", diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/arrow-up.svg b/src/images/arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/background.png b/src/images/background.png new file mode 100644 index 000000000..91e3730c0 Binary files /dev/null and b/src/images/background.png differ diff --git a/src/images/burger-icon.svg b/src/images/burger-icon.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/burger-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/card-1.png b/src/images/card-1.png new file mode 100644 index 000000000..3c66d65a1 Binary files /dev/null and b/src/images/card-1.png differ diff --git a/src/images/card-2.png b/src/images/card-2.png new file mode 100644 index 000000000..04241caf6 Binary files /dev/null and b/src/images/card-2.png differ diff --git a/src/images/close-icon.svg b/src/images/close-icon.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/close-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/facebook.svg b/src/images/facebook.svg new file mode 100644 index 000000000..7702febec --- /dev/null +++ b/src/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..be4f9a359 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/instagram.svg b/src/images/instagram.svg new file mode 100644 index 000000000..98186ebd2 --- /dev/null +++ b/src/images/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/lection.png b/src/images/lection.png new file mode 100644 index 000000000..f909454f2 Binary files /dev/null and b/src/images/lection.png differ diff --git a/src/images/slider-1.png b/src/images/slider-1.png new file mode 100644 index 000000000..f50225487 Binary files /dev/null and b/src/images/slider-1.png differ diff --git a/src/images/slider-2.png b/src/images/slider-2.png new file mode 100644 index 000000000..d1dbc017f Binary files /dev/null and b/src/images/slider-2.png differ diff --git a/src/images/slider-3.png b/src/images/slider-3.png new file mode 100644 index 000000000..018f8402e Binary files /dev/null and b/src/images/slider-3.png differ diff --git a/src/images/slider-4.png b/src/images/slider-4.png new file mode 100644 index 000000000..dbf75faf0 Binary files /dev/null and b/src/images/slider-4.png differ diff --git a/src/images/subscribe-background-desktop.png b/src/images/subscribe-background-desktop.png new file mode 100644 index 000000000..b97110157 Binary files /dev/null and b/src/images/subscribe-background-desktop.png differ diff --git a/src/images/subscribe-background-tablet.png b/src/images/subscribe-background-tablet.png new file mode 100644 index 000000000..3d2f2b9d5 Binary files /dev/null and b/src/images/subscribe-background-tablet.png differ diff --git a/src/images/subscribe-background.png b/src/images/subscribe-background.png new file mode 100644 index 000000000..62e4fbf0f Binary files /dev/null and b/src/images/subscribe-background.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..08df3b127 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,19 @@ 'use strict'; + +const slider = document.querySelector('.slider'); +const sliderItems = document.querySelectorAll('.slider__item'); +const dots = document.querySelectorAll('.pagination__dot'); + +slider.addEventListener('scroll', () => { + if (sliderItems.length < 2) { + return; + } + + const itemStep = slider.scrollWidth / sliderItems.length; + const currentIndex = Math.round(slider.scrollLeft / itemStep); + const safeIndex = Math.max(0, Math.min(currentIndex, dots.length - 1)); + + dots.forEach((dot, index) => { + dot.classList.toggle('pagination__dot--active', index === safeIndex); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f1078dced 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 000000000..67b604fa4 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,107 @@ +.about-section { + margin-top: 60px; + + @include on-tablet { + margin-top: 112px; + } + + @include on-desktop { + margin-top: 104px; + } +} + +.about { + &__wrapper { + position: relative; + width: calc(100% + 40px); + margin-inline: -20px; + + @include on-tablet { + width: 100%; + margin-inline: 0; + } + + @include on-desktop { + width: calc(100% + 110px); + margin-inline: -55px; + } + } + + &__img { + display: block; + width: 100%; + height: 210px; + object-fit: cover; + + @include on-tablet { + height: 390px; + } + + @include on-desktop { + height: 550px; + } + } + + &__info { + position: absolute; + right: 20px; + bottom: -70px; + left: 20px; + + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + + box-sizing: border-box; + padding-block: 20px; + + background-color: #fff; + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); + + @include on-tablet { + gap: 16px; + } + + @include on-tablet { + right: 65px; + bottom: -120px; + left: 65px; + + width: auto; + padding: 45px 55px 50px; + } + + @include on-desktop { + right: auto; + left: 50%; + transform: translateX(-50%); + + width: auto; + padding: 45px 100px 50px; + } + } + + &__top { + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + + @include on-tablet { + gap: 80px; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + text-align: center; + + @include on-tablet { + text-align: left; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..91a1e2248 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,43 @@ +.events { + &-section { + margin-top: 70px; + &__wrapper { + display: grid; + row-gap: 20px; + margin-top: 40px; + + @include on-tablet { + margin-top: 48px; + } + + @include on-desktop { + margin-top: 56px; + } + + @include page-grid; + + .card { + &:first-child { + .card__img-wrapper { + margin-top: 0; + } + } + } + } + + @include on-desktop { + margin-top: 200px; + } + &__title { + grid-column: 1 / -1; + width: 100%; + text-align: center; + + @include on-tablet { + text-align: left !important; + } + } + } + + @include page-grid; +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..da95fe899 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,243 @@ +.footer { + margin-top: 50px; + padding-bottom: 50px; + + &__schedule-item, + &__schedule-title, + &__schedule-info { + color: $main-accent; + } + + &__schedule { + @include on-tablet { + grid-column: 2 / 4; + grid-row: 1; + } + + @include on-desktop { + grid-column: 3 / 4; + grid-row: 1 / 3; + } + &-info { + margin-top: 10px; + } + } + + &__contacts { + @include on-tablet { + grid-column: 4 / 6; + grid-row: 1; + } + + @include on-desktop { + grid-column: 5 / 6; + } + } + + &__logo { + grid-column: 1; + grid-row: 1; + place-self: start start; + margin: 0; + + a { + display: inline-block; + color: #000; + text-decoration: none; + } + } + + &__schedule-item > a { + @include add-transition(color); + + &:hover { + color: rgb(106, 108, 108); + } + } + + &__social { + display: flex; + grid-column: 2; + gap: 20px; + justify-self: end; + + @include on-tablet { + grid-column: 1; + grid-row: 2; + justify-self: start; + } + } + + &__arrow { + display: flex; + grid-column: 2; + grid-row: 3; + align-items: center; + justify-content: center; + justify-self: end; + + width: 50px; + height: 50px; + border: 1px solid $green-accent; + border-radius: 50%; + + @include on-tablet { + display: none; + } + } + + &__line { + grid-column: 1 / -1; + grid-row: 4; + + width: 100%; + height: 1px; + border: none; + + background-color: rgba(26, 90, 76, 0.5); + outline: none; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 3; + } + + @include on-desktop { + grid-column: 7; + grid-row: 1; + width: 1px; + height: 100%; + } + } + + &__nav-link { + font-size: 14px; + font-weight: 400; + color: #000; + text-decoration: none; + + &::after { + background-color: #000; + } + + &:nth-child(1 of .footer__nav-link) { + grid-column: 1; + grid-row: 5; + + @include on-tablet { + grid-column: 2; + grid-row: 4; + } + + @include on-desktop { + grid-column: 8; + grid-row: 1; + align-self: start; + } + } + &:nth-child(2 of .footer__nav-link) { + grid-column: 2; + grid-row: 5; + justify-self: start; + + @include on-tablet { + grid-column: 3; + grid-row: 4; + } + + @include on-desktop { + grid-column: 8; + grid-row: 1; + align-self: start; + margin-top: 30px; + } + } + &:nth-child(3 of .footer__nav-link) { + grid-column: 1; + grid-row: 6; + + @include on-tablet { + grid-column: 2; + grid-row: 5; + } + + @include on-desktop { + grid-column: 9; + grid-row: 1; + align-self: start; + } + } + &:nth-child(4 of .footer__nav-link) { + grid-column: 2; + grid-row: 6; + justify-self: start; + + @include on-tablet { + grid-column: 3; + grid-row: 5; + } + + @include on-desktop { + grid-column: 9; + grid-row: 1; + align-self: start; + margin-top: 30px; + } + } + } + &__copyright { + display: flex; + grid-column: 1 / -1; + grid-row: 7; + flex-direction: column; + gap: 10px; + align-items: center; + justify-content: center; + + margin-top: 25px; + + @include on-tablet { + grid-column: 1 / -1; + grid-row: 6; + flex-direction: row; + justify-content: space-between; + } + + span { + display: block; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + color: $main-accent; + + @include on-tablet { + white-space: nowrap; + } + } + } +} + +.social { + &__link { + display: flex; + width: 24px; + height: 24px; + + @include add-transition(transform); + + &:hover { + transform: scale(1.1); + } + } +} + +.footer .container { + @include page-grid; + + gap: 40px; +} + +.schedule__info { + @include on-desktop { + width: 100%; + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..a1bc75b41 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,51 @@ +.gallery-section { + margin-top: 160px; + + &__title { + padding-bottom: 40px; + } +} + +.gallery { + &-wrapper { + display: none; + + @include on-desktop { + overflow: hidden; + + @include page-grid; + + grid-auto-flow: row; + gap: 30px; + } + } + + &__item { + overflow: hidden; + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + + @include add-transition(transform); + &:hover { + transform: scale(1.1); + } + } + + &--small { + @include on-desktop { + grid-column: span 4; + grid-row: span 1; + } + } + + &--big { + @include on-desktop { + grid-column: span 8; + grid-row: span 1; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..9ecb340ae --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,251 @@ +.header { + position: relative; + + &__main-container { + position: relative; + display: grid; + align-items: start; + padding-inline: 20px; + + @include page-grid; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__subinfo { + position: absolute; + + display: none; + flex-direction: column; + gap: 20px; + align-items: center; + + @include on-desktop { + top: 80%; + left: 55px; + display: flex; + margin-top: 50px; + } + } + + &__subtitle { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 100%; + color: rgba(104, 116, 128, 1); + text-transform: uppercase; + + @include on-desktop { + transform: rotate(180deg); + writing-mode: vertical-lr; + } + } + + .subinfo__line { + width: 1px; + height: 70px; + background-color: $green-accent; + + @include on-desktop { + transform: none; + } + } + + &__burger { + z-index: 25; + + grid-column: 1; + grid-row: 1; + justify-self: start; + + margin-top: 24px; + + @include on-tablet { + margin-top: 39px; + } + } + + &__logo { + z-index: 10; + + grid-column: 1 / -1; + grid-row: 1; + justify-self: center; + + margin: 0; + + a { + line-height: 1; + color: $main-accent; + text-align: center; + text-decoration: none; + } + + @include on-tablet { + grid-column: 4 / 6; + grid-row: 1; + place-self: start center; + text-align: center; + } + + @include on-desktop { + grid-column: 7/9; + } + } + + &__wrapper { + grid-column: 1 / -1; + grid-row: 1; + + min-height: 40vh; + margin-inline: -20px; + + background-image: url('../images/background.png'); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1 / 3; + + min-height: 50vh; + margin-right: -34px; + margin-left: 0; + } + + @include on-desktop { + grid-column: 7 / -1; + min-height: 70vh; + margin-right: -55px; + margin-left: 0; + } + } + + &__info { + display: flex; + grid-column: 1 / -1; + grid-row: 2; + flex-direction: column; + gap: 20px; + + box-sizing: border-box; + margin-top: 20px; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 2; + margin-top: 40px; + padding: 0; + } + + @include on-desktop { + display: flex; + grid-column: 1 / 7; + grid-row: 2; + flex-direction: column; + gap: 40px; + align-items: flex-start; + justify-content: space-between; + + margin-top: 80px; + } + } + + &__title { + margin: 0; + margin-bottom: 20px; + + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 1; + color: $main-accent; + text-align: center; + text-transform: uppercase; + + @include on-tablet { + text-align: left; + } + + @include on-desktop { + margin-bottom: 0; + font-size: 72px; + line-height: 120%; + } + } + + &__link { + position: relative; + + display: block; + + box-sizing: border-box; + width: 100%; + padding-right: 56px; + padding-left: 16px; + padding-block: 18px; + border: 1px solid $green-accent; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 1; + color: $main-accent; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + &::after { + @include add-transition((background, color)); + + content: '>'; + + position: absolute; + top: -1px; + right: -1px; + bottom: -1px; + + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + border: 1px solid $green-accent; + + color: #fff; + + background-color: $green-accent; + } + + &:hover { + color: #fff; + background: $green-accent; + } + + &:hover::after { + color: $green-accent; + background: #fff; + } + + @include add-transition(background); + + @include on-tablet { + width: 270px; + padding-right: 64px; + padding-left: 24px; + } + + @include on-desktop { + width: 270px; + margin-left: auto; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..e362d92f0 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,215 @@ +.menu { + pointer-events: none; + + position: fixed; + z-index: 100; + top: 0; + right: 0; + left: 0; + transform-origin: right top; + transform: scaleY(0); + + overflow: hidden; + + box-sizing: border-box; + height: auto; + + color: #fff; + + opacity: 0; + background-color: $green-accent; + + transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); + transition-duration: 400ms; + transition-property: opacity, transform; + + &:target { + pointer-events: all; + transform: scaleY(1); + opacity: 1; + box-shadow: 0 0 0 1000vw rgba(0, 0, 0, 0.5); + } + + &__top { + position: relative; + display: grid; + grid-template-columns: max-content 1fr; + column-gap: 28px; + + @include on-tablet { + display: flex; + flex-direction: row; + align-items: flex-start; + } + + @include on-desktop { + display: contents; + } + } + + &__close { + @include on-desktop { + grid-column: 1; + grid-row: 1; + justify-self: start; + } + } + + &__line { + width: 100%; + height: 1px; + margin: 24px 0; + border: none; + + background-color: rgba(255, 255, 255, 0.5); + + @include on-tablet { + display: block; + grid-column: 6; + grid-row: 1; + place-self: flex-start start; + + width: 1px; + height: 145px; + min-height: auto; + margin: 0 38px; + } + + @include on-desktop { + display: block; + grid-column: 6; + grid-row: 1; + place-self: flex-start flex-start; + + width: 1px; + height: 145px; + margin: 0; + padding-bottom: 0; + } + } + + &__bottom { + margin-top: 24px; + padding-bottom: 27px; + + @include on-tablet { + margin-top: 0; + padding-bottom: 40px; + } + + @include on-desktop { + grid-column: 7 / 13; + grid-row: 1; + margin-top: 0; + padding-bottom: 48px; + } + } +} + +.schedule { + display: block; + + @include on-tablet { + display: grid; + grid-template-columns: minmax(170px, auto) 1fr; + column-gap: 26px; + } + + @include on-desktop { + display: grid; + grid-template-columns: minmax(170px, auto) 1fr; + column-gap: 30px; + } + + &__title { + margin: 0; + margin-bottom: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: #fff; + letter-spacing: 0; + + @include on-tablet { + grid-column: 1 / -1; + margin-bottom: 12px; + } + + @include on-desktop { + grid-column: 1 / -1; + margin-bottom: 20px; + } + } + + &__list { + box-sizing: border-box; + margin: 0 0 20px; + padding: 0; + list-style: none; + + @include on-tablet { + grid-column: 1; + margin: 0; + } + + @include on-desktop { + grid-column: 1; + margin: 0; + } + } + + &__item { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + line-height: 150%; + color: #fff; + letter-spacing: 0; + + & span { + font-weight: 600; + } + } + + &__info { + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + line-height: 150%; + color: #fff; + letter-spacing: 0; + + @include on-tablet { + grid-column: 2; + } + + @include on-desktop { + grid-column: 2; + width: 50%; + } + } +} + +.menu .container { + position: relative; + display: flex; + flex-direction: column; + padding-top: 27px; + + @include on-tablet { + flex-direction: row; + align-items: flex-start; + padding-top: 38px; + } + + @include on-desktop { + display: grid; + + @include page-grid; + + align-items: start; + padding-top: 40px; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..278e6949b --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,111 @@ +.subscribe-section { + display: flex; + align-items: center; + + width: 100%; + min-height: 386px; + margin-top: 100px; + + background-image: url('../images/subscribe-background.png'); + background-repeat: no-repeat; + background-position: center bottom; + background-size: cover; + + @include on-tablet { + min-height: 380px; + margin-top: 92px; + background-image: url('../images/subscribe-background-tablet.png'); + } + + @include on-desktop { + min-height: 550px; + margin-top: 200px; + background-image: url('../images/subscribe-background-desktop.png'); + } +} + +.subscribe-section .container { + @include page-grid; + + width: 100%; + padding-block: 88px; +} + +.subscribe { + &__form { + display: flex; + grid-column: 1 / -1; + align-items: stretch; + justify-self: center; + + width: 100%; + + @include on-tablet { + grid-column: 2/6; + gap: 16px; + } + + @include on-desktop { + grid-column: 4 / 11; + gap: 30px; + } + } + + &__input { + flex-grow: 1; + } + &__title { + grid-column: 1 / -1; + + margin: 0; + margin-bottom: 20px; + + color: #fff; + text-align: center; + } + &__subtitle { + grid-column: 1 / -1; + + margin-bottom: 50px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: #fff; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &__button { + cursor: pointer; + + flex-shrink: 0; + + width: 50px; + border: 0; + + font-weight: 500; + color: #000; + + background-color: rgba(241, 74, 39, 1); + outline: 0; + + @include on-tablet { + width: 70px; + } + + @include add-transition(background-color); + + &:hover { + background-color: rgb(215, 64, 34); + } + } +} diff --git a/src/styles/elements/card.scss b/src/styles/elements/card.scss new file mode 100644 index 000000000..3b45b8e24 --- /dev/null +++ b/src/styles/elements/card.scss @@ -0,0 +1,119 @@ +.events-section { + &__wrapper { + display: grid; + + @include page-grid; + + row-gap: 60px; + } +} + +.card { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + box-sizing: border-box; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + display: grid; + grid-column: 1 / 13; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + align-items: center; + } + + &__img-wrapper { + overflow: hidden; + display: block; + width: 100%; + margin-bottom: 20px; + + @include on-desktop { + grid-column: 1 / 8; + margin-bottom: 0; + } + } + + &__img { + display: block; + width: 100%; + height: auto; + object-fit: cover; + + @include add-transition(transform); + + .card:hover & { + transform: scale(1.05); + } + } + + &__information-wrapper { + display: flex; + flex-direction: column; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 20px; + + & > * { + grid-column: 1 / 5; + } + } + + @include on-desktop { + display: flex; + grid-column: 9 / 13; + flex-direction: column; + } + } + + &__info { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 15px; + } + + &__title { + position: relative; + + display: block; + + width: fit-content; + margin-bottom: 10px; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + color: $main-accent; + + &::after { + content: ''; + + position: absolute; + top: 2px; + right: -20px; + transform: translate(50%, 100%); + + width: 10px; + height: 10px; + + background-color: rgba(241, 74, 39, 1); + } + } + + &__description { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + font-style: normal; + color: rgba(78, 78, 78, 1); + letter-spacing: 0; + } +} diff --git a/src/styles/elements/container.scss b/src/styles/elements/container.scss new file mode 100644 index 000000000..b3fde4cca --- /dev/null +++ b/src/styles/elements/container.scss @@ -0,0 +1,12 @@ +.container { + box-sizing: border-box; + padding: 0 20px; + + @include on-tablet { + padding: 0 34px; + } + + @include on-desktop { + padding: 0 55px; + } +} diff --git a/src/styles/elements/input.scss b/src/styles/elements/input.scss new file mode 100644 index 000000000..f3e5d6352 --- /dev/null +++ b/src/styles/elements/input.scss @@ -0,0 +1,24 @@ +.input { + padding: 18px 24px; + border: none; + + font-family: Montserrat, sans-serif; + font-size: 14px; + line-height: 100%; + letter-spacing: 0; + + background-color: #fff; + outline: 0; + + &::placeholder { + color: rgba(104, 116, 128, 1); + } + + @include on-tablet { + padding-block: 28px; + } + + @include on-desktop { + padding-inline: 32px; + } +} diff --git a/src/styles/elements/nav.scss b/src/styles/elements/nav.scss new file mode 100644 index 000000000..451284d21 --- /dev/null +++ b/src/styles/elements/nav.scss @@ -0,0 +1,49 @@ +.nav { + display: grid; + grid-template-columns: auto auto; + gap: 20px 30px; + justify-self: start; + + @include on-desktop { + display: grid; + grid-column: 2 / 6; + grid-row: 1; + grid-template-columns: repeat(2, auto); + gap: 24px 40px; + justify-self: start; + } + + &__link { + position: relative; + + display: inline-block; + + width: max-content; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + color: inherit; + white-space: wrap; + + &::after { + content: ''; + + position: absolute; + bottom: -5px; + left: 0; + transform: scale(0); + + width: 100%; + height: 1px; + + background-color: #fff; + + @include add-transition(transform); + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/elements/pagination.scss b/src/styles/elements/pagination.scss new file mode 100644 index 000000000..19d869f37 --- /dev/null +++ b/src/styles/elements/pagination.scss @@ -0,0 +1,29 @@ +.pagination { + display: flex; + gap: 22px; + justify-content: center; + margin-top: 16px; + + @include on-desktop { + display: none; + } + + &__dot { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: rgba(224, 224, 224, 1); + + @include add-transition(background-color); + + &:last-child { + @include on-tablet { + display: none; + } + } + + &--active { + background-color: $green-accent; + } + } +} diff --git a/src/styles/elements/slider.scss b/src/styles/elements/slider.scss new file mode 100644 index 000000000..b5cc0f01a --- /dev/null +++ b/src/styles/elements/slider.scss @@ -0,0 +1,40 @@ +.slider { + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: 30px; + + width: calc(100% + 20px); + margin-right: -20px; + + @include on-desktop { + display: none; + } + + &::-webkit-scrollbar { + display: none; + } + &::after { + content: ''; + flex-shrink: 0; + } + + &__item { + scroll-snap-align: start; + flex-shrink: 0; + width: calc(100% - 36px); + + @include on-tablet { + width: calc(50% - 15px); + } + } + + &__img { + display: block; + width: 100%; + height: 410px; + object-fit: cover; + } +} diff --git a/src/styles/elements/title.scss b/src/styles/elements/title.scss new file mode 100644 index 000000000..97adda473 --- /dev/null +++ b/src/styles/elements/title.scss @@ -0,0 +1,13 @@ +.title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + color: $main-accent; + text-align: center; + letter-spacing: 0; + + @include on-tablet { + font-size: 48px; + text-align: left; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..51c3ab553 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,50 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; + +.type { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + color: $gray-accent; + text-transform: uppercase; +} + +.date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + font-style: normal; + line-height: 150%; + color: $green-accent; +} + +html { + scroll-behavior: smooth; +} + +html:has(.menu:target) { + overflow: hidden; +} + +a { + color: $main-accent; + text-decoration: none; +} body { - background: $c-gray; + margin: 0; } + +@import './elements/container'; +@import './elements/nav'; +@import './elements/card'; +@import './elements/slider'; +@import './elements/pagination'; +@import './elements/input'; + +@import './elements/title'; +@import './blocks/header'; +@import './blocks/menu'; +@import './blocks/events'; +@import './blocks/about'; +@import './blocks/gallery'; +@import './blocks/subscribe'; +@import './blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..585e785b7 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,34 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin page-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } +} + +@mixin add-transition($properties) { + transition-duration: 300ms; + transition-property: $properties; + + transition-behavior: linear; +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..16c4531f5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$main-accent: rgba(15, 14, 8, 1); +$green-accent: rgba(26, 90, 76, 1); +$gray-accent: rgba(104, 116, 128, 1);