diff --git a/src/icons/icon-arrow-orange.svg b/src/icons/icon-arrow-orange.svg new file mode 100644 index 000000000..01d30261d --- /dev/null +++ b/src/icons/icon-arrow-orange.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-arrow.svg b/src/icons/icon-arrow.svg new file mode 100644 index 000000000..43f997158 --- /dev/null +++ b/src/icons/icon-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-cross-white.svg b/src/icons/icon-cross-white.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/icons/icon-cross-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-cross.svg b/src/icons/icon-cross.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/icons/icon-cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-dropdown-white.svg b/src/icons/icon-dropdown-white.svg new file mode 100644 index 000000000..cba2a18c6 --- /dev/null +++ b/src/icons/icon-dropdown-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-dropdown.svg b/src/icons/icon-dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/icons/icon-dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-facebook-white.svg b/src/icons/icon-facebook-white.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/icons/icon-facebook-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-facebook.svg b/src/icons/icon-facebook.svg new file mode 100644 index 000000000..6c0bad825 --- /dev/null +++ b/src/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-instagram-white.svg b/src/icons/icon-instagram-white.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/icons/icon-instagram-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-instagram.svg b/src/icons/icon-instagram.svg new file mode 100644 index 000000000..5af50bb18 --- /dev/null +++ b/src/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-menu-white.svg b/src/icons/icon-menu-white.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/icons/icon-menu-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/icon-menu.svg b/src/icons/icon-menu.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/icons/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/icons/icon-scroll-up-white.svg b/src/icons/icon-scroll-up-white.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/icons/icon-scroll-up-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-scroll-up.svg b/src/icons/icon-scroll-up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/icons/icon-scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/icons/icon-telegram-white.svg b/src/icons/icon-telegram-white.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/icons/icon-telegram-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-telegram.svg b/src/icons/icon-telegram.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/icons/icon-telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-twitter-white.svg b/src/icons/icon-twitter-white.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/icons/icon-twitter-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/icon-twitter.svg b/src/icons/icon-twitter.svg new file mode 100644 index 000000000..a180591c8 --- /dev/null +++ b/src/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/1200px-Girl_from_Podolye_by_V.Tropinin.svg b/src/images/1200px-Girl_from_Podolye_by_V.Tropinin.svg new file mode 100644 index 000000000..58eb4cda5 --- /dev/null +++ b/src/images/1200px-Girl_from_Podolye_by_V.Tropinin.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Angels-big.svg b/src/images/Angels-big.svg new file mode 100644 index 000000000..d6e1ff890 --- /dev/null +++ b/src/images/Angels-big.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Angels-small.svg b/src/images/Angels-small.svg new file mode 100644 index 000000000..dbb127ff2 --- /dev/null +++ b/src/images/Angels-small.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Enents-portrait-2.svg b/src/images/Enents-portrait-2.svg new file mode 100644 index 000000000..e525bd5a7 --- /dev/null +++ b/src/images/Enents-portrait-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Events-portrait-1.svg b/src/images/Events-portrait-1.svg new file mode 100644 index 000000000..ad1c40e85 --- /dev/null +++ b/src/images/Events-portrait-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/News-picture-1.svg b/src/images/News-picture-1.svg new file mode 100644 index 000000000..05a7655f2 --- /dev/null +++ b/src/images/News-picture-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/News-picture-2.svg b/src/images/News-picture-2.svg new file mode 100644 index 000000000..82b120303 --- /dev/null +++ b/src/images/News-picture-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Portrait-big.svg b/src/images/Portrait-big.svg new file mode 100644 index 000000000..07f29f292 --- /dev/null +++ b/src/images/Portrait-big.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Portrait-small.svg b/src/images/Portrait-small.svg new file mode 100644 index 000000000..c8b246049 --- /dev/null +++ b/src/images/Portrait-small.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/Portrait_menu.svg b/src/images/Portrait_menu.svg new file mode 100644 index 000000000..ecfd84ba4 --- /dev/null +++ b/src/images/Portrait_menu.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/logo-NAMU-white.svg b/src/images/logo-NAMU-white.svg new file mode 100644 index 000000000..dfb7a77ee --- /dev/null +++ b/src/images/logo-NAMU-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/logo_NAMU-black.svg b/src/images/logo_NAMU-black.svg new file mode 100644 index 000000000..dfb7a77ee --- /dev/null +++ b/src/images/logo_NAMU-black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/plan-your-visit-bg.svg b/src/images/plan-your-visit-bg.svg new file mode 100644 index 000000000..2ac20072c --- /dev/null +++ b/src/images/plan-your-visit-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..f81879afd 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,533 @@ - + + - Title + Museum + + + - -

Hello Mate Academy

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

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

+

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

+

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

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

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

+ + + +
+ +
+

11.07 - 22.09

+

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

+

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

+
+ + + +
+
+ +
+

Діє постійно

+

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

+

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

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

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

+ + + + +
+ + Portrait + +
+

14.08 о 13:00

+

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

+

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

+ + + +
+
+ +
+ + Portrait + +
+

16.08 о 13:00

+

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

+

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

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

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

+

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

+ + + +
+ +
+

Новини

+ + + +
+ + Angels + + +
+

9 серпня 2019

+

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

+

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

+
+
+ +
+ + Portrait + +
+

9 серпня 2019

+

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

+

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

+
+
+ + + +
+ + +
+
+
+ + + diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..d241a0fd5 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,31 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +h6 { + @extend %h6; +} + +p { + @extend %p; +} + +button { + @extend %button; +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..6994bf4c5 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,52 @@ +.button { + cursor: pointer; + padding-block: 22px; + height: 60px; + width: 100%; + text-decoration: $effect-duration; + + &--red { + background-color: $main-color; + color: $white-color; + border: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + &:disabled { + background-color: #dd836f; + pointer-events: none; + } + } + + &--white { + display: flex; + flex-direction: row; + justify-content: center; + gap: 8px; + background-color: $white-color; + color: $main-color; + border: 1px solid $main-color; + + &:hover { + color: #af3419; + border: 1px solid #af3419; + } + + &:active { + color: #ea340d; + border: 1px solid #ea340d; + } + + &:disabled { + color: #dd836f; + border: 1px solid #dd836f; + pointer-events: none; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..7d93e1679 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,39 @@ +.contacts { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + color: $white-color; + text-decoration: none; + + &__address { + color: $white-color; + text-decoration: none; + } + + &__phone { + color: $white-color; + text-decoration: none; + } + + &__email { + color: $white-color; + text-decoration: none; + } + + &__media { + margin-top: 30px; + display: flex; + flex-direction: row; + gap: 20px; + + @include on-tablet { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 50px; + } + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..0414b7323 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,92 @@ +.event { + position: relative; + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 12; + } + + @include page-grid; + + &__link { + position: relative; + height: 358px; + margin-bottom: 20px; + transition-duration: $effect-duration; + background-repeat: no-repeat; + background-size: cover; + grid-column: span 2; + + @include on-tablet { + height: 422px; + grid-column: span 3; + } + + @include on-desktop { + height: 475px; + grid-column: span 4; + } + + @include hover-scale; + } + + &__image { + position: absolute; + width: 100%; + height: 100%; + display: flex; + object-fit: cover; + } + + &__info { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__period { + margin-bottom: 10px; + color: $main-color; + } + + &__title { + margin-bottom: 20px; + } + + &__description { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__registration { + margin-bottom: 0; + text-decoration: $effect-duration; + + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + width: calc(50% - (30px / 2)); + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..2541de0ea --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,69 @@ +.events { + display: flex; + flex-direction: column; + gap: 60px; + + @include page-grid; + + &__content { + margin-bottom: 90px; + padding-inline: 20px; + + @include on-tablet { + margin-bottom: 100px; + padding-inline: 39px; + } + + @include on-desktop { + margin-bottom: 110px; + padding-inline: 55px; + } + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__button { + text-decoration: none; + grid-column: 1/ -1; + + @include on-tablet { + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + display: flex; + } + } + + &--bottom { + @include on-tablet { + display: none; + } + + @include on-desktop { + display: none; + } + } + } +} diff --git a/src/styles/blocks/exhibition.scss b/src/styles/blocks/exhibition.scss new file mode 100644 index 000000000..d9be0f39f --- /dev/null +++ b/src/styles/blocks/exhibition.scss @@ -0,0 +1,107 @@ +.exhibition { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + + &__link { + position: relative; + height: 356px; + margin-bottom: 20px; + transition-duration: $effect-duration; + background-repeat: no-repeat; + background-size: cover; + + &--1 { + background-image: url(../images/Angels-small.svg); + background-repeat: no-repeat; + background-size: cover; + + @include on-desktop { + background-image: url(../images/Angels-big.svg); + } + } + + &--2 { + background-image: url(../images/Portrait-small.svg); + background-repeat: no-repeat; + background-size: cover; + + @include on-desktop { + background-image: url(../images/Portrait-big.svg); + } + } + + @include on-tablet { + height: 420px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 484px; + margin-bottom: 20px; + } + + @include hover-scale; + } + + &--1 { + grid-column: 1/ -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &--2 { + grid-column: 1/ -1; + } + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &__period { + margin-bottom: 10px; + color: $main-color; + } + + &__title { + margin-bottom: 20px; + } + + &__description { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__buy-button { + margin-bottom: 0; + text-decoration: $effect-duration; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + width: calc(50% - (30px / 2)); + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..48065de1f --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,69 @@ +.exhibitions { + display: flex; + flex-direction: column; + gap: 60px; + + @include page-grid; + + &__content { + margin-bottom: 120px; + padding-inline: 20px; + + @include on-tablet { + margin-bottom: 160px; + padding-inline: 39px; + } + + @include on-desktop { + margin-bottom: 200px; + padding-inline: 55px; + } + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__button { + text-decoration: none; + grid-column: 1/ -1; + + @include on-tablet { + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + display: flex; + } + } + + &--bottom { + @include on-tablet { + display: none; + } + + @include on-desktop { + display: none; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..8331f1da8 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,152 @@ +.footer { + background-color: $background-color; + position: sticky; + + &__content { + padding-inline: 20px; + padding-block: 34px 30px; + + @include page-grid; + + @include on-tablet { + padding-inline: 39px; + padding-block: 50px 30px; + } + + @include on-tablet { + padding-inline: 55px; + padding-block: 50px 30px; + } + } + + &__link-up { + text-decoration: none; + } + + &__title { + margin-bottom: 10px; + + color: $white-color; + text-decoration: none; + font-family: 'Playfair Display', sans-serif; + font-size: 20px; + font-weight: 700; + line-height: 30px; + text-align: left; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__contacts { + margin-bottom: 50px; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 1 / 3; + } + + @include on-desktop { + margin-bottom: 70px; + grid-column: 1 / 5; + } + } + + &__schedule { + margin-bottom: 50px; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 3 / 5; + } + + @include on-desktop { + margin-bottom: 70px; + grid-column: 5 / 9; + } + } + + &__navigation { + margin-bottom: 50px; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 5 / 7; + } + + @include on-desktop { + margin-bottom: 70px; + grid-column: 9 / 13; + } + } + + &__nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 5px; + + @include on-tablet { + gap: 10px; + } + + @include on-desktop { + margin-bottom: 70px; + gap: 10px; + } + } + + &__link { + color: $white-color; + text-decoration: none; + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + } + } + + &__copyright { + color: $white-color; + display: flex; + align-items: center; + justify-content: space-between; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 1 / -1; + } + } + + &__privacy { + display: flex; + flex-direction: row; + gap: 22px; + + @include on-tablet { + gap: 22px; + } + + @include on-desktop { + gap: 102px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..d876ba570 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,142 @@ +.header { + // display: none !important; + background-color: $background-color; + overflow: auto; + + background-image: url(/src/images/1200px-Girl_from_Podolye_by_V.Tropinin.svg); + background-repeat: no-repeat; + background-size: auto 37%; + background-position: center bottom; + + @include on-tablet { + background-size: auto 45%; + } + + @include on-desktop { + background-position: right bottom; + background-size: auto 83%; + } + + &__content { + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-start; + min-height: 100vh; + margin: 0; + padding: 0; + } + + &__bottom { + @include page-grid; + + box-sizing: border-box; + + padding-inline: 20px; + padding-top: 50px; + + @include on-tablet { + padding-inline: 39px; + padding-top: 99px; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__subtitle { + margin-bottom: 10px; + font-family: Raleway, serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + letter-spacing: 0%; + color: $white-color; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &__title { + margin-bottom: 30px; + color: $white-color; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__title-subtitle { + margin-bottom: 40px; + color: $white-color; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__button { + margin-bottom: 40px; + text-decoration: $effect-duration; + + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 70px; + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } + + &__image { + margin-bottom: 0; + width: 245px; + height: 273px; + display: flex; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 4; + } + + @include on-tablet { + grid-column: 2 / 6; + width: 443px; + height: 494px; + } + + @include on-desktop { + width: 625px; + height: 663px; + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..9d487e133 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,69 @@ +.icon { + cursor: pointer; + display: block; + height: 30px; + width: 30px; + background-repeat: no-repeat; + transition-duration: $effect-duration; + + &--small { + height: 20px; + width: 20px; + } + + &--menu { + background-image: url(../icons/icon-menu-white.svg); + } + + &--dropdown { + background-image: url(../icons/icon-dropdown-white.svg); + width: 10px; + height: 7px; + top: 36px; + + &--hide { + display: none; + + @include on-tablet { + display: block; + } + + @include on-desktop { + display: block; + } + } + } + + &--cross { + background-image: url(../icons/icon-cross-white.svg); + } + + &--arrow { + background-image: url(../icons/icon-arrow-orange.svg); + } + + &--scroll-up { + background-image: url(../icons/icon-scroll-up-white.svg); + } + + &--twitter { + background-image: url(../icons/icon-twitter-white.svg); + } + + &--instagram { + background-image: url(../icons/icon-instagram-white.svg); + } + + &--facebook { + background-image: url(../icons/icon-facebook-white.svg); + } + + &--telegram { + background-image: url(../icons/icon-telegram-white.svg); + } + + &:hover { + cursor: pointer; + transform: scale(1.2); + } +} diff --git a/src/styles/blocks/main__content.scss b/src/styles/blocks/main__content.scss new file mode 100644 index 000000000..e851f48ec --- /dev/null +++ b/src/styles/blocks/main__content.scss @@ -0,0 +1,13 @@ +.main { + &__content { + padding-top: 90px; + + @include on-tablet { + padding-top: 100px; + } + + @include on-desktop { + padding-top: 110px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..2f4c24f35 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,116 @@ +.menu { + background-color: $background-color; + min-height: 100vh; + opacity: 0; + pointer-events: none; + z-index: 1; + overflow: auto; + + @include on-tablet { + background-image: url(/src/images/Portrait_menu.svg); + background-repeat: no-repeat; + background-size: auto 45%; + background-position: center bottom; + } + + @include on-desktop { + background-position: right bottom; + background-size: auto 83%; + } + + &__top { + margin-bottom: 10px; + } + + &__bottom { + padding-block: 10px 0; + + @include page-grid; + + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + padding-block: 30px 0; + } + + @include on-desktop { + padding-inline: 55px; + } + } + + &__details { + &--1 { + margin-bottom: 20px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 1 / 3; + } + } + + &--2 { + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / 6; + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &-name { + margin: 0; + font-family: Raleway, serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + letter-spacing: 0%; + color: $white-color; + } + + &-info { + font-weight: 600; + color: $white-color; + } + } + + &__nav { + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 1 / 7; + margin-bottom: 60px; + } + } + + &__button { + margin-bottom: 52px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..b10bac8ac --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,53 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__item__title { + @include on-tablet { + font-size: 48px; + font-weight: 700; + line-height: 57.6px; + } + + @include on-desktop { + font-size: 48px; + font-weight: 700; + line-height: 57.6px; + } + } + + &__link { + color: $white-color; + text-decoration: none; + + &--line { + display: block; + margin: 0; + padding-bottom: 40px; + border-bottom: 1px solid $white-color; + + @include on-tablet { + padding-bottom: 50px; + } + + @include on-desktop { + padding-bottom: 60px; + } + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..baba2cf0c --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,148 @@ +.news { + display: flex; + flex-direction: column; + gap: 60px; + + @include page-grid; + + &__content { + margin-bottom: 120px; + padding-inline: 20px; + + @include on-tablet { + margin-bottom: 160px; + padding-inline: 39px; + } + + @include on-desktop { + margin-bottom: 200px; + padding-inline: 55px; + } + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 9; + } + } + + &__button { + text-decoration: none; + grid-column: 1/ -1; + + @include on-tablet { + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + } + + @include on-desktop { + display: flex; + } + } + + &--bottom { + @include on-tablet { + display: none; + } + + @include on-desktop { + display: none; + } + } + } +} + +.new { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + + &--1 { + grid-column: 1/ -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &--2 { + grid-column: 1/ -1; + } + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + // &__description { + // margin-bottom: 0; + // } + + &__link { + height: 281px; + + @include on-tablet { + height: 330px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 370px; + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + + &--1 { + object-position: center; + } + + &--2 { + object-position: center; + + @include on-tablet { + object-position: top; + } + + @include on-desktop { + object-position: top; + } + } + } + + &__period { + margin-bottom: 10px; + color: $main-color; + } + + &__title { + margin-bottom: 20px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..290e39089 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,24 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + background: $c-gray; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/plan-your-visit.scss b/src/styles/blocks/plan-your-visit.scss new file mode 100644 index 000000000..3f2cc83a8 --- /dev/null +++ b/src/styles/blocks/plan-your-visit.scss @@ -0,0 +1,70 @@ +.plan-your-visit { + @include on-desktop { + background-image: url(../images/plan-your-visit-bg.svg); + background-repeat: no-repeat; + background-size: auto 100%; + background-position: left bottom; + } + + @include page-grid; + + background-color: $background-color; + padding: 50px 20px; + margin-bottom: 90px; + + @include on-tablet { + padding: 80px 39px; + margin-bottom: 120px; + } + + @include on-desktop { + padding: 205px 55px; + margin-bottom: 200px; + } + + &__title { + color: $white-color; + + margin-bottom: 20px; + + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 6 / 13; + } + } + + &__description { + color: $white-color; + + margin-bottom: 40px; + + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 6 / 11; + margin-bottom: 50px; + } + } + + &__button { + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 /4; + } + + @include on-desktop { + grid-column: 6 / 9; + } + } +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..f260c6812 --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,13 @@ +.schedule { + &__week { + margin: 0; + padding: 0; + list-style: none; + color: $white-color; + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..4596d21db --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,5 @@ +.section { + &__exhibition { + @include page-grid; + } +} diff --git a/src/styles/blocks/sign-in.scss b/src/styles/blocks/sign-in.scss new file mode 100644 index 000000000..bbbf5a23d --- /dev/null +++ b/src/styles/blocks/sign-in.scss @@ -0,0 +1,131 @@ +.sign-in { + &__content { + @include page-grid; + + margin-bottom: 80px; + padding-inline: 20px; + + @include on-tablet { + margin-bottom: 128px; + padding-inline: 39px; + } + + @include on-desktop { + margin-bottom: 200px; + padding-inline: 55px; + } + } + + &__title { + margin-bottom: 20px; + + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + margin-bottom: 50px; + grid-column: 1 / 6; + } + } + + &__description { + margin-bottom: 50px; + + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 7 / 13; + } + } + + &__form { + display: grid; + grid-template-columns: repeat(5, 1fr); + + margin-bottom: 40px; + + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__input { + grid-column: 1 / -1; + margin-bottom: 30px; + background-color: inherit; + width: 100%; + border: none; + border-bottom: 1px solid $black-color; + color: $black-color; + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 24px; + text-align: left; + transition-duration: $effect-duration; + + &::placeholder { + font-weight: 400; + transition-duration: $effect-duration; + } + + &:hover { + outline: none; + color: $main-color; + border-color: $main-color; + + &::placeholder { + color: $main-color; + } + } + + &:focus { + outline: none; + border-color: $main-color; + color: $main-color; + + &::placeholder { + color: $main-color; + } + } + + &:-webkit-autofill { + color: $black-color; + outline: none; + font-weight: 700; + -webkit-box-shadow: 1px 1px 1px 100vh $white-color inset; + + &:hover, + &:focus { + outline: none; + -webkit-text-fill-color: $main-color; + -webkit-box-shadow: 1px 1px 1px 100vh $white-color inset; + } + } + } + + &__button { + grid-column: 1 /-1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..863f401e0 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,80 @@ +.top-bar { + box-sizing: border-box; + background-color: $background-color; + padding-block: 20px; + padding-inline: 20px; + text-decoration: $effect-duration; + + @include on-desktop { + padding-block: 26px; + padding-inline: 39px; + } + + @include on-desktop { + padding-block: 26px; + padding-inline: 55px; + } + + display: flex; + justify-content: space-between; + align-items: center; + + &__logo { + display: flex; + text-decoration: $effect-duration; + + &:hover { + cursor: pointer; + transform: scale(1.2); + } + } + + &__icons-list { + display: flex; + align-items: center; + gap: 5px; + } + + &__icons { + display: flex; + flex-direction: row; + gap: 30px; + align-items: center; + + @include on-tablet { + flex-direction: row-reverse; + gap: 40px; + } + + @include on-desktop { + flex-direction: row-reverse; + gap: 40px; + } + } + + &__language { + border: none; + background-color: inherit; + color: $white-color; + font-size: inherit; + + &:hover { + cursor: pointer; + transform: scale(1.2); + } + + cursor: pointer; + + &:focus { + background-color: $background-color; + } + + &--mob--hide { + display: none; + + @include on-tablet { + display: block; + } + } + } +} diff --git a/src/styles/helpers/container.scss b/src/styles/helpers/container.scss new file mode 100644 index 000000000..dda3c6d4c --- /dev/null +++ b/src/styles/helpers/container.scss @@ -0,0 +1,4 @@ +// .container { +// // @include content-padding-in-line; +// // margin: auto; +// } diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..080abf418 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,23 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import '../styles/blocks/page'; +@import '../styles/helpers/container'; +@import '../styles/blocks/header'; +@import '../styles/blocks/icon'; +@import '../styles/blocks/menu'; +@import '../styles/blocks/top-bar'; +@import '../styles/blocks/nav'; +@import '../styles/blocks/button'; +@import '../styles/blocks/section'; +@import '../styles/blocks/sign-in'; +@import '../styles/blocks/main__content'; +@import '../styles/blocks/exhibition'; +@import '../styles/blocks/exhibitions'; +@import '../styles/blocks/events'; +@import '../styles/blocks/event'; +@import '../styles/blocks/news'; +@import '../styles/blocks/plan-your-visit'; +@import '../styles/blocks/footer'; +@import '../styles/blocks/contacts'; +@import '../styles/blocks/schedule'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..6c07edf0d 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,103 @@ %h1 { - font-family: Roboto, sans-serif; + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } +} + +%h2 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 38px; + font-weight: 700; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +%h3 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 28px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 58px; + } +} + +%h4 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 20px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 24px; + } + + @include on-desktop { + font-size: 24px; + } +} + +%h5 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + letter-spacing: 0%; +} + +%h6 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 125%; + letter-spacing: 0%; +} + +%button { + margin: 0; + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 100%; + letter-spacing: 0%; +} + +%p { + margin: 0; + font-family: Raleway, sans-serif; + font-size: 16px; font-weight: 400; + line-height: 150%; + letter-spacing: 0%; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..a03a132b3 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,38 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin page-grid { + display: grid; + column-gap: 20px; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + } +} + +@mixin hover-scale { + &:hover { + cursor: pointer; + transform: scale(1.05); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..8b8356113 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,11 @@ $c-gray: #eee; +$main-color: #cd4d31; +$black-color: #1c1b29; +$grey-color: #504f5e; +$white-color: #f1f5f4; +$background-color: #3f5252; +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$tablet-max-width: 690px; +$desktop-max-width: 1190px; +$effect-duration: 0.3s;