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..3f2492572 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://SashaGlazko.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..f3650bd02 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,402 @@ - + + + + + - Title + NAMU + + - -

Hello Mate Academy

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

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

+
+
Внесок українських митців у світову культуру 19-20ст
+ Купити квиток +
+
10.08 - 10.10
+
+
+
+ Наречена +
+
+
+ + + +
+
+
+
+
+
+

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

+
Архів виставок
+
+
+
+ angel image +
+
11.07 - 22.09
+

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

+
+

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

+ +
+
+ man image +
+
Діє постійно
+

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

+
+

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

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

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

+
Календар подій
+
+
+
+ angel image +
+
+
14.08 о 13:00
+

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

+
+

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

+ +
+
+
+ angel image +
+
+
16.08 о 13:00
+

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

+
+

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

+ +
Календар подій
+
+
+
+
+
+ +
+
+
+
+
+
+

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

+
+

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

+ +
+
+ silhouette +
+
+
+
+
+
+

Новини

+
Календар подій
+
+
+
+ news photo +
+
+
9 серпня 2019
+

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

+
+
Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу...
+
+
+
+ news 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/angel.png b/src/images/angel.png new file mode 100644 index 000000000..2258d6bf1 Binary files /dev/null and b/src/images/angel.png differ diff --git a/src/images/header-photos/women-photo.png b/src/images/header-photos/women-photo.png new file mode 100644 index 000000000..fc7810884 Binary files /dev/null and b/src/images/header-photos/women-photo.png differ diff --git a/src/images/icons/UA.svg b/src/images/icons/UA.svg new file mode 100644 index 000000000..f5a599448 --- /dev/null +++ b/src/images/icons/UA.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-dow-icon.svg b/src/images/icons/arrow-dow-icon.svg new file mode 100644 index 000000000..cba2a18c6 --- /dev/null +++ b/src/images/icons/arrow-dow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-right.svg b/src/images/icons/arrow-right.svg new file mode 100644 index 000000000..b3ab0c5e7 --- /dev/null +++ b/src/images/icons/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-top.svg b/src/images/icons/arrow-top.svg new file mode 100644 index 000000000..42862ed88 --- /dev/null +++ b/src/images/icons/arrow-top.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..ebf5c7794 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..0050e7dfb --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/menu-burger.svg b/src/images/icons/menu-burger.svg new file mode 100644 index 000000000..0cb275019 --- /dev/null +++ b/src/images/icons/menu-burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/na-mu_favicon.svg b/src/images/icons/na-mu_favicon.svg new file mode 100644 index 000000000..f9d6c858d --- /dev/null +++ b/src/images/icons/na-mu_favicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/telegram.svg b/src/images/icons/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..fc34953ad --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/white-close-icon.svg b/src/images/icons/white-close-icon.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/images/icons/white-close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/img_menu.png b/src/images/img_menu.png new file mode 100644 index 000000000..6554b0849 Binary files /dev/null and b/src/images/img_menu.png differ diff --git a/src/images/man-picture.png b/src/images/man-picture.png new file mode 100644 index 000000000..99716afab Binary files /dev/null and b/src/images/man-picture.png differ diff --git a/src/images/namu-logo.png b/src/images/namu-logo.png new file mode 100644 index 000000000..24c6763df Binary files /dev/null and b/src/images/namu-logo.png differ diff --git a/src/images/news-photo-2.png b/src/images/news-photo-2.png new file mode 100644 index 000000000..111ac2a51 Binary files /dev/null and b/src/images/news-photo-2.png differ diff --git a/src/images/news-photo.png b/src/images/news-photo.png new file mode 100644 index 000000000..0c1858aa6 Binary files /dev/null and b/src/images/news-photo.png differ diff --git a/src/images/person-picture.png b/src/images/person-picture.png new file mode 100644 index 000000000..da5e3754f Binary files /dev/null and b/src/images/person-picture.png differ diff --git a/src/images/silhouette-picture.png b/src/images/silhouette-picture.png new file mode 100644 index 000000000..0a6d8c4f5 Binary files /dev/null and b/src/images/silhouette-picture.png differ diff --git a/src/images/woman-picture.png b/src/images/woman-picture.png new file mode 100644 index 000000000..50aaf2652 Binary files /dev/null and b/src/images/woman-picture.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..7f300b163 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,38 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const dropdowns = document.querySelectorAll('.dropdown'); + + dropdowns.forEach((dropdown) => { + const trigger = dropdown.querySelector('.dropdown__trigger'); + const content = dropdown.querySelector('.dropdown__content'); + + // спочатку ховаємо + content.style.height = '0'; + content.style.overflow = 'hidden'; + content.style.transition = 'height 0.3s ease'; + + trigger.addEventListener('click', (e) => { + e.stopPropagation(); + + if (dropdown.classList.contains('is-open')) { + dropdown.classList.remove('is-open'); + content.style.height = '0'; + } else { + dropdown.classList.add('is-open'); + + const fullHeight = content.scrollHeight; + + content.style.height = `${fullHeight}px`; + } + }); + + // клік поза dropdown закриває його + document.addEventListener('click', (e) => { + if (!dropdown.contains(e.target)) { + dropdown.classList.remove('is-open'); + content.style.height = '0'; + } + }); + }); +}); diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..08b742550 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,27 @@ +.button { + height: 60px; + border: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + background-color: $c-orange; + color: $c-white; + text-decoration: none; + cursor: pointer; + + @include on-tablet { + max-width: 320px; + } + + transition: all 0.3s; + + &:hover { + background-color: $c-dark-orange; + } + + &:active { + background-color: $c-orange; + color: $c-white; + } +} diff --git a/src/styles/blocks/dropdown.scss b/src/styles/blocks/dropdown.scss new file mode 100644 index 000000000..9a8c4ca7d --- /dev/null +++ b/src/styles/blocks/dropdown.scss @@ -0,0 +1,57 @@ +.dropdown { + display: none; + + @include on-tablet { + display: block; + } + + position: relative; // батько для absolute + + &__trigger { + display: flex; + align-items: center; + padding: 0; + cursor: pointer; + background: $c-dark-green; + border: 0; + + &::after { + content: ''; + display: block; + width: 10px; + height: 10px; + background-image: url(/src/images/icons/arrow-dow-icon.svg); + background-size: contain; + background-repeat: no-repeat; + margin-left: 5px; + } + } + + &__content { + position: absolute; // dropdown не впливає на layout + top: 120%; // одразу під кнопкою + right: 0; + width: max-content; + height: 0; + overflow: hidden; + background: $c-dark-green; + border-radius: 4px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: height 0.3s ease; + + ul { + margin: 0; + padding: 0; + list-style: none; + } + + li { + @include raleway-thin; + + font-weight: 450; + padding: 8px 12px; + cursor: pointer; + color: $c-white; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..295a30ee2 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,99 @@ +.events { + display: grid; + + &__content { + display: grid; + row-gap: 60px; + } + + &__wrapper { + display: grid; + gap: 60px; + + @include on-tablet { + gap: 76px; + } + } + + &__article { + @include page-grid; + } + + &__picture { + @include hover(transform, scale(1.05)); + + max-height: 360px; + width: 100%; + grid-column: 1/-1; + object-fit: cover; + + @include on-tablet { + grid-column: span 3; + max-height: 420px; + } + + @include on-desktop { + grid-column: span 6; + max-height: 480px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 20px; + + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__top { + display: grid; + gap: 10px; + } + + &__date { + @include raleway-thin; + + color: $c-orange; + } + + &__title { + font-size: 20px; + color: $c-text; + margin: 0; + + @include playfair-bold; + + @include on-tablet { + font-size: 24px; + } + } + + &__description { + color: $c-dark-gray; + font-size: 16px; + margin: 0; + + @include additional-text; + } + + &__button { + margin-top: 30px; + + @include on-tablet { + min-width: 100%; + } + + @include on-desktop { + min-width: 270px; + } + } +} diff --git a/src/styles/blocks/exibitions.scss b/src/styles/blocks/exibitions.scss new file mode 100644 index 000000000..8ddd57fcf --- /dev/null +++ b/src/styles/blocks/exibitions.scss @@ -0,0 +1,91 @@ +.exibitions { + display: grid; + gap: 60px; + + &__content { + @include page-grid; + + row-gap: 60px; + } + + &__wrapper { + display: grid; + gap: 60px; + + @include on-tablet { + gap: 76px; + } + } + + &__article { + display: grid; + gap: 20px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__picture { + @include hover(transform, scale(1.05)); + + max-height: 360px; + width: 100%; + object-fit: cover; + + @include on-tablet { + max-height: 420px; + } + + @include on-desktop { + max-height: 480px; + } + } + + &__top { + display: grid; + gap: 10px; + } + + &__date { + @include raleway-thin; + + color: $c-orange; + } + + &__title { + font-size: 20px; + color: $c-text; + margin: 0; + + @include playfair-bold; + + @include on-tablet { + font-size: 24px; + } + } + + &__description { + color: $c-dark-gray; + font-size: 16px; + margin: 0; + + @include additional-text; + } + + &__button { + margin-top: 20px; + @include on-tablet { + min-width: 100%; + } + + @include on-desktop { + min-width: 270px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..a9e11a702 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,134 @@ +.footer { + box-sizing: border-box; + padding-block: 34px 30px; + background-color: $c-dark-green; + + &__content { + @include page-grid; + + row-gap: 50px; + align-items: top; + } + + &__block { + gap: 10px; + + @include on-tablet { + gap: 30px; + } + } + + &__contacts { + grid-column: 1/-1; + display: grid; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__title { + @include playfair-bold; + + color: $c-white; + font-size: 18px; + margin: 0; + + @include on-tablet { + font-size: 20px; + } + } + + &__link { + display: block; + color: $c-white; + text-decoration: none; + transition: all 0.3s; + + @include raleway-thin; + + &:hover { + font-weight: bold; + } + } + &__icons { + display: flex; + gap: 20px; + margin-top: 30px; + } + + &__scedule { + grid-column: 1/-1; + display: grid; + + @include on-tablet { + grid-column: span 2; + } + @include on-desktop { + grid-column: span 4; + } + } + + &__info { + @include raleway-thin; + + color: $c-white; + } + + &__nav { + grid-column: 1/-1; + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__nav-list { + gap: 5px; + } + + &__nav-link { + @include raleway-thin; + + font-size: 16px; + + &::after { + bottom: 2px; + } + } + + &__bottom { + grid-column: 1/-1; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__elements { + grid-column: 1/-1; + display: flex; + gap: 20px; + + @include on-desktop { + gap: 100px; + } + } + + &__element { + @include raleway-thin; + + color: $c-white; + + width: 125px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..09ce48a33 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,118 @@ +.header { + background-color: $c-dark-green; + &__content { + @include page-grid; + + gap: 40px; + } + + &__middle { + position: relative; + grid-column: 1/-1; + display: flex; + flex-direction: column; + gap: 30px; + + @include on-tablet { + grid-column: 1/6; + margin-top: 60px; + } + + @include on-desktop { + margin-bottom: 50px; + grid-row: 2; + grid-column: 1/7; + } + } + + &__preface { + display: flex; + flex-direction: column; + gap: 10px; + } + + &__date { + color: $c-white; + + @include raleway-thin; + + font-size: 14px; + } + + &__title { + margin: 0; + color: $c-white; + font-size: 48px; + + @include playfair-bold; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } + } + + &__description { + color: $c-white; + + @include raleway-thin; + } + + &__button { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/4; + margin-top: 10px; + } + + @include on-desktop { + margin-top: 60px; + } + } + + &__line { + display: none; + + @include on-desktop { + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + gap: 20px; + } + + &-date { + @include playfair-bold; + + font-size: 14px; + color: $c-white; + width: 100px; + } + + &-strip { + height: 1px; + width: 100%; + background-color: $c-white; + } + } + + &__photo { + grid-column: 1/-1; + width: 100%; + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-row: 2; + grid-column: 7/-1; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..9920fb2f8 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,43 @@ +.icon { + height: $icon-size; + width: $icon-size; + background-size: contain; + background-repeat: no-repeat; + + @include hover(transform, scale(1.05)); + + &--menu { + background-image: url(/src/images/icons/menu-burger.svg); + transform: translateY(-2px); + } + + &--ua { + background-image: url(/src/images/icons/UA.svg); + height: 18px; + } + + &--close { + background-image: url(/src/images/icons/white-close-icon.svg); + transform: translateY(-2px); + } + + &--facebook { + background-image: url(/src/images/icons/facebook.svg); + } + + &--twitter { + background-image: url(/src/images/icons/twitter.svg); + } + + &--telegram { + background-image: url(/src/images/icons/telegram.svg); + } + + &--instagram { + background-image: url(/src/images/icons/instagram.svg); + } + + &--arrow { + background-image: url(/src/images/icons/arrow-top.svg); + } +} diff --git a/src/styles/blocks/layout-menu.scss b/src/styles/blocks/layout-menu.scss new file mode 100644 index 000000000..b15384573 --- /dev/null +++ b/src/styles/blocks/layout-menu.scss @@ -0,0 +1,61 @@ +.layout-menu { + &__content { + display: grid; + row-gap: 90px; + + @include on-tablet { + row-gap: 120px; + } + + @include on-desktop { + row-gap: 200px; + } + } + + &__button { + width: 270px; + font-size: 16px; + color: $c-orange; + border: 1px solid $c-orange; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + cursor: pointer; + transition: all 0.3s; + + &::after { + content: '⭢'; + padding-left: 4px; + } + + &:hover { + border: 1px solid $c-dark-orange; + color: $c-dark-orange; + } + + &:active { + border: 1px solid $c-orange; + color: $c-orange; + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + } + } + + &--bottom { + display: flex; + width: 100%; + height: 60px; + margin-top: 10px; + + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..6b30183b4 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,83 @@ +.menu { + background-color: $c-dark-green; + + &__content { + @include content-padding; + + @include page-grid; + + grid-template-rows: auto 1fr; + height: 100%; + } + + &__dropdown { + display: block; + } + + &__middle { + grid-column: 1/-1; + display: flex; + flex-direction: column; + gap: 40px; + padding-top: 20px; + @include on-tablet { + gap: 50px; + padding-top: 30px; + } + + @include on-desktop { + grid-column: 1/7; + gap: 70px; + padding-top: 50px; + } + } + + &__elements { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-direction: row; + gap: 124px; + } + } + + &__info { + display: flex; + flex-direction: column; + color: $c-white; + width: auto; + } + + &__explanation { + @include additional-text; + } + + &__context { + @include raleway-bold; + } + + &__line { + height: 1px; + min-width: 100%; + background: $c-white; + } + + &__picture { + width: 100%; + align-self: end; + + display: none; + + @include on-tablet { + display: block; + object-position: center; + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 7/-1; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..41f4e85b8 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,47 @@ +.nav { + &__list { + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: 20px; + } + + &__link { + @include playfair-bold; + + text-decoration: none; + color: $c-white; + font-size: 20px; + position: relative; + display: block; + width: fit-content; + + @include on-tablet { + font-size: 48px; + } + + &::after { + content: ''; + display: block; + height: 1px; + position: absolute; + left: 0; + right: 0; + bottom: 2px; + background-color: $c-white; + + transition: all 0.3s; + transform-origin: left; + transform: scale(0); + + @include on-tablet { + bottom: 10px; + } + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..ea8d955d7 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,63 @@ +.news { + &__content { + @include page-grid; + + gap: 50px; + } + + &__wrapper { + display: grid; + gap: 60px; + + @include on-tablet { + gap: 75px; + } + } + + &__article { + grid-column: 1/-1; + display: grid; + gap: 20px; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__picture { + width: 100%; + height: 0; + height: auto; + + @include hover(transform, scale(1.05)); + } + + &__middle { + display: grid; + gap: 20px; + } + + &__date { + color: $c-text; + + @include raleway-thin; + } + + &__title { + color: $c-text; + margin: 0; + + @include playfair-bold; + } + + &__description { + color: $c-dark-gray; + margin: 0; + + @include raleway-thin; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..8acf4035f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,53 @@ +.page { + scroll-behavior: smooth; + &__body { + margin: 0; + background: $c-gray; + } + + &__menu { + position: fixed; + z-index: 3; + inset: 0; + + transform: translate(-100%); + transition: all 0.3s; + + opacity: 0; + pointer-events: none; + + &:target { + transform: translate(0); + opacity: 1; + pointer-events: all; + } + } + + &__layout-menu { + margin-top: 90px; + + @include on-tablet { + margin-top: 100px; + } + + @include on-desktop { + margin-top: 110px; + } + } + + &__footer { + margin-top: 80px; + + @include on-tablet { + margin-top: 128px; + } + + @include on-desktop { + margin-top: 200px; + } + } +} + +.page:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ +} diff --git a/src/styles/blocks/planning.scss b/src/styles/blocks/planning.scss new file mode 100644 index 000000000..2ae3c40e3 --- /dev/null +++ b/src/styles/blocks/planning.scss @@ -0,0 +1,72 @@ +.planning { + background-color: $c-dark-green; + box-sizing: border-box; + padding-block: 50px; + + @include on-desktop { + padding: 0; + } + + &__content { + @include page-grid; + + align-items: center; + } + + &__info { + display: grid; + gap: 20px; + align-content: flex-start; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + + @include on-desktop { + grid-column: 6/12; + } + } + + &__button { + margin-top: 20px; + width: 100%; + + @include on-tablet { + margin-top: 60px; + } + + @include on-desktop { + margin-top: 50px; + } + } + + &__description { + @include raleway-thin; + + color: $c-white; + } + + &__section-title { + color: $c-white; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } + } + + &__silhouette { + max-height: 800px; + grid-row: 1; + display: none; + + @include on-desktop { + display: inline-block; + grid-column: 1/6; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..ddd281a2c --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,20 @@ +.section-title { + color: $c-text; + display: flex; + justify-content: space-between; + + &__text { + @include playfair-bold; + + margin: 0; + + font-size: 28px; + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } + } +} diff --git a/src/styles/blocks/sing-up.scss b/src/styles/blocks/sing-up.scss new file mode 100644 index 000000000..a6f883670 --- /dev/null +++ b/src/styles/blocks/sing-up.scss @@ -0,0 +1,91 @@ +.sing-up { + &__content { + @include page-grid; + } + + &__section-title { + grid-column: 1/-1; + + @include on-desktop { + grid-column: span 6; + } + } + + &__description { + @include raleway-thin; + + margin: 0; + grid-column: 1/-1; + @include on-desktop { + grid-column: span 6; + margin: auto; + } + } + + &__bottom { + margin-top: 20px; + grid-column: 1/-1; + display: grid; + gap: 30px; + } + + &__email { + width: 100%; + border: 0; + background-color: $c-gray; + + + + &::placeholder { + @include raleway-thin; + } + + &:hover::placeholder { + transition: color 0.3s; + color: $c-orange; + } + + &:focus { + outline: 0; + background-color: $c-gray; + } + } + + &__email-wrapper { + position: relative; + + &::after { + content: ''; + transition: all 0.3s; + width: 100%; + position: absolute; + display: block; + bottom: -8px; + right: 0; + left: 0; + height: 1px; + background-color: $c-text; + + @include on-tablet { + width: 450px; + } + + @include on-desktop { + width: 480px; + } + } + + &:hover::after { + background-color: $c-orange; + } + } +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px #eee inset !important; + -webkit-text-fill-color: #000 !important; + transition: background-color 9999s ease-in-out 0s; +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..8c6c65e7a --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,29 @@ +.top-bar { + grid-column: 1/-1; + + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px; + + @include on-desktop { + padding-top: 26px; + } + + &__logo { + display: flex; + + @include hover(transform, scale(1.05)); + } + + &__photo { + height: 37px; + object-fit: contain; + } + + &__elements { + display: flex; + align-items: center; + gap: 40px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..15f4c789e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/button'; +@import 'blocks/dropdown'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/layout-menu'; +@import 'blocks/section-title'; +@import 'blocks/exibitions'; +@import 'blocks/events'; +@import 'blocks/planning'; +@import 'blocks/news'; +@import 'blocks/sing-up'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..90084b69b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,87 @@ #{$_property}: $_toValue; } } + +@mixin playfair-bold { + font-family: Playfair, serif; + font-weight: 700; + font-style: Bold; + line-height: 125%; + letter-spacing: 0%; +} + +@mixin additional-text { + font-family: Raleway, sans-serif; + font-weight: 400; + line-height: 140%; + letter-spacing: 0%; + vertical-align: middle; +} + +@mixin raleway-thin { + font-family: Raleway, sans-serif; + font-weight: 400; + line-height: 150%; +} + +@mixin raleway-bold { + font-family: Raleway, sans-serif; + font-weight: 600; + line-height: 150%; +} + +@mixin raleway-button { + font-family: Raleway, sans-serif; + font-weight: 500; + line-height: 150%; + text-align: center; + vertical-align: middle; +} + +@mixin on-tablet { + @media (min-width: $tablet-size) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-size) { + @content; + } +} + +@mixin content-padding { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + max-width: 1600px; + margin: 0 auto; + } +} + +.container { + @include content-padding; +} + +@mixin page-grid { + --count: 2; + + display: grid; + gap: 20px; + grid-template-columns: repeat(var(--count), 1fr); + + @include on-tablet { + --count: 6; + + gap: 30px; + } + + @include on-desktop { + --count: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..67e2e6348 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ $c-gray: #eee; +$tablet-size: 640px; +$desktop-size: 1280px; +$icon-size: 24px; +$c-dark-green: #3f5252; +$c-white: #f1f5f4; +$c-orange: #cd4d31; +$c-dark-orange: #af3419; +$c-text: #1c1b29; +$c-dark-gray: #504f5e;