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..02984ed99 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://github.com/IgorYuzepchyk/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..854550873 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,303 @@ - + - Title + Museum + + + + + + + + + + + + + + + + + -

Hello Mate Academy

- + +
+ + +
+
+

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

+
+
+ events img1 +
+

+ ВИСТАВКА + 26.08–29.11.2019 +

+

Йду і повертаюсь

+

Національний Художній Музей України презентує унікальну частину колекції Градобанку - українське мистецтво другої половини 1980-1995 років.

+
+
+
+ events img1 +
+

+ ВИСТАВКА + 26.08–29.11.2019 +

+

І спогади і мрії

+

Національний художній музей України до 100 річчя від дня народження видатної української художниці Тетяни Яблонської відкриває ретроспективну ювілейну виставку «І спогади і мрії».

+
+
+
+
+
+
+ lecture img +
+

+ ЛЕКЦІЯ + 26/08/2019 - 11:00 +

+

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

+
+
+ + +
+
+
+

Підписка

+

Бути в курсі всіх актуальних подій та останніх новин.

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

NA
MU

+
+ + img-facebook + + + img-instagram + + +
+
+
+

Графік роботи

+

+ 12:00 — 20:00 + середа +

+

+ 12:00 — 20:00 + четвер +

+

+ 12:00 — 20:00 + п’ятниця +

+

+ 11:00 — 19:00 + субота +

+

+ 11:00 — 19:00 + неділя +

+

Вихідні понеділок, вівторок Каса припиняє роботу за 1 годину до закриття музею

+
+
+

Контакти:

+

вул. М. Грушевського, 6; Київ, 01001
тел. +38 (044) 278-13-57
факс +38 (044) 278-74-54
e-mail: info@namu.kiev.ua

+
+ + footer arrow up + +
+
+
+ +
+
+
+

Designed by Zhyriada Marina

+

Copyright © 2019. All Rights Reserved.

+
+ + +
+ + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 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", diff --git a/package.json b/package.json index ab5f87b9b..d2c5a8560 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", diff --git a/src/images/events-block-img1-x2.png b/src/images/events-block-img1-x2.png new file mode 100644 index 000000000..a1e2bfa8b Binary files /dev/null and b/src/images/events-block-img1-x2.png differ diff --git a/src/images/events-block-img2-x2.png b/src/images/events-block-img2-x2.png new file mode 100644 index 000000000..098d2b213 Binary files /dev/null and b/src/images/events-block-img2-x2.png differ diff --git a/src/images/footer-arrow-up.svg b/src/images/footer-arrow-up.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/footer-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/gallery -img4-x2.png b/src/images/gallery -img4-x2.png new file mode 100644 index 000000000..c18cd18c7 Binary files /dev/null and b/src/images/gallery -img4-x2.png differ diff --git a/src/images/gallery-img1-x2.png b/src/images/gallery-img1-x2.png new file mode 100644 index 000000000..59dd3c361 Binary files /dev/null and b/src/images/gallery-img1-x2.png differ diff --git a/src/images/gallery-img2-x2.png b/src/images/gallery-img2-x2.png new file mode 100644 index 000000000..d7af904de Binary files /dev/null and b/src/images/gallery-img2-x2.png differ diff --git a/src/images/gallery-img3-x2.png b/src/images/gallery-img3-x2.png new file mode 100644 index 000000000..da9a12583 Binary files /dev/null and b/src/images/gallery-img3-x2.png differ diff --git a/src/images/gallery-img4-x2.png b/src/images/gallery-img4-x2.png new file mode 100644 index 000000000..c18cd18c7 Binary files /dev/null and b/src/images/gallery-img4-x2.png differ diff --git a/src/images/gallery-img5-x2.png b/src/images/gallery-img5-x2.png new file mode 100644 index 000000000..15e315a0e Binary files /dev/null and b/src/images/gallery-img5-x2.png differ diff --git a/src/images/header-images.png b/src/images/header-images.png new file mode 100644 index 000000000..87254ac69 Binary files /dev/null and b/src/images/header-images.png differ diff --git a/src/images/icons/burger-menu-x2.png b/src/images/icons/burger-menu-x2.png new file mode 100644 index 000000000..67de3f764 Binary files /dev/null and b/src/images/icons/burger-menu-x2.png differ diff --git a/src/images/icons/header-arrow.png b/src/images/icons/header-arrow.png new file mode 100644 index 000000000..e62696cce Binary files /dev/null and b/src/images/icons/header-arrow.png differ diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..7702febec --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..98186ebd2 --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu-icon-closed.svg b/src/images/icons/menu-icon-closed.svg new file mode 100644 index 000000000..f2cfd07c0 --- /dev/null +++ b/src/images/icons/menu-icon-closed.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/museum-favicon.png b/src/images/icons/museum-favicon.png new file mode 100644 index 000000000..59acc0c62 Binary files /dev/null and b/src/images/icons/museum-favicon.png differ diff --git a/src/images/lecture-block-img3-x2.png b/src/images/lecture-block-img3-x2.png new file mode 100644 index 000000000..7e64c32e4 Binary files /dev/null and b/src/images/lecture-block-img3-x2.png differ diff --git a/src/images/subscription-arrow-x2.png b/src/images/subscription-arrow-x2.png new file mode 100644 index 000000000..55cec2806 Binary files /dev/null and b/src/images/subscription-arrow-x2.png differ diff --git a/src/images/subscription-bg.jpg b/src/images/subscription-bg.jpg new file mode 100644 index 000000000..d69bacb81 Binary files /dev/null and b/src/images/subscription-bg.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..8137645f0 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,39 @@ +/* global Swiper */ 'use strict'; + +const swiper = new Swiper('.slider', { + slidesPerView: 1, + spaceBetween: 15, + loop: true, + + breakpoints: { + 640: { + slidesPerView: 2, + spaceBetween: 20, + allowTouchMove: true, + }, + + 1280: { + slidesPerView: 2, + allowTouchMove: false, + } + }, + + pagination: { + el: '.swiper-pagination', + clickable: true, + } +}); + +const body = document.body; + +function checkMenu() { + if (window.location.hash === '#menu') { + body.classList.add('body--no-scroll'); + } else { + body.classList.remove('body--no-scroll'); + } +} + +window.addEventListener('hashchange', checkMenu); +window.addEventListener('load', checkMenu); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..5cfc5b4d0 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); } diff --git a/src/styles/aside.scss b/src/styles/aside.scss new file mode 100644 index 000000000..405aa532c --- /dev/null +++ b/src/styles/aside.scss @@ -0,0 +1,187 @@ +.menu { + pointer-events: none; + + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + + opacity: 0; + + &__content { + max-width: 1440px; + margin: 0 auto; + } + + &__overlay { + position: absolute; + z-index: -1; + inset: 0; + + height: 100vh; + + background: rgba(0, 0, 0, 0.5); + } + + &__wrapper { + z-index: 3; + display: flex; + flex-direction: column; + background: #1a5a4c; + + @include content-padding-inline; + + @include on-tablet { + flex-direction: row; + align-items: stretch; + padding-top: 40px; + padding-bottom: 40px; + } + } + + &__top { + display: flex; + gap: 28px; + align-items: flex-start; + padding-top: 27px; + + @include on-tablet { + flex: 1; + padding-top: 0; + } + } + + &__icon-link { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + } + + &__icon { + width: 12px; + height: 12px; + } + + &__container { + position: relative; + z-index: 3; + } + + &__nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 28px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__item { + cursor: pointer; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #fff; + text-decoration: none; + letter-spacing: 0%; + } + + &__line { + width: 100%; + height: 1px; + margin-top: 24px; + margin-bottom: 24px; + + opacity: 50%; + background: #fff; + + @include on-tablet { + align-self: stretch; + width: 1px; + height: auto; + margin: 0 24px; + } + } + + &__tablet { + display: flex; + flex-direction: column; + + @include on-tablet { + display: flex; + flex: 1; + flex-direction: row; + gap: 10px; + } + } + + &__schedule { + flex: 1; + } + + &__schedule-title { + margin: 0; + padding-bottom: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: #fff; + letter-spacing: 0%; + } + + &__schedule-item { + margin: 0; + } + + &__schedule-time { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 150%; + color: #fff; + letter-spacing: 0%; + } + + &__schedule-day { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #fff; + letter-spacing: 0%; + } + + &__schedule-weekend { + margin: 0; + padding-top: 16px; + padding-bottom: 27px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #fff; + letter-spacing: 0%; + + @include on-tablet { + width: 144px; + } + } + + &:target { + pointer-events: all; + opacity: 1; + } +} diff --git a/src/styles/author.scss b/src/styles/author.scss new file mode 100644 index 000000000..f6d2c72e7 --- /dev/null +++ b/src/styles/author.scss @@ -0,0 +1,40 @@ +.author { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + justify-content: center; + + margin-bottom: 60px; + + @include content-padding-inline; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + + &__name { + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 12px; + font-weight: 300; + line-height: 141%; + color: #0f0e08; + text-align: center; + letter-spacing: 0%; + } + + &__info { + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 12px; + font-weight: 300; + line-height: 141%; + color: #0f0e08; + text-align: center; + letter-spacing: 0%; + } +} diff --git a/src/styles/events.scss b/src/styles/events.scss new file mode 100644 index 000000000..48f417f22 --- /dev/null +++ b/src/styles/events.scss @@ -0,0 +1,143 @@ +.events { + @include content-padding-inline; + + &__title { + margin: 0; + padding-bottom: 40px; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: #0f0e08; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + padding-bottom: 48px; + font-size: 48px; + text-align: left; + } + } + + &__item { + margin-bottom: 60px; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__container { + @include on-desktop { + grid-column: 9 / 13; + } + } + + &__item-marker { + display: inline-block; + + width: 10px; + height: 10px; + margin-left: 8px; + + vertical-align: middle; + + background-color: #f14a27; + + @include on-tablet { + width: 15px; + height: 15px; + } + } + + &__item-date { + display: flex; + align-items: center; + justify-content: space-between; + + margin: 0; + padding-top: 16px; + + @include on-tablet { + width: 220px; + padding-top: 40px; + } + } + + &__item-type { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #687480; + letter-spacing: 0%; + + @include on-tablet { + font-size: 14px; + } + } + + &__item-date-value { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + color: #1a5a4c; + letter-spacing: 0%; + + @include on-tablet { + font-size: 14px; + } + } + + &__item-title { + margin: 0; + padding-top: 15px; + padding-bottom: 10px; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + color: #0f0e08; + letter-spacing: 0%; + + @include on-tablet { + padding-top: 30px; + padding-bottom: 15px; + font-size: 36px; + } + } + + &__description { + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; + color: #4e4e4e; + letter-spacing: 0%; + + @include on-tablet { + max-width: 460px; + } + } + + &__img { + width: 100%; + height: auto; + object-fit: cover; + + @include on-tablet { + height: auto; + } + + @include on-desktop { + grid-column: 1 / 8; + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..29526b204 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,268 @@ +.footer { + margin-top: 50px; + margin-bottom: 80px; + + @include content-padding-inline; + + @include on-desktop { + display: flex; + flex-direction: row; + } + + &__wrapper { + 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; + } + } + + &__logo-text { + margin: 0; + padding-top: 9px; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: #0f0e08; + text-decoration: none; + letter-spacing: 0%; + } + + &__top { + display: flex; + grid-column: 1 / -1; + align-items: center; + justify-content: space-between; + + padding-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + gap: 62px; + justify-content: start; + } + + @include on-desktop { + grid-column: 1 / 2; + } + } + + &__icon { + display: flex; + gap: 20px; + } + + &__images { + width: 24px; + height: 24px; + } + + &__schedule { + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + } + } + + &__schedule-title { + margin: 0; + padding-bottom: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: #0f0e08; + letter-spacing: 0%; + } + + &__schedule-item { + margin: 0; + } + + &__schedule-time { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 150%; + color: #0f0e08; + letter-spacing: 0%; + } + + &__schedule-day { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 150%; + color: #0f0e08; + letter-spacing: 0%; + } + + &__schedule-weekend { + margin: 0; + padding-top: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #0f0e08; + letter-spacing: 0%; + } + + &__contacts { + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__contacts-title { + margin: 0; + padding-bottom: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0%; + } + + &__contacts-info { + margin: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0%; + } + + &__contacts-link { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #0f0e08; + text-decoration: none; + letter-spacing: 0%; + } + + &__contacts-fax { + margin: 0; + padding: 0; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: #0f0e08; + letter-spacing: 0%; + } + + &__arrow-up { + width: 50px; + height: 50px; + margin-top: 147px; + margin-left: auto; + border: 1px solid #1a5a4c; + border-radius: 50%; + + @include on-tablet { + display: none; + } + } + + &__arrow-link { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border-radius: 50%; + + text-decoration: none; + } + + &__arrow-imag { + width: 10px; + height: 12px; + opacity: 1; + } + + &__line { + grid-column: 1/-1; + + width: 100%; + height: 1px; + margin-top: 20px; + margin-bottom: 40px; + + background: #1a5a4c80; + + @include on-tablet { + grid-column: 2/6; + margin-top: 64px; + } + + @include on-desktop { + grid-column: 7; + place-self: stretch center; + + width: 1px; + height: 100%; + margin: 0; + } + } + + &__nav { + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(2, 1fr); + gap: 16px 30px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: 8 / 12; + align-self: start; + } + } + + &__item { + cursor: pointer; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #0f0e08; + text-decoration: none; + letter-spacing: 0%; + } +} diff --git a/src/styles/gallery.scss b/src/styles/gallery.scss new file mode 100644 index 000000000..4986dc4a8 --- /dev/null +++ b/src/styles/gallery.scss @@ -0,0 +1,151 @@ +.gallery { + @include content-padding-inline; + + margin-top: 100px; + + &__title { + display: flex; + justify-content: center; + + margin: 0; + padding-bottom: 40px; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + justify-content: start; + padding-bottom: 48px; + font-size: 48px; + } + } + + &__grid { + display: none; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__item-1 { + grid-column: 1/5; + } + &__item-2 { + grid-column: 5/13; + } + &__item-3 { + grid-column: 1/9; + } + &__item-4 { + grid-column: 9/13; + } + + &__grid-img-1 { + cursor: pointer; + width: 100%; + height: 600px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.08); + } + } + + &__grid-img-2 { + cursor: pointer; + width: 100%; + height: 600px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.08); + } + } + + &__grid-img-3 { + cursor: pointer; + width: 100%; + height: 360px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.08); + } + } + + &__grid-img-4 { + cursor: pointer; + width: 100%; + height: 360px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.08); + } + } +} + +.slider-wrapper { + display: flex; + flex-direction: column; + + @include on-desktop { + display: none; + } +} + +.slider { + overflow: hidden; + width: 100%; + height: 410px; + + @include on-tablet { + height: 543px; + } +} + +.slider__item { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; +} + +.slider__img { + display: block; + width: 100%; + height: 100%; + object-fit: contain; +} + +.swiper-pagination { + position: relative; + + display: flex; + gap: 22px; + align-items: center; + justify-content: center; + + margin-top: 20px; + + @include on-desktop { + margin-top: 32px; + } +} + +.swiper-pagination-bullet { + width: 9px; + height: 9px; + opacity: 1; + background: #e0e0e0; +} + +.swiper-pagination-bullet-active { + background: #1a5a4c; +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..836a389ae --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,100 @@ +.header { + margin: 0; + margin-bottom: 70px; + padding: 0; + + &__content { + position: relative; + margin: 0; + padding: 0; + + @include content-padding-inline; + + @include on-tablet { + display: flex; + gap: 20px; + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + padding-top: 27px; + padding-bottom: 255px; + + @include on-tablet { + padding-top: 40px; + padding-bottom: 70px; + } + } + + &__menu-image { + display: flex; + align-items: center; + justify-content: center; + + width: 18px; + height: 12px; + } + + &__image { + position: absolute; + z-index: -1; + top: 0; + right: 0; + left: 0; + + display: flex; + justify-content: center; + + width: 100%; + height: 300px; + + background-image: url(../images/header-images.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + position: relative; + inset: 0; + + justify-content: flex-start; + + height: auto; + margin-right: -34px; + } + + @include on-desktop { + justify-content: flex-start; + } + } + + &__logo-text { + margin: 0; + padding-top: 9px; + + font-family: Montserrat, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + padding-top: 15px; + padding-left: 80px; + } + + @include on-desktop { + padding-left: 60px; + } + } + + @include on-tablet { + margin-bottom: 88px; + } +} diff --git a/src/styles/lecture.scss b/src/styles/lecture.scss new file mode 100644 index 000000000..ccf4bc7de --- /dev/null +++ b/src/styles/lecture.scss @@ -0,0 +1,113 @@ +.lecture { + &__container-image { + position: relative; + height: 210px; + } + + &__image { + z-index: -1; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__content { + position: relative; + z-index: 1; + + width: 100%; + max-width: 280px; + height: 140px; + margin: auto; + margin-top: -60px; + + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + + @include on-tablet { + max-width: 570px; + height: 204px; + } + + @include on-desktop { + max-width: 670px; + } + } + + &__item-date { + display: flex; + align-items: center; + justify-content: space-around; + + margin: 0; + padding-top: 20px; + + @include on-tablet { + justify-content: space-between; + padding-top: 40px; + padding-right: 55px; + padding-left: 55px; + } + + @include on-desktop { + padding-right: 100px; + padding-left: 100px; + } + } + + &__item-type { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #687480; + letter-spacing: 0%; + + @include on-tablet { + font-size: 14px; + } + } + + &__item-date-value { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + color: #1a5a4c; + letter-spacing: 0%; + + @include on-tablet { + font-size: 14px; + } + } + + &__title { + margin: 0; + padding-top: 20px; + padding-bottom: 20px; + + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + color: #0f0e08; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + padding: 23px 55px 50px; + font-size: 36px; + text-align: left; + + // padding-top: 23px; + // padding-bottom: 50px; + // padding-left: 55px; + // padding-right: 55px; + } + + @include on-desktop { + padding-right: 100px; + padding-left: 100px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..acce114d7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,13 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'header'; +@import 'aside'; +@import 'museum'; +@import 'events'; +@import 'lecture'; +@import 'gallery'; +@import 'subscription'; +@import 'footer'; +@import 'author'; +@import 'normalize'; diff --git a/src/styles/museum.scss b/src/styles/museum.scss new file mode 100644 index 000000000..9e3b01d44 --- /dev/null +++ b/src/styles/museum.scss @@ -0,0 +1,136 @@ +.museum { + @include on-tablet { + padding-bottom: 19px; + } + + &__title { + margin: 0; + padding-top: 20px; + padding-bottom: 20px; + + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + color: #000; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + padding-bottom: 38px; + font-size: 54px; + text-align: left; + } + + @include on-desktop { + padding-bottom: 89px; + font-size: 72px; + } + } + + &__footer { + @include on-desktop { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + } + + &__actions { + display: flex; + align-items: center; + justify-content: center; + + @include on-tablet { + justify-content: start; + } + } + + &__tickets { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 50px; + margin: 0; + border: solid 1px #1a5a4c; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: #0f0e08; + letter-spacing: 0%; + + @include on-tablet { + max-width: 200px; + height: 70px; + } + + @include on-desktop { + width: 200px; + height: 70px; + } + } + + &__tickets-link { + cursor: pointer; + text-decoration: none; + } + + &__tickets-arrow { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border: solid 1px #1a5a4c; + + background-color: #1a5a4c; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + + &__arrow { + width: 24px; + height: 24px; + } + + &__vertical { + display: none; + + @include on-desktop { + display: flex; + flex-direction: column; + gap: 10px; + align-items: center; + + margin-top: 35px; + margin-left: 20px; + + &::after { + content: ''; + width: 1px; + height: 70px; + background-color: #000; + } + } + } + + &__text { + transform: rotate(180deg); + + writing-mode: vertical-rl; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 100%; + color: #687480; + letter-spacing: 0%; + } +} diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 000000000..075e2fbc1 --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,20 @@ +.html { + scroll-behavior: smooth; +} + +body { + margin: 0; + padding: 0; + background-color: #fff; +} + +.body--no-scroll { + overflow: hidden; +} + +.page { + min-width: 320px; + max-width: 1440px; + margin: 0 auto; + padding: 0; +} diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss new file mode 100644 index 000000000..cb459dd3a --- /dev/null +++ b/src/styles/subscription.scss @@ -0,0 +1,159 @@ +.subscription { + position: relative; + + margin-top: 100px; + + @include content-padding-inline; + + background-image: url(../images/subscription-bg.jpg); + background-position: center; + background-size: cover; + + &::before { + content: ''; + + position: absolute; + z-index: 1; + inset: 0; + + background-color: rgba(0, 0, 0, 0.75); + } + + &__container { + position: relative; + z-index: 2; + } + + &__content { + padding-top: 88px; + + @include on-tablet { + padding-top: 82px; + } + + @include on-desktop { + padding-top: 163px; + } + } + + &__title { + margin: 0; + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: #fff; + text-align: center; + letter-spacing: 0%; + + @include on-tablet { + font-size: 48px; + } + } + + &__description { + margin: 0; + padding-top: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: #fff; + text-align: center; + letter-spacing: 0%; + } + + &__form { + display: flex; + justify-content: center; + + padding-top: 50px; + padding-bottom: 88px; + border: 1px solid; + + @include on-tablet { + gap: 16px; + padding-top: 64px; + padding-bottom: 82px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + + padding-top: 72px; + padding-bottom: 163px; + } + } + + &__email { + box-sizing: border-box; + width: 230px; + height: 50px; + margin: 0; + padding-right: 24px; + padding-left: 24px; + border: none; + + @include on-tablet { + width: 374px; + height: 70px; + } + + @include on-desktop { + grid-column: 4/9; + width: auto; + } + } + + &__email:focus { + outline: none; + } + + .subscription__email:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #fff inset; + + -webkit-text-fill-color: #000; + } + + &__email::placeholder { + font-family: Montserrat, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 100%; + color: #687480; + letter-spacing: 0%; + } + + &__button { + cursor: pointer; + + box-sizing: border-box; + width: 50px; + height: 50px; + margin: 0; + padding: 0; + border: none; + + background-color: #f14a27; + + @include on-tablet { + width: 70px; + height: 70px; + } + + @include on-desktop { + grid-column: 9/10; + width: auto; + } + } + + &__arrow { + width: 7.5px; + height: 12px; + object-fit: contain; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..3bd7341c4 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,23 @@ #{$_property}: $_toValue; } } + +@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: 34px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..2dcf19b0d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px;