diff --git a/index.html b/index.html index d339e6856..07fbb494d 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,350 @@ + - + - Title + NAMU + + + + + + + - -

Hello Mate Academy

- + + + +
+
+
+ + + + +
+
+

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

+

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

+

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

+ +
+
10.08 - 10.10
+
+
+
+
+
+ + + + + + +
+
+ + +
+
+
+

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

+
+
+ Виставка 1 +

11.07 - 22.09

+

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

+

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

+ +
+
+ Виставка 2 +

Діє постійно

+

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

+

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

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

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

+
+
+ Подія 1 +
+

14.08 о 13:00

+

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

+

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

+ +
+
+
+ Подія 2 +
+

16.08 о 13:00

+

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

+

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

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

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

+

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

+ +
+
+
+ + + +
+
+
+

Новини

+
+
+ Новина 1 +
+

9 серпня 2019

+

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

+

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

+
+
+
+ Новина 2 +
+

9 серпня 2019

+

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

+

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

+
+
+
+ +
+
+
+ + + + + +
+
+ + + diff --git a/src/images/event1.jpg b/src/images/event1.jpg new file mode 100644 index 000000000..10fed4023 Binary files /dev/null and b/src/images/event1.jpg differ diff --git a/src/images/event2.jpg b/src/images/event2.jpg new file mode 100644 index 000000000..07e1012a9 Binary files /dev/null and b/src/images/event2.jpg differ diff --git a/src/images/exhibition1.png b/src/images/exhibition1.png new file mode 100644 index 000000000..5905ccf1c Binary files /dev/null and b/src/images/exhibition1.png differ diff --git a/src/images/exhibition2.png b/src/images/exhibition2.png new file mode 100644 index 000000000..3f277068f Binary files /dev/null and b/src/images/exhibition2.png differ diff --git a/src/images/favicon.svg b/src/images/favicon.svg new file mode 100644 index 000000000..8b9dc25ef --- /dev/null +++ b/src/images/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/dropdown.svg b/src/images/icons/dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-arrow-up.svg b/src/images/icons/icon-arrow-up.svg new file mode 100644 index 000000000..42862ed88 --- /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..602500e73 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 000000000..59663c9b0 Binary files /dev/null and b/src/images/icons/icon-close.png differ 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.png b/src/images/icons/icon-menu.png new file mode 100644 index 000000000..6b64a3d4c Binary files /dev/null and b/src/images/icons/icon-menu.png differ 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/icon_scroll-up.svg b/src/images/icons/icon_scroll-up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/icon_scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/menu (2).png b/src/images/icons/menu (2).png new file mode 100644 index 000000000..6b64a3d4c Binary files /dev/null and b/src/images/icons/menu (2).png differ diff --git a/src/images/img_header.png b/src/images/img_header.png new file mode 100644 index 000000000..2b267ec93 Binary files /dev/null and b/src/images/img_header.png differ diff --git a/src/images/img_menu.png b/src/images/img_menu.png new file mode 100644 index 000000000..e483f73f1 Binary files /dev/null and b/src/images/img_menu.png differ diff --git a/src/images/img_plan_a_visit.png b/src/images/img_plan_a_visit.png new file mode 100644 index 000000000..5fa2bb759 Binary files /dev/null and b/src/images/img_plan_a_visit.png differ diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..97e7b55bd --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/news1.jpg b/src/images/news1.jpg new file mode 100644 index 000000000..a73328540 Binary files /dev/null and b/src/images/news1.jpg differ diff --git a/src/images/news2.jpg b/src/images/news2.jpg new file mode 100644 index 000000000..eddd5ed06 Binary files /dev/null and b/src/images/news2.jpg differ diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..52fa08917 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,81 @@ h1 { @extend %h1; + + margin: 0; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } +} + +h2 { + @extend %h2; + + margin: 0; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +h3 { + @extend %h3; + + margin: 0; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } +} + +h4 { + @extend %h4; + + margin: 0; + + @include on-tablet { + font-size: 24px; + } +} + +h5 { + @extend %h5; + + margin: 0; +} + +h6 { + @extend %h6; + + margin: 0; +} + +button { + @extend %button; + + margin: 0; +} + +body { + @extend %main; + + margin: 0; +} + +p { + @extend %main; + + margin: 0; } diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..477a19c7b --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,150 @@ +.events { + &__content { + position: relative; + display: flex; + flex-direction: column; + } + + &__title { + margin: 0; + color: $black-color; + + @include on-tablet { + padding-right: 240px; + } + } + + &__list { + display: flex; + flex-direction: column; + row-gap: 60px; + margin-top: 60px; + + @include on-tablet { + row-gap: 70px; + margin-top: 70px; + } + + @include on-desktop { + row-gap: 60px; + } + } + + &__item { + @include page-grid; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__item-image { + grid-column: 1 / -1; + + width: 100%; + height: 356px; + + object-fit: cover; + object-position: center; + + @include hover(transform, scale(1.04)); + + @include on-tablet { + grid-column: 1 / 4; + height: 420px; + } + + @include on-desktop { + grid-column: 1 / 5; + height: 484px; + } + } + + &__item-info { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 5 / 11; + } + } + + &__item-date { + margin: 0; + margin-top: 20px; + color: $main-color; + + @include on-tablet { + margin-top: 0; + } + } + + &__item-title { + margin: 0; + margin-top: 10px; + } + + &__item-description { + margin: 0; + margin-top: 20px; + color: $gray-color; + + @include on-tablet { + min-height: 50px; + } + } + + &__item-button { + @include button-primary; + + margin-top: 20px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + width: 270px; + margin-top: 40px; + } + } + + &__button { + @include button-secondary; + + display: inline-flex; + gap: 8px; + align-items: center; + justify-content: center; + + width: 280px; + margin-top: 40px; + margin-inline: auto; + padding: 0; + + @include on-tablet { + position: absolute; + top: 0; + right: 0; + + width: 210px; + margin-top: 0; + } + + @include on-desktop { + width: 270px; + } + } + + &__button-icon { + width: 20px; + height: 20px; + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..aa00d3ae2 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,132 @@ +.exhibitions { + &__content { + position: relative; + display: flex; + flex-direction: column; + } + + &__title { + margin: 0; + color: $black-color; + + @include on-tablet { + padding-right: 240px; + } + } + + &__list { + @include page-grid; + + row-gap: 60px; + margin-top: 60px; + + @include on-tablet { + row-gap: 0; + margin-top: 70px; + } + } + + &__item { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__item-image { + display: block; + + width: 100%; + height: 356px; + + object-fit: cover; + object-position: center; + + @include hover(transform, scale(1.04)); + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + } + } + + &__item-date { + margin-top: 20px; + color: $main-color; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__item-title { + margin-top: 10px; + } + + &__item-description { + margin-top: 20px; + color: $gray-color; + + @include on-tablet { + min-height: 110px; + } + } + + &__item-button { + @include button-primary; + + margin-top: 20px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 40px; + } + } + + &__button { + @include button-secondary; + + display: inline-flex; + gap: 8px; + align-items: center; + justify-content: center; + + width: 280px; + margin-top: 40px; + margin-inline: auto; + padding: 0; + + @include on-tablet { + position: absolute; + top: 0; + right: 0; + + width: 210px; + margin-top: 0; + } + + @include on-desktop { + width: 270px; + } + } + + &__button-icon { + width: 20px; + height: 20px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..f9e051ca9 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,151 @@ +.footer { + padding-top: 34px; + padding-bottom: 30px; + color: $white-color; + background-color: $background-color; + + @include on-tablet { + padding-top: 50px; + } + + &__content { + @include page-grid; + + row-gap: 50px; + + @include on-desktop { + row-gap: 60px; + } + } + + &__section { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + @include on-tablet { + grid-column: span 2; + gap: 30px; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__socials { + display: flex; + flex-direction: row; + gap: 20px; + margin-top: 20px; + + &-link { + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-position: center; + } + &--facebook { + background-image: url('../images/icons/icon-facebook.svg'); + } + + &--instagram { + background-image: url('../images/icons/icon-instagram.svg'); + } + + &--twitter { + background-image: url('../images/icons/icon-twitter.svg'); + } + + &--telegram { + background-image: url('../images/icons/icon-telegram.svg'); + } + } + + &__title { + &-link { + color: $white-color; + text-decoration: none; + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + } + + &__address { + & a { + color: $white-color; + text-decoration: none; + &:hover { + cursor: pointer; + text-decoration: underline; + } + &:visited { + color: $white-color; + text-decoration: none; + } + } + } + + &__nav-list { + display: flex; + flex-direction: column; + gap: 5px; + + @include on-tablet { + gap: 10px; + } + } + + &__nav-link { + color: $white-color; + text-decoration: none; + &:hover { + cursor: pointer; + text-decoration: underline; + } + } + + &__copyright { + display: flex; + grid-column: 1 / -1; + flex-direction: row; + align-items: end; + justify-content: space-between; + + &-info { + display: flex; + flex-direction: row; + gap: 22px; + + @include on-desktop { + gap: 102px; + } + } + + &-link { + color: $white-color; + text-decoration: none; + &:hover { + cursor: pointer; + } + } + + &-buttonUp { + cursor: pointer; + + width: 30px; + height: 30px; + border: none; + + @include hover(transform, scale(1.2)); + + background-color: transparent; + background-image: url('../images/icons/icon-arrow-up.svg'); + background-repeat: no-repeat; + background-position: center; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..52901b07f --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,134 @@ +.header { + position: relative; + + height: 100vh; + + background-color: $background-color; + background-image: url('../images/img_header.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: 245px 273px; + + @include on-tablet { + background-size: 443px 494px; + } + + @include on-desktop { + background-position: bottom right; + background-size: 625px 663px; + } + + &__content { + @include page-grid; + } + + &__title { + grid-column: 1 / -1; + margin: 0; + color: $white-color; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__text { + grid-column: 1 / -1; + margin: 0; + color: $white-color; + + @include on-desktop { + grid-column: 1 / 7; + } + + &--data { + margin-top: 50px; + + @include on-tablet { + margin-top: 99px; + } + + @include on-desktop { + margin-top: 90px; + } + } + + &--description { + margin-top: 30px; + + @include on-tablet { + margin-top: 20px; + } + + @include on-desktop { + margin-top: 30px; + } + } + } + + &__button { + @include button-primary; + + grid-column: 1 / -1; + margin-top: 40px; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 50px; + } + + @include on-desktop { + margin-top: 81px; + } + } + + &__image { + bottom: 0; + + display: block; + grid-column: 1 / -1; + justify-self: center; + + width: 245px; + height: 273px; + margin: 0 auto; + } + + &__date { + position: absolute; + bottom: 50px; + display: none; + width: 570px; + + @include on-desktop { + display: flex; + gap: 20px; + align-items: center; + } + } + + &__duration { + margin: 0; + + font-family: Raleway, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 150%; + color: $white-color; + letter-spacing: 0; + white-space: nowrap; + } + + &__divider { + width: 100%; + height: 1px; + margin: 0; + border: none; + + background-color: $white-color; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..a647149de --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,23 @@ +.icon { + width: 22px; + height: 22px; + + @include hover(transform, scale(1.2)); + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + width: 30px; + height: 30px; + } + + &--burger { + background-image: url('../images/icons/icon-menu.png'); + } + + &--close { + background-image: url('../images/icons/icon-close.png'); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..c30586447 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,66 @@ +.main { + padding-top: 90px; + padding-bottom: 80px; + padding-inline: 0; + background-color: $white-color; + + @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-top: 100px; + padding-bottom: 160px; + } + + @include on-desktop { + padding-top: 110px; + padding-bottom: 200px; + } + } + + &__events { + padding-bottom: 90px; + + @include on-tablet { + padding-bottom: 100px; + } + + @include on-desktop { + padding-bottom: 110px; + } + } + + &__visit { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 120px; + } + + @include on-desktop { + margin-bottom: 110px; + } + } + + &__news { + padding-bottom: 120px; + + @include on-tablet { + padding-bottom: 160px; + } + + @include on-desktop { + padding-bottom: 200px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..7008d7358 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,113 @@ +.menu { + height: 100vh; + background-color: $background-color; + + @include on-tablet { + background-image: url('../images/img_menu.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: 443px 494px; + } + + @include on-desktop { + background-position: bottom right; + background-size: 625px 663px; + } + + &__content { + @include page-grid; + + row-gap: 40px; + margin-top: 10px; + + @include on-tablet { + column-gap: 50px; + margin-top: 30px; + } + + @include on-desktop { + column-gap: 60px; + margin-top: 40px; + } + } + + &__info { + grid-column: 1 / -1; + + @include page-grid; + + row-gap: 20px; + } + + &__info-shedule { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__info-address { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / 6; + } + } + + &__info-label { + margin: 0; + + font-family: Raleway, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 140%; + color: $white-color; + letter-spacing: 0; + vertical-align: middle; + } + + &__info-value { + margin: 0; + + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 150%; + color: $white-color; + letter-spacing: 0; + vertical-align: middle; + } + + &__nav { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__divider { + grid-column: 1 / -1; + + width: 100%; + height: 1px; + border: 0; + + background-color: $white-color; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__button { + @include button-primary; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..15b171618 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,44 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + margin: 0; + padding: 0; + + list-style: none; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + display: inline-block; + + box-sizing: border-box; + + font-family: 'Playfair Display', serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + color: $white-color; + text-decoration: underline; + text-decoration-color: transparent; + text-decoration-thickness: 1px; + text-underline-offset: 4px; + letter-spacing: 0; + + @include hover(text-decoration-color, $white-color); + + @include on-tablet { + font-size: 48px; + line-height: 120%; + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..b1ab7234a --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,121 @@ +.news { + &__content { + position: relative; + display: flex; + flex-direction: column; + } + + &__title { + margin: 0; + color: $black-color; + + @include on-tablet { + padding-right: 240px; + } + } + + &__list { + @include page-grid; + + row-gap: 60px; + margin-top: 60px; + + @include on-tablet { + row-gap: 0; + margin-top: 75px; + } + + @include on-desktop { + margin-top: 55px; + } + } + + &__item { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__item-image { + display: block; + + aspect-ratio: 1 / 1; + width: 100%; + + object-fit: cover; + object-position: center; + + @include hover(transform, scale(1.04)); + + @include on-desktop { + height: 370px; + } + } + + &__item-date { + @extend %additional; + + margin-top: 20px; + color: $black-color; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__item-title { + margin-top: 10px; + } + + &__item-description { + margin-top: 20px; + color: $gray-color; + + @include on-tablet { + min-height: 50px; + } + } + + &__button { + @include button-secondary; + + display: inline-flex; + gap: 8px; + align-items: center; + justify-content: center; + + box-sizing: border-box; + width: 280px; + margin-top: 30px; + margin-inline: auto; + padding: 0; + + @include on-tablet { + position: absolute; + top: 0; + right: 0; + + width: 210px; + margin-top: 0; + } + + @include on-desktop { + width: 270px; + } + } + + &__button-icon { + width: 20px; + height: 20px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..5ff9ed4d0 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,45 @@ +.page { + scroll-behavior: smooth; + display: grid; + grid-template-columns: 2fr; + gap: 20px; + + @include on-tablet { + grid-template-columns: 6fr; + } + + @include on-desktop { + grid-template-columns: 12fr; + } + + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } + + &__body { + overflow-x: hidden; + min-width: 320px; + margin: 0; + background-color: $background-color; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + + transition: all $effectDuration; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..926f1d435 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,119 @@ +.subscribe { + &__content { + @include page-grid; + } + + &__title { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__description { + grid-column: 1 / -1; + margin-top: 20px; + + @include on-desktop { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 7 / -1; + margin-top: 0; + } + } + + &__form { + grid-column: 1 / -1; + + @include page-grid; + + margin-top: 50px; + } + + &__input { + @extend %main; + + grid-column: 1 / -1; + justify-self: center; + + width: 280px; + padding-bottom: 3px; + border: none; + border-bottom: 1px solid $black-color; + + color: $black-color; + + background-color: transparent; + + &::placeholder { + color: $black-color; + } + + &:hover { + border-bottom: 1px solid $main-color; + color: $main-color; + + &::placeholder { + color: $main-color; + } + } + + &:focus { + border-bottom: 1px solid $main-color; + color: $main-color; + outline: none; + box-shadow: none; + + &::placeholder { + opacity: 0; + } + } + + &:not(:placeholder-shown, :focus) { + font-weight: 700; + font-style: Bold; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px #fff inset; + transition: background-color 5000s ease-in-out 0s; + + -webkit-text-fill-color: $black-color; + } + + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px #fff inset; + + -webkit-text-fill-color: $main-color; + } + + @include on-tablet { + justify-self: start; + width: 450px; + } + + @include on-desktop { + width: 470px; + } + } + + &__button { + @include button-primary; + + grid-column: 1 / -1; + margin-top: 30px; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + margin-top: 40px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..5b3cbd95d --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,20 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; + + @include on-desktop { + height: 90px; + } + + &__link { + display: block; + } + + &__logo { + @include hover(transform, scale(1.2)); + + height: 40px; + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..e8a9769b4 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,69 @@ +.visit { + width: 100%; + background-color: $background-color; + + @include on-desktop { + background-image: url('../images/img_plan_a_visit.png'); + background-repeat: no-repeat; + background-position: bottom left -100px; + background-size: contain; + } + + &__content { + @include page-grid; + + padding-block: 50px; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + } + } + + &__title { + grid-column: 1 / -1; + color: $white-color; + + @include on-tablet { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 6 / -1; + } + } + + &__description { + grid-column: 1 / -1; + margin-top: 20px; + color: $white-color; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 6 / 11; + } + } + + &__button { + @include button-primary; + + grid-column: 1 / -1; + margin-top: 40px; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: 60px; + } + + @include on-desktop { + grid-column: 6 / 9; + margin-top: 50px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..d6c290429 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/main'; +@import 'blocks/exhibitions'; +@import 'blocks/events'; +@import 'blocks/visit'; +@import 'blocks/news'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..9a0c80e73 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,76 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: 'Playfair Display', serif; + font-size: 48px; + font-weight: 700; + font-style: Bold; + line-height: 100%; + letter-spacing: 0; +} + +%h2 { + font-family: 'Playfair Display', serif; + font-size: 38px; + font-weight: 700; + font-style: Bold; + line-height: 100%; + letter-spacing: 0; +} + +%h3 { + font-family: 'Playfair Display', serif; + font-size: 28px; + font-weight: 700; + font-style: Bold; + line-height: 125%; + letter-spacing: 0; +} + +%h4 { + font-family: 'Playfair Display', serif; + font-size: 20px; + font-weight: 700; + font-style: Bold; + line-height: 125%; + letter-spacing: 0; +} + +%h5 { + font-family: 'Playfair Display', serif; + font-size: 20px; + font-weight: 700; + line-height: 150%; + letter-spacing: 0; +} + +%h6 { + font-family: 'Playfair Display', serif; + font-size: 14px; + font-weight: 700; + font-style: Bold; + line-height: 125%; + letter-spacing: 0; +} + +%button { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 100%; + letter-spacing: 0; +} + +%main { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 150%; + letter-spacing: 0; +} + +%additional { + font-family: Raleway, sans-serif; + font-size: 14px; font-weight: 400; + line-height: 140%; + letter-spacing: 0; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f9db782b7 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,112 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration; &:hover { #{$_property}: $_toValue; } } + +@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; + } +} + +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + padding-inline: 55px; + } +} + +@mixin button-primary { + display: block; + + width: 100%; + height: 60px; + border: none; + + line-height: 60px; + color: $white-color; + text-align: center; + text-decoration: none; + + background-color: $main-color; + + &:hover { + cursor: pointer; + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + :disabled { + cursor: not-allowed; + background-color: #dd836f; + } +} + +@mixin button-secondary { + display: block; + + width: 100%; + height: 60px; + border: none; + border: 1px solid $main-color; + + line-height: 60px; + color: $main-color; + text-align: center; + text-decoration: none; + + background-color: $white-color; + + &:hover { + cursor: pointer; + border-color: #af3419; + color: #af3419; + } + + &:active { + border-color: #ea340d; + color: #ea340d; + } + + :disabled { + cursor: not-allowed; + border-color: #dd836f; + color: #dd836f; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..b5ac4ba5e 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$effectDuration: 0.3s; +$main-color: #cd4d31; +$white-color: #f1f5f4; +$background-color: #3f5252; +$black-color: #1c1b29; +$gray-color: #504f5e;