diff --git a/src/images/NAMU-favicon.png b/src/images/NAMU-favicon.png new file mode 100644 index 000000000..9a9dffcfe Binary files /dev/null and b/src/images/NAMU-favicon.png differ diff --git a/src/images/NAMU-logo.png b/src/images/NAMU-logo.png new file mode 100644 index 000000000..c2c6921b1 Binary files /dev/null and b/src/images/NAMU-logo.png differ diff --git a/src/images/events-one.png b/src/images/events-one.png new file mode 100644 index 000000000..813ec2901 Binary files /dev/null and b/src/images/events-one.png differ diff --git a/src/images/events-two.png b/src/images/events-two.png new file mode 100644 index 000000000..8a801bc67 Binary files /dev/null and b/src/images/events-two.png differ diff --git a/src/images/exhibitions-one.png b/src/images/exhibitions-one.png new file mode 100644 index 000000000..6d66702a7 Binary files /dev/null and b/src/images/exhibitions-one.png differ diff --git a/src/images/exhibitions-two.png b/src/images/exhibitions-two.png new file mode 100644 index 000000000..45e208c56 Binary files /dev/null and b/src/images/exhibitions-two.png differ diff --git a/src/images/header--image.png b/src/images/header--image.png new file mode 100644 index 000000000..79ea62542 Binary files /dev/null and b/src/images/header--image.png differ diff --git a/src/images/icons/arrow-right.svg b/src/images/icons/arrow-right.svg new file mode 100644 index 000000000..8110114d4 --- /dev/null +++ b/src/images/icons/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow.png b/src/images/icons/arrow.png new file mode 100644 index 000000000..35d02cb82 Binary files /dev/null and b/src/images/icons/arrow.png differ 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/icon-close.png b/src/images/icons/icon-close.png new file mode 100644 index 000000000..ba736012d Binary files /dev/null and b/src/images/icons/icon-close.png differ diff --git a/src/images/icons/icon-menu.png b/src/images/icons/icon-menu.png new file mode 100644 index 000000000..564f2f357 Binary files /dev/null and b/src/images/icons/icon-menu.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/scroll-up.svg b/src/images/icons/scroll-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/scroll-up.svg @@ -0,0 +1,4 @@ + + + + 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/img_menu.png b/src/images/img_menu.png new file mode 100644 index 000000000..b4dac15ef Binary files /dev/null and b/src/images/img_menu.png differ diff --git a/src/images/news-one.png b/src/images/news-one.png new file mode 100644 index 000000000..c83360ad3 Binary files /dev/null and b/src/images/news-one.png differ diff --git a/src/images/news-two.png b/src/images/news-two.png new file mode 100644 index 000000000..2fe5ce59f Binary files /dev/null and b/src/images/news-two.png differ diff --git a/src/images/visit-image.png b/src/images/visit-image.png new file mode 100644 index 000000000..fffeb3664 Binary files /dev/null and b/src/images/visit-image.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..fac47150a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,647 @@ - + - Title + NAMU + + + + + - -

Hello Mate Academy

+ + +
+
+
+ + + +
+
+ +
+
+
+ +
+
+
+
+ UA + +
+
+
+
+
+ +
+ +
+
+

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

+

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

+

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

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

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

+
+
+ +
+
+ +
+
+ exhibitions-one +

11.07 - 22.09

+ +

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

+ +

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

+ + +
+ +
+ exhibitions-one +

Діє постійно

+ +

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

+ +

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

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

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

+
+ +
+
+ Календар подій + + +
+
+ +
+
+ events-one +
+

14.08 о 13:00

+

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

+

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

+
+ +
+

14.08 о 13:00

+

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

+

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

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

16.08 о 13:00

+

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

+

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

+ + +
+ +
+

16.08 о 13:00

+

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

+

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

+
+ + +
+
+ +
+
+ Календар подій + + +
+
+
+ +
+
+ visit-image +
+ +
+

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

+ +

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

+ + +
+
+ +
+
+
+

Новини

+
+ +
+
+ Усі новини + +
+
+
+ +
+
+ news-one + +
+

9 серпня 2019

+ +

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

+ +

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

+
+
+ +
+ news-one + +
+

9 серпня 2019

+ +

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

+ +

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

+
+
+
+ +
+
+ Усі новини + + +
+
+
+ +
+ + + + + +
+
+ + diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..733115971 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,299 @@ +.events { + margin-top: 120px; + + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 105px; + + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + margin-top: 110px; + + padding-left: 55px; + padding-right: 55px; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + vertical-align: middle; + + color: #1c1b29; + margin: 0; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } + } + + &__cards { + margin-top: 60px; + + display: flex; + flex-direction: column; + + gap: 60px; + + @include on-tablet { + margin-top: 70px; + } + } + + &__card { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + } + } + + &__card-image { + width: 100%; + height: auto; + + object-fit: cover; + + @include on-tablet { + grid-column: 1; + grid-row: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__text-block-two { + display: none; + + @include on-tablet { + display: flex; + flex-direction: column; + grid-column: 2; + grid-row: 1; + padding-left: 20px; + } + + @include on-desktop { + grid-column: 5 / -1; + padding-left: 30px; + } + } + + &__text-block { + @include on-tablet { + display: none; + } + } + + &__card-date { + margin: 0; + padding-top: 20px; + + color: #cd4d31; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + @include on-tablet { + padding-top: 0; + } + } + + &__card-title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + color: #1c1b29; + + margin: 0; + padding-top: 10px; + + @include on-tablet { + font-size: 24px; + } + } + + &__card-sub-title { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: #504f5e; + + margin: 0; + padding-top: 20px; + } + + &__card-button-two { + display: none; + + border: none; + transition: all 0.3s ease; + + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + grid-column: 2; + grid-row: 2; + + width: 330px; + height: 60px; + + background-color: #cd4d31; + margin-top: 50px; + + display: flex; + justify-content: center; + align-items: center; + } + + @include on-desktop { + width: 270px; + + grid-column: 5 / -1; + } + } + + &__card-button { + margin-top: 30px; + + width: 280px; + height: 60px; + + background-color: #cd4d31; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + transition: all 0.3s ease; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + display: none; + } + } + + + + &__buttons { + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + + &__buttons-two { + display: none; + + @include on-tablet { + display: flex; + justify-content: flex-end; + transform: translateY(-90%); + } + } + + &__button { + border: 1px solid #cd4d31; + width: 280px; + height: 60px; + + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + text-decoration: none; + + transition: all 0.3s ease; + + color: #cd4d31; + + &:hover { + border: 1px solid #af3419; + color: #af3419; + } + + &:active { + border: 1px solid #ea340d; + color: #ea340d; + } + + @include on-tablet { + width: 210px; + } + + @include on-desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..70dee64f5 --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,234 @@ +.exhibitions { + margin-top: 90px; + + padding-left: 20px; + padding-right: 20px; + + overflow: hidden; + + @include on-tablet { + margin-top: 105px; + + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + margin-top: 110px; + + padding-left: 55px; + padding-right: 55px; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + vertical-align: middle; + + color: #1c1b29; + margin: 0; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } + } + + &__cards { + margin-top: 60px; + + display: flex; + flex-direction: column; + + gap: 60px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-top: 75px; + + gap: 30px; + } + } + + &__card-image { + width: 100%; + height: auto; + + object-fit: cover; + + @include on-desktop { + max-height: 484px; + } + } + + &__card-date { + margin: 0; + padding-top: 20px; + + color: #cd4d31; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + } + + &__card-title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + color: #1c1b29; + + margin: 0; + padding-top: 10px; + + @include on-tablet { + font-size: 24px; + } + } + + &__card-sub-title { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: #504f5e; + + margin: 0; + padding-top: 20px; + } + + &__card-sub-title--two { + @include on-tablet { + padding-top: 50px; + } + + @include on-desktop { + padding-top: 20px; + } + } + + &__card-button { + margin-top: 30px; + + width: 280px; + height: 60px; + + background-color: #cd4d31; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + transition: all 0.3s ease; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + margin-top: 40px; + width: 330px; + } + + @include on-desktop { + margin-top: 50px; + width: 270px; + } + } + + + &__buttons { + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + + &__top { + @include on-tablet { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &__buttons-two { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__button { + border: 1px solid #cd4d31; + width: 280px; + height: 60px; + + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + + transition: all 0.3s ease; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + text-decoration: none; + + color: #cd4d31; + + &:hover { + border: 1px solid #af3419; + color: #af3419; + } + + &:active { + border: 1px solid #ea340d; + color: #ea340d; + } + + @include on-tablet { + width: 210px; + } + + @include on-desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..19ec35673 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,169 @@ +.footer { + margin-top: 80px; + + padding: 34px 20px 30px ; + + background-color: #3f5252; + + @include on-tablet { + padding: 50px 39px 30px ; + + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include on-desktop { + padding: 50px 55px 30px ; + } + + &__contacts { + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__contacts-title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: #f1f5f4; + + margin: 0; + + @include on-tablet { + font-size: 20px; + } + } + + &__contacts-links { + margin-top: 10px; + + display: flex; + flex-direction: column; + } + + &__contacts-link { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + + text-decoration: none; + color: #f1f5f4; + } + + &__blog { + margin-top: 30px; + display: flex; + gap: 20px; + } + + &__schedule { + margin-top: 50px; + + @include on-tablet { + grid-column: 3 / 5; + margin-top: 0; + } + } + + &__schedule-title { + color: #f1f5f4; + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + } + + &__schedule-sub-title { + color: #f1f5f4; + margin: 0; + padding-top: 10px; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + } + + &__nav { + margin-top: 50px; + + @include on-tablet { + grid-column: 5 / 6; + margin-top: 0; + } + } + + &__links-title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: #f1f5f4; + } + + &__links { + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 5px; + } + + &__link { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: #f1f5f4; + text-decoration: none; + } + + &__bottom { + margin-top: 50px; + + display: flex; + justify-content: space-between; + align-items: center; + gap: 0; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__bottom-text-block { + display: flex; + gap: 22px; + align-items: center; + } + + &__bottom-title { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + text-align: center; + color: #f1f5f4; + margin: 0; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..e38435424 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,284 @@ +.header { + background-color: #3f5252; + width: 100%; + height: 100vh; + overflow: hidden; + + display: flex; + flex-direction: column; + + &__nav { + padding-left: 20px; + padding-right: 20px; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + padding-left: 55px; + padding-right: 55px; + } + } + + &__logo-wrapper { + padding-top: 20px; + + @include on-tablet { + padding-top: 26px; + } + } + + &__logo { + width: 124px; + height: 37px; + } + + &__icons { + padding-top: 30px; + + @include on-tablet { + display: none; + } + } + + &__icons-big { + padding-top: 24px; + + @include on-desktop { + padding-top: 30px; + } + } + + &__controls { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + gap: 40px; + } + } + + &__language-dropdown { + padding-top: 24px; + + @include on-desktop { + padding-top: 33px; + } + } + + &__language-toggle { + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + + display: flex; + align-items: center; + gap: 5px; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__bottom { + padding-top: 50px; + + margin-bottom: 0; + + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + padding-top: 100px; + + margin-bottom: 0; + + padding-left: 39px; + padding-right: 159px; + } + + @include on-desktop { + padding-top: 90px; + padding-left: 55px; + padding-right: 30px; + } + } + + &__date { + color: #f1f5f4; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + + margin: 0; + } + + &__title { + color: #f1f5f4; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 48px; + line-height: 100%; + letter-spacing: 0%; + + margin: 0; + + padding-top: 10px; + + @include on-tablet { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } + } + + &__sub-title { + color: #f1f5f4; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + padding-top: 30px; + padding-right: 13px; + + margin: 0; + + @include on-tablet { + padding-top: 20px; + padding-right: 240px; + } + + @include on-desktop { + padding-top: 30px; + padding-right: 0; + } + } + + &__button { + margin-top: 40px; + + width: 280px; + height: 60px; + + background-color: #cd4d31; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + transition: all 0.3s ease; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + transform: scale(1.1); + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + margin-top: 50px; + + width: 330px; + height: 60px; + } + + @include on-desktop { + margin-top: 80px; + + width: 270px; + height: 60px; + } + } + + &__desktop { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + gap: 20px; + margin-top: 135px; + } + } + + &__line { + border-bottom: 1px solid #f1f5f4; + width: 100%; + max-width: 460px; + } + + &__number { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 14px; + line-height: 125%; + letter-spacing: 0%; + + color: #f1f5f4; + opacity: 70%; + } + + &__images { + display: flex; + + @include on-tablet { + max-width: 443px; + align-self: center; + } + + @include on-desktop { + max-width: none; + place-self: end; + width: 680px; + } + } + + &__image { + width: 100%; + height: auto; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..f2cd3f057 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,60 @@ +.icon { + display: inline-block; + + background-size: cover; + background-position: center; + + &--menu { + background-image: url(/src/images/icons/icon-menu.png); + width: 25px; + height: 20px; + } + + &--close { + background-image: url(/src/images/icons/icon-close.png); + width: 22px; + height: 22px; + } + + &--arrow { + background-image: url(/src/images/icons/arrow.png); + width: 8px; + height: 5px; + } + + &--arrow-right { + background-image: url(/src/images/icons/arrow-right.svg); + width: 20px; + height: 20px; + } + + &--facebook { + background-image: url(/src/images/icons/facebook.svg); + width: 20px; + height: 20px; + } + + &--twitter { + background-image: url(/src/images/icons/twitter.svg); + width: 20px; + height: 20px; + } + + &--telegram { + background-image: url(/src/images/icons/telegram.svg); + width: 20px; + height: 20px; + } + + &--instagram { + background-image: url(/src/images/icons/instagram.svg); + width: 20px; + height: 20px; + } + + &--arrow-top { + background-image: url(/src/images/icons/scroll-up.svg); + width: 30px; + height: 30px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..12272a049 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,307 @@ +.menu { + box-sizing: border-box; + background-color: #3f5252; + width: 100%; + height: 100vh; + + + + &__nav { + padding-right: 20px; + padding-left: 20px; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-right: 39px; + padding-left: 39px; + } + + @include on-desktop { + padding-right: 55px; + padding-left: 55px; + } + } + + &__controls { + display: flex; + align-items: center; + gap: 30px; + + @include on-tablet { + display: none; + } + } + + &__controls-big { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + gap: 40px; + } + } + + &__icons { + padding-top: 20px; + + @include on-tablet { + padding-top: 28px; + } + + @include on-desktop { + padding-top: 30px; + } + } + + &__logo-wrapper { + padding-top: 20px; + + @include on-tablet { + padding-top: 26px; + } + } + + &__logo { + width: 124px; + height: 37px; + } + + &__language-dropdown { + padding-top: 27px; + + @include on-desktop { + padding-top: 33px; + } + } + + &__language-toggle { + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + + display: flex; + align-items: center; + gap: 5px; + } + + &__content { + @include on-desktop { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__bottom { + margin-top: 30px; + + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 55px; + + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + margin-top: 45px; + + padding-left: 55px; + padding-right: 29px; + } + } + + &__text-block { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + flex-direction: row; + gap: 123px; + } + + @include on-desktop { + gap: 83px; + } + } + + &__text-block-name { + color: #f1f5f4; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + vertical-align: middle; + + margin: 0; + } + + &__text-block-title { + color: #f1f5f4; + font-family: Raleway, sans-serif; + font-weight: 600; + font-style: SemiBold; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + + margin: 0; + } + + &__text-block-link { + color: #f1f5f4; + font-family: Raleway, sans-serif; + font-weight: 600; + font-style: SemiBold; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + + margin: 0; + text-decoration: none; + } + + &__links { + margin-top: 40px; + + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + margin-top: 50px; + + display: flex; + flex-direction: column; + gap: 30px; + } + + @include on-desktop { + margin-top: 70px; + gap: 60px; + } + } + + &__link { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + text-decoration: none; + color: #f1f5f4; + + display: inline-block; + + @include on-tablet { + font-size: 48px; + } + } + + &__link-text { + &:hover { + border-bottom: 1px solid #f1f5f4; + } + } + + &__line { + margin-top: 40px; + border-top: 1px solid #f1f5f4; + width: 100%; + + @include on-tablet { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 60px; + } + } + + &__button { + margin-top: 40px; + + width: 280px; + height: 60px; + + background-color: #cd4d31; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + transition: all 0.3s ease; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + transform: scale(1.1); + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + margin-top: 50px; + + width: 330px; + } + + @include on-desktop { + margin-top: 82px; + + width: 270px; + } + } + + &__images { + display: none; + + @include on-tablet { + display: flex; + + margin-top: 30px; + margin-left: 173px; + margin-right: 173px; + } + + @include on-desktop { + margin: 0; + margin-top: 47px; + } + } + + &__image { + width: 100%; + height: auto; + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..4687b2b15 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,193 @@ +.news { + margin-top: 90px; + + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 125px; + + padding-left: 38px; + padding-right: 40px; + } + + @include on-desktop { + margin-top: 110px; + + padding-left: 55px; + padding-right: 55px; + } + + &__title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + vertical-align: middle; + color: #1c1b29; + + margin: 0; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } + } + + &__cards { + margin-top: 60px; + + display: flex; + flex-direction: column; + gap: 50px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + + margin-top: 70px; + } + + @include on-desktop { + gap: 32px; + margin-top: 55px; + } + } + + &__card-image { + width: 100%; + height: auto; + max-height: 370px; + + @include on-desktop { + max-height: 370px; + } + } + + &__card-text-block { + margin-top: 20px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__card-date { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0%; + color: #1c1b29; + } + + &__card-title { + margin: 0; + + color: #1c1b29; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 20px; + line-height: 125%; + letter-spacing: 0%; + vertical-align: middle; + } + + &__card-sub-title { + margin: 0; + padding-top: 20px; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: #504f5e; + + @include on-tablet { + padding-top: 18px; + } + } + + &__buttons { + margin-top: 30px; + + @include on-tablet { + display: none; + } + } + + &__top { + @include on-tablet { + display: flex; + justify-content: space-between; + align-items: center; + } + } + + &__buttons-two { + display: none; + + @include on-tablet { + display: flex; + } + } + + &__button { + border: 1px solid #cd4d31; + width: 280px; + height: 60px; + + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + text-decoration: none; + + + color: #cd4d31; + transition: all 0.3s ease; + + &:hover { + border: 1px solid #af3419; + color: #af3419; + } + + &:active { + border: 1px solid #ea340d; + color: #ea340d; + } + + @include on-tablet { + width: 210px; + } + + @include on-desktop { + width: 270px; + } + } + + +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..c60c2d1dd --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,33 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + + background-color: #f1f5f4; + } + + body:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + overflow: hidden; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + overflow-y: auto; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..e77bc0439 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,164 @@ +.subscribe { + margin-top: 120px; + + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + margin-top: 160px; + + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + margin-top: 200px; + + padding-left: 55px; + padding-right: 55px; + + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + + &__titles { + @include on-desktop { + grid-column: span 6; + } + } + + &__title { + margin: 0; + + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 28px; + line-height: 125%; + letter-spacing: 0%; + vertical-align: middle; + + color: #1c1b29; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } + } + + &__sub-titles { + padding-top: 20px; + + @include on-desktop { + padding-top: 0; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__sub-title { + margin: 0; + + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: #1c1b29; + + @include on-tablet { + padding-right: 104px; + } + + @include on-desktop { + padding-right: 0; + } + } + + &__form { + margin-top: 50px; + + display: flex; + flex-direction: column; + gap: 30px; + + @include on-desktop { + gap: 40px; + + grid-column: span 5; + } + } + + &__input { + width: 280px; + height: auto; + + border: none; + background-color: #f1f5f4; + + border-bottom: 1px solid #1c1b29; + outline: none; + + &::placeholder { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + + color: #1c1b29; + } + + @include on-tablet { + width: 450px; + } + + @include on-desktop { + width: 470px; + } + } + + &__button { + width: 280px; + height: 60px; + + background-color: #cd4d31; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + + transition: all 0.3s ease; + border: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..1d1abdb3c --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,144 @@ +.visit { + margin-top: 90px; + + background-color: #3f5252; + + height: auto; + min-height: 416px; + + @include on-tablet { + margin-top: 100px; + + min-height: 515px; + } + + @include on-desktop { + margin-top: 110px; + min-height: 800px; + + display: grid; + grid-template-columns: repeat(12, 1fr); + } + + &__images { + display: none; + + @include on-desktop { + display: block; + + grid-column: span 6; + } + } + + &__image { + width: 100%; + height: 100%; + max-height: 800px; + max-width: 578px; + } + + &__content { + padding-top: 50px; + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + padding-top: 80px; + padding-left: 38px; + padding-right: 160px; + } + + @include on-desktop { + padding-top: 205px; + padding-left: 0; + padding-right: 55; + + grid-column: 7 / -1; + } + } + + &__title { + margin: 0; + + color: #f1f5f4; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 38px; + line-height: 100%; + letter-spacing: 0%; + vertical-align: middle; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } + } + + &__sub-title { + margin: 0; + padding-top: 20px; + + color: #f1f5f4; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + @include on-desktop { + padding-top: 10px; + padding-right: 110px; + } + } + + &__button { + margin-top: 40px; + + width: 280px; + height: 60px; + + background-color: #cd4d31; + + display: flex; + justify-content: center; + align-items: center; + + transition: all 0.3s ease; + border: none; + + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + vertical-align: middle; + + color: #f1f5f4; + text-decoration: none; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + @include on-tablet { + margin-top: 60px; + + width: 330px; + } + + @include on-desktop { + margin-top: 50px; + + width: 270px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..805f9e668 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,16 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/exhibitions'; +@import 'blocks/events'; +@import 'blocks/visit'; +@import 'blocks/news'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; body { background: $c-gray; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6cf5aefa8 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,21 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..fc156fbc1 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$design-min-width: 1440px;