diff --git a/src/images/background-images/booking-image.png b/src/images/background-images/booking-image.png new file mode 100644 index 000000000..068626edb Binary files /dev/null and b/src/images/background-images/booking-image.png differ diff --git a/src/images/background-images/header-image-desktop.png b/src/images/background-images/header-image-desktop.png new file mode 100644 index 000000000..83fe4490d Binary files /dev/null and b/src/images/background-images/header-image-desktop.png differ diff --git a/src/images/background-images/header-image.png b/src/images/background-images/header-image.png new file mode 100644 index 000000000..0b8def63c Binary files /dev/null and b/src/images/background-images/header-image.png differ diff --git a/src/images/background-images/menu-image.png b/src/images/background-images/menu-image.png new file mode 100644 index 000000000..301f6e385 Binary files /dev/null and b/src/images/background-images/menu-image.png differ diff --git a/src/images/dropdown-arrow.png b/src/images/dropdown-arrow.png new file mode 100644 index 000000000..83b457466 Binary files /dev/null and b/src/images/dropdown-arrow.png differ diff --git a/src/images/icons/button-arrow-active.svg b/src/images/icons/button-arrow-active.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/icons/button-arrow-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/button-arrow-hower.svg b/src/images/icons/button-arrow-hower.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/icons/button-arrow-hower.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/button-arrow.svg b/src/images/icons/button-arrow.svg new file mode 100644 index 000000000..602500e73 --- /dev/null +++ b/src/images/icons/button-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/favicon-museum.svg b/src/images/icons/favicon-museum.svg new file mode 100644 index 000000000..7ca7f82e7 --- /dev/null +++ b/src/images/icons/favicon-museum.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..688f77828 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-telegram.svg b/src/images/icons/icon-telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icons/icon-telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..97e7b55bd --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/scroll-up.svg b/src/images/icons/scroll-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/section-images/exhibition-image-1.png b/src/images/section-images/exhibition-image-1.png new file mode 100644 index 000000000..3b1322700 Binary files /dev/null and b/src/images/section-images/exhibition-image-1.png differ diff --git a/src/images/section-images/exhibition-image-2.png b/src/images/section-images/exhibition-image-2.png new file mode 100644 index 000000000..76eee37e2 Binary files /dev/null and b/src/images/section-images/exhibition-image-2.png differ diff --git a/src/images/section-images/news-image-1.png b/src/images/section-images/news-image-1.png new file mode 100644 index 000000000..f52145e68 Binary files /dev/null and b/src/images/section-images/news-image-1.png differ diff --git a/src/images/section-images/news-image-2.png b/src/images/section-images/news-image-2.png new file mode 100644 index 000000000..0d0331696 Binary files /dev/null and b/src/images/section-images/news-image-2.png differ diff --git a/src/images/section-images/upcoming-events-image-1.png b/src/images/section-images/upcoming-events-image-1.png new file mode 100644 index 000000000..a5cb1c8ed Binary files /dev/null and b/src/images/section-images/upcoming-events-image-1.png differ diff --git a/src/images/section-images/upcoming-events-image-2.png b/src/images/section-images/upcoming-events-image-2.png new file mode 100644 index 000000000..561a23f8b Binary files /dev/null and b/src/images/section-images/upcoming-events-image-2.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..6116b27b4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,1240 @@ - + - Title + Museum + + + + + + + - -

Hello Mate Academy

+ + +
+
+
+ + +
+ + +
+
+ UA +
+ + +
+
+ + +
+
+
+
+ +

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

+ + +

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

+

+ 19th - 20th century art. +

+ +

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

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

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

+ + +
+
+
+ sculpture +
+ +
11.07 - 22.09
+ +

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

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

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

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

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

+ + +
+
+
+ photo +
+ +
+
+ 14.08 о 13:00 +
+ + +

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

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

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

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

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

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

+ Новини +

+ + +
+
+
+ pictures +
+ +
+ 9 серпня 2019 +
+ + +

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

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

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

+ + +
+ Музей з левами не може просто так взяти і пропустити Міжнародний + день котів! +
+ +
+
+ + +
+
Усі новини
+
+
+ + +
+ + +
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..fcfd4cceb 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,52 @@ 'use strict'; + +const body = document.querySelector('.page__body'); +const open = document.querySelector('.icon--menu'); +const close = document.querySelector('.icon--close'); +const menu = document.querySelector('.menu'); +const scrollUp = document.querySelector('.page__scroll-up'); + +open.addEventListener('click', () => { + body.classList.add('no-scroll'); + scrollUp.classList.add('hidden'); +}) + +close.addEventListener('click', () => { + body.classList.remove('no-scroll'); + scrollUp.classList.remove('hidden'); +}) + +menu.addEventListener('click', (event) => { + if (event.target.tagName === 'A') { + body.classList.remove('no-scroll'); + scrollUp.classList.remove('hidden'); + } +}) + +const langSwitcher = document.querySelectorAll('.language-switcher'); +const langElements = document.querySelectorAll('[data-lang]'); +let currentLang = 'ua'; + +langSwitcher.forEach(switcher => { + const langDropDown = switcher.querySelector('.language-switcher__dropdown-content'); + const langOptions = document.querySelectorAll('.language-switcher__lang-options'); + + switcher.addEventListener('click', () => { + langDropDown.classList.toggle('hidden'); + }) + + langOptions.forEach(option => { + option.addEventListener('click', (event) => { + event.stopPropagation(); + currentLang = option.dataset.option; + langElements.forEach(element => { + if (element.dataset.lang === currentLang) { + element.classList.remove('hidden'); + } else { + element.classList.add('hidden'); + } + }); + langDropDown.classList.add('hidden'); + }); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..e059239c3 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,34 @@ -// put fonts here +@mixin font-playfair-bold { + font-family: 'Playfair Display', serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +@mixin font-raleway-regular { + font-family: Raleway, sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +@mixin font-raleway-medium { + font-family: Raleway, sans-serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +@mixin font-raleway-semibold { + font-family: Raleway, sans-serif; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; +} + +@mixin font-raleway-bold { + font-family: Raleway, sans-serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f1078dced 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,2 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/booking.scss b/src/styles/blocks/booking.scss new file mode 100644 index 000000000..e8f7b9618 --- /dev/null +++ b/src/styles/blocks/booking.scss @@ -0,0 +1,54 @@ +.booking { + position: relative; + background-color: $color-background-contrast; + + &__content { + padding-block: 50px; + + @include on-tablet { + @include page-grid; + + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + } + } + + &__image { + @include on-desktop { + position: absolute; + top: 0; + left: 0; + + width: 578px; + height: 100%; + + background-image: url(../images/background-images/booking-image.png); + background-size: cover; + } + } + + &__main-text { + @include font-raleway-regular; + + margin-top: 20px; + margin-bottom: 40px; + + font-size: 16px; + line-height: 150%; + color: $color-text-contrast; + + @include on-tablet { + grid-column: 1/5; + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 6/11; + margin-top: 10px; + margin-bottom: 50px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..d90fe94c3 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,111 @@ +.button { + @include font-raleway-semibold; + + display: flex; + align-items: center; + justify-content: center; + + width: 280px; + height: 60px; + + font-size: 16px; + color: $color-text-contrast; + text-decoration: none; + + background: $color-button-default; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); + + transition: all $time-transform; + + -webkit-tap-highlight-color: transparent; + + &:hover { + background-color: $color-button-hover; + box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); + } + + &:active { + background-color: $color-button-active; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); + } + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 270px; + } + + &__arrow { + width: 20px; + height: 20px; + background-image: url(../images/icons/button-arrow.svg); + transition: all $time-transform; + } + + &--inverted { + border: 1px solid $color-button-default; + color: $color-button-default; + background: $color-text-contrast; + box-shadow: 1px 1px 3px rgba(100, 15, 10, 0.4); + + &:hover { + border-color: $color-button-hover; + color: $color-button-hover; + background: $color-text-contrast; + box-shadow: 3px 3px 6px rgba(100, 15, 10, 0.6); + } + + &:active { + border-color: $color-button-active; + color: $color-button-active; + box-shadow: 1px 1px 3px rgba(100, 15, 10, 0.6); + } + + &:hover .button__arrow { + background-image: url(../images/icons/button-arrow-hower.svg); + } + + &:active .button__arrow { + background-image: url(../images/icons/button-arrow-active.svg); + } + + @include on-tablet { + grid-column: 5/7; + justify-self: end; + width: 210px; + } + + @include on-desktop { + grid-column: 10/13; + width: 270px; + } + } + + &__content { + display: flex; + gap: 8px; + align-items: center; + justify-content: center; + } + + &--booking { + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 6/13; + } + } + + &--subscribe { + cursor: pointer; + border: none; + + @include on-desktop { + grid-column: 1/4; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..491d6e091 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,71 @@ +.contacts { + @include on-tablet { + grid-column: 1/3; + } + + @include on-desktop { + grid-column: 1/5; + } + + &__list { + margin: 10px 0 30px; + padding: 0; + list-style: none; + + @include on-tablet { + margin-top: 30px; + margin-bottom: 50px; + } + } + + &__item { + padding: 0; + } + + &__link { + @include font-raleway-regular; + + display: block; + + font-size: 16px; + line-height: 150%; + color: $color-text-contrast; + text-decoration: none; + + transition: all $time-transform; + + &:hover { + transform: scale(1.01); + color: $color-button-active; + } + } + + &__social-media { + display: flex; + gap: 20px; + } + + &__social-media-link { + width: 20px; + height: 20px; + text-decoration: none; + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + } + + &--x { + background-image: url(../images/icons/icon-twitter.svg); + } + + &--telegram { + background-image: url(../images/icons/icon-telegram.svg); + } + + &--instagram { + background-image: url(../images/icons/icon-instagram.svg); + } + + @include hover(transform, scale(1.3)); + } +} diff --git a/src/styles/blocks/event-card.scss b/src/styles/blocks/event-card.scss new file mode 100644 index 000000000..cb1f29fec --- /dev/null +++ b/src/styles/blocks/event-card.scss @@ -0,0 +1,176 @@ +.event-card { + &__image-wrapper { + max-width: 570px; + height: 356px; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + } + + &--short { + height: 280px; + + @include on-tablet { + height: 330px; + } + + @include on-desktop { + height: 370px; + } + } + + &--side { + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/5; + height: 475px; + } + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + transition: all $time-transform-medium; + + &--small { + object-position: top; + } + + &:hover { + transform: scale(1.08); + box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6); + } + + &--side { + object-position: center 20%; + } + } + + &__time { + @include font-raleway-regular; + + margin-top: 20px; + font-size: 16px; + line-height: 150%; + color: $color-additional; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + + &--side { + @include on-tablet { + margin-top: 0; + } + } + + &--dark { + font-size: 14px; + line-height: 140%; + color: $color-text-primary; + } + } + + &__title { + @include font-playfair-bold; + + margin: 0; + margin-top: 10px; + + font-size: 20px; + line-height: 125%; + color: $color-text-primary; + + @include on-tablet { + height: 80px; + font-size: 24px; + } + + @include on-desktop { + height: 50px; + } + + &--without-top { + height: 30px; + font-size: 20px; + } + } + + &__description { + @include font-raleway-regular; + + max-width: 570px; + margin-top: 20px; + margin-bottom: 30px; + + font-size: 16px; + line-height: 150%; + color: $color-text-secondary; + + @include on-tablet { + height: 110px; + margin: 0; + } + + @include on-desktop { + height: 98px; + } + + &--without-bottom { + height: 50px; + + @include on-tablet { + margin-top: 18px; + } + } + + &--big { + @include on-tablet { + height: 120px; + } + + @include on-desktop { + height: 100px; + } + } + } + + &--row { + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &--image-side { + @include on-tablet { + @include page-grid; + } + } + + &__content--side { + @include on-tablet { + grid-column: 4/7; + } + + @include on-desktop { + grid-column: 5/13; + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..be2f57d26 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,27 @@ +.exhibitions { + &__main-content { + display: flex; + flex-direction: column; + gap: 60px; + + padding-top: 60px; + padding-bottom: 30px; + + @include on-tablet { + @include page-grid; + + grid-column: 1/7; + order: 2; + padding-top: 70px; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: 1/13; + } + } + + @include on-tablet { + @include page-grid; + } +} diff --git a/src/styles/blocks/footer-nav.scss b/src/styles/blocks/footer-nav.scss new file mode 100644 index 000000000..5893b2c9c --- /dev/null +++ b/src/styles/blocks/footer-nav.scss @@ -0,0 +1,57 @@ +.footer-nav { + @include on-tablet { + grid-column: 5/7; + } + + @include on-desktop { + grid-column: 9/13; + } + + &__list { + display: flex; + flex-direction: column; + gap: 5px; + + margin: 0; + + list-style: none; + + @include on-tablet { + gap: 10px; + } + } + + &__link { + @include font-raleway-regular; + + display: block; + + font-size: 16px; + line-height: 150%; + color: $color-text-contrast; + text-decoration: none; + + transition: all $time-transform; + + &--home { + @include font-playfair-bold; + + padding-bottom: 5px; + font-size: 20px; + + @include on-tablet { + padding-bottom: 20px; + } + } + + &:hover { + transform: scale(1.01); + color: $color-button-active; + } + } + + &__item { + margin: 0; + padding: 0; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..17c7f87cf --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,55 @@ +.footer { + background-color: $color-background-contrast; + + &__content { + display: flex; + flex-direction: column; + gap: 50px; + + padding-top: 34px; + padding-bottom: 30px; + + @include on-tablet { + @include page-grid; + + row-gap: 0; + padding-top: 50px; + } + } + + &__copyright { + @include font-raleway-regular; + + @include on-tablet { + grid-column: 1/7; + } + + @include on-desktop { + grid-column: 1/13; + padding-top: 70px; + } + + display: flex; + gap: 22px; + + padding-top: 10px; + + font-size: 14px; + line-height: 140%; + color: $color-text-contrast; + + &-link { + font-size: 14px; + line-height: 140%; + color: $color-text-contrast; + text-decoration: none; + + transition: all $time-transform; + + &:hover { + transform: scale(1.05); + color: $color-button-active; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..a22a41cee --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,151 @@ +.header { + position: relative; + + height: 747px; + min-height: 100vh; + + color: $color-text-contrast; + + background-color: $color-background-contrast; + + @include on-tablet { + height: 1092px; + } + + @include on-desktop { + height: 800px; + } + + &__main-info { + @include font-raleway-regular; + + width: 267px; + margin-bottom: 0; + + font-size: 16px; + line-height: 150%; + color: inherit; + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 570px; + } + } + + &__add-info { + @include font-raleway-regular; + + margin-top: 50px; + margin-bottom: 0; + + font-size: 14px; + line-height: 140%; + color: inherit; + + @include on-tablet { + width: 190px; + margin-top: 90px; + } + + @include on-desktop { + width: 570px; + margin-top: 99px; + } + } + + &__image { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + width: 245px; + height: 273px; + margin: auto; + + background-image: url(../images/background-images/header-image.png); + background-size: cover; + + transition: $time-transform; + + @include on-tablet { + width: 443px; + height: 494px; + } + + @include on-desktop { + right: 0; + left: auto; + transform: translateX(0); + + width: 625px; + height: 663px; + + background-image: url(../images/background-images/header-image-desktop.png); + } + } + + &__title { + @include font-playfair-bold; + + max-width: 280px; + margin-top: 10px; + margin-bottom: 30px; + + font-size: 48px; + line-height: 100%; + + @include on-tablet { + max-width: 569px; + margin-bottom: 20px; + font-size: 72px; + } + + @include on-desktop { + margin-bottom: 30px; + font-size: 96px; + } + } + + &__button { + margin-top: 40px; + + @include on-tablet { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 81px; + } + } + + &__info-time { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + justify-content: space-between; + + width: 570px; + height: 18px; + margin-top: 135px; + } + } + + &__divider { + width: 469px; + height: 1px; + background-color: $color-background-base; + } + + &__duration { + @include font-raleway-regular; + + font-size: 14px; + line-height: 125%; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..af857893b --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,15 @@ +.icon { + display: block; + width: 30px; + height: 30px; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } +} diff --git a/src/styles/blocks/language-switcher.scss b/src/styles/blocks/language-switcher.scss new file mode 100644 index 000000000..b2316a059 --- /dev/null +++ b/src/styles/blocks/language-switcher.scss @@ -0,0 +1,82 @@ +.language-switcher { + cursor: pointer; + + position: relative; + + display: flex; + align-items: center; + justify-content: space-between; + order: -1; + + width: 35px; + height: 24px; + + &--mobile-hidden { + display: none; + + @include on-tablet { + display: flex; + } + } + + @include hover(transform, scale(1.1)); + + &__indicator { + @include font-raleway-medium; + + font-size: 16px; + line-height: 150%; + color: $color-text-contrast; + letter-spacing: 0%; + } + + &__dropdown-trigger { + display: block; + + width: 10px; + height: 7px; + + background-image: url(../images/dropdown-arrow.png); + background-size: cover; + } + + &__dropdown-content { + cursor: default; + + position: absolute; + top: -10px; + right: -5px; + + display: flex; + flex-direction: column; + + margin: 0; + padding: 5px; + border: 1px solid $color-background-base; + border-radius: 10px; + + list-style: none; + + background-color: $color-background-contrast; + } + + &__lang-options { + @include font-raleway-medium; + + cursor: pointer; + + margin: 5px; + + font-size: 14px; + line-height: 150%; + color: inherit; + + transition: $time-transform; + + @include hover(color, $color-button-active); + } + + @include on-tablet { + order: 0; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..30f4b0a88 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,53 @@ +.main { + padding-top: 90px; + padding-bottom: 80px; + + @include on-tablet { + padding-top: 100px; + padding-bottom: 128px; + } + + @include on-desktop { + padding-top: 110px; + padding-bottom: 200px; + } + + &__exhibitions { + padding-bottom: 120px; + + @include on-tablet { + padding-bottom: 160px; + } + + @include on-desktop { + padding-bottom: 200px; + } + } + + &__upcoming-events { + padding-bottom: 90px; + + @include on-tablet { + padding-bottom: 100px; + } + + @include on-desktop { + padding-bottom: 110px; + } + } + + &__news { + padding-top: 90px; + padding-bottom: 120px; + + @include on-tablet { + padding-top: 120px; + padding-bottom: 160px; + } + + @include on-desktop { + padding-top: 110px; + padding-bottom: 200px; + } + } +} diff --git a/src/styles/blocks/menu-nav.scss b/src/styles/blocks/menu-nav.scss new file mode 100644 index 000000000..c931bda29 --- /dev/null +++ b/src/styles/blocks/menu-nav.scss @@ -0,0 +1,61 @@ +.menu-nav { + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + margin: 0; + + list-style: none; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + @include font-playfair-bold; + + position: relative; + + font-size: 20px; + line-height: 150%; + color: $color-text-contrast; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $color-background-base; + + transition: $time-transform; + } + + &:hover::after { + transform: scale(1); + } + + @include on-tablet { + font-size: 48px; + line-height: 120%; + } + } + + &__item { + margin: 0; + padding: 0; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..cc1b643b9 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,115 @@ +.menu { + height: 747px; + min-height: 100vh; + color: $color-text-contrast; + background-color: $color-background-contrast; + + @include on-tablet { + height: 1092px; + } + + @include on-desktop { + height: 800px; + } + + &__title { + @include font-raleway-regular; + + margin: 0; + + font-size: 14px; + line-height: 140%; + color: inherit; + letter-spacing: 0%; + } + + &__info { + @include font-raleway-semibold; + + font-size: 16px; + line-height: 150%; + color: inherit; + + &--link { + display: block; + text-decoration: none; + transition: all $time-transform; + + &:hover { + transform: scale(1.05); + color: $color-button-active; + } + } + } + + &__contact { + display: flex; + flex-direction: column; + gap: 20px; + + margin-top: 10px; + margin-bottom: 40px; + + @include on-tablet { + @include page-grid; + + margin-top: 30px; + margin-bottom: 50px; + } + + @include on-desktop { + margin-top: 13px; + margin-bottom: 70px; + } + } + + &__schedule { + @include on-tablet { + grid-column: 1/3; + } + } + + &__address { + grid-column: 3/6; + } + + &__line { + height: 1px; + margin-block: 40px; + background-color: $color-background-base; + + @include on-tablet { + margin-block: 50px; + } + + @include on-desktop { + width: 570px; + margin-block: 60px; + } + } + + &__image { + @include on-tablet { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + + width: 422px; + height: 466px; + margin: auto; + + background-image: url(../images/background-images/menu-image.png); + background-size: cover; + } + + @include on-desktop { + right: 0; + left: auto; + transform: translateX(0); + + width: 624px; + height: 697px; + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..20613f07d --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,28 @@ +.news { + &__main-content { + display: flex; + flex-direction: column; + gap: 60px; + + padding-top: 50px; + padding-bottom: 30px; + + @include on-tablet { + @include page-grid; + + grid-column: 1/7; + order: 2; + padding-top: 70px; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: 1/13; + padding-top: 53px; + } + } + + @include on-tablet { + @include page-grid; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..522f4c0f7 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,72 @@ +.page { + scroll-behavior: smooth; + + &__scroll-up { + position: fixed; + right: 20px; + bottom: 30px; + + display: flex; + + width: 30px; + height: 30px; + + text-decoration: none; + + opacity: 0.8; + background-image: url(../images/icons/scroll-up.svg); + mix-blend-mode: exclusion; + + @include on-tablet { + right: 30px; + } + + @include on-desktop { + right: 55px; + } + } + + &__body { + min-width: $phone-min-width; + margin: 0; + background-color: $color-background-base; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + transition: all $time-transform; + + @include on-tablet { + transition: all $time-transform-medium; + } + + @include on-tablet { + transition: all $time-transform-slow; + } + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} + +.no-scroll { + overflow: hidden; +} + +.hidden { + display: none; +} + +.container { + @include content-padding-inline; +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..a8a69c21c --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,28 @@ +.schedule { + @include on-tablet { + grid-column: 3/5; + } + + @include on-desktop { + grid-column: 5/9; + } + + &__list { + margin: 0; + padding: 0; + padding-top: 10px; + list-style: none; + + @include on-tablet { + padding-top: 30px; + } + } + + &__item { + @include font-raleway-regular; + + font-size: 16px; + line-height: 150%; + color: $color-text-contrast; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..ebfbcd6f7 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,54 @@ +.section-title { + @include font-playfair-bold; + + margin: 0; + font-size: 28px; + line-height: 125%; + color: $color-text-primary; + + @include on-tablet { + grid-column: span 4; + font-size: 40px; + } + + @include on-desktop { + grid-column: span 6; + font-size: 48px; + } + + &--contrast { + font-size: 38px; + line-height: 100%; + color: $color-text-contrast; + + @include on-tablet { + grid-column: 1/5; + height: 143px; + font-size: 62px; + } + + @include on-desktop { + grid-column: 6/13; + height: 198px; + font-size: 80px; + } + } + + &--subscribe { + max-width: 570px; + + @include on-tablet { + grid-column: 1/7; + } + } + + &--footer { + font-size: 18px; + line-height: 150%; + color: $color-text-contrast; + + @include on-tablet { + font-size: 20px; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..9aae96e40 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,91 @@ +.subscribe { + @include on-tablet { + @include page-grid; + } + + &__main-text { + @include font-raleway-regular; + + max-width: 570px; + margin-top: 20px; + margin-bottom: 50px; + + font-size: 16px; + line-height: 150%; + color: $color-text-primary; + + @include on-tablet { + grid-column: 1/6; + } + + @include on-desktop { + grid-column: 7/13; + margin-block: 0; + } + } + + &__form { + @include on-tablet { + grid-column: 1/5; + } + + @include on-desktop { + grid-column: 1/6; + margin-top: 50px; + } + } + + &__email { + @include font-raleway-bold; + + cursor: pointer; + + box-sizing: border-box; + width: 280px; + height: 28px; + margin-bottom: 30px; + padding: 0; + border: none; + border-bottom: 1px solid $color-text-primary; + + font-size: 16px; + line-height: 150%; + color: $color-text-primary; + + background: transparent; + outline: none; + + @include on-tablet { + width: 450px; + } + + @include on-desktop { + width: 470px; + margin-bottom: 40px; + } + + &::placeholder { + @include font-raleway-regular; + } + + &:hover { + border-color: $color-button-hover; + color: $color-button-hover; + + &::placeholder { + color: $color-button-hover; + } + } + + &:active { + border-color: $color-button-active; + color: $color-button-active; + } + + &:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px $color-background-base inset; + + -webkit-text-fill-color: rgba($color-button-hover, 1); + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..b46decbb2 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,33 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; + + @include on-tablet { + height: 77px; + } + + @include on-desktop { + height: 90px; + } + + &__logo { + display: flex; + color: inherit; + text-decoration: none; + + @include hover(transform, scale(1.2)); + } + + &__right { + display: flex; + gap: 25px; + align-items: center; + justify-content: space-between; + + @include on-tablet { + gap: 40px; + } + } +} diff --git a/src/styles/blocks/upcoming-events.scss b/src/styles/blocks/upcoming-events.scss new file mode 100644 index 000000000..f9a691848 --- /dev/null +++ b/src/styles/blocks/upcoming-events.scss @@ -0,0 +1,25 @@ +.upcoming-events { + &__main-content { + display: flex; + flex-direction: column; + gap: 60px; + + padding-top: 60px; + padding-bottom: 30px; + + @include on-tablet { + grid-column: 1/7; + order: 2; + padding-top: 70px; + padding-bottom: 0; + } + + @include on-desktop { + grid-column: 1/13; + } + } + + @include on-tablet { + @include page-grid; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 000000000..806098f04 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,22 @@ +@import 'utils'; +@import 'fonts'; +@import './blocks/booking'; +@import './blocks/button'; +@import './blocks/contacts'; +@import './blocks/event-card'; +@import './blocks/exhibitions'; +@import './blocks/footer-nav'; +@import './blocks/footer'; +@import './blocks/header'; +@import './blocks/icon'; +@import './blocks/language-switcher'; +@import './blocks/main'; +@import './blocks/menu'; +@import './blocks/menu-nav'; +@import './blocks/news'; +@import './blocks/page'; +@import './blocks/schedule'; +@import './blocks/section-title'; +@import './blocks/subscribe'; +@import './blocks/top-bar'; +@import './blocks/upcoming-events'; diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..03277bcb6 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,50 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $time-transform; &:hover { #{$_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: 38px; + } + + @include on-desktop { + max-width: 1280px; + margin: auto; + padding-inline: 55px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..f16d1944c 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$phone-min-width: 320px; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$color-background-base: rgba(241, 245, 244, 1); +$color-background-contrast: rgba(63, 82, 82, 1); +$color-text-primary: rgba(28, 27, 41, 1); +$color-text-secondary: rgba(80, 79, 94, 1); +$color-text-contrast: rgba(241, 245, 244, 1); +$color-button-default: rgba(205, 77, 49, 1); +$color-button-hover: rgba(175, 52, 25, 1); +$color-button-active: rgba(234, 52, 13, 1); +$color-additional: rgba(205, 77, 49, 1); +$time-transform: 0.3s; +$time-transform-medium: 0.6s; +$time-transform-slow: 0.9s;