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 afee6c841..8507361dc 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 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_2/). + [DEMO LINK](https://kristinakovalchuk.github.io/Museum_2/). 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..93f0e3cb8 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,367 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + NAMU + + + + -

Hello Mate Academy

+ +
+
+ +
+ + +
+ +
+

UA

+ +
+ + +
+
+ +
+ +
+

10 серпня - 10 листопада

+

Мистецтво ХІХ - ХХ ст.

+

Внесок українських митців у світову культуру 19-20 ст.

+
+ + Купити квиток + + photo + +
+

10.08 - 10.10

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

Актуальні виставки

+ +
+
+ + photo + +
+

11.07 - 22.09

+

Кураторська виставка “Ангели”

+

Виставковий проект «Ангели» – знакова подія для української культури і водночас наймасштабніший...

+ Купити квиток +
+ +
+
+ +
+
+ + photo + +
+

Діє постійно

+

Мистецтво ХХ ст. — XXI ст.

+

Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського та інших митців.

+ Купити квиток +
+ +
+
+ +
+ Архів виставок + +
+ +
+
+
+ +
+
+
+ +

Найближчі події

+
+
+ photo +
+

14.08 о 13:00

+

Кураторські екскурсії від Павла Гудімова

+

+ Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься... +

+ Зареєструватись +
+
+
+ +
+
+ photo + +
+

16.08 о 13:00

+

Майстер-клас “Подорож до Австралії”

+

+ Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія. +

+ Зареєструватись +
+
+
+ +
+ Календар подій + +
+ +
+
+
+ +
+
+
+ + photo + +
+

Сплануйте
візит до музею

+

+ Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом +

+
+ + Почати + +
+
+
+ +
+
+
+ +

Новини

+ +
+
+ + photo + +
+

9 серпня 2019

+

Оголошення переможця

+

Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...

+
+ +
+
+ +
+
+ + photo + +
+

9 серпня 2019

+

Міжнародний день котів

+

Музей з левами не може просто так взяти і пропустити Міжнародний день котів!

+
+ +
+
+ +
+ Усі новини + +
+ +
+
+
+ + + +
+ + diff --git a/package-lock.json b/package-lock.json index 5d3b07d5a..6b9fd05c4 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 9e79dfff1..4cd3200dd 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/NAMU-white.svg b/src/images/NAMU-white.svg new file mode 100644 index 000000000..4fc1cb264 --- /dev/null +++ b/src/images/NAMU-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/event-future/img_05.svg b/src/images/event-future/img_05.svg new file mode 100644 index 000000000..64e3829f4 --- /dev/null +++ b/src/images/event-future/img_05.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/event-future/img_06.svg b/src/images/event-future/img_06.svg new file mode 100644 index 000000000..cce16b305 --- /dev/null +++ b/src/images/event-future/img_06.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/event-img/image1.svg b/src/images/event-img/image1.svg new file mode 100644 index 000000000..67bee8991 --- /dev/null +++ b/src/images/event-img/image1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/event-img/image2.svg b/src/images/event-img/image2.svg new file mode 100644 index 000000000..5d5d860aa --- /dev/null +++ b/src/images/event-img/image2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/header-img/header-img.png b/src/images/header-img/header-img.png new file mode 100644 index 000000000..300c46163 Binary files /dev/null and b/src/images/header-img/header-img.png differ diff --git a/src/images/header-img/img__plan.svg b/src/images/header-img/img__plan.svg new file mode 100644 index 000000000..e2c5bc627 --- /dev/null +++ b/src/images/header-img/img__plan.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/header-img/img_menu.png b/src/images/header-img/img_menu.png new file mode 100644 index 000000000..104fbb93b Binary files /dev/null and b/src/images/header-img/img_menu.png differ diff --git a/src/images/icon/Icon-arrow.svg b/src/images/icon/Icon-arrow.svg new file mode 100644 index 000000000..1a3b28921 --- /dev/null +++ b/src/images/icon/Icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/Icon-close.svg b/src/images/icon/Icon-close.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/images/icon/Icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/Union.svg b/src/images/icon/Union.svg new file mode 100644 index 000000000..cba2a18c6 --- /dev/null +++ b/src/images/icon/Union.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/facebook-icon-m.svg b/src/images/icon/facebook-icon-m.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icon/facebook-icon-m.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/instagram-icon-m.svg b/src/images/icon/instagram-icon-m.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icon/instagram-icon-m.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/menu.svg b/src/images/icon/menu.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/images/icon/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/scroll up.svg b/src/images/icon/scroll up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icon/scroll up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/telegram.svg b/src/images/icon/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icon/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icon/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-black.svg b/src/images/logo-black.svg new file mode 100644 index 000000000..8b9dc25ef --- /dev/null +++ b/src/images/logo-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/news-img/img_08.svg b/src/images/news-img/img_08.svg new file mode 100644 index 000000000..c066085f1 --- /dev/null +++ b/src/images/news-img/img_08.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/news-img/img_09.svg b/src/images/news-img/img_09.svg new file mode 100644 index 000000000..126687153 --- /dev/null +++ b/src/images/news-img/img_09.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 000000000..f2668a67d --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,92 @@ +.card { + &__img { + width: 100%; + height: 100%; + object-fit: cover; + @include hover(transform, scale(1.02)); + + cursor: pointer; + + @include on-tablet { + max-height: 450px; + } + + @include on-desktop { + max-height: 490px; + } + } + + &__date { + margin: 20px 0 0; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + color: $orange-main-color; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 125%; + color: $main-title-color; + margin-block: 10px 20px; + + @include on-tablet { + height: 60px; + font-size: 24px; + } + + @include on-desktop { + height: auto; + font-size: 24px; + } + } + + &__description { + margin: 0 0 30px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + color: $main-text-description-color; + + @include on-tablet { + height: 96px; + } + + @include on-desktop { + height: 48px; + } + } + + &__button { + display: flex; + text-decoration: none; + width: 100%; + height: 60px; + justify-content: center; + align-items: center; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1; + margin: 0; + color: $white-main-color; + background-color: $orange-main-color; + grid-column: 1 / -1; + cursor: pointer; + + @include hover(transform, scale(1.07)); + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + width: 50%; + } + } +} diff --git a/src/styles/event-now.scss b/src/styles/event-now.scss new file mode 100644 index 000000000..af7ed3188 --- /dev/null +++ b/src/styles/event-now.scss @@ -0,0 +1,102 @@ +.event-now { + margin-top: 90px; + margin-bottom: 120px; + + @include on-tablet { + margin-top: 100px; + margin-bottom: 160px; + } + + @include on-desktop { + margin-top: 110px; + margin-bottom: 200px; + } + + &__content { + @include page-grid; + + align-items: stretch; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 1.25; + margin: 0 0 60px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 40px; + margin: 0 0 75px; + } + + @include on-desktop { + grid-column: 1 / 6; + font-size: 48px; + line-height: 1.2; + margin: 0 0 71px; + } + } + + &__card { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__button { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + box-sizing: border-box; + + height: 60px; + border: 1px solid $orange-main-color; + margin-top: 30px; + + grid-column: 1 / -1; + + @include hover(transform, scale(1.07)); + + cursor: pointer; + + @include on-tablet { + margin-top: 0; + grid-row: 1; + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + margin-top: 0; + } + + &__text { + color: $orange-main-color; + text-decoration: none; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1; + } + } +} + +.event-now__card + .event-now__card { + margin-top: 60px; + + @include on-tablet { + margin-top: 0; + } +} diff --git a/src/styles/follow.scss b/src/styles/follow.scss new file mode 100644 index 000000000..2198633b6 --- /dev/null +++ b/src/styles/follow.scss @@ -0,0 +1,102 @@ +.follow { + margin-bottom: 80px; + + @include on-tablet { + margin-bottom: 128px; + } + + &__content { + @include page-grid; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 40px; + line-height: 1.25; + color: $main-title-color; + margin: 0 0 20px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + margin: 0; + grid-column: 1 / 7; + } + } + + &__description { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + color: $main-title-color; + margin: 0; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__input { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + + width: 100%; + color: $main-title-color; + background-color: $c-gray; + border: 0; + border-bottom: 1px solid $main-title-color; + margin-block: 50px 30px; + outline: none; + box-shadow: none; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + margin-block: 50px 40px; + grid-column: 1 / 6; + } + + &::placeholder { + color: $main-title-color; + } + + &:focus { + outline: none; + border: none; + box-shadow: none; + } + } + + &__button { + margin: 0; + border: none; + background-color: $orange-main-color; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-row: 3; + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..4483d4f66 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,147 @@ +.footer { + background-color: $bg-main-color; + color: $white-main-color; + padding-block: 34px 30px; + + @include on-tablet { + padding-block: 50px 30px; + } + + &__content { + @include page-grid; + } + + &__title { + color: $white-main-color; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 1.5; + text-decoration: none; + margin: 0 0 10px; + + @include on-tablet { + margin: 0 0 30px; + } + } + + &__item { + position: relative; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + margin: 0; + text-decoration: none; + color: $white-main-color; + } + + &__contact { + grid-column: 1 /-1; + display: flex; + flex-direction: column; + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 1 / 3; + } + + @include on-desktop { + margin-bottom: 72px; + grid-column: 1 / 4; + } + } + + &__schedule { + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 3 / 5; + } + + @include on-desktop { + grid-column: 5 / 8; + } + + &__list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0 0 50px; + + @include on-tablet { + margin: 0; + } + } + } + + &__icons { + margin-top: 30px; + display: flex; + margin-bottom: 50px; + gap: 20px; + + @include on-tablet { + margin-top: 50px; + margin-bottom: 0; + } + } + + &__menu { + margin-bottom: 60px; + grid-column: 1 /-1; + + @include on-tablet { + margin-bottom: 0; + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 9 / 11; + } + + &__list { + display: flex; + flex-direction: column; + list-style: none; + gap: 5px; + padding: 0; + margin: 30 0 0; + } + } + + &__bottom { + grid-column: 1 /-1; + + display: flex; + align-items: center; + justify-content: space-between; + } + + &__text { + display: flex; + gap: 22px; + justify-content: space-between; + + &__item { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 1.4; + text-align: center; + + margin: 0; + } + + @include on-tablet { + justify-content: left; + gap: 22px; + } + + @include on-desktop { + gap: 102px; + } + } +} diff --git a/src/styles/future-event.scss b/src/styles/future-event.scss new file mode 100644 index 000000000..ac3be0b29 --- /dev/null +++ b/src/styles/future-event.scss @@ -0,0 +1,141 @@ +.future-event { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 110px; + } + + &__content { + @include page-grid; + + align-items: stretch; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 1.25; + margin: 0 0 60px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + font-size: 40px; + margin: 0 0 70px; + } + + @include on-desktop { + grid-column: 1 / 6; + font-size: 48px; + line-height: 1.2; + } + } + + &__card { + grid-column: 1 / -1; + + &__content { + @include page-grid; + + width: 100%; + } + + &__title { + @include on-tablet { + height: 90px; + } + + @include on-desktop { + height: auto; + } + } + + &__description { + @include on-tablet { + height: 96px; + } + + @include on-desktop { + height: 48px; + } + } + } + + &__img { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + margin: 0; + height: 422px; + } + @include on-desktop { + grid-column: 1 / 5; + height: 475px; + } + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + } + @include on-desktop { + grid-column: 5 / 11; + } + } + + &__button { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + box-sizing: border-box; + + height: 60px; + border: 1px solid $orange-main-color; + margin-top: 30px; + + grid-column: 1 / -1; + + @include on-tablet { + margin-top: 0; + grid-row: 1; + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + margin-top: 0; + } + + &__text { + color: $orange-main-color; + text-decoration: none; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1; + } + } +} + +.future-event__card + .future-event__card { + margin-top: 60px; + + @include on-tablet { + margin-top: 70px; + } + + @include on-desktop { + margin-top: 60px; + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..78f71e7bc --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,165 @@ +.header { + display: flex; + flex-direction: column; + background-color: $bg-main-color; + color: $white-main-color; + + &__bottom { + @include page-grid; + + align-items: start; + + margin-top: 50px; + + @include on-tablet { + margin-top: 99px; + } + + @include on-tablet { + margin-top: 47px; + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + padding-top: 43px; + grid-column: 1 / 6; + grid-row: 1; + } + } + + &__img { + display: flex; + margin-inline: auto; + object-fit: contain; + + width: 245px; + height: 273px; + + grid-column: 1 / -1; + + @include on-tablet { + margin-inline: 0; + width: 100%; + height: 494px; + grid-column: 2 / 6; + } + + @include on-desktop { + grid-row: 1 / 4; + width: 100%; + min-height: 100%; + grid-column: 7 / -1; + } + } + + &__button { + display: flex; + text-decoration: none; + width: 100%; + height: 60px; + justify-content: center; + align-items: center; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1; + margin: 0; + color: $white-main-color; + background-color: $orange-main-color; + + margin-block: 40px; + grid-column: 1 / -1; + + @include hover(transform, scale(1.07)); + + @include on-tablet { + margin-block: 50px 70px; + grid-column: 1 / 4; + } + + @include on-desktop { + margin-block: 81px 135px; + grid-row: 2; + align-self: start; + } + } + + &__date { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 1.4; + margin: 0; + + &-small { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 1.25; + width: 100px; + margin: 0; + opacity: 0.7; + } + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 48px; + line-height: 1; + + margin-block: 10px 30px; + + @include on-tablet { + margin-block: 10px 20px; + font-size: 72px; + } + + @include on-desktop { + margin-block: 10px 30px; + font-size: 96px; + } + } + + &__description { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + margin: 0; + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 100%; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: rgba($color: $white-main-color, $alpha: 0.3); + } + + &__on-desktop { + grid-column: 1 / 7; + grid-row: 3; + + display: none; + margin-bottom: 50px; + gap: 20px; + justify-content: space-between; + align-items: center; + + @include on-desktop { + display: flex; + } + } + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..b1b0ce20e --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,66 @@ +.icon { + height: 22px; + width: 22px; + + background-repeat: no-repeat; + background-size: cover; + + @include hover(transform, scale(1.2)); + + &--menu { + width: 25px; + height: 20px; + background-image: url('../images/icon/menu.svg'); + + @include on-tablet { + height: 30px; + width: 30px; + } + } + + &--close { + background-image: url('../images/icon/Icon-close.svg'); + } + + &--arrow { + width: 8px; + height: 4.6px; + background-image: url('../images/icon/Union.svg'); + } + + &--arrow-right { + width: 20px; + height: 20px; + background-image: url('../images/icon/Icon-arrow.svg'); + } + + &--facedook { + height: 20px; + width: 20px; + background-image: url('../images/icon/facebook-icon-m.svg'); + } + + &--twitter { + height: 20px; + width: 20px; + background-image: url('../images/icon/twitter.svg'); + } + + &--telegram { + height: 20px; + width: 20px; + background-image: url('../images/icon/telegram.svg'); + } + + &--instagram { + height: 20px; + width: 20px; + background-image: url('../images/icon/instagram-icon-m.svg'); + } + + &--footer-arrow { + height: 30px; + width: 30px; + background-image: url('../images/icon/scroll\ up.svg'); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..771e245dd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,29 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './header'; +@import './icon'; +@import './top-bar'; +@import './menu'; +@import './event-now'; +@import './card'; +@import './future-event'; +@import './plan'; +@import './news'; +@import './follow'; +@import './footer'; body { background: $c-gray; + margin: 0; + min-width: 320px; +} + +.container { + max-width: 1440px; + @include content-padding-inline; +} + +html { + scroll-behavior: smooth; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..37950d3e9 --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,213 @@ +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + background-color: $bg-main-color; + height: 100%; + + transition: all 0.5s; + transform: translateX(-100%); + + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + + &__bottom { + @include page-grid; + + align-items: start; + margin-top: 10px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 14px; + } + } + + &__schedule { + margin-bottom: 20px; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 50px; + grid-column: 1 / 3; + grid-row: 1; + } + } + + &__address { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + grid-column: 3 / 6; + grid-row: 1; + } + } + + &__nav { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 7; + } + + &-list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &-link { + position: relative; + text-decoration: none; + color: $white-main-color; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + + line-height: 1.5; + + @include on-tablet { + font-size: 48px; + line-height: 1.2; + } + + &::after { + content: ''; + position: absolute; + left: 50%; + bottom: -2px; + width: 0; + height: 1px; + background-color: $white-main-color; + transition: + width 0.3s ease, + left 0.3s ease; + } + + &:hover::after { + width: 100%; + left: 0; + } + } + } + + &__img { + display: none; + margin-inline: auto; + object-fit: contain; + + grid-column: 1 / -1; + + @include on-tablet { + display: flex; + margin-inline: 0; + width: 100%; + height: 466px; + grid-column: 2 / 6; + } + + @include on-desktop { + grid-row: 1 / 5; + width: 100%; + min-height: 100%; + grid-column: 7 / -1; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: $white-main-color; + margin-block: 40px; + + grid-column: 1 / -1; + + @include on-tablet { + margin-block: 50px; + } + + @include on-desktop { + margin-block: 60px; + grid-column: 1 / 7; + } + } + + &__button { + display: flex; + text-decoration: none; + width: 100%; + height: 60px; + justify-content: center; + align-items: center; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1; + margin: 0; + color: $white-main-color; + background-color: $orange-main-color; + + grid-column: 1 / -1; + @include hover(transform, scale(1.07)); + + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 108px; + } + } + + &__title { + margin: 0; + color: $white-main-color; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 1.4; + } + + &__text { + text-decoration: none; + margin: 0; + color: $white-main-color; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 1.5; + } +} + +html:has(.menu:target), +body:has(.menu:target) { + overflow: hidden; +} diff --git a/src/styles/news.scss b/src/styles/news.scss new file mode 100644 index 000000000..a3a039294 --- /dev/null +++ b/src/styles/news.scss @@ -0,0 +1,39 @@ +.news { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } + + &__date { + color: $main-title-color; + } + + &__title { + @include on-desktop { + margin: 0 0 55px; + } + } + + &__description { + margin-bottom: 0; + width: 100%; + } + + &__title-card { + margin-top: 0; + height: 30px; + } +} + +.news__card + .news__card { + margin-top: 60px; + + @include on-tablet { + margin-top: 0; + } +} diff --git a/src/styles/plan.scss b/src/styles/plan.scss new file mode 100644 index 000000000..321a18399 --- /dev/null +++ b/src/styles/plan.scss @@ -0,0 +1,96 @@ +.plan { + background-color: $bg-main-color; + padding-block: 50px; + margin-bottom: 90px; + + @include on-tablet { + padding-block: 80px; + margin-bottom: 120px; + } + + @include on-desktop { + padding-block: 0; + margin-bottom: 110px; + } + + &__content { + @include page-grid; + + align-items: end; + } + + &__img { + display: none; + object-fit: contain; + height: 800px; + margin-inline: -55px; + + @include on-desktop { + display: flex; + grid-column: 1 / 6; + grid-row: 1/ 3; + } + } + + &__wrapper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 6 / -1; + } + } + + &__button { + margin: 0; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 6 / 9; + align-self: start; + } + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 38px; + line-height: 1; + color: $white-main-color; + margin: 0; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + height: 200px; + } + } + + &__text { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + margin-block: 20px 40px; + color: $white-main-color; + + @include on-tablet { + margin-block: 20px 60px; + } + + @include on-desktop { + margin-block: 10px 50px; + max-width: 470px; + } + } +} diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 000000000..17374b41f --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,45 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px; + + @include on-tablet { + padding-block: 26px; + } + + &__logo { + margin: 0; + width: 123px; + height: 40px; + + @include on-tablet { + width: 124px; + height: 37px; + } + } + + &__icon { + display: flex; + gap: 30px; + } + + &__lang { + display: flex; + align-items: center; + gap: 5px; + + &-text { + margin: 0; + color: $white-main-color; + } + + &__header { + display: none; + + @include on-tablet { + display: flex; + } + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..dea183c5c 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,46 @@ #{$_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: 39px; + } + + @include on-desktop { + padding-inline: 55px; + margin-inline: auto; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + column-gap: 30px; + + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..05e2fc3a3 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ $c-gray: #eee; +$white-main-color: #f1f5f4; +$bg-main-color: #3f5252; +$orange-main-color: #cd4d31; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$main-title-color: #1c1b29; +$main-text-description-color: #504f5e;