diff --git a/src/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf b/src/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf new file mode 100644 index 000000000..029a1a60e Binary files /dev/null and b/src/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf differ diff --git a/src/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf b/src/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf new file mode 100644 index 000000000..f92eba432 Binary files /dev/null and b/src/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf differ diff --git a/src/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf b/src/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf new file mode 100644 index 000000000..503b7c44f Binary files /dev/null and b/src/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf differ diff --git a/src/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf b/src/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf new file mode 100644 index 000000000..1c2a57b49 Binary files /dev/null and b/src/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf differ diff --git a/src/fonts/Raleway/Raleway-Bold.ttf b/src/fonts/Raleway/Raleway-Bold.ttf new file mode 100644 index 000000000..4e1e54952 Binary files /dev/null and b/src/fonts/Raleway/Raleway-Bold.ttf differ diff --git a/src/fonts/Raleway/Raleway-Medium.ttf b/src/fonts/Raleway/Raleway-Medium.ttf new file mode 100644 index 000000000..c6fa53352 Binary files /dev/null and b/src/fonts/Raleway/Raleway-Medium.ttf differ diff --git a/src/fonts/Raleway/Raleway-Regular.ttf b/src/fonts/Raleway/Raleway-Regular.ttf new file mode 100644 index 000000000..774b38210 Binary files /dev/null and b/src/fonts/Raleway/Raleway-Regular.ttf differ diff --git a/src/fonts/Raleway/Raleway-SemiBold.ttf b/src/fonts/Raleway/Raleway-SemiBold.ttf new file mode 100644 index 000000000..359f89bf8 Binary files /dev/null and b/src/fonts/Raleway/Raleway-SemiBold.ttf differ diff --git a/src/images/events/tours-by-gudimov.jpg b/src/images/events/tours-by-gudimov.jpg new file mode 100644 index 000000000..10fed4023 Binary files /dev/null and b/src/images/events/tours-by-gudimov.jpg differ diff --git a/src/images/events/trip-to-australia.jpg b/src/images/events/trip-to-australia.jpg new file mode 100644 index 000000000..07e1012a9 Binary files /dev/null and b/src/images/events/trip-to-australia.jpg differ diff --git a/src/images/exhibitions/angels.png b/src/images/exhibitions/angels.png new file mode 100644 index 000000000..d616bd16c Binary files /dev/null and b/src/images/exhibitions/angels.png differ diff --git a/src/images/exhibitions/art-20-21-century.png b/src/images/exhibitions/art-20-21-century.png new file mode 100644 index 000000000..c7bafbb6d Binary files /dev/null and b/src/images/exhibitions/art-20-21-century.png differ diff --git a/src/images/header-bg-phone.png b/src/images/header-bg-phone.png new file mode 100644 index 000000000..30aead695 Binary files /dev/null and b/src/images/header-bg-phone.png differ diff --git a/src/images/header-bg-tablet.png b/src/images/header-bg-tablet.png new file mode 100644 index 000000000..c7500b2bc Binary files /dev/null and b/src/images/header-bg-tablet.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..6b3e3ea41 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/fav-icon.png b/src/images/icons/fav-icon.png new file mode 100644 index 000000000..f54e6140d Binary files /dev/null and b/src/images/icons/fav-icon.png differ diff --git a/src/images/icons/icon-button-arrow-active.svg b/src/images/icons/icon-button-arrow-active.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/icons/icon-button-arrow-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-button-arrow-disabled.svg b/src/images/icons/icon-button-arrow-disabled.svg new file mode 100644 index 000000000..bf8442b58 --- /dev/null +++ b/src/images/icons/icon-button-arrow-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-button-arrow-hover.svg b/src/images/icons/icon-button-arrow-hover.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/icons/icon-button-arrow-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-button-arrow.svg b/src/images/icons/icon-button-arrow.svg new file mode 100644 index 000000000..1e8fb1c95 --- /dev/null +++ b/src/images/icons/icon-button-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..1787582cc --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-language-arrow.svg b/src/images/icons/icon-language-arrow.svg new file mode 100644 index 000000000..59ee73af5 --- /dev/null +++ b/src/images/icons/icon-language-arrow.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..2a9297b4c --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-up.svg b/src/images/icons/icon-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/icon-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/social-media/icon-facebook.svg b/src/images/icons/social-media/icon-facebook.svg new file mode 100644 index 000000000..205686930 --- /dev/null +++ b/src/images/icons/social-media/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social-media/icon-instagram.svg b/src/images/icons/social-media/icon-instagram.svg new file mode 100644 index 000000000..7a30c4fac --- /dev/null +++ b/src/images/icons/social-media/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social-media/icon-telegram.svg b/src/images/icons/social-media/icon-telegram.svg new file mode 100644 index 000000000..c7e8739d3 --- /dev/null +++ b/src/images/icons/social-media/icon-telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social-media/icon-twitter.svg b/src/images/icons/social-media/icon-twitter.svg new file mode 100644 index 000000000..543a3dd7e --- /dev/null +++ b/src/images/icons/social-media/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..b72a3e4b2 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/menu-bg-tablet.png b/src/images/menu-bg-tablet.png new file mode 100644 index 000000000..3f8d248b8 Binary files /dev/null and b/src/images/menu-bg-tablet.png differ diff --git a/src/images/menu-bg.png b/src/images/menu-bg.png new file mode 100644 index 000000000..70cb1e76c Binary files /dev/null and b/src/images/menu-bg.png differ diff --git a/src/images/news/cat-day.jpg b/src/images/news/cat-day.jpg new file mode 100644 index 000000000..eddd5ed06 Binary files /dev/null and b/src/images/news/cat-day.jpg differ diff --git a/src/images/news/winners-anouncement.jpg b/src/images/news/winners-anouncement.jpg new file mode 100644 index 000000000..a73328540 Binary files /dev/null and b/src/images/news/winners-anouncement.jpg differ diff --git a/src/images/plan-visit-bg.png b/src/images/plan-visit-bg.png new file mode 100644 index 000000000..073b86ff0 Binary files /dev/null and b/src/images/plan-visit-bg.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..82031436e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,597 @@ - + + - Title + + NAMU + + + - -

Hello Mate Academy

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

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

+ +

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

+ +

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

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

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

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

11.07 - 22.09

+ +

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

+ +

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

+ + + Купити квиток + +
+
+ +
+ Мистецтво ХХ ст. — XXI ст. + +
+

Діє постійно

+ +

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

+ +

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

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

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

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

14.08 о 13:00

+ +

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

+ +

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

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

16.08 о 13:00

+ +

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

+ +

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

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

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

+ +

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

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

Новини

+ + + Усі новини +
+ + +
+
+ Оголошення переможця + +
+

9 серпня 2019

+ +

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

+ +

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

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

9 серпня 2019

+ +

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

+ +

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

+
+
+
+
+
+ + +
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..57a70da04 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,47 @@ -// put fonts here +@font-face { + font-family: PlayfairDisplay; + src: url(/src/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: PlayfairDisplay; + src: url(/src/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: PlayfairDisplay; + src: url(/src/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf); + font-weight: 600; +} + +@font-face { + font-family: PlayfairDisplay; + src: url(/src/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf); + font-weight: 700; +} + +@font-face { + font-family: Raleway; + src: url(/src/fonts/Raleway/Raleway-Regular.ttf); + font-weight: 400; +} + +@font-face { + font-family: Raleway; + src: url(/src/fonts/Raleway/Raleway-Medium.ttf); + font-weight: 500; +} + +@font-face { + font-family: Raleway; + src: url(/src/fonts/Raleway/Raleway-SemiBold.ttf); + font-weight: 600; +} + +@font-face { + font-family: Raleway; + src: url(/src/fonts/Raleway/Raleway-Bold.ttf); + font-weight: 700; +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..eea6435fe 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,77 @@ +html { + font-family: Raleway, sans-serif; + font-weight: 400; + + color: $gray; +} + h1 { - @extend %h1; + @extend %base-title; + + font-size: 48px; + line-height: 100%; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } +} + +h2 { + @extend %base-title; + + font-size: 38px; + line-height: 100%; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +h3 { + @extend %base-title; + + font-size: 28px; + line-height: 125%; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + line-height: 120%; + } +} + +h4 { + @extend %base-title; + + font-size: 20px; + line-height: 125%; + + @include on-tablet { + font-size: 24px; + } +} + +h5 { + @extend %base-title; + + font-size: 20px; + line-height: 150%; +} + +h6 { + @extend %base-title; + + font-size: 14px; + line-height: 125%; } diff --git a/src/styles/base/_normalize.scss b/src/styles/base/_normalize.scss new file mode 100644 index 000000000..6f548fcbb --- /dev/null +++ b/src/styles/base/_normalize.scss @@ -0,0 +1,7 @@ +html { + scroll-behavior: smooth; +} + +input:-webkit-autofill { + transition: background-color 5000s ease-in-out 0s; +} diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 000000000..eb1b9d38f --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,34 @@ +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul { + margin: 0; +} + +select { + appearance: none; + overflow: hidden; + + border: none; + outline: none; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; + padding: 0; +} + +input, +button { + outline: none; + border: none; +} diff --git a/src/styles/blocks/_container.scss b/src/styles/blocks/_container.scss new file mode 100644 index 000000000..16e276230 --- /dev/null +++ b/src/styles/blocks/_container.scss @@ -0,0 +1,57 @@ +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + max-width: 1280px; + margin: 0 auto; + padding-inline: 55px; + } + + &--header { + height: 100vh; + min-height: 747px; + + background: url(/src/images/header-bg-phone.png) no-repeat bottom center; + + @include on-tablet { + min-height: 1092px; + + background-image: url(/src/images/header-bg-tablet.png); + } + + @include on-desktop { + min-height: 800px; + + background-image: url(/src/images/header-bg.png); + background-position: bottom right; + } + } + + &--menu { + height: 100vh; + min-height: 747px; + + @include on-tablet { + min-height: 1092px; + + background: url(/src/images/menu-bg-tablet.png) no-repeat bottom center; + } + + @include on-desktop { + min-height: 800px; + + background: url(/src/images/menu-bg.png) no-repeat bottom right; + } + } + + &--plan-visit { + @include on-desktop { + background: url(/src/images/plan-visit-bg.png) no-repeat bottom left / + contain; + } + } +} diff --git a/src/styles/blocks/_event.scss b/src/styles/blocks/_event.scss new file mode 100644 index 000000000..9000f113b --- /dev/null +++ b/src/styles/blocks/_event.scss @@ -0,0 +1,147 @@ +.event { + display: grid; + grid-template-rows: auto 1fr auto; + + &__photo { + object-fit: cover; + object-position: center; + + width: 100%; + height: 356px; + + margin-bottom: 20px; + + @include on-tablet { + height: 420px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 484px; + margin-bottom: 20px; + } + + transition: + box-shadow $effectDuration, + transform $effectDuration; + + &--first { + object-position: 33%; + } + + &:hover { + cursor: pointer; + box-shadow: + 1px 1px $main, + 2px 2px $main, + 3px 3px $main, + 4px 4px $main, + 5px 5px $main, + 6px 6px $main, + 7px 7px $main; + transform: translateX(-7px) translateY(-7px); + } + } + + &__info { + display: flex; + flex-direction: column; + font-size: 16px; + line-height: 150%; + } + + &__date { + margin-bottom: 10px; + + color: $main; + } + + &__title { + margin-bottom: 20px; + + color: $black; + } + + &__description { + margin: auto 0 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__button { + margin: 0 auto; + + @include on-tablet { + margin: 0; + } + } + + &--upcoming { + @include page-grid; + + grid-template-rows: 1fr; + } + + &--upcoming &__photo { + grid-column: span 3; + + @include on-tablet { + margin-bottom: 0; + } + + @include on-desktop { + height: 475px; + + grid-column: span 4; + } + } + + &--upcoming &__info { + grid-column: span 3; + + @include on-desktop { + grid-column: span 6; + } + } + + &--upcoming &__description { + margin-top: 0; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &--news &__photo { + height: 280px; + + @include on-tablet { + height: 330px; + } + + @include on-desktop { + height: 370px; + margin-bottom: 20px; + } + } + + &--news &__info { + margin-bottom: 0; + } + + &--news &__date { + margin-bottom: 0; + + color: $black; + } + + &--news &__description { + margin-bottom: 0; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..0934e7f3e --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,124 @@ +.footer { + padding-block: 30px; + + font-size: 16px; + line-height: 150%; + + color: $white; + background-color: $bg; + + @include on-tablet { + padding-block: 50px 30px; + } + + &__content { + @include page-grid; + + row-gap: 50px; + + @include on-tablet { + row-gap: 60px; + } + } + + &__contacts { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__schedule { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__schedule-list { + opacity: 80%; + } + + &__nav { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__title { + margin-bottom: 10px; + + font-size: 18px; + line-height: 150%; + + @include on-tablet { + margin-bottom: 30px; + + font-size: 20px; + } + } + + &__contacts-list { + margin-bottom: 30px; + + opacity: 80%; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__contact { + position: relative; + + color: inherit; + + @include link-hover-effect; + } + + &__social-media { + display: flex; + column-gap: 20px; + } + + &__social-media-link { + display: block; + width: 20px; + height: 20px; + + @include icon-hover-effect; + } + + &__menu { + display: flex; + flex-direction: column; + row-gap: 5px; + } + + &__bottom { + grid-column: 1/-1; + + display: flex; + justify-content: space-between; + align-items: center; + + font-size: 14px; + line-height: 140%; + } + + &__copyright { + display: flex; + column-gap: 22px; + align-items: center; + + opacity: 80%; + + @include on-desktop { + column-gap: 102px; + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..92697dc96 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,114 @@ +.header { + color: $white; + background-color: $bg; + + &__top-bar { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-tablet { + margin-bottom: 90px; + } + } + + &__main-content { + @include page-grid; + } + + &__date { + grid-column: span 2; + + margin-bottom: 10px; + + font-size: 14px; + line-height: 140%; + + opacity: 80%; + } + + &__title { + grid-column: 1/-1; + + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1/-2; + + margin-bottom: 20px; + } + + @include on-desktop { + grid-column: 1/7; + + margin-bottom: 30px; + } + } + + &__subtitle { + grid-column: 1/-1; + + width: 267px; + margin-bottom: 40px; + + font-size: 16px; + line-height: 150%; + + opacity: 80%; + + @include on-tablet { + grid-column: 1/4; + + width: 100%; + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 1/7; + + margin-bottom: 80px; + } + } + + &__button { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + margin-bottom: 135px; + } + } + + &__bottom-date { + display: none; + align-items: center; + + opacity: 60%; + + @include on-desktop { + grid-column: 1/7; + + display: flex; + } + + &::after { + content: ''; + + position: relative; + left: 20px; + + width: 470px; + height: 1px; + display: inline-block; + + background-color: $white; + + opacity: 30%; + } + } +} diff --git a/src/styles/blocks/_icon.scss b/src/styles/blocks/_icon.scss new file mode 100644 index 000000000..7f7f7e613 --- /dev/null +++ b/src/styles/blocks/_icon.scss @@ -0,0 +1,21 @@ +.icon { + display: inline-block; + width: 30px; + height: 30px; + + @include icon-hover-effect; + + &--menu { + background: url(/src/images/icons/icon-menu.svg); + fill: $white; + stroke: $white; + } + + &--close { + background: url(/src/images/icons/icon-close.svg); + } + + &--up { + background: url(/src/images/icons/icon-up.svg); + } +} diff --git a/src/styles/blocks/_input.scss b/src/styles/blocks/_input.scss new file mode 100644 index 000000000..f5cd4a0f3 --- /dev/null +++ b/src/styles/blocks/_input.scss @@ -0,0 +1,45 @@ +.input { + width: 100%; + + border-bottom: 1px solid $black; + + font-family: inherit; + font-size: 16px; + line-height: 150%; + + transition: border-color $effectDuration; + + &::placeholder { + color: $black; + + transition: + color $effectDuration, + caret-color $effectDuration; + } + + &:hover { + border-color: $main; + } + + &:hover::placeholder { + color: $main; + } + + &:focus::placeholder { + color: transparent; + caret-color: $main; + } + + &:focus { + font-weight: 700; + + border-color: $main; + caret-color: $main; + } + + &:valid { + font-weight: 700; + + border-color: $black; + } +} diff --git a/src/styles/blocks/_language.scss b/src/styles/blocks/_language.scss new file mode 100644 index 000000000..ae3717ede --- /dev/null +++ b/src/styles/blocks/_language.scss @@ -0,0 +1,28 @@ +.language { + &__select { + width: 35px; + + font-size: 16px; + line-height: 150%; + + color: $white; + + cursor: pointer; + + background: url(/src/images/icons/icon-language-arrow.svg) no-repeat center + right; + } + + &__option { + font-size: 16px; + line-height: 150%; + } + + &--header { + display: none; + + @include on-tablet { + display: flex; + } + } +} diff --git a/src/styles/blocks/_main.scss b/src/styles/blocks/_main.scss new file mode 100644 index 000000000..33fb0c7ea --- /dev/null +++ b/src/styles/blocks/_main.scss @@ -0,0 +1,59 @@ +.main { + padding-block: 90px 80px; + + @include on-tablet { + padding-block: 100px 128px; + } + + @include on-desktop { + padding-block: 110px 200px; + } + + &__exhibitions { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } + + &__upcoming-events { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 110px; + } + } + + &__plan-visit { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 120px; + } + + @include on-desktop { + margin-bottom: 110px; + } + } + + &__news { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..af9300106 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,104 @@ +.menu { + height: 100vh; + + color: $white; + background-color: $bg; + + overflow: auto; + + &__top-bar { + position: sticky; + top: 0; + z-index: 1; + + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 14px; + } + } + + &__content { + @include page-grid; + + font-size: 14px; + line-height: 140%; + } + + &__hours-wrapper { + grid-column: span 2; + + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__hours-label { + opacity: 80%; + } + + &__hours { + font-weight: 600; + font-size: 16px; + line-height: 150%; + } + + &__address-wrapper { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + } + + &__address-label { + opacity: 80%; + } + + &__address { + font-weight: 600; + font-size: 16px; + line-height: 150%; + } + + &__nav { + grid-column: 1/-1; + + margin-bottom: 40px; + + border-bottom: 1px solid $white; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + grid-column: 1/7; + margin-bottom: 60px; + + border-color: $white-transparent; + } + } + + &__button { + grid-column: span 2; + + margin: 0 auto; + + @include on-tablet { + grid-column: span 3; + + margin: 0; + } + + @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..3b970a785 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,59 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + row-gap: 20px; + padding-block: 40px; + + @include on-tablet { + row-gap: 30px; + padding-block: 50px; + } + + @include on-desktop { + row-gap: 60px; + padding-block: 70px 60px; + } + } + + &__link { + position: relative; + + display: inline-block; + + color: inherit; + + @include link-hover-effect; + } + + &__link-text { + font-size: 20px; + line-height: 150%; + + @include on-tablet { + font-size: 48px; + line-height: 120%; + } + } + + &--footer &__list { + row-gap: 5px; + padding-block: 0; + + @include on-tablet { + row-gap: 10px; + } + } + + &--footer &__item:first-child { + margin-bottom: 5px; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &--footer &__item:not(:first-child) { + opacity: 80%; + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 000000000..754ed1370 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,19 @@ +.page { + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: transform $effectDuration; + transform: translateY(-100%); + + &:target { + transform: translateY(0); + } + } + + &:has(&__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/_plan-visit.scss b/src/styles/blocks/_plan-visit.scss new file mode 100644 index 000000000..617636cf6 --- /dev/null +++ b/src/styles/blocks/_plan-visit.scss @@ -0,0 +1,69 @@ +.plan-visit { + color: $white; + background-color: $bg; + + &__content { + padding-block: 50px; + + @include page-grid; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + } + } + + &__title { + grid-column: 1/-1; + + margin-bottom: 30px; + + @include on-tablet { + grid-column: span 5; + } + + @include on-desktop { + margin-bottom: 20px; + + grid-column: 6/-1; + } + } + + &__text { + grid-column: 1/-1; + + margin-bottom: 40px; + + font-size: 16px; + line-height: 150%; + + opacity: 60%; + + @include on-tablet { + grid-column: span 4; + + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 6/-3; + + margin-bottom: 50px; + } + } + + &__button { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: 6/9; + } + } +} diff --git a/src/styles/blocks/_primary-button.scss b/src/styles/blocks/_primary-button.scss new file mode 100644 index 000000000..c1db967af --- /dev/null +++ b/src/styles/blocks/_primary-button.scss @@ -0,0 +1,38 @@ +.primary-button { + display: flex; + justify-content: center; + align-items: center; + width: 280px; + height: 60px; + box-sizing: border-box; + + font-size: 16px; + line-height: 16px; + font-weight: 600; + + color: $white; + background-color: $main; + + transition: background-color $effectDuration; + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 270px; + } + + &:hover { + cursor: pointer; + background-color: $main-dark; + } + + &:active { + background-color: $main-light; + } + + &:disabled { + background-color: $main-disabled; + } +} diff --git a/src/styles/blocks/_secondary-button.scss b/src/styles/blocks/_secondary-button.scss new file mode 100644 index 000000000..cd92ac2f1 --- /dev/null +++ b/src/styles/blocks/_secondary-button.scss @@ -0,0 +1,68 @@ +.secondary-button { + display: flex; + justify-content: center; + align-items: center; + column-gap: 8px; + width: 280px; + height: 60px; + box-sizing: border-box; + + border: 1px solid $main; + + font-weight: 600; + font-size: 16px; + + color: $main; + + @include on-tablet { + width: 210px; + } + + @include on-desktop { + width: 270px; + } + + transition: + background-color $effectDuration, + color $effectDuration, + border-color $effectDuration; + + &__icon { + width: 20px; + height: 20px; + + background-image: url(/src/images/icons/icon-button-arrow.svg); + + transition: + background-image $effectDuration, + transform $effectDuration; + } + + &:hover { + color: $main-dark; + border-color: $main-dark; + } + + &:hover &__icon { + transform: translateX(5px); + background-image: url(/src/images/icons/icon-button-arrow-hover.svg); + } + + &:active { + color: $main-light; + border-color: $main-light; + } + + &:active &__icon { + background-image: url(/src/images/icons/icon-button-arrow-active.svg); + } + + &:disabled { + color: $main-disabled; + border-color: $main-disabled; + } + + &:disabled &__icon { + background-image: url(/src/images/icons/icon-button-arrow-disabled.svg); + } +} diff --git a/src/styles/blocks/_section-wrapper.scss b/src/styles/blocks/_section-wrapper.scss new file mode 100644 index 000000000..ea957d99c --- /dev/null +++ b/src/styles/blocks/_section-wrapper.scss @@ -0,0 +1,76 @@ +.section-wrapper { + @include page-grid; + + grid-template-rows: auto auto auto; + + &__title { + grid-column: 1/-1; + grid-row: 1/2; + + margin-bottom: 60px; + + color: $black; + + @include on-tablet { + grid-column: span 4; + + margin-bottom: 75px; + } + + @include on-desktop { + grid-column: 1/7; + + margin-bottom: 70px; + } + } + + &__button { + grid-column: 1/-1; + grid-row: 3/-1; + + margin: 0 auto; + + @include on-tablet { + grid-column: -3/-1; + grid-row: 1/2; + } + } + + &__events { + grid-column: 1/-1; + grid-row: 2/3; + + @include page-grid; + + row-gap: 60px; + + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__event { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__event--upcoming { + @include on-tablet { + grid-column: 1/-1; + row-gap: 50px; + } + } + + &--news &__title { + margin-bottom: 55px; + } +} diff --git a/src/styles/blocks/_subscribe.scss b/src/styles/blocks/_subscribe.scss new file mode 100644 index 000000000..4524eabc9 --- /dev/null +++ b/src/styles/blocks/_subscribe.scss @@ -0,0 +1,55 @@ +.subscribe { + @include page-grid; + + color: $black; + + &__title { + grid-column: 1/-1; + + margin-bottom: 20px; + + @include on-desktop { + grid-column: span 6; + margin-bottom: 50px; + } + } + + &__text { + grid-column: 1/-1; + + margin-bottom: 50px; + + font-size: 16px; + line-height: 150%; + + @include on-tablet { + grid-column: span 5; + } + + @include on-desktop { + grid-column: -7/-1; + } + } + + &__form { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &__input { + grid-column: span 2; + + margin-bottom: 30px; + + @include on-desktop { + margin-bottom: 40px; + } + } +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 000000000..fd9b2b232 --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,38 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px; + + background-color: $bg; + + &__logo { + width: 123px; + height: 40px; + } + + @include on-desktop { + padding-block: 26px; + } + + &__icons { + display: grid; + align-items: center; + grid-template-columns: repeat(2, 1fr); + grid-template-areas: 'language icon'; + column-gap: 22px; + + @include on-tablet { + grid-template-areas: 'icon language'; + column-gap: 40px; + } + } + + &__language { + grid-area: language; + } + + &__icon { + grid-area: icon; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..3ed50c8f5 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './base/reset'; +@import './base/normalize'; +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/icon'; +@import './blocks/language'; +@import './blocks/primary-button'; +@import './blocks/secondary-button'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/main'; +@import './blocks/section-wrapper'; +@import './blocks/event'; +@import './blocks/plan-visit'; +@import './blocks/input'; +@import './blocks/subscribe'; +@import './blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..eae2bee6c 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; +%base-title { + font-family: PlayfairDisplay, sans-serif; + font-weight: 700; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f74fe364a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,60 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin on-tablet { + @media (min-width: 768px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin page-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + + max-width: 768px; + margin: 0 auto; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + max-width: 1280px; + } +} + +@mixin link-hover-effect { + &::after { + content: ''; + + position: absolute; + + display: block; + width: 100%; + height: 1px; + + background-color: $white; + + transition: opacity $effectDuration; + opacity: 0; + } + + &:hover::after { + opacity: 1; + } +} + +@mixin icon-hover-effect { + cursor: pointer; + transition: transform $effectDuration; + &:hover { - #{$_property}: $_toValue; + transform: scale(90%); } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a1c30ec26 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$effectDuration: 0.3s; +$main: #cd4d31; +$main-dark: #af3419; +$main-light: #ea340d; +$main-disabled: #dd836f; +$gray: #504f5e; +$white: #f1f5f4; +$white-transparent: rgba(241, 245, 244, 0.3); +$bg: #3f5252; +$black: #1c1b29;