diff --git a/src/images/current-show/image 1.png b/src/images/current-show/image 1.png new file mode 100644 index 000000000..96e1bee3a Binary files /dev/null and b/src/images/current-show/image 1.png differ diff --git a/src/images/current-show/image 2.png b/src/images/current-show/image 2.png new file mode 100644 index 000000000..60724c976 Binary files /dev/null and b/src/images/current-show/image 2.png differ diff --git a/src/images/header/header-bg.png b/src/images/header/header-bg.png new file mode 100644 index 000000000..0d77d1219 Binary files /dev/null and b/src/images/header/header-bg.png differ diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..3564b93a0 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,6 @@ + + + + + + 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/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 000000000..d43bc21bc --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..b9086397c --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,10 @@ + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 000000000..d00933bff --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/icons/scroll-up.svg b/src/images/icons/scroll-up.svg new file mode 100644 index 000000000..82f244a81 --- /dev/null +++ b/src/images/icons/scroll-up.svg @@ -0,0 +1,8 @@ + + + + + + + + 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/menu/img_menu.png b/src/images/menu/img_menu.png new file mode 100644 index 000000000..e4790895f Binary files /dev/null and b/src/images/menu/img_menu.png differ diff --git a/src/images/news/1.png b/src/images/news/1.png new file mode 100644 index 000000000..2949c3270 Binary files /dev/null and b/src/images/news/1.png differ diff --git a/src/images/news/2.png b/src/images/news/2.png new file mode 100644 index 000000000..627442e3f Binary files /dev/null and b/src/images/news/2.png differ diff --git a/src/images/news/news1.png b/src/images/news/news1.png new file mode 100644 index 000000000..60813c768 Binary files /dev/null and b/src/images/news/news1.png differ diff --git a/src/images/news/news2.png b/src/images/news/news2.png new file mode 100644 index 000000000..3ce26aafc Binary files /dev/null and b/src/images/news/news2.png differ diff --git a/src/images/plan-a-visit/img.png b/src/images/plan-a-visit/img.png new file mode 100644 index 000000000..258d508d7 Binary files /dev/null and b/src/images/plan-a-visit/img.png differ diff --git a/src/images/plan-a-visit/plan-a-visit-img.png b/src/images/plan-a-visit/plan-a-visit-img.png new file mode 100644 index 000000000..5fa2bb759 Binary files /dev/null and b/src/images/plan-a-visit/plan-a-visit-img.png differ diff --git a/src/images/secondary-button/arrow.svg b/src/images/secondary-button/arrow.svg new file mode 100644 index 000000000..5dcc5a905 --- /dev/null +++ b/src/images/secondary-button/arrow.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/top-bar/arrow.svg b/src/images/top-bar/arrow.svg new file mode 100644 index 000000000..bddfef3f8 --- /dev/null +++ b/src/images/top-bar/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/upcoming-events/1.png b/src/images/upcoming-events/1.png new file mode 100644 index 000000000..a6e30022f Binary files /dev/null and b/src/images/upcoming-events/1.png differ diff --git a/src/images/upcoming-events/2.png b/src/images/upcoming-events/2.png new file mode 100644 index 000000000..3a5496038 Binary files /dev/null and b/src/images/upcoming-events/2.png differ diff --git a/src/index.html b/src/index.html index 5d357bd69..a2ce45667 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,511 @@ - + - Title + NAMU + + + + - -

Hello Mate Academy

+ +
+

+ Вибачте, сервіс тимчасово не працює +

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

UA

+ +
+
+
+
+
+ +
+
+

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

+

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

+ +

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

+
+ + + +
+ image +
+
+
+
+
+ + +
+
+
+
+
+

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

+
+ image + +

11.07 - 22.09

+ +

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

+ +

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

+ +
+ + + +
+ image + +

Діє постійно

+ +

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

+ +

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

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

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

+ + +
+

14.08 о 13:00

+ +

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

+ +

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

+
+ + + + image + + image + +
+

16.08 о 13:00

+ +

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

+ +

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

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

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

+

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

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

Новини

+ +
+ image + + +

9 серпня 2019

+ +

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

+ +

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

+
+ +
+ image + + +

9 серпня 2019

+ +

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

+ +

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

+
+ + +
+
+
+ + +
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..57576d53e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,30 @@ 'use strict'; + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } +}); + +const form = document.getElementById('subscribe-to-the-digest__form'); + +form.addEventListener('submit', function handleSubmin(event) { + event.preventDefault(); + + form.reset(); +}); + +const btnClose = document.getElementById('btn-ok'); + +const message = document.getElementById('message-block'); +// const allButton = document.getElementById('button'); + +btnClose.addEventListener('click', function() { + message.style.display = 'none'; +}); + +// allButton.addEventListener('click', function() { +// message.style.opacity = '1'; +// }) diff --git a/src/scripts/scroll-up.js b/src/scripts/scroll-up.js new file mode 100644 index 000000000..2cb64e5d7 --- /dev/null +++ b/src/scripts/scroll-up.js @@ -0,0 +1,12 @@ +'use strict'; + +const scrollUp = document.getElementById('scroll-up'); + +scrollUp.addEventListener('click', function() { + topFunction(); +}); + +function topFunction() { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; +} diff --git a/src/styles/_blocks.scss b/src/styles/_blocks.scss new file mode 100644 index 000000000..947abf298 --- /dev/null +++ b/src/styles/_blocks.scss @@ -0,0 +1,10 @@ +@import "blocks/page"; +@import "blocks/header"; +@import "blocks/top-bar"; +@import "blocks/menu"; +@import "blocks/current-show"; +@import "blocks/upcoming-events"; +@import "blocks/plan-a-visit"; +@import "blocks/news"; +@import "blocks/subscribe-to-the-digest"; +@import "blocks/footer"; diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..276ee6a0a 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,35 @@ h1 { - @extend %h1; + @extend %h1; //Мистецтво ХІХ... +} + +h2 { + @extend %h2; // Сплануйте візит до музею +} + +h3 { + @extend %h3; // Актуальні виставки +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +h6 { + @extend %h6; +} + +button { + @extend %button; +} + +.main { + @extend %main; +} + +.additional { + @extend %additional; } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 1366a06aa..7bb3ada07 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,13 @@ @import "utils/vars"; @import "utils/mixins"; +@import "utils/reset"; @import "utils/extends"; +@import "utils/icon"; +@import "utils/button"; +@import "utils/show-block"; +@import "utils/secondary-button"; +@import "utils/upcoming-event"; +@import "utils/news-block"; +@import "utils/scroll-up"; +@import "utils/hover"; +@import "utils/message-block"; diff --git a/src/styles/blocks/current-show.scss b/src/styles/blocks/current-show.scss new file mode 100644 index 000000000..7653b0daa --- /dev/null +++ b/src/styles/blocks/current-show.scss @@ -0,0 +1,93 @@ +.current-show { + &--title { + color: $c-black; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 75px; + } + + @include onDesktop { + margin-bottom: 71px; + } + } + + &__wrapper { + @include pageGrid; + + &--title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 1 / 6; + } + } + + &--block-1 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &--block-2 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + grid-row: 2; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + + &--button-1 { + grid-column: 1 / -1; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 0; + grid-column: 1 / 4; + } + + } + + &--button-2 { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include onTablet { + margin-bottom: 0; + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 7 / 10; + } + } + + &--secondary-button { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / 7; + grid-row: 1; + } + + @include onDesktop { + grid-column: 10 / 13; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..de2c67db1 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,191 @@ +.footer { + padding-top: 34px; + padding-bottom: 30px; + + @include onTablet { + padding-top: 50px; + } + + &__wrapper { + @include pageGrid; + + &--contacts { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 3; + } + } + + &--work-schedule { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 3 / 5; + } + + @include onDesktop { + grid-column: 5 / 7; + } + } + + &--nav { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / 7; + } + + @include onDesktop { + grid-column: 9 / 11; + } + } + } + + &__contacts { + margin-bottom: 50px; + + @include onTablet { + margin-bottom: 62px; + } + + @include onDesktop { + margin-bottom: 72px; + } + + &--title { + color: $c-white; + margin-bottom: 10px; + + @include onTablet { + margin-bottom: 30px; + } + } + + &--links { + margin-bottom: 50px; + display: flex; + flex-direction: column; + + &--link { + color: $c-white; + position: relative; + width: max-content; + + @include hover(color, $c-hover-text); + + &::after { + content: ""; + display: block; + position: absolute; + bottom: -2px; + + height: 2px; + width: 100%; + + background-color: $c-white; + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &--socials { + display: flex; + flex-direction: row; + gap: 20px; + } + } + + &__work-schedule { + margin-bottom: 50px; + + @include onTablet { + margin-bottom: 0; + } + + &--title { + color: $c-white; + margin-bottom: 10px; + + @include onTablet { + margin-bottom: 30px; + } + } + + &--description { + color: $c-white; + } + } + + &__nav { + display: flex; + flex-direction: column; + gap: 10px; + + margin-bottom: 60px; + + @include onTablet { + gap: 30px; + margin-bottom: 0; + } + + &--links { + display: flex; + flex-direction: column; + gap: 5px; + } + + &--link { + color: $c-white; + position: relative; + width: max-content; + @include hover(color, $c-hover-text); + + &::after { + content: ""; + display: block; + position: absolute; + bottom: -4px; + + height: 2px; + width: 100%; + + background-color: $c-white; + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &__bottom { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + &-text-block { + display: flex; + flex-direction: row; + gap: 22px; + + @include onDesktop { + gap: 102px; + } + + &--text { + color: $c-white; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..25c99aabb --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,81 @@ +.header { + background-color: $c-background; + + &__wrapper { + @include pageGrid; + padding-top: 50px; + + @include onTablet { + padding-top: 99px; + } + + @include onDesktop { + padding-top: 47px; + } + } + + &__text { + grid-column: 1 / -1; + margin-bottom: 40px; + + @include onTablet { + grid-column: 1 / 6; + margin-bottom: 50px; + } + + @include onDesktop { + grid-column: 1 / 7; + margin-bottom: 81px; + padding-top: 43px; + } + + &--additional { + color: $c-white; + margin-bottom: 10px; + } + + &--title { + color: $c-white; + margin-bottom: 30px; + } + + &--main { + color: $c-white; + } + } + + &__button { + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + margin-bottom: 70px; + } + } + + &__background { + display: flex; + grid-column: 1 / -1; + + @include onTablet { + grid-column: 2 / 6; + } + + @include onDesktop { + grid-row: 1 / 4; + grid-column: 7 / 13; + margin-right: -55px; + } + + @include onDesign { + margin-right: 0; + } + + &--img { + width: 100%; + object-fit: cover; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..0a3f9652b --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,159 @@ +.menu { + box-sizing: border-box; + background-color: $c-background; + // height: 887px; + + &__wrapper { + @include pageGrid; + } + + &__schedule { + display: inline-block; + + &--additional { + color: $c-white; + } + + margin-bottom: 20px; + + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 3; + } + } + + &__address { + display: inline-block; + + &--additional { + color: $c-white; + } + + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include onTablet { + grid-column: 3 / 5; + margin-bottom: 50px; + } + + @include onDesktop { + grid-column: 3 / 6; + } + + &--link { + @include hover(color, $c-hover-text); + } + } + + &__nav { + display: flex; + flex-direction: column; + gap: 20px; + + grid-column: 1 / -1; + + margin-bottom: 40px; + + &--link { + position: relative; + color: $c-white; + @extend %h3; + width: max-content; + + @include hover(color, $c-hover-text); + + &::after { + content: ""; + display: block; + position: absolute; + bottom: -8px; + + height: 2px; + width: 100%; + + background-color: $c-white; + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } + + @include onTablet { + grid-column: 1 / 5; + margin-bottom: 50px; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__line { + background-color: $c-white; + height: 1px; + width: 100%; + + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include onTablet { + margin-bottom: 50px; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__button { + grid-column: 1 / -1; + margin-bottom: 30px; + + @include onTablet { + grid-column: 1 / 4; + } + } + + &__background { + padding-top: 6px; + display: none; + + @include onTablet { + display: flex; + grid-column: 2 / 6; + bottom: 0; + } + + @include onDesktop { + grid-column: 7 / 13; + grid-row: 1 / 6; + margin-right: -55px; + } + + @include onDesign { + margin-right: 0; + } + + &--img { + width: 100%; + object-fit: cover; + } + } + + &__text--bold { + color: $c-white; + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; /* 24px */ + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..2fab6c1ef --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,63 @@ +.news { + &__wrapper { + @include pageGrid; + + &--title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 3; + } + } + + &--block--1 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &--block--2 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + + &--secondary-button { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / 7; + grid-row: 1; + } + + @include onDesktop { + grid-column: 10 / 13; + } + } + } + + &__title { + color: $c-black; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 75px; + } + + @include onDesktop { + margin-bottom: 55px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..99faca6f0 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,37 @@ +.page { + box-sizing: border-box; + + scroll-behavior: smooth; + + &__body { + min-width: 320px; + + &--with-menu { + overflow: hidden; + } + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + overflow-y: auto; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + width: 0; + } + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/plan-a-visit.scss b/src/styles/blocks/plan-a-visit.scss new file mode 100644 index 000000000..ccc20cc33 --- /dev/null +++ b/src/styles/blocks/plan-a-visit.scss @@ -0,0 +1,110 @@ +.plan-a-visit { + background-color: $c-background; + position: relative; + + &__wrapper { + @include pageGrid; + + &--title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 6 / 12; + } + } + + &--description { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 6 / 11; + } + } + + &--button { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 6 / 9; + } + } + + &--img { + @include onDesktop { + grid-column: 1 / 6; + grid-row: 1 / 4; + } + } + } + + &__title { + color: $c-white; + padding-top: 50px; + margin-bottom: 20px; + + @include onDesktop { + padding-top: 80px; + } + + @include onDesktop { + padding-top: 205px; + margin-bottom: 10px; + } + } + + &__description { + color: $c-white; + margin-bottom: 40px; + + @include onTablet { + margin-bottom: 60px; + } + + @include onDesktop { + margin-bottom: 50px; + } + } + + &__button { + margin-bottom: 50px; + + @include onTablet { + margin-bottom: 80px; + } + + @include onDesktop { + margin-bottom: 205px; + } + } + + &__img { + width: 578px; + height: 762px; + display: none; + background-image: url(/images/plan-a-visit/img.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + position: absolute; + top: 0; + + + @include onDesktop { + display: block; + margin-left: -55px; + } + } +} diff --git a/src/styles/blocks/subscribe-to-the-digest.scss b/src/styles/blocks/subscribe-to-the-digest.scss new file mode 100644 index 000000000..2194b2edb --- /dev/null +++ b/src/styles/blocks/subscribe-to-the-digest.scss @@ -0,0 +1,124 @@ +.subscribe-to-the-digest { + padding-top: 30px; + padding-bottom: 80px; + + @include onTablet { + padding-top: 55px; + padding-bottom: 128px; + } + + @include onDesktop { + padding-top: 0; + padding-bottom: 200px; + } + + &__wrapper { + @include pageGrid; + + &--title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 6; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + + &--description { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 6; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + + &--email { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 1 / 6; + } + + &:-webkit-autofill { + &, + &:hover, + &:focus, + &:active { + caret-color: $c-main; + -webkit-text-fill-color: $c-black; + // -webkit-box-shadow: none; + -webkit-box-shadow: 0 0 0 1000px $c-white inset; + // transition: background-color 5000s ease-in-out 0s; + } + } + } + + &--button { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + } + } + + &__title { + color: $c-black; + margin-bottom: 20px; + + @include onDesktop { + margin-bottom: 50px; + } + } + + &__description { + color: $c-black; + margin-bottom: 50px; + + @include onDesktop { + margin-bottom: 0; + } + } + + &__email { + width: 100%; + padding-bottom: 3px; + color: $c-black; + height: 28px; + font-weight: 700; + + background-color: transparent; + border-bottom: 1px solid $c-black; + + margin-bottom: 30px; + + @include hover(color, $c-main); + @include hover(border-color, $c-main); + + &:focus { + color: $c-main; + border-color: $c-main; + font-weight: 400; + } + + &:active { + font-weight: 400; + caret-color: $c-main; + } + + &::placeholder { + font-weight: 400; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..abdd67511 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,63 @@ +.top-bar { + padding-block: 20px; + + @include onDesktop { + padding-block: 26px; + } + &__icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + &__wrapper { + display: flex; + flex-direction: row; + gap: 40px; + } +} + +.language-change { + display: flex; + flex-direction: row; + align-items: center; + gap: 5px; + + @include onTablet { + gap: 3px; + } + + &--menu { + order: -1; + + @include onTablet { + order: 0; + } + } + + &--mob { + display: none; + + @include onTablet { + display: flex; + } + } + + &--text { + color: $c-white; + text-align: center; + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 150%; /* 24px */ + } + + &--arrow { + // background-size: cover; + width: 8px; + height: 4.61px; + background-image: url(/images/top-bar/arrow.svg); + } +} diff --git a/src/styles/blocks/upcoming-events.scss b/src/styles/blocks/upcoming-events.scss new file mode 100644 index 000000000..863e5ad52 --- /dev/null +++ b/src/styles/blocks/upcoming-events.scss @@ -0,0 +1,149 @@ +.upcoming-events { + padding-top: 30px; + &__wrapper { + @include pageGrid; + + &--title { + grid-column: 1 / -1; + order: -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + + &--img { + grid-column: 1 / -1; + order: -1; + + @include onTablet { + grid-column: 1 / 4; + grid-row: 2 / 5; + + } + + @include onDesktop { + grid-column: 1 / 5; + } + + &-2 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + grid-row: 5 / 9; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + } + + &--text-block { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 5 / 11; + } + + &--2 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + grid-row: 5; + } + + @include onDesktop { + grid-column: 5 / 11; + } + } + } + + &--button-1 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + // grid-row: 1 / 4; + } + + @include onDesktop { + grid-column: 5 / 8; + } + } + + &--button-2 { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + grid-row: 6; + } + + @include onDesktop { + grid-column: 5 / 8; + } + } + + &--secondary-button { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + grid-row: 1; + } + + @include onDesktop { + grid-column: 10 / 13; + } + } + } + + &__title { + color: $c-black; + margin-bottom: 60px; + } + + &__img { + width: 100%; + margin-bottom: 20px; + + @include onTablet { + margin-bottom: 70px; + } + + @include onDesktop { + margin-bottom: 60px; + } + + &--2 { + margin-bottom: 0; + } + } + + &__button { + margin-bottom: 60px; + + @include onTablet { + margin: 0; + } + + &--bottom { + margin-bottom: 30px; + + @include onTablet { + margin: 0; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d..d064f4976 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,31 @@ @import "utils"; @import "fonts"; @import "typography"; +@import "blocks"; body { background: $c-gray; } + +.main { + &__content { + display: grid; + row-gap: 90px; + padding-block: 90px; + background-color: $c-white; + + @include onTablet { + row-gap: 125px; + padding-block: 125px; + } + + @include onDesktop { + row-gap: 110px; + padding-block: 110px; + } + + &:last-child { + padding-bottom: 0; + } + } +} diff --git a/src/styles/utils/_button.scss b/src/styles/utils/_button.scss new file mode 100644 index 000000000..9c7be3d9c --- /dev/null +++ b/src/styles/utils/_button.scss @@ -0,0 +1,10 @@ +.button { + height: 60px; + width: 100%; + color: $c-white; + background-color: $c-main; + cursor: pointer; + + @include hover(background-color, #af3419); + @include pressed(background-color, #ea340d); +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index a1a5dd0e3..8009c03a9 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,111 @@ %h1 { - font-family: "Roboto", sans-serif; + // color: var(--gray-headings, #333A4A); + + /* mobile / h1 */ + font-family: "Playfair Display", serif; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 48px */ + + @include onTablet { + font-size: 72px; + } + + @include onDesktop { + font-size: 96px; + } +} + +%h2 { + // color: var(--gray-headings, #333A4A); + font-family: "Playfair Display", serif; + font-size: 38px; + font-style: normal; + font-weight: 700; + line-height: 100%; /* 38px */ + + @include onTablet { + font-size: 62px; + } + + @include onDesktop { + font-size: 80px; + } +} + +%h3 { + // color: var(--gray-headings, #333A4A); + font-family: "Playfair Display", serif; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: 125%; /* 38px */ + + @include onTablet { + font-size: 40px; + } + + @include onDesktop { + font-size: 48px; + line-height: 120%; + } +} + +%h4 { + // color: var(--gray-headings, #333A4A); + font-family: "Playfair Display", serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 125%; /* 38px */ + + @include onTablet { + font-size: 24px; + } +} + +%h5 { + // color: var(--gray-headings, #333A4A); + font-family: "Playfair Display", serif; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: 150%; /* 38px */ +} + +%h6 { + // color: var(--gray-headings, #333A4A); + font-family: "Playfair Display", serif; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 125%; /* 38px */ +} + +%button { + // color: var(--gray-headings, #333A4A); + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 100%; /* 16px */ +} + +%main { + // color: var(--gray-headings, #333A4A); + font-family: "Raleway", sans-serif; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; /* 24px */ +} + +%additional { + // color: var(--gray-headings, #333A4A); + font-family: "Raleway", sans-serif; + font-size: 14px; + font-style: normal; font-weight: 400; + line-height: 140%; /* 19.6px */ } diff --git a/src/styles/utils/_hover.scss b/src/styles/utils/_hover.scss new file mode 100644 index 000000000..afbc48912 --- /dev/null +++ b/src/styles/utils/_hover.scss @@ -0,0 +1,3 @@ +.hover { + @include hover(transform, scale(1.06)); +} diff --git a/src/styles/utils/_icon.scss b/src/styles/utils/_icon.scss new file mode 100644 index 000000000..27cf59762 --- /dev/null +++ b/src/styles/utils/_icon.scss @@ -0,0 +1,47 @@ +.icon { + display: block; + background-size: contain; + width: 20px; + height: 20px; + @include hover(transform, scale(1.2)); + + &--logo { + width: 124px; + height: 40px; + background-image: url(/images/icons/logo.svg); + } + + &--menu { + width: 25px; + height: 20px; + background-image: url(/images/icons/menu.svg); + } + + &--close { + width: 22px; + height: 22px; + background-image: url(/images/icons/close.svg); + } + + &--facebook { + background-image: url(/images/icons/facebook.svg); + } + + &--twitter { + background-image: url(/images/icons/twitter.svg); + } + + &--telegram { + background-image: url(/images/icons/telegram.svg); + } + + &--instagram { + background-image: url(/images/icons/instagram.svg); + } + + &--scroll-up { + width: 30px; + height: 30px; + background-image: url(/images/icons/scroll-up.svg); + } +} diff --git a/src/styles/utils/_message-block.scss b/src/styles/utils/_message-block.scss new file mode 100644 index 000000000..d4fe1586b --- /dev/null +++ b/src/styles/utils/_message-block.scss @@ -0,0 +1,29 @@ +.message__block { + display: none; + box-sizing: border-box; + position: fixed; + width: 400px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + background-color: $c-background; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + + border: 1px solid $c-white; + border-radius: 10px; + z-index: 99; + padding: 20px 0; + + &--text { + color: $c-white; + } + + &--button { + border-radius: 10px; + width: 200px; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..af40d9785 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,67 @@ #{$_property}: $_toValue; } } + +@mixin pressed($_property, $_toValue) { + transition: #{$_property} 0.3s; + &:active { + #{$_property}: $_toValue; + } +} + +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin onDesign { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin contentPaddingInline { + padding-inline: 20px; + + @include onTablet { + padding-inline: 39px; + } + + @include onDesktop { + margin-inline: auto; + padding-inline: 55px; + } + + @include onDesign { + max-width: 1280px; + margin-inline: auto; + padding-inline: 120px; + } +} + +.container { + @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/_news-block.scss b/src/styles/utils/_news-block.scss new file mode 100644 index 000000000..11e34e540 --- /dev/null +++ b/src/styles/utils/_news-block.scss @@ -0,0 +1,37 @@ +.news__block { + margin-bottom: 50px; + + &--2 { + margin-bottom: 20px; + } + + &--img { + width: 100%; + margin-bottom: 20px; + + @include onTablet { + margin-bottom: 30px; + } + + @include onDesktop { + margin-bottom: 20px; + } + } + + &--date { + color: $c-black; + } + + &--title { + color: $c-black; + margin-bottom: 20px; + + @include onTablet { + margin-bottom: 18px; + } + } + + &--description { + color: $c-black; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..dfa90c1df --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,27 @@ +body, +input, +a, +textarea, +button, +p, +ul, +li, +h1, +h2, +h3, +h4, +h5, +h6, +strong { + margin: 0; + padding: 0; + list-style: none; + border: none; + text-decoration: none; + font: inherit; + resize: none; + + &:focus { + outline: none; + } +} diff --git a/src/styles/utils/_scroll-up.scss b/src/styles/utils/_scroll-up.scss new file mode 100644 index 000000000..244c8231f --- /dev/null +++ b/src/styles/utils/_scroll-up.scss @@ -0,0 +1,5 @@ +.scroll-up { + background-color: transparent; + z-index: 99; + cursor: pointer; +} diff --git a/src/styles/utils/_secondary-button.scss b/src/styles/utils/_secondary-button.scss new file mode 100644 index 000000000..4d72b26a1 --- /dev/null +++ b/src/styles/utils/_secondary-button.scss @@ -0,0 +1,19 @@ +.secondary-button { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + box-sizing: border-box; + color: $c-main; + width: 100%; + height: 60px; + background-color: $c-white; + border: 1px solid $c-main; + cursor: pointer; + + @include hover(color, #af3419); + @include hover(border-color, #af3419); + + @include pressed(color, #ea340d); + @include pressed(border-color, #ea340d); +} diff --git a/src/styles/utils/_show-block.scss b/src/styles/utils/_show-block.scss new file mode 100644 index 000000000..53dc024d3 --- /dev/null +++ b/src/styles/utils/_show-block.scss @@ -0,0 +1,49 @@ +.show__block { + &--img { + width: 100%; + margin-bottom: 20px; + + @include onTablet { + margin-bottom: 30px; + } + + @include onDesktop { + margin-bottom: 20px; + } + } + + &--date { + color: $c-main; + margin-bottom: 10px; + } + + &--title { + color: $c-black; + margin-bottom: 20px; + + &-2 { + margin-bottom: 20px; + + @include onTablet { + margin-bottom: 50px; + } + + @media (min-width: 863px) { + margin-bottom: 20px; + } + } + } + + &--description { + color: $c-gray; + margin-bottom: 30px; + + @include onTablet { + height: 70px; + } + } + + &--button { + margin-bottom: 60px; + } +} diff --git a/src/styles/utils/_upcoming-event.scss b/src/styles/utils/_upcoming-event.scss new file mode 100644 index 000000000..6d280a618 --- /dev/null +++ b/src/styles/utils/_upcoming-event.scss @@ -0,0 +1,20 @@ +.upcoming-event { + &__date { + color: $c-main; + margin-bottom: 10px; + } + + &__title { + color: $c-black; + margin-bottom: 20px; + } + + &__description { + color: $c-gray; + margin-bottom: 30px; + + @include onTablet { + margin-bottom: 50px; + } + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a894698e0 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$design-min-width: 1440px; + +$c-main: #cd4d31; +$c-white: #f1f5f4; +$c-background: #3f5252; +$c-black: #1c1b29; +$c-gray: #504f5e; +$c-hover-text: #c4c4c4;