diff --git a/README.md b/README.md index afee6c841..afa844b25 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://Cumacea.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..f0b8bec01 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,943 @@ - + - Title + NAMU + + + - -

Hello Mate Academy

- + +
+
+
+
+ + +
+ + + +
+ +
    +
  • + UA + +
    • +
  • + EN + +
    • +
+
+
+
+ + +
+

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

+ +

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

+ +

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

+
+ + + Купити квиток + + +
+ Girl_from_Podolye_by_V.Tropinin +
+ +
+
10.08 - 10.10
+
+
+
+
+
+ + + +
+
+
+

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

+ +
+
+ + + + Angel_statue + + +

+ 11.07 - 22.09 +

+ +

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

+ +

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

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

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

+ +

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

+ +

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

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

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

+ +
+
+ Photo_of_Pavlo_Gudimov + +
+

+ 14.08 о 13:00 +

+ +

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

+ +

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

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

+ 16.08 о 13:00 +

+ +

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

+ +

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

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

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

+ +

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

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

+ Новини +

+ +
+
+ Pictures_of_winners + +

+ 9 серпня 2019 +

+ +

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

+ +

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

+
+ +
+ Pictures_of_cat + +

+ 9 серпня 2019 +

+ +

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

+ +

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

+
+
+ + + Усі новини +
+ +
+
+ + +
+ + + diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/images/button-arrow/arrow-active.svg b/src/images/button-arrow/arrow-active.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/button-arrow/arrow-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/button-arrow/arrow-hover.svg b/src/images/button-arrow/arrow-hover.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/button-arrow/arrow-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/button-arrow/arrow-right.svg b/src/images/button-arrow/arrow-right.svg new file mode 100644 index 000000000..8110114d4 --- /dev/null +++ b/src/images/button-arrow/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/events/event-1.png b/src/images/events/event-1.png new file mode 100644 index 000000000..4c3bdac48 Binary files /dev/null and b/src/images/events/event-1.png differ diff --git a/src/images/events/event-2.png b/src/images/events/event-2.png new file mode 100644 index 000000000..7c6148d61 Binary files /dev/null and b/src/images/events/event-2.png differ diff --git a/src/images/exhibitions/exhibitions-desktop-image-1.png b/src/images/exhibitions/exhibitions-desktop-image-1.png new file mode 100644 index 000000000..e4dc2a3e3 Binary files /dev/null and b/src/images/exhibitions/exhibitions-desktop-image-1.png differ diff --git a/src/images/exhibitions/exhibitions-desktop-image-2.png b/src/images/exhibitions/exhibitions-desktop-image-2.png new file mode 100644 index 000000000..92590921e Binary files /dev/null and b/src/images/exhibitions/exhibitions-desktop-image-2.png differ diff --git a/src/images/exhibitions/exhibitions-image-1.png b/src/images/exhibitions/exhibitions-image-1.png new file mode 100644 index 000000000..b595c4445 Binary files /dev/null and b/src/images/exhibitions/exhibitions-image-1.png differ diff --git a/src/images/exhibitions/exhibitions-image-2.png b/src/images/exhibitions/exhibitions-image-2.png new file mode 100644 index 000000000..e00c42ffb Binary files /dev/null and b/src/images/exhibitions/exhibitions-image-2.png differ diff --git a/src/images/header-menu-img/header-main-image.png b/src/images/header-menu-img/header-main-image.png new file mode 100644 index 000000000..17c032c57 Binary files /dev/null and b/src/images/header-menu-img/header-main-image.png differ diff --git a/src/images/header-menu-img/menu-main-image.png b/src/images/header-menu-img/menu-main-image.png new file mode 100644 index 000000000..b8ce25c18 Binary files /dev/null and b/src/images/header-menu-img/menu-main-image.png differ diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown.svg b/src/images/icons/dropdown.svg new file mode 100644 index 000000000..dc63ad397 --- /dev/null +++ b/src/images/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu-burger.svg b/src/images/icons/icon-menu-burger.svg new file mode 100644 index 000000000..0cb275019 --- /dev/null +++ b/src/images/icons/icon-menu-burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-menu-close.svg b/src/images/icons/icon-menu-close.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/images/icons/icon-menu-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/logo/favicon.png b/src/images/logo/favicon.png new file mode 100644 index 000000000..3b5c52cba Binary files /dev/null and b/src/images/logo/favicon.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 000000000..4fc1cb264 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/news/news-1.png b/src/images/news/news-1.png new file mode 100644 index 000000000..54cd72148 Binary files /dev/null and b/src/images/news/news-1.png differ diff --git a/src/images/news/news-2.png b/src/images/news/news-2.png new file mode 100644 index 000000000..2771fafc2 Binary files /dev/null and b/src/images/news/news-2.png differ diff --git a/src/images/social-media/facebook.svg b/src/images/social-media/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/social-media/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/instagram.svg b/src/images/social-media/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/social-media/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/telegram.svg b/src/images/social-media/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/social-media/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/x.svg b/src/images/social-media/x.svg new file mode 100644 index 000000000..b7142b7b2 --- /dev/null +++ b/src/images/social-media/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/visit/visit-image.png b/src/images/visit/visit-image.png new file mode 100644 index 000000000..3d7a4c5af Binary files /dev/null and b/src/images/visit/visit-image.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..d49d5a954 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,112 @@ 'use strict'; + +let changeLanguage; +let syncLanguage; + +document.addEventListener('DOMContentLoaded', () => { + const customSelects = document.querySelectorAll('.select'); + const elementsToChange = document.querySelectorAll( + '[data-lang-ua], [data-lang-en]', + ); + const todaySchedule = document.getElementById('today-schedule'); + + const getScheduleText = (lang) => { + const dayIndex = new Date().getDay(); + const isEn = lang.toLowerCase() === 'en'; + const offText = isEn ? 'day off' : 'вихідний'; + + switch (dayIndex) { + case 0: + return '10:00 - 17:00'; + case 1: + case 2: + return offText; + case 3: + return '10:00 - 17:00'; + case 4: + case 5: + return '12:00 - 19:00'; + case 6: + return '11:00 - 18:00'; + default: + return '12:00 - 19:00'; + } + }; + + changeLanguage = (lang) => { + elementsToChange.forEach((el) => { + const text = el.getAttribute(`data-lang-${lang.toLowerCase()}`); + + if (text) { + el.textContent = text; + } + }); + + if (todaySchedule) { + todaySchedule.textContent = getScheduleText(lang); + } + }; + + syncLanguage = (lang) => { + window.localStorage.setItem('selectedLang', lang); + + customSelects.forEach((cs) => { + const btn = cs.querySelector('.select__button'); + + if (btn) { + btn.textContent = lang; + } + }); + + changeLanguage(lang); + }; + + customSelects.forEach((customSelect) => { + const btn = customSelect.querySelector('.select__button'); + const items = customSelect.querySelectorAll('.select__item'); + + btn.addEventListener('click', (e) => { + e.stopPropagation(); + customSelect.classList.toggle('is-open'); + + const expanded = customSelect.classList.contains('is-open'); + + btn.setAttribute('aria-expanded', expanded); + }); + + items.forEach((item) => { + item.addEventListener('click', () => { + const lang = item.getAttribute('data-value'); + + syncLanguage(lang); + customSelect.classList.remove('is-open'); + }); + }); + }); + + document.addEventListener('click', (e) => { + customSelects.forEach((cs) => { + if (!cs.contains(e.target)) { + cs.classList.remove('is-open'); + } + }); + }); + + const initialLang = window.localStorage.getItem('selectedLang') || 'UA'; + + syncLanguage(initialLang); + + const subscribeForm = document.querySelector('.subscribe__form'); + + if (subscribeForm) { + subscribeForm.addEventListener('submit', (e) => { + e.preventDefault(); + subscribeForm.reset(); + + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }); + } +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 33c3ed2b3..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1 +0,0 @@ -// put fonts here diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..f6d5ebcc2 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,15 @@ +.button { + @extend %button; + + cursor: pointer; + + padding-block: 22px; + border: 1px solid $button-main; + + color: $main-color; + + background-color: $button-main; + + @include hover(background-color, $button-hover); + @include active(background-color, $button-active); +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..d0d9cdcaa --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,136 @@ +.events { + scroll-margin-top: 70px; + padding-bottom: 90px; + + @include on-tablet { + padding-bottom: 100px; + } + + @include on-desktop { + padding-bottom: 110px; + } + + &__title { + @extend %h3; + } + + &__container { + display: flex; + flex-direction: column; + gap: 50px; + + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr auto; + gap: 70px; + align-items: center; + + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__layout { + display: grid; + grid-column: 1 / -1; + gap: 60px; + + @include on-tablet { + gap: 30px; + } + } + + &__event { + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__image { + display: grid; + grid-column: 1 / -1; + + aspect-ratio: 3 / 4; + width: 100%; + + object-fit: cover; + + @include hover(transform, scale(1.03)); + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__text { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 5 / -1; + } + } + + &__date { + @extend %main-text; + + color: $button-main; + } + + &__name { + @extend %h4; + + margin-bottom: 10px; + } + + &__description { + @extend %main-text; + + margin-bottom: 20px; + color: $description-color; + } + + &__button { + @include on-tablet { + margin-top: 0; + } + + @include on-desktop { + position: relative; + max-width: 270px; + } + } + + &__secondary-button { + @include on-tablet { + grid-column: 2; + grid-row: 1; + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..3ddbbd833 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,122 @@ +.exhibitions { + scroll-margin-top: -70px; + padding-block: 90px 120px; + + @include on-tablet { + padding-block: 100px 160px; + } + + @include on-desktop { + padding-block: 110px 200px; + } + + &__title { + @extend %h3; + } + + &__container { + display: flex; + flex-direction: column; + gap: 50px; + + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr auto; + gap: 70px; + align-items: center; + + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__layout { + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(2, 1fr); + gap: 60px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__exhibition { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__image { + display: block; + + aspect-ratio: 3 / 4; + width: 100%; + height: 100%; + + object-fit: cover; + + @include hover(transform, scale(1.03)); + + @include on-desktop { + height: 484px; + } + } + + &__date { + @extend %main-text; + + color: $button-main; + } + + &__name { + @extend %h4; + + margin-block: 10px; + } + + &__description { + @extend %main-text; + + margin-bottom: 20px; + color: $description-color; + } + + &__button { + @include on-tablet { + margin-top: auto; + } + + @include on-desktop { + position: relative; + max-width: 270px; + } + } + + &__secondary-button { + @include on-tablet { + grid-column: 2; + grid-row: 1; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..885fbf3ca --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,242 @@ +.footer { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 50px; + + padding: 30px 20px; + + color: $main-color; + + background-color: $header-footer-background; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + padding: 50px 30px 30px 40px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + padding-left: 55px; + } + + &__title { + @extend %h5; + + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__text { + @extend %main-text; + } + + &__contact { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__address { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__num { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__email { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__social { + display: flex; + gap: 20px; + align-items: center; + margin-top: 30px; + + @include on-tablet { + margin-top: 50px; + } + } + + &__social-icon { + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.2)); + + &--facebook { + background-image: url('../images/social-media/facebook.svg'); + } + + &--x { + background-image: url('../images/social-media/x.svg'); + } + + &--telegram { + background-image: url('../images/social-media/telegram.svg'); + } + + &--instagram { + background-image: url('../images/social-media/instagram.svg'); + } + } + + &__schedule { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / 5; + } + + @include on-desktop { + grid-column: 5 / 9; + } + } + + &__nav { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__nav-item { + margin-bottom: 5px; + + @include on-tablet { + margin-bottom: 10px; + } + } + + &__nav-link { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__bottom { + display: flex; + grid-column: 1 / -1; + justify-content: space-between; + margin-top: 10px; + + @include on-desktop { + margin-top: 20px; + } + } + + &__terms { + @extend %additional-text; + + display: flex; + gap: 22px; + + @include on-desktop { + gap: 102px; + } + } + + &__arrow { + display: block; + + width: 30px; + height: 30px; + + background-image: url('../images/icons/arrow-up.svg'); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..48428c48d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,144 @@ +.header { + position: relative; + overflow: hidden; + color: $main-color; + background-color: $header-footer-background; + + &__container { + max-width: 1600px; + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__content { + 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); + } + } + + &__top-bar { + grid-column: 1 / -1; + margin-bottom: 70px; + } + + &__select { + display: none; + + @include on-tablet { + display: block; + } + } + + &__info { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: span 6; + margin-bottom: 80px; + } + } + + &__additional-text { + @extend %additional-text; + } + + &__title { + @extend %h1; + + margin-bottom: 20px; + } + + &__main-text { + @extend %main-text; + } + + &__button { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 70px; + } + + @include on-desktop { + grid-row: 3; + margin-bottom: 100px; + } + } + + &__image-container { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + } + + &__image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + + @include on-desktop { + position: absolute; + right: 0; + bottom: 0; + + width: 625px; + height: 663px; + + object-fit: contain; + } + } + + &__bottom { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1 / 7; + gap: 20px; + align-items: center; + } + } + + &__date { + @extend %h6; + + min-width: fit-content; + } + + &__line { + width: 100%; + border: none; + border-top: 1px solid $main-color; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..159bcfd49 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,179 @@ +.menu { + pointer-events: none; + + position: fixed; + top: 0; + left: 0; + + overflow: auto; + + width: 100%; + height: 100vh; + + color: $main-color; + + opacity: 0; + background-color: $header-footer-background; + + transition: opacity 0.4s ease; + + &:target { + pointer-events: all; + opacity: 1; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + + max-width: 1600px; + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + padding-inline: 40px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + padding-inline: 55px; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 40px; + + @include on-tablet { + gap: 50px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-direction: row; + gap: 120px; + } + } + + &__additional-text { + @extend %additional-text; + } + + &__bold-text { + @extend %additional-bold; + } + + &__nav-list { + @extend %h3; + + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: 0; + left: 0; + + width: 0; + height: 1px; + + background-color: $main-color; + + transition: width 0.3s ease; + } + + &:hover::after { + width: 100%; + } + } + + &__top-bar { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include on-desktop { + margin-bottom: 40px; + } + } + + &__icons { + display: flex; + flex-direction: row-reverse; + + @include on-tablet { + flex-direction: row; + } + } + + &__image-container { + grid-column: 2 / -2; + } + + &__image { + display: none; + + @include on-tablet { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + + @include on-desktop { + position: absolute; + right: 0; + bottom: 0; + + width: 625px; + height: 663px; + + object-fit: contain; + } + } + } + + &__line { + width: 100%; + margin-right: auto; + margin-left: 0; + border: none; + border-top: 1px solid $main-color; + + @include on-desktop { + width: 50%; + } + } + + &__button { + @include on-tablet { + width: 50%; + margin-bottom: 30px; + } + + @include on-desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..3e02c48e9 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,104 @@ +.news { + scroll-margin-top: -70px; + padding-block: 90px 120px; + + @include on-tablet { + padding-block: 100px 160px; + } + + @include on-desktop { + padding-block: 110px 200px; + } + + &__title { + @extend %h3; + } + + &__container { + display: flex; + flex-direction: column; + gap: 50px; + + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr auto; + gap: 70px; + align-items: center; + + padding-inline: 40px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__layout { + display: grid; + grid-column: 1 / -1; + grid-template-columns: repeat(2, 1fr); + gap: 50px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__event { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__image { + aspect-ratio: 3 / 3; + width: 100%; + margin-bottom: 20px; + object-fit: cover; + + @include hover(transform, scale(1.03)); + + @include on-desktop { + height: 370px; + } + } + + &__date { + @extend %main-text; + } + + &__name { + @extend %h5; + + margin-bottom: 20px; + } + + &__description { + @extend %main-text; + + color: $description-color; + } + + &__secondary-button { + @include on-tablet { + grid-column: 2; + grid-row: 1; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..4a9f0c05c --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page { + scroll-behavior: smooth; + color: $text-color; + background-color: $main-color; + + &__body:has(.menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/secondary-button.scss b/src/styles/blocks/secondary-button.scss new file mode 100644 index 000000000..507e3ae50 --- /dev/null +++ b/src/styles/blocks/secondary-button.scss @@ -0,0 +1,49 @@ +.secondary-button { + @extend %additional-bold; + + cursor: pointer; + + display: flex; + grid-column: 1 / -1; + gap: 8px; + align-items: center; + justify-content: center; + + padding-block: 22px; + border: 1px solid $button-main; + + color: $button-main; + text-align: center; + + background-color: $main-color; + + @include on-tablet { + width: 210px; + } + + @include on-desktop { + min-width: 270px; + } + + &__arrow { + width: 20px; + height: 20px; + + background-image: url(../images/button-arrow/arrow-right.svg); + background-repeat: no-repeat; + background-position: center; + + .secondary-button:hover & { + background-image: url(../images/button-arrow/arrow-hover.svg); + } + + .secondary-button:active & { + background-image: url(../images/button-arrow/arrow-active.svg); + } + } + + @include hover(color, $button-hover); + @include hover(border-color, $button-hover); + @include active(color, $button-active); + @include active(border-color, $button-active); +} diff --git a/src/styles/blocks/select.scss b/src/styles/blocks/select.scss new file mode 100644 index 000000000..f6c75ee2e --- /dev/null +++ b/src/styles/blocks/select.scss @@ -0,0 +1,81 @@ +.select { + position: relative; + width: 70px; + + &__button { + @extend %additional-bold; + + cursor: pointer; + + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + border: none; + + color: $main-color; + text-align: left; + + background: transparent; + + @include hover(transform, scale(1.1)); + + &::after { + content: ''; + + display: block; + + width: 30px; + height: 30px; + + background-image: url('../images/icons/dropdown.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s; + } + } + + &__list { + position: absolute; + z-index: 10; + top: 100%; + left: 0; + transform: translateY(-10px); + + width: 100%; + margin: 0; + padding: 0; + + list-style: none; + + visibility: hidden; + opacity: 0; + background: $header-footer-background; + + transition: all 0.3s; + } + + &__item { + @extend %additional-bold; + + cursor: pointer; + padding: 10px; + + @include hover(background-color, $button-main); + @include hover(color, $main-color); + } + + &.is-open { + .select__list { + transform: translateY(0); + visibility: visible; + opacity: 1; + } + + .select__button::after { + transform: rotate(180deg); + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..b114b5f53 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,118 @@ +.subscribe { + padding: 0 20px 80px; + + @include on-tablet { + padding: 0 40px 128px; + } + + @include on-desktop { + padding: 0 55px 200px; + } + + &__container { + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__title { + @extend %h3; + + grid-column: 1 / -1; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 7; + margin-bottom: 0; + } + } + + &__description { + @extend %main-text; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__form { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 30px; + + margin-top: 50px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 40px; + } + } + + &__input { + @extend %additional-bold; + + border: none; + border-bottom: 1px solid $text-color; + background-color: transparent; + outline: none; + + &::placeholder { + @extend %main-text; + + color: $text-color; + transition: color 0.3s; + } + + &:hover::placeholder { + color: $button-main; + } + + @include hover(border-color, $button-main); + + &:focus { + border-color: $button-hover; + color: $button-hover; + } + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__button { + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..ac92dc690 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,44 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 20px; + + &__logo { + display: inline-flex; + + @include hover(transform, scale(1.1)); + } + + &__icons { + display: flex; + gap: 30px; + align-items: center; + } + + &__icon-menu { + display: block; + + width: 30px; + height: 30px; + + background-image: url('../images/icons/icon-menu-burger.svg'); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.1)); + } + + &__icon-close { + display: block; + + width: 30px; + height: 30px; + + background-image: url('../images/icons/icon-menu-close.svg'); + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..b69d1a37a --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,91 @@ +.visit { + position: relative; + padding: 50px 20px; + color: $main-color; + background-color: $header-footer-background; + + @include on-tablet { + padding: 80px 0 80px 40px; + } + + @include on-desktop { + padding: 0; + } + + &__container { + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + grid-column: 2 / -2; + grid-template-columns: repeat(12, 1fr); + padding-block: 205px; + } + } + + &__image { + display: none; + + @include on-desktop { + position: absolute; + bottom: 0; + left: 0; + + display: block; + + height: 100%; + } + } + + &__title { + @extend %h2; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 5 / -1; + } + } + + &__description { + @extend %main-text; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 5 / -3; + } + } + + &__button { + margin-top: 20px; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 40px; + } + + @include on-desktop { + grid-column: 5 / -1; + width: 270px; + margin-top: 50px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..a34d2926e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,17 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'utils/mixins'; +@import 'utils/variables'; +@import 'utils/reset'; +@import 'utils/extends'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/select'; +@import 'blocks/menu'; +@import 'blocks/button'; +@import 'blocks/secondary-button'; +@import 'blocks/exhibitions'; +@import 'blocks/events'; +@import 'blocks/visit'; +@import 'blocks/news'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/extends.scss b/src/styles/utils/extends.scss new file mode 100644 index 000000000..a597d0f8e --- /dev/null +++ b/src/styles/utils/extends.scss @@ -0,0 +1,100 @@ +%h1 { + font-family: 'Playfair Display', serif; + font-size: 48px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 106px; + } +} + +%h2 { + font-family: 'Playfair Display', serif; + font-size: 38px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +%h3 { + font-family: 'Playfair Display', serif; + font-size: 28px; + font-weight: 700; + line-height: 125%; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 58px; + line-height: 120%; + } +} + +%h4 { + font-family: 'Playfair Display', serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + + @include on-tablet { + font-size: 24px; + line-height: 125%; + } +} + +%h5 { + font-family: 'Playfair Display', serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; +} + +%h6 { + font-family: 'Playfair Display', serif; + font-size: 14px; + font-weight: 700; + line-height: 125%; +} + +%additional-text { + font-family: Raleway, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; +} + +%main-text { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; +} + +%button { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 100%; + text-align: center; +} + +%additional-bold { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; +} diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..8a23461f7 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,37 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin active($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:active { + #{$_property}: $_toValue; + } +} + +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-large-desktop { + @media screen and (min-width: 1440px) { + @content; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 000000000..b4a172b3f --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,42 @@ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus, +select:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 50px $main-color inset !important; + transition: background-color 0.3s ease-in-out 0s; + + -webkit-text-fill-color: $text-color !important; +} + +input:-webkit-autofill:focus, +input:-webkit-autofill:active, +select:-webkit-autofill:focus, +select:-webkit-autofill:active { + border-bottom: 1px solid $button-hover !important; +} + +body, +html, +ul, +p, +h1, +h2, +h3, +h4, +h5 { + margin: 0; + padding: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..8d95ddb6d --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,9 @@ +$header-footer-background: #3f5252; +$main-color: #f1f5f4; +$text-color: #1c1b29; +$description-color: #504f5e; +$image-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +$button-main: #cd4d31; +$button-hover: #af3419; +$button-active: #ea340d; +$button-disabled: #dd836f;