diff --git a/src/images/angels.png b/src/images/angels.png new file mode 100644 index 000000000..9bc2b4d3b Binary files /dev/null and b/src/images/angels.png differ diff --git a/src/images/art.png b/src/images/art.png new file mode 100644 index 000000000..6ecd437ec Binary files /dev/null and b/src/images/art.png differ diff --git a/src/images/boy.png b/src/images/boy.png new file mode 100644 index 000000000..e89443ced Binary files /dev/null and b/src/images/boy.png differ diff --git a/src/images/cat.png b/src/images/cat.png new file mode 100644 index 000000000..744e7e0db Binary files /dev/null and b/src/images/cat.png differ diff --git a/src/images/curators.png b/src/images/curators.png new file mode 100644 index 000000000..0668da98f Binary files /dev/null and b/src/images/curators.png differ diff --git a/src/images/favicon.png b/src/images/favicon.png new file mode 100644 index 000000000..2204b0a61 Binary files /dev/null and b/src/images/favicon.png differ diff --git a/src/images/girl.png b/src/images/girl.png new file mode 100644 index 000000000..038d84a9c Binary files /dev/null and b/src/images/girl.png differ diff --git a/src/images/icons/button-active.svg b/src/images/icons/button-active.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/icons/button-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/button-hover.svg b/src/images/icons/button-hover.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/icons/button-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/button.svg b/src/images/icons/button.svg new file mode 100644 index 000000000..1e8fb1c95 --- /dev/null +++ b/src/images/icons/button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/cross.png b/src/images/icons/cross.png new file mode 100644 index 000000000..369b61605 Binary files /dev/null and b/src/images/icons/cross.png differ diff --git a/src/images/icons/cross.svg b/src/images/icons/cross.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/footer-img.png b/src/images/icons/footer-img.png new file mode 100644 index 000000000..663322232 Binary files /dev/null and b/src/images/icons/footer-img.png differ diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/language-2.png b/src/images/icons/language-2.png new file mode 100644 index 000000000..a92f7ee1d Binary files /dev/null and b/src/images/icons/language-2.png differ diff --git a/src/images/icons/language.svg b/src/images/icons/language.svg new file mode 100644 index 000000000..3b5235976 --- /dev/null +++ b/src/images/icons/language.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/menu.png b/src/images/icons/menu.png new file mode 100644 index 000000000..2de84f17a Binary files /dev/null and b/src/images/icons/menu.png differ diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/telegram.svg b/src/images/icons/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-namu.png b/src/images/logo-namu.png new file mode 100644 index 000000000..d248572bb Binary files /dev/null and b/src/images/logo-namu.png differ diff --git a/src/images/master-class.png b/src/images/master-class.png new file mode 100644 index 000000000..667e2e8fa Binary files /dev/null and b/src/images/master-class.png differ diff --git a/src/images/postcards.png b/src/images/postcards.png new file mode 100644 index 000000000..c7d00b5c3 Binary files /dev/null and b/src/images/postcards.png differ diff --git a/src/images/visit.png b/src/images/visit.png new file mode 100644 index 000000000..f149a3ca1 Binary files /dev/null and b/src/images/visit.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..4a3a04531 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -6,14 +7,529 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Namu + + + + + + - -

Hello Mate Academy

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

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

+ +
+
+
+ exhibitions-cart__img +
+

11.07 - 22.09

+

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

+

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

+ + + +
+
+
+ exhibitions-cart__img +
+

Діє постійно

+

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

+

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

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

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

+ +
+
+ events__img +
+
+

14.08 о 13:00

+

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

+

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

+ + + +
+ +
+ events__img +
+ +
+

16.08 о 13:00

+

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

+

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

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

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

+

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

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

Новини

+ +
+
+
+ news-cart__img +
+

9 серпня 2019

+

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

+

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

+
+
+
+ news-cart__img +
+

9 серпня 2019

+

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

+

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

+
+
+ +
+
+ +
+
+
+

Підпишіться на дайджест

+

+ Першими дізнавайтесь про новини музею та розіграші, отримуйте + запрошення на події та читайте статті від кураторів +

+
+ + +
+
+
+
+
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..93179b0c4 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,2 @@ -// put fonts here +$main-font: 'Playfair Display'; +$text-font: 'Raleway'; diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..d4bf760a2 --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,342 @@ +body { + overflow: auto; + + &.no-scroll { + overflow: hidden; + } +} + +.aside { + height: 100vh; + position: fixed; + top: 0; + left: 0; + right: 0; + box-sizing: border-box; + background-color: $c-green; + pointer-events: none; + opacity: 0; + + transform: translateY(-100%); + transition: + opacity 0.3s ease, + transform 0.3s ease; + + &:target { + pointer-events: all; + opacity: 1; + transform: translateY(0); + } + + &__topbar { + height: 80px; + display: flex; + justify-content: space-between; + align-items: center; + + @include onDesktop { + height: 90px; + } + + &-menu-close { + background-image: url(/images/icons/cross.svg); + background-position: center; + background-size: cover; + width: 22px; + height: 22px; + box-sizing: border-box; + display: block; + filter: brightness(0) invert(1); + + @include hover(transform, scale(1.2)); + + @include onTablet { + height: 30px; + width: 30px; + } + } + + &-logo { + height: 37px; + filter: brightness(0) invert(1); + + @include hover(transform, scale(1.2)); + } + + &-nav { + display: flex; + gap: 40px; + + @include onTablet { + flex-direction: row-reverse; + } + } + + &-language { + position: relative; + display: block; + + &-wrapper { + display: flex; + align-items: center; + } + + &-button { + background-color: $c-green; + border: none; + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 24px; + color: #f1f5f4; + cursor: pointer; + + @include hover(transform, scale(1.2)); + } + + &-button-img { + height: 24px; + width: 35px; + } + + &-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: #fff; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 10; + width: max-content; + } + + &-option { + font-family: $text-font; + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-decoration: none; + display: block; + cursor: pointer; + + &:hover { + background-color: $c-green; + color: #fff; + } + } + } + } + + &__information { + @include pageGrid; + + grid-column: 1 / -1; + + padding-top: 10px; + + @include onTablet { + padding-top: 30px; + } + + @include onDesktop { + padding-top: 40px; + } + + &-schedule { + grid-column: 1 / -1; + padding-bottom: 20px; + + @include onTablet { + grid-column: 1 / 3; + padding: 0; + } + + &-text { + font-family: Raleway, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: $c-white; + } + + &-bold-text { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 24px; + color: $c-white; + text-decoration: none; + } + } + + &-address { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 3 / 6; + } + + &-text { + font-family: Raleway, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: $c-white; + } + + &-bold-text { + font-family: Raleway, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 24px; + color: $c-white; + text-decoration: none; + + @include hover(transform, scale(1.03)); + + &:hover { + border-bottom: 1px solid $c-white; + } + } + } + } + + &__img { + display: none; + + @include onTablet { + background-image: url(/images/boy.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + display: block; + width: 422px; + height: 446px; + margin: 0 auto; + z-index: -1; + } + + @include onDesktop { + position: absolute; + width: 624px; + height: 697px; + bottom: 0; + right: 0; + } + } + + &__nav { + padding-top: 40px; + padding-bottom: 40px; + grid-column: 1 /-1; + + @include onTablet { + padding-top: 50px; + padding-bottom: 50px; + } + + @include onDesktop { + padding-top: 70px; + padding-bottom: 60px; + } + + &-list { + display: flex; + flex-direction: column; + gap: 20px; + list-style: none; + padding: 0; + + @include onTablet { + gap: 30px; + } + + @include onDesktop { + gap: 60px; + } + } + + &-link { + font-family: $main-font; + font-size: 20px; + font-weight: 700; + line-height: 30px; + text-decoration: none; + color: $c-white; + + &:hover { + border-bottom: 1px solid $c-white; + } + + @include onTablet { + font-size: 48px; + line-height: 57px; + } + } + + &-item { + @include hover(transform, scale(1.01)); + } + } + + &__line { + grid-column: 1 /-1; + color: $c-white; + width: 100%; + + @include onDesktop { + opacity: 30%; + width: 530px; + margin-left: 0; + } + } + + &__button { + margin: 0; + margin-top: 40px; + margin-bottom: 238px; + width: 279px; + height: 60px; + padding: 0; + background-color: $c-orange; + + text-align: center; + color: $c-white; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + border: none; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + @include onTablet { + width: 330px; + grid-column: 1 / 4; + margin-top: 40px; + margin-bottom: 30px; + } + + @include onDesktop { + margin-top: 60px; + margin-bottom: 108px; + } + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + &:disabled { + background-color: $c-orange-disable; + } + } +} + +.aside__topbar-language:hover .aside__topbar-language-menu { + display: block; +} diff --git a/src/styles/blocks/digest.scss b/src/styles/blocks/digest.scss new file mode 100644 index 000000000..63df2d414 --- /dev/null +++ b/src/styles/blocks/digest.scss @@ -0,0 +1,140 @@ +.digest { + position: relative; + margin-top: 120px; + padding-bottom: 120px; + background-color: $c-white; + + @include onTablet { + margin-top: 160px; + padding-bottom: 160px; + } + + @include onDesktop { + margin-top: 200px; + padding-bottom: 200px; + } + + &__container { + @include pageGrid; + } + + &__title { + grid-column: 1 / -1; + font-family: $main-font; + font-size: 28px; + font-weight: 700; + line-height: 35px; + color: $c-black; + + @include onTablet { + font-size: 40px; + line-height: 50px; + } + + @include onDesktop { + grid-column: 1 / 7; + font-size: 48px; + line-height: 56.7px; + } + } + + &__description { + grid-column: 1 / -1; + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-black; + margin-top: 20px; + + @include onDesktop { + margin-top: 0; + grid-column: 7 / -1; + } + } + + &__input-container { + display: flex; + flex-direction: column; + gap: 30px; + margin-top: 50px; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + gap: 40px; + grid-column: 1 / 6; + } + } + + &__input { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + border: none; + background-color: $c-white; + border-bottom: 1px solid $c-black; + + &:hover { + border-bottom: 1px solid $c-orange; + } + + &:hover::placeholder { + color: $c-orange; + } + + &:focus { + outline: none; + border-bottom: 1px solid $c-orange; + } + + &:focus::placeholder { + font-weight: 600; + color: $c-orange; + } + + &:not(:placeholder-shown) { + color: $c-black; + font-weight: 600; + } + } + + &__button { + margin-top: 30px; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + text-align: center; + color: $c-white; + width: 100%; + height: 60px; + background-color: $c-orange; + border: none; + transition: 0.3s ease; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + @include onTablet { + width: 330px; + } + + @include onDesktop { + margin-top: 40px; + width: 270px; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..3eebeeeca --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,281 @@ +.events { + &__container { + margin-top: 120px; + + @include pageGrid; + + @include onTablet { + margin-top: 160px; + } + + @include onDesktop { + margin-top: 200px; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 70px; + grid-column: 1 / -1; + } + + @include onDesktop { + grid-column: 1 / -1; + } + + &-title { + color: $c-black; + } + } + + &__top-button { + display: none; + + @include hover(transform, scale(1.03)); + + @include onTablet { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 210px; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + cursor: pointer; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } + + &__img-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding-bottom: 20px; + + @include onTablet { + padding: 0; + } + + &-curators { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + padding-bottom: 70px; + } + + @include onDesktop { + grid-column: 1 / 5; + padding-bottom: 60px; + } + } + + &-masterclass { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + } + + &__img { + width: 100%; + cursor: pointer; + + @include hover(transform, scale(1.03)); + } + + &__content { + &-curators { + grid-column: 1 / -1; + padding-bottom: 60px; + + @include onTablet { + grid-column: 4 / -1; + padding: 0; + } + + @include onDesktop { + grid-column: 5 / -1; + } + } + + &-masterclass { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / -1; + } + + @include onDesktop { + grid-column: 5 / -1; + } + } + } + + &__date { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-orange; + padding-bottom: 10px; + } + + &__title { + font-family: $main-font; + font-size: 20px; + font-weight: 700; + line-height: 25px; + color: $c-black; + padding-bottom: 20px; + + @include onTablet { + line-height: 30px; + font-size: 24px; + } + } + + &__description { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray; + padding-bottom: 30px; + + @include onTablet { + padding-bottom: 50px; + } + } + + &__button { + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + text-align: center; + color: $c-white; + width: 100%; + height: 60px; + background-color: $c-orange; + border: none; + transition: 0.3s ease; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + @include onDesktop { + width: 270px; + } + } + + &__bottom-button { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 100%; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + margin-top: 30px; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + @include onTablet { + display: none; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..48a0b9790 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,285 @@ +.main { + padding-top: 90px; + background-color: $c-white; + + @include onTablet { + padding-top: 100px; + } + + @include onDesktop { + padding-top: 110px; + } +} + +.exhibitions { + &__container { + @include pageGrid; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 70px; + grid-column: 1 / -1; + } + + @include onDesktop { + grid-column: 1 / -1; + } + + &-title { + color: $c-black; + } + } + + &__top-button { + display: none; + + @include hover(transform, scale(1.03)); + + @include onTablet { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 210px; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + cursor: pointer; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } + + &-cart { + height: 100%; + + &-angels { + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + grid-column: 1 / 4; + margin-bottom: 0; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &-art { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / -1; + } + + @include onDesktop { + grid-column: 7 / -1; + } + } + + &__img-wrapper { + width: 100%; + height: 356px; + display: flex; + align-items: center; + justify-content: center; + + @include onTablet { + height: 420px; + } + + @include onDesktop { + height: 484px; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + &-art { + object-position: center; + } + } + + &__date { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-orange; + padding-top: 20px; + + @include onTablet { + padding-top: 30px; + } + + @include onDesktop { + padding-top: 20px; + } + } + + &__title { + font-family: $main-font; + font-size: 24px; + font-weight: 700; + line-height: 30px; + padding-top: 10px; + color: $c-black; + } + + &__description { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray; + padding-top: 10px; + } + + &__button { + margin: 0; + margin-top: 30px; + width: 100%; + height: 60px; + padding: 0; + background-color: $c-orange; + + text-align: center; + color: $c-white; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + border: none; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + @include onTablet { + grid-column: 1 / 4; + margin-top: 40px; + } + + @include onDesktop { + margin-top: 50px; + width: 270px; + } + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + &:disabled { + background-color: $c-orange-disable; + } + } + } + + &__bottom-button { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 100%; + + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + margin-top: 30px; + + @include hover(transform, scale(1.03)); + + cursor: pointer; + + @include onTablet { + display: none; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..55080f9c7 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,197 @@ +.footer { + background-color: $c-green; + + &__container { + @include pageGrid; + + padding-top: 34px; + + @include onTablet { + padding-top: 50px; + } + } + + &__title { + font-family: $main-font; + font-size: 18px; + font-weight: 700; + line-height: 27px; + color: $c-white; + padding-bottom: 10px; + + @include onTablet { + font-size: 20px; + line-height: 30px; + padding-bottom: 30px; + } + } + + &__contacts { + grid-column: 1 / -1; + padding-bottom: 50px; + + @include onTablet { + grid-column: 1 / 3; + padding-bottom: 0; + } + + @include onDesktop { + grid-column: 1 / 5; + } + + &-links { + display: flex; + flex-direction: column; + padding-bottom: 30px; + + @include onTablet { + padding-bottom: 50px; + } + } + + &-link { + color: $c-white; + text-decoration: none; + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + + @include hover(transform, scale(1.03)); + } + + &-icons { + display: flex; + gap: 20px; + } + + &-icon { + display: block; + background-position: center; + background-size: cover; + width: 20px; + height: 20px; + + @include hover(transform, scale(1.2)); + } + + &-icon-facebook { + background-image: url(/images/icons/facebook.svg); + } + + &-icon-twitter { + background-image: url(/images/icons/twitter.svg); + } + + &-icon-telegram { + background-image: url(/images/icons/telegram.svg); + } + + &-icon-instagram { + background-image: url(/images/icons/instagram.svg); + } + } + + &__schedule { + grid-column: 1 / -1; + padding-bottom: 50px; + + @include onTablet { + grid-column: 3 / 5; + padding-bottom: 0; + } + + @include onDesktop { + grid-column: 5 / 9; + } + + &-list { + display: flex; + flex-direction: column; + list-style: none; + padding-left: 0; + } + + &-item { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-white; + text-decoration: none; + } + } + + &__head { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / -1; + } + + @include onDesktop { + grid-column: 9 / -1; + } + + &-list { + display: flex; + flex-direction: column; + gap: 5px; + list-style: none; + padding-left: 0; + + @include onTablet { + gap: 10px; + } + } + + &-item { + @include hover(transform, scale(1.03)); + } + + &-link { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-white; + text-decoration: none; + } + } + + &__bottom { + display: flex; + padding-top: 60px; + padding-bottom: 30px; + align-items: center; + justify-content: space-between; + + &-text-wrapper { + display: flex; + gap: 22px; + + @include onDesktop { + gap: 102px; + } + } + + &-text { + font-family: $text-font; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: $c-white; + } + + &-img { + background-image: url(/images/icons/footer-img.png); + background-position: center; + background-size: cover; + width: 30px; + height: 30px; + cursor: pointer; + + @include hover(transform, scale(1.2)); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..7e53ee353 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,163 @@ +.header { + position: relative; + background-color: $c-green; + + @include onDesktop { + height: 100vh; + } + + &__content { + display: flex; + flex-direction: column; + align-items: left; + margin-bottom: 40px; + + @include onTablet { + margin-bottom: 70px; + } + + @include onDesktop { + margin-bottom: 0; + } + } + + &__icons { + display: flex; + gap: 40px; + } + + &__text { + color: $c-white; + } + + &__title { + margin: 0; + margin-bottom: 30px; + width: 279px; + font-family: $main-font; + font-size: 48px; + font-weight: 700; + line-height: 48px; + text-align: left; + + @include onTablet { + font-size: 72px; + line-height: 72px; + width: 569px; + } + + @include onDesktop { + font-size: 96px; + line-height: 96px; + } + } + + &__anounce { + margin: 0; + margin-bottom: 10px; + font-family: $text-font; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + text-align: left; + } + + &__information { + margin: 0; + margin-bottom: 40px; + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: left; + } + + &__button { + margin: 0; + width: 279px; + height: 60px; + padding: 0; + background-color: $c-orange; + text-align: center; + color: $c-white; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + border: none; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + @include onTablet { + width: 330px; + } + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + &:disabled { + background-color: $c-orange-disable; + } + } + + &__image { + background-image: url(/images/girl.png); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + width: 245px; + height: 273px; + display: block; + margin: 0 auto; + + @include onTablet { + width: 443px; + height: 494px; + } + + @include onDesktop { + position: absolute; + width: 625px; + height: 663px; + bottom: 0; + right: 0; + } + } + + &__line-wrapper { + display: none; + position: absolute; + margin-bottom: 50px; + bottom: 0; + + @include onDesktop { + display: flex; + flex-direction: row; + align-items: center; + gap: 20px; + height: 30px; + grid-column: 1 / -1; + } + } + + &__line-date { + font-family: $text-font; + font-size: 14px; + font-weight: 700; + line-height: 18px; + opacity: 70%; + color: $c-white; + } + + &__line { + width: 469px; + opacity: 30%; + margin: 0; + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..6a2b6be46 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,240 @@ +.news { + margin-top: 90px; + + @include onTablet { + margin-top: 100px; + } + + @include onDesktop { + margin-top: 110px; + } + + &__container { + @include pageGrid; + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 70px; + grid-column: 1 / -1; + } + + @include onDesktop { + grid-column: 1 / -1; + } + + &-title { + color: $c-black; + } + } + + &__top-button { + display: none; + + @include hover(transform, scale(1.03)); + + @include onTablet { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 210px; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + cursor: pointer; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } + + &-cart { + height: 100%; + + &-postcards { + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + grid-column: 1 / 4; + margin-bottom: 0; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &-cat { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / -1; + } + + @include onDesktop { + grid-column: 7 / -1; + } + } + + &__img-wrapper { + width: 100%; + height: 280px; + display: flex; + align-items: center; + justify-content: center; + + @include onTablet { + height: 330px; + } + + @include onDesktop { + height: 370px; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: left; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + &-art { + object-position: center; + } + } + + &__date { + font-family: $text-font; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + color: $c-black; + padding-top: 20px; + + @include onTablet { + padding-top: 30px; + } + + @include onDesktop { + padding-top: 20px; + } + } + + &__title { + font-family: $main-font; + font-size: 20px; + font-weight: 700; + line-height: 30px; + padding-top: 10px; + color: $c-black; + } + + &__description { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-gray; + padding-top: 10px; + } + } + + &__bottom-button { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + gap: 8px; + height: 60px; + width: 100%; + + font-family: $text-font; + font-size: 16px; + font-weight: 600; + color: $c-orange; + border: 1px solid $c-orange; + background-color: $c-white; + transition: 0.3s ease; + margin-top: 30px; + + @include hover(transform, scale(1.03)); + + cursor: pointer; + + @include onTablet { + display: none; + } + + &:hover { + color: $c-orange-hover; + border: 1px solid $c-orange-hover; + } + + &:active { + color: $c-orange-pressed; + border: 1px solid $c-orange-pressed; + } + + &::before { + content: ''; + height: 20px; + width: 20px; + background-image: url(/images/icons/button.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + display: block; + transition: 0.3s ease; + } + &:hover::before { + background-image: url(/images/icons/button-hover.svg); + } + + &:active::before { + background-image: url(/images/icons/button-active.svg); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..72b18a332 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,13 @@ +.page { + font-family: $main-font; + color: $c-white; + font-size: 16px; + line-height: 24px; + + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..f7a16dec9 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,108 @@ +.top-bar { + height: 80px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 50px; + + @include onTablet { + margin-bottom: 99px; + } + + @include onDesktop { + height: 90px; + margin-bottom: 90px; + } + + &__logo { + width: 123px; + height: 40px; + filter: brightness(0) invert(1); + + @include hover(transform, scale(1.2)); + } + + &__nav { + display: flex; + gap: 40px; + } + + &__menu-icon { + background-image: url(/images/icons/menu.svg); + background-size: cover; + background-position: center; + box-sizing: border-box; + width: 22px; + height: 22px; + filter: brightness(0) invert(1); + + @include hover(transform, scale(1.2)); + + @include onTablet { + height: 30px; + width: 30px; + } + } + + &__language { + position: relative; + display: none; + + @include onTablet { + display: block; + } + + &-wrapper { + display: flex; + align-items: center; + } + } + + &__language-button { + background-color: $c-green; + border: none; + font-family: $text-font; + font-size: 16px; + font-weight: 500; + line-height: 24px; + color: #f1f5f4; + cursor: pointer; + + @include hover(transform, scale(1.2)); + + &-img { + width: 35px; + height: 24px; + } + } + + &__language-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + background-color: $c-white; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + z-index: 10; + width: max-content; + } + + &__language-option { + font-family: $text-font; + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-decoration: none; + display: block; + cursor: pointer; + + &:hover { + background-color: $c-green; + color: $c-white; + } + } +} + +.top-bar__language:hover .top-bar__language-menu { + display: block; +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..0ea390687 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,111 @@ +.visit { + position: relative; + margin-top: 90px; + background-color: $c-green; + + @include onTablet { + margin-top: 100px; + } + + @include onDesktop { + margin-top: 110px; + } + + &__container { + @include pageGrid; + } + + &__content { + grid-column: 1 / -1; + padding-top: 50px; + padding-bottom: 50px; + + @include onTablet { + padding-top: 80px; + padding-bottom: 80px; + } + + @include onDesktop { + grid-column: 6 / -1; + padding-top: 205px; + padding-bottom: 205px; + } + } + + &__title { + font-family: $main-font; + font-size: 38px; + font-weight: 700; + line-height: 38px; + color: $c-white; + + @include onTablet { + font-size: 62px; + line-height: 62px; + } + + @include onDesktop { + font-size: 80px; + line-height: 80px; + } + } + + &__description { + font-family: $text-font; + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: $c-white; + margin-top: 20px; + } + + &__button { + margin-top: 40px; + font-family: $text-font; + font-size: 16px; + font-weight: 600; + line-height: 16px; + text-align: center; + color: $c-white; + width: 100%; + height: 60px; + background-color: $c-orange; + border: none; + transition: 0.3s ease; + cursor: pointer; + + @include hover(transform, scale(1.03)); + + &:hover { + background-color: $c-orange-hover; + } + + &:active { + background-color: $c-orange-pressed; + } + + @include onTablet { + width: 330px; + } + + @include onDesktop { + width: 270px; + } + } + + &__img { + display: none; + + @include onDesktop { + background-image: url(/images/visit.png); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + display: block; + left: 0; + bottom: 0; + width: 570px; + height: 100%; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 000000000..03667f437 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,21 @@ +@import './utils'; +@import './fonts'; +@import './typography'; +@import './blocks/header'; +@import './blocks/page'; +@import './blocks/top-bar'; +@import './blocks/aside'; +@import './blocks/exhibitions'; +@import './blocks/events'; +@import './blocks/visit'; +@import './blocks/news'; +@import './blocks/digest'; +@import './blocks/footer'; + +* { + margin: 0; +} + +html { + scroll-behavior: smooth; +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..0eae89453 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,54 @@ #{$_property}: $_toValue; } } + +@mixin onTablet { + @media (min-width: 576px) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin contentPaddingInline() { + padding-inline: 20px; + + @include onTablet { + padding-inline: 39px; + } + + @include onDesktop { + max-width: 1280px; + padding-inline: 55px; + margin-inline: auto; + } +} + +.container { + max-width: 1600px; + margin: 0 auto; + + @include contentPaddingInline; +} + +@mixin pageGrid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include onTablet { + --columns: 6; + + column-gap: 30px; + } + + @include onDesktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..5812dcb83 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$c-orange: #cd4d31; +$c-orange-hover: #af3419; +$c-orange-pressed: #ea340d; +$c-orange-disable: #dd836f; +$c-white: #f1f5f4; +$c-green: #3f5252; +$c-black: #1c1b29; +$c-gray: #504f5e; +$tablet-min-width: 320px; +$desktop-min-width: 640px;