diff --git a/src/images/events_excursions.png b/src/images/events_excursions.png new file mode 100644 index 000000000..57e915db6 Binary files /dev/null and b/src/images/events_excursions.png differ diff --git a/src/images/events_travelling.png b/src/images/events_travelling.png new file mode 100644 index 000000000..4ab3e8922 Binary files /dev/null and b/src/images/events_travelling.png differ diff --git a/src/images/exhibitions_angels.png b/src/images/exhibitions_angels.png new file mode 100644 index 000000000..c9d30ad44 Binary files /dev/null and b/src/images/exhibitions_angels.png differ diff --git a/src/images/exhibitions_art.png b/src/images/exhibitions_art.png new file mode 100644 index 000000000..e17a52539 Binary files /dev/null and b/src/images/exhibitions_art.png differ diff --git a/src/images/header_bg.png b/src/images/header_bg.png new file mode 100644 index 000000000..e743d0ee7 Binary files /dev/null and b/src/images/header_bg.png differ diff --git a/src/images/icons/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 000000000..8b9dc25ef --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/icon_arrow-up.svg b/src/images/icons/icon_arrow-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/icon_arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon_arrow.svg b/src/images/icons/icon_arrow.svg new file mode 100644 index 000000000..f03cd85c1 --- /dev/null +++ b/src/images/icons/icon_arrow.svg @@ -0,0 +1,4 @@ + + + + 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_lang_dropdown.svg b/src/images/icons/icon_lang_dropdown.svg new file mode 100644 index 000000000..dc63ad397 --- /dev/null +++ b/src/images/icons/icon_lang_dropdown.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/menu_bg.png b/src/images/menu_bg.png new file mode 100644 index 000000000..14196f7eb Binary files /dev/null and b/src/images/menu_bg.png differ diff --git a/src/images/news_cats-day.png b/src/images/news_cats-day.png new file mode 100644 index 000000000..cab560df7 Binary files /dev/null and b/src/images/news_cats-day.png differ diff --git a/src/images/news_winner.png b/src/images/news_winner.png new file mode 100644 index 000000000..6148525d7 Binary files /dev/null and b/src/images/news_winner.png differ diff --git a/src/images/section_bg_desktop.png b/src/images/section_bg_desktop.png new file mode 100644 index 000000000..3a15e0bf9 Binary files /dev/null and b/src/images/section_bg_desktop.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..a1c4fbb02 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,659 @@ - + + - Title + NAMU + - -

Hello Mate Academy

+ + + +
+
+
+
+ +
+ + +
+ + language dropdown +
+
+
+ +
+

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

+

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

+

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

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

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

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

11.07 - 22.09

+

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

+

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

+
+
+
+ + + Купити квиток + + +
+
+ +
+
+ exhibition art +
+

Діє постійно

+

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

+

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

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

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

+
+ + + Календар подій + + + +
+
+ +
+
+ excursions of Mr Gudimov +
+

14.08 о 13:00

+

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

+

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

+ +
+ + + Зареєструватись + + +
+
+
+ +
+ travelling to Australia +
+

16.08 о 13:00

+

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

+

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

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

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

+

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

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

Новини

+
+ + Усі новини + + +
+
+ +
+
+ winners +
+

9 серпня 2019

+

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

+

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

+
+
+ +
+ cats day +
+

9 серпня 2019

+

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

+

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

+
+
+
+ +
+ + Усі новини + + +
+
+
+ + + +
+
+ +
+
+ +
+
+ + + + - + \ No newline at end of file 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..bd78d6f4a --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,231 @@ +.button { + &__button-tickets { + grid-column: span 2; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-red-color; + border: none; + text-decoration: none; + + @include button-is-full; + + transition: $effect-duration; + + @include hover(transform, scale(0.95)); + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 3; + } + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: $main-white-color; + text-decoration: none; + } + } + + &__button-archive { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-white-color; + border: 1px solid $main-red-color; + color: $main-red-color; + text-decoration: none; + + @include button-border; + + transition: $effect-duration; + + @include hover(transform, scale(0.95)); + + @include on-tablet { + width: 100%; + } + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + } + + &--icon-arrow { + display: block; + height: 20px; + width: 20px; + background-image: url(../images/icons/icon_arrow.svg); + background-repeat: no-repeat; + background-size: contain; + } + } + + &__button-calendar { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-white-color; + border: 1px solid $main-red-color; + color: $main-red-color; + text-decoration: none; + + @include button-border; + + transition: $effect-duration; + + @include hover(transform, scale(0.95)); + + @include on-tablet { + width: 100%; + } + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + } + + &--icon-arrow { + display: block; + height: 20px; + width: 20px; + background-image: url(../images/icons/icon_arrow.svg); + background-repeat: no-repeat; + background-size: contain; + } + } + + &__button-register { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-red-color; + border: none; + text-decoration: none; + + @include button-is-full; + + transition: $effect-duration; + + @include hover(transform, scale(0.95)); + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 3; + } + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: $main-white-color; + text-decoration: none; + } + } + + &__button-start { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-red-color; + border: none; + text-decoration: none; + + @include button-is-full; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: $main-white-color; + text-decoration: none; + } + } + + &__button-news { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-white-color; + border: 1px solid $main-red-color; + text-decoration: none; + color: $main-red-color; + + @include button-border; + + transition: $effect-duration; + + @include hover(transform, scale(0.95)); + + @include on-tablet { + width: 100%; + } + + &--text { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + } + + &--icon-arrow { + display: block; + height: 20px; + width: 20px; + background-image: url(../images/icons/icon_arrow.svg); + background-repeat: no-repeat; + background-size: contain; + } + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..90871d5b1 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,82 @@ +.contacts { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + + &__title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + + color: $main-white-color; + + @include on-tablet { + font-size: 20px; + margin-bottom: 30px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + margin-bottom: 0; + } + + &__link { + color: $main-white-color; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + text-decoration: none; + position: relative; + width: fit-content; + white-space: nowrap; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + height: 1px; + width: 100%; + background-color: $main-white-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + outline: none; + } + } + + &__networks { + margin-top: 30px; + + @include on-tablet { + margin-top: 50px; + } + + &--icons { + display: flex; + gap: 20px; + background-size: 20px 20px; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..40a5ee51a --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,6 @@ +.container { + box-sizing: border-box; + width: 100%; + + @include content-padding-inline; +} diff --git a/src/styles/blocks/copyright.scss b/src/styles/blocks/copyright.scss new file mode 100644 index 000000000..e92f49a6f --- /dev/null +++ b/src/styles/blocks/copyright.scss @@ -0,0 +1,24 @@ +.copyright { + &__content { + gap: 22px; + display: flex; + + @include on-desktop { + gap: 102px; + } + } + + &__text { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + align-items: center; + text-align: center; + + color: $main-white-color; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..15323ea7f --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,155 @@ +.events { + @include page-grid; + + &__header { + margin: 0; + + @include page-grid; + + align-items: center; + margin-bottom: 10px; + } + + &__card { + grid-column: span 2; + display: flex; + flex-direction: column; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + grid-column: span 6; + margin-top: 60px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + grid-column: span 12; + } + } + + &__photo { + width: 100%; + height: 356px; + object-fit: cover; + margin-top: 60px; + margin-bottom: 20px; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + height: 100%; + grid-column: 1 / 4; + margin: 0; + } + + @include on-desktop { + width: 100%; + height: 100%; + grid-column: 1 / 5; + } + } + + &__content { + display: flex; + flex-direction: column; + + @include on-tablet { + height: 100%; + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 5 / 11; + } + } + + &__date { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $main-red-color; + margin-bottom: 10px; + } + + &__title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + color: $main-black-color; + margin-bottom: 20px; + + @include on-tablet { + font-size: 24px; + } + } + + &__article { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $accent-grey-color; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__button { + @include on-tablet { + align-items: center; + width: 100%; + } + + @include on-desktop { + display: grid; + gap: 30px; + grid-template-columns: repeat(6, 1fr); + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + width: 100%; + height: 60px; + justify-self: end; + align-items: center; + grid-column: 5 / -1; + } + + @include on-desktop { + width: 100%; + grid-column: 10 / -1; + } + } + + &--bottom { + display: block; + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..145b5f12f --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,129 @@ +.exhibitions { + @include page-grid; + + &__header { + margin: 0; + + @include page-grid; + + align-items: center; + } + + &__card { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &--content { + display: flex; + flex-direction: column; + } + } + + &__photo { + width: 100%; + height: 356px; + object-fit: cover; + margin-top: 60px; + margin-bottom: 20px; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + margin-top: 70px; + height: 420px; + } + } + + &__content { + display: flex; + flex-direction: column; + } + + &__date { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $main-red-color; + margin-bottom: 10px; + } + + &__title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + color: $main-black-color; + margin-bottom: 20px; + } + + &__article { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $accent-grey-color; + margin-bottom: 30px; + } + + &__button { + grid-column: span 2; + + @include on-tablet { + align-items: center; + + grid-column: span 3; + } + + @include on-desktop { + display: grid; + gap: 30px; + grid-template-columns: repeat(6, 1fr); + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + width: 100%; + height: 60px; + justify-self: end; + align-items: center; + grid-column: 5 / -1; + } + + @include on-desktop { + width: 100%; + grid-column: 10 / -1; + } + } + + &--bottom { + display: block; + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..d328aba60 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,55 @@ +.footer { + background-color: $background-color; + + &__info { + padding-top: 35px; + + @include on-tablet { + padding-top: 50px; + + @include page-grid; + + width: 100%; + grid-column: span 2; + } + } + + &__shedule { + margin-top: 50px; + + @include on-tablet { + margin-top: 0; + grid-column: 3 / 5; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__homepage { + margin-top: 50px; + + @include on-tablet { + margin-top: 0; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__copyright { + display: flex; + + justify-content: space-between; + margin-top: 50px; + padding-bottom: 30px; + align-items: center; + } + + &__arrow-up { + display: flex; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..e63707365 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,75 @@ +.form { + width: 100%; + + display: flex; + flex-direction: column; + + &__email { + height: 28px; + box-sizing: border-box; + margin-bottom: 30px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + border: none; + outline: none; + border-bottom: 1px solid $main-black-color; + color: $main-black-color; + grid-column: span 4; + + &:hover { + border-bottom-color: $main-red-color; + &::placeholder { + color: $main-red-color; + } + } + + &:focus { + border-bottom-color: $main-red-color; + &::placeholder { + color: $main-red-color; + } + } + + &:valid { + font-weight: 700; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px $main-white-color inset; + } + } + + &__button { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + width: 100%; + height: 60px; + padding: 0; + background-color: $main-red-color; + border: none; + text-decoration: none; + + @include button-is-full; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + width: 100%; + } + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + letter-spacing: 0%; + color: $main-white-color; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..cecd62f18 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,130 @@ +.header { + position: relative; + background-color: $background-color; + overflow: hidden; + + &__content { + display: flex; + flex-direction: column; + + @include on-desktop { + position: relative; + height: auto; + } + } + + &__block { + margin-top: 50px; + margin-bottom: 40px; + color: $main-white-color; + + @include on-tablet { + margin-top: 100px; + margin-bottom: 50px; + } + + @include on-desktop { + margin-top: 90px; + margin-bottom: 80px; + } + } + + &__date { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + } + + &__title { + margin: 0; + margin-top: 10px; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 48px; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + width: 570px; + } + } + + &__description { + margin: 0; + margin-top: 30px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + @include on-tablet { + margin-top: 20px; + } + + @include on-desktop { + margin-top: 30px; + } + } + + &__button { + @include page-grid; + + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 70px; + } + + @include on-desktop { + margin: 0; + } + } + + &__background { + display: flex; + margin-bottom: 0; + justify-content: center; + + @include on-desktop { + position: absolute; + right: 0; + top: 137px; + bottom: 0; + } + + &--img { + width: 245px; + height: 273px; + + background-image: url(../images/header_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + width: 443px; + height: 494px; + } + + @include on-desktop { + width: 625px; + height: 663px; + + background-size: contain; + background-position: right top; + } + } + } +} diff --git a/src/styles/blocks/homepage.scss b/src/styles/blocks/homepage.scss new file mode 100644 index 000000000..a1f82ba3c --- /dev/null +++ b/src/styles/blocks/homepage.scss @@ -0,0 +1,66 @@ +.homepage { + &__title { + margin: 0; + margin-bottom: 10px; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + letter-spacing: 0%; + + color: $main-white-color; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + margin-bottom: 5px; + + @include on-tablet { + margin-bottom: 10px; + } + } + + &__link { + color: $main-white-color; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + text-decoration: none; + position: relative; + width: fit-content; + white-space: nowrap; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + height: 1px; + width: 100%; + background-color: $main-white-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + outline: none; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..94b37fe11 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,49 @@ +.icon { + display: block; + width: 30px; + height: 30px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: $effect-duration; + + @include hover(transform, scale(1.3)); + + &--menu { + background-image: url(../images/icons/icon_menu.svg); + } + + &--close { + background-image: url(../images/icons/icon_close.svg); + } + + &--facebook { + background-image: url(../images/icons/icon_facebook.svg); + width: 20px; + height: 20px; + } + + &--twitter { + background-image: url(../images/icons/icon_twitter.svg); + width: 20px; + height: 20px; + } + + &--telegram { + background-image: url(../images/icons/icon_telegram.svg); + width: 20px; + height: 20px; + } + + &--instagram { + background-image: url(../images/icons/icon_instagram.svg); + width: 20px; + height: 20px; + } + + &--arrow-up { + background-image: url(../images/icons/icon_arrow-up.svg); + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 000000000..1173f0471 --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,31 @@ +.language { + display: none; + + @include on-tablet { + position: relative; + display: inline-block; + + &__selector { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + outline: none; + padding: 8px 28px 8px 12px; + font-size: 14px; + color: $main-white-color; + cursor: pointer; + background-color: $background-color; + } + + &__icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + pointer-events: none; + width: 10px; + height: 10px; + } + } +} diff --git a/src/styles/blocks/line-desktop.scss b/src/styles/blocks/line-desktop.scss new file mode 100644 index 000000000..e159ac145 --- /dev/null +++ b/src/styles/blocks/line-desktop.scss @@ -0,0 +1,32 @@ +.line-desktop { + display: none; + + @include on-tablet { + display: none; + } + + @include on-desktop { + display: flex; + margin-top: 135px; + margin-bottom: 50px; + gap: 6px; + align-items: center; + } + + &__text { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 14px; + line-height: 125%; + letter-spacing: 0%; + color: $main-white-color; + } + + &__line { + width: 470px; + height: 1px; + background-color: $main-white-color; + opacity: 30%; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..c2ee015a5 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,3 @@ +.main { + margin: 0; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..2bdb58ba2 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,219 @@ +.menu { + box-sizing: border-box; + width: 100%; + height: 100vh; + background-color: $background-color; + overflow: hidden; + opacity: 0; + position: fixed; + top: 0; + right: 0; + left: 0; + + pointer-events: none; + transform: translateX(-100%); + + &:target { + pointer-events: all; + opacity: 1; + transform: translateX(0); + } + + &__top { + position: sticky; + top: 0; + z-index: 1; + } + + &__icons { + display: flex; + gap: 30px; + + @include on-tablet { + gap: 40px; + } + } + + &__language { + position: relative; + display: inline-block; + + @include on-tablet { + order: 2; + } + + &--selector { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + padding: 8px 28px 8px 12px; /* справа місце для іконки */ + font-size: 14px; + color: white; + cursor: pointer; + background-color: $background-color; + } + + &--icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + pointer-events: none; + width: 10px; /* або підбери під свою іконку */ + height: 10px; + } + } + + &__block { + margin-top: 20px; + margin-bottom: 40px; + color: $main-white-color; + + @include on-tablet { + @include page-grid; + } + } + + &__schedule { + display: flex; + flex-direction: column; + margin-bottom: 20px; + + @include on-tablet { + grid-column: span 2; + } + + &--title { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + } + + &--time { + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + } + } + + &__adress { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: span 4; + } + + &--title { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + } + + &--link { + position: relative; + width: fit-content; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + text-decoration: none; + color: $main-white-color; + + &::after { + content: ''; + position: absolute; + display: block; + bottom: -5px; + height: 1px; + width: 100%; + background-color: $main-white-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &__nav { + margin-bottom: 40px; + } + + &__barrier { + display: grid; + + width: 100%; + height: 1px; + margin-bottom: 40px; + background-color: $main-white-color; + + @include on-tablet { + width: 100%; + } + + @include on-desktop { + width: 570px; + } + } + + &__button { + @include page-grid; + + width: 100%; + grid-column: span 2; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__background { + display: none; + + @include on-tablet { + display: flex; + margin-bottom: 0; + justify-content: center; + } + + @include on-desktop { + position: absolute; + right: 0; + top: 103px; + } + + &--img { + @include on-tablet { + width: 422px; + height: 466px; + + background-image: url(../images/menu_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + } + + @include on-desktop { + width: 624px; + height: 697px; + background-size: contain; + background-position: right top; + } + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..cc89011d8 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,45 @@ +.nav { + display: grid; + + &__block { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + position: relative; + width: fit-content; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + letter-spacing: 0%; + text-decoration: none; + color: $main-white-color; + + @include on-tablet { + font-size: 48px; + line-height: 120%; + } + + &::after { + content: ''; + position: absolute; + display: block; + bottom: -5px; + height: 1px; + width: 100%; + background-color: $main-white-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..a91dfe5ed --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,140 @@ +.news { + @include page-grid; + + &__header { + margin: 0; + margin-bottom: 10px; + + @include page-grid; + + align-items: center; + + @include on-tablet { + margin: 0; + } + } + + &__card { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + display: flex; + flex-direction: column; + } + + &__photo { + width: 100%; + height: 280px; + object-fit: cover; + margin-top: 50px; + margin-bottom: 20px; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + margin-top: 70px; + margin-bottom: 30px; + height: 420px; + } + + @include on-desktop { + margin-top: 55px; + margin-bottom: 20px; + } + } + + &__content { + display: flex; + flex-direction: column; + } + + &__date { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + color: $main-black-color; + } + + &__title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + color: $main-black-color; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 18px; + } + + @include on-desktop { + line-height: 150%; + } + } + + &__article { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $accent-grey-color; + } + + &__button { + @include on-tablet { + align-items: center; + width: 100%; + } + + @include on-desktop { + align-items: center; + width: 330px; + } + + &--top { + display: none; + + @include on-tablet { + display: flex; + width: 100%; + height: 60px; + justify-self: end; + align-items: center; + grid-column: 5 / -1; + } + + @include on-desktop { + width: 100%; + grid-column: 10 / -1; + } + } + + &--bottom { + display: block; + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..347e3ed3e --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,30 @@ +.page { + font-family: 'Playfair Display', sans-serif; + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: all $effect-duration; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..bd087be3b --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,49 @@ +.section { + margin-top: 90px; + margin-bottom: 120px; + + @include on-tablet { + margin-top: 105px; + } + + @include on-desktop { + margin-top: 110px; + } + + &__title { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + + grid-column: span 2; + + @include on-tablet { + font-size: 40px; + grid-column: span 4; + } + + @include on-desktop { + font-size: 48px; + line-height: 120%; + + grid-column: span 6; + } + } + + &__events { + margin-top: 120px; + } + + &__visit { + margin-top: 90px; + margin-bottom: 90px; + background-color: $background-color; + + @include on-desktop { + height: 800px; + } + } +} diff --git a/src/styles/blocks/shedule.scss b/src/styles/blocks/shedule.scss new file mode 100644 index 000000000..487c71503 --- /dev/null +++ b/src/styles/blocks/shedule.scss @@ -0,0 +1,37 @@ +.shedule { + &__title { + margin: 0; + margin-bottom: 10px; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + + color: $main-white-color; + + @include on-tablet { + font-size: 20px; + margin-bottom: 30px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + color: $main-white-color; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..9dd2ae039 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,88 @@ +.subscribe { + @include page-grid; + + &__content { + grid-column: span 2; + + @include on-tablet { + grid-column: span 5; + } + + @include on-desktop { + display: grid; + gap: 30px; + grid-template-columns: repeat(12, 1fr); + grid-column: span 12; + margin-top: 90px; + margin-bottom: 50px; + } + } + + &__title { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + margin-bottom: 20px; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + width: 100%; + grid-column: span 5; + font-size: 48px; + margin-bottom: 0; + } + } + + &__description { + margin: 0; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + margin-bottom: 50px; + + @include on-desktop { + grid-column: 7 / -1; + align-items: center; + } + } + + &__form { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + display: flex; + flex-direction: column; + grid-column: span 5; + } + } + + &__button { + grid-column: span 2; + + @include on-tablet { + display: grid; + gap: 30px; + grid-column: span 3; + max-width: 330px; + } + + @include on-desktop { + @include page-grid; + + grid-column: span 4; + max-width: 280px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..34a49ce5e --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,31 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; + padding-bottom: 20px; + + @include on-desktop { + padding-top: 26px; + padding-bottom: 26px; + } + + &__icons { + @include on-tablet { + display: flex; + gap: 40px; + } + } + + &__icon { + display: flex; + } + + &__logo { + height: 40px; + + transition: $effect-duration; + + @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..9b01d3544 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,102 @@ +.visit { + @include page-grid; + + position: relative; + + @include on-desktop { + height: 800px; + } + + &__background { + &--img { + @include on-desktop { + position: absolute; + height: 800px; + width: 578px; + background-image: url(../images/section_bg_desktop.png); + background-repeat: no-repeat; + background-size: contain; + background-position: left top; + } + } + } + + &__content { + padding-top: 50px; + + @include page-grid; + + grid-column: span 2; + + @include on-tablet { + padding-top: 80px; + + grid-column: 1 / 5; + } + + @include on-desktop { + margin: 0; + padding-top: 205px; + grid-column: 6 / -2; + align-items: center; + justify-content: center; + } + + display: flex; + flex-direction: column; + } + + &__title { + margin: 0; + margin-bottom: 20px; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 38px; + line-height: 100%; + letter-spacing: 0%; + color: $main-white-color; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + margin-bottom: 10px; + } + } + + &__description { + margin: 0; + margin-bottom: 40px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $main-white-color; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__button { + @include page-grid; + + display: flex; + flex-direction: column; + grid-column: span 2; + margin-bottom: 50px; + + @include on-tablet { + grid-column: span 3; + margin-bottom: 80px; + } + + @include on-desktop { + margin: 0; + grid-column: 6 / 9; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..71528997f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import '/src/styles/utils/variables'; +@import '/src/styles/utils/fonts'; +@import '/src/styles/utils/mixins'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/top-bar'; +@import '/src/styles/blocks/container'; +@import '/src/styles/blocks/icon'; +@import '/src/styles/blocks/language'; +@import '/src/styles/blocks/line-desktop'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/main'; +@import '/src/styles/blocks/button'; +@import '/src/styles/blocks/exhibitions'; +@import '/src/styles/blocks/section'; +@import '/src/styles/blocks/events'; +@import '/src/styles/blocks/visit'; +@import '/src/styles/blocks/news'; +@import '/src/styles/blocks/subscribe'; +@import '/src/styles/blocks/form'; +@import '/src/styles/blocks/footer'; +@import '/src/styles/blocks/contacts'; +@import '/src/styles/blocks/shedule'; +@import '/src/styles/blocks/homepage'; +@import '/src/styles/blocks/copyright'; 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/fonts.scss b/src/styles/utils/fonts.scss new file mode 100644 index 000000000..9d106b0f2 --- /dev/null +++ b/src/styles/utils/fonts.scss @@ -0,0 +1,2 @@ +@import 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..bb89f3e7f --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,87 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + width: 100%; + padding-inline: 20px; + + @include on-tablet { + padding-inline: $tablet-content-padding; + } + + @include on-desktop { + padding-inline: $desktop-content-padding; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin hover($property, $to-value) { + transition: #{$property} $effect-duration ease-in-out; + &:hover { + #{$property}: $to-value; + } +} + +@mixin hover-text { + &:hover { + color: $color-hover; + border-bottom: 1px solid $color-hover; + } +} + +@mixin button-is-full { + &:hover { + background-color: $color-hover; + } + + &:active { + background-color: $color-pressed; + } + + &:disabled { + background-color: $color-disabled; + } +} + +@mixin button-border { + &:hover { + color: $color-hover; + border-color: $color-hover; + } + + &:active { + color: $color-pressed; + border-color: $color-pressed; + } + + &:disabled { + color: $color-disabled; + border-color: $color-disabled; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..1f21ad067 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,13 @@ +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$tablet-content-padding: 39px; +$desktop-content-padding: 55px; +$main-red-color: #cd4d31; +$main-white-color: #f1f5f4; +$main-black-color: #1c1b29; +$accent-grey-color: #504f5e; +$background-color: #3f5252; +$color-hover: #af3419; +$color-pressed: #ea340d; +$color-disabled: #dd836f; +$effect-duration: 0.5s;