diff --git a/src/images/icons/favicon.ico b/src/images/icons/favicon.ico new file mode 100644 index 000000000..44a32a5b0 Binary files /dev/null and b/src/images/icons/favicon.ico differ diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..f03cd85c1 --- /dev/null +++ b/src/images/icons/icon-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..97c11e4ad --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-dropdown.svg b/src/images/icons/icon-dropdown.svg new file mode 100644 index 000000000..0e01947fd --- /dev/null +++ b/src/images/icons/icon-dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..6c0bad825 --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..5af50bb18 --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..bc5d4069d --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-scroll-up.svg b/src/images/icons/icon-scroll-up.svg new file mode 100644 index 000000000..c49ca0cbe --- /dev/null +++ b/src/images/icons/icon-scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-telegram.svg b/src/images/icons/icon-telegram.svg new file mode 100644 index 000000000..a4369c774 --- /dev/null +++ b/src/images/icons/icon-telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 000000000..a180591c8 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/namu-logo.svg b/src/images/namu-logo.svg new file mode 100644 index 000000000..f769d97bc --- /dev/null +++ b/src/images/namu-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/photos/events-1.jpg b/src/images/photos/events-1.jpg new file mode 100644 index 000000000..dfdd402eb Binary files /dev/null and b/src/images/photos/events-1.jpg differ diff --git a/src/images/photos/events-2.jpg b/src/images/photos/events-2.jpg new file mode 100644 index 000000000..ce44c6d70 Binary files /dev/null and b/src/images/photos/events-2.jpg differ diff --git a/src/images/photos/exhibition-1.jpg b/src/images/photos/exhibition-1.jpg new file mode 100644 index 000000000..8f0e8dbb0 Binary files /dev/null and b/src/images/photos/exhibition-1.jpg differ diff --git a/src/images/photos/exhibition-2.jpg b/src/images/photos/exhibition-2.jpg new file mode 100644 index 000000000..9afe07099 Binary files /dev/null and b/src/images/photos/exhibition-2.jpg differ diff --git a/src/images/photos/img_01.png b/src/images/photos/img_01.png new file mode 100644 index 000000000..6c4fe48db Binary files /dev/null and b/src/images/photos/img_01.png differ diff --git a/src/images/photos/img_menu.png b/src/images/photos/img_menu.png new file mode 100644 index 000000000..1a5c20eea Binary files /dev/null and b/src/images/photos/img_menu.png differ diff --git a/src/images/photos/news-1.png b/src/images/photos/news-1.png new file mode 100644 index 000000000..adf660fba Binary files /dev/null and b/src/images/photos/news-1.png differ diff --git a/src/images/photos/news-2.jpg b/src/images/photos/news-2.jpg new file mode 100644 index 000000000..a7f574492 Binary files /dev/null and b/src/images/photos/news-2.jpg differ diff --git a/src/images/photos/visit.png b/src/images/photos/visit.png new file mode 100644 index 000000000..146b0b9dd Binary files /dev/null and b/src/images/photos/visit.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..7b5baa403 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,538 @@ - + - Title + NAMU + + + + + - -

Hello Mate Academy

- + + +
+
+ + + + +
+ + + UA + +
+
+
+ + + +
+
+
+
+

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

+

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

+ +

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

+ + +

10.08 - 10.10

+
+ + women +
+
+ +
+
+

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

+
+
+ men + +

11.07 - 22.09

+

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

+ +

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

+ +
+ +
+ men + +

Діє постійно

+

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

+ +

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

+ +
+
+ + +
+
+ +
+
+

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

+ +
+
+ men + +
+

14.08 о 13:00

+

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

+

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

+ + +
+
+ +
+ men + +
+

16.08 о 13:00

+

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

+

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

+ + +
+
+
+ + +
+
+ +
+ women + +
+

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

+

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

+ + +
+
+
+
+

Новини

+
+
+ picture + +

9 серпня 2019

+

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

+

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

+
+ +
+ picture + +

9 серпня 2019

+

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

+

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

+
+
+ + +
+
+ +
+ +
+ + +
+ + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 33c3ed2b3..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1 +0,0 @@ -// put fonts here diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..0ca3d408c --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,69 @@ +.button_red { + cursor: pointer; + font-family: Raleway, sans-serif; + font-weight: 600; + line-height: 16px; + color: #f1f5f4; + background-color: #cd4d31; + border: none; + padding: 22px; + width: 100%; + transition: all 0.5s; + + &:hover { + background-color: #af3419; + + @include hover(transform, scale(1.1)); + } + + @include on-tablet { + width: 280px; + } +} + +.button_transparent { + cursor: pointer; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + font-family: Raleway, sans-serif; + line-height: 16px; + color: #cd4d31; + background-color: transparent; + border: 1px solid #cd4d31; + padding: 22px; + min-width: 280px; + width: 100%; + transition: all 0.5s; + + &:hover { + color: #af3419; + border: 1px solid #af3419; + + @include hover(transform, scale(1.1)); + } + + &::after { + content: ''; + background-image: url(/src/images/icons/icon-arrow.svg); + background-repeat: no-repeat; + background-size: contain; + display: block; + width: 20px; + height: 20px; + } + + @include on-tablet { + position: absolute; + top: 0; + right: 40px; + width: 210px; + } + + @include on-desktop { + width: 270px; + right: 95px; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..244939800 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,13 @@ +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + max-width: 1440px; + margin: 0 auto; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..023c3bcc4 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,116 @@ +.events { + background-color: #f1f5f4; + padding-top: 120px; + padding-bottom: 90px; + + @include on-tablet { + padding-top: 160px; + padding-bottom: 100px; + } + + @include on-desktop { + padding-top: 200px; + padding-bottom: 110px; + } + + &__content { + @include on-tablet { + position: relative; + } + } + + &__title { + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: #1c1b29; + margin-bottom: 60px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + margin-bottom: 75px; + } + + @include on-desktop { + font-size: 48px; + line-height: 57.6px; + margin-bottom: 70px; + } + } + + &__article { + display: flex; + flex-direction: column; + gap: 60px; + margin-bottom: 30px; + + @include on-tablet { + gap: 70px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__flex { + @include on-tablet { + display: flex; + gap: 30px; + } + } + + &__photo { + width: 100%; + height: auto; + margin-bottom: 20px; + object-fit: cover; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + max-width: 330px; + margin-bottom: 30px; + } + + @include on-desktop { + max-width: 570px; + width: 100%; + margin-bottom: 20px; + } + } + + &__date { + font-family: Raleway, sans-serif; + color: #cd4d31; + margin-bottom: 10px; + } + + &__headline { + font-weight: 700; + font-size: 20px; + line-height: 25px; + color: #1c1b29; + margin-bottom: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } +} diff --git a/src/styles/blocks/exibitions.scss b/src/styles/blocks/exibitions.scss new file mode 100644 index 000000000..b0cb7e25a --- /dev/null +++ b/src/styles/blocks/exibitions.scss @@ -0,0 +1,106 @@ +.exibitions { + background-color: #f1f5f4; + padding: 90px 0 0; + + @include on-tablet { + padding: 100px 0 0; + } + + @include on-desktop { + padding: 110px 0 0; + } + + &__content { + @include on-tablet { + position: relative; + } + } + + &__title { + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: #1c1b29; + margin-bottom: 60px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + margin-bottom: 75px; + } + + @include on-desktop { + font-size: 48px; + line-height: 57.6px; + margin-bottom: 70px; + } + } + + &__article { + display: flex; + flex-direction: column; + gap: 60px; + margin-bottom: 30px; + + @include on-tablet { + flex-direction: row; + gap: 29px; + margin-bottom: 0; + } + } + + &__photo { + width: 100%; + height: auto; + margin-bottom: 20px; + object-fit: cover; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + height: 356px; + max-width: 330px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 484px; + max-width: 570px; + width: 100%; + margin-bottom: 20px; + } + } + + &__date { + font-family: Raleway, sans-serif; + color: #cd4d31; + margin-bottom: 10px; + } + + &__headline { + font-weight: 700; + font-size: 20px; + line-height: 25px; + color: #1c1b29; + margin-bottom: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..2d72e8d2f --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,92 @@ +.footer { + background-color: #3f5252; + padding-block: 35px; + + @include on-tablet { + padding-top: 50; + padding-bottom: 30px; + } + + &__content { + display: flex; + flex-direction: column; + gap: 50px; + margin-bottom: 70px; + + @include on-tablet { + flex-direction: row; + gap: 70px; + } + + @include on-desktop { + gap: 250px; + } + } + + &__flex { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__title { + font-weight: 700; + font-size: 18px; + line-height: 27px; + color: #f1f5f4; + + @include on-tablet { + font-size: 20px; + line-height: 30px; + } + } + + &__info { + color: #f1f5f4; + font-family: Raleway, sans-serif; + cursor: pointer; + transition: all 0.5s; + + &:hover { + color: #cd4d31; + } + + @include hover(transform, scale(1.1)); + } + + &__date { + color: #f1f5f4; + font-family: Raleway, sans-serif; + } + + &__iconlist { + display: flex; + gap: 20px; + + @include on-tablet { + margin-top: 30px; + } + } + + &__politic { + font-family: Raleway, sans-serif; + font-size: 14px; + line-height: 19.6px; + color: #f1f5f4; + } + + &__politicflex { + display: flex; + gap: 20px; + align-items: center; + + @include on-desktop { + gap: 100px; + } + } + + &__justify { + display: flex; + justify-content: space-between; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..1ad8b5948 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,50 @@ +.header { + background-color: #3f5252; + + &__content { + padding-block: 20px; + display: flex; + align-items: center; + justify-content: space-between; + + @include on-desktop { + padding-block: 25px; + } + } + + &__logo { + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &__right { + display: flex; + align-items: center; + gap: 40px; + } + + &__lang { + display: none; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + font-family: Raleway, sans-serif; + font-weight: 500; + color: #f1f5f4; + display: flex; + align-items: center; + gap: 5px; + + &::after { + content: ''; + background-image: url(/src/images/icons/icon-dropdown.svg); + display: block; + width: 10px; + height: 7px; + } + } + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..a87e41c2b --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,103 @@ +.hero { + padding-top: 50px; + background-color: #3f5252; + + @include on-tablet { + padding-top: 99px; + } + + &__content { + @include on-desktop { + display: flex; + } + } + + &__date { + font-family: Raleway, sans-serif; + font-size: 14px; + line-height: 19.6px; + color: #f1f5f4; + margin-bottom: 10px; + } + + &__title { + font-weight: 700; + font-size: 48px; + line-height: 48px; + color: #f1f5f4; + margin-bottom: 30px; + + @include on-tablet { + font-size: 72px; + line-height: 72px; + margin-bottom: 20px; + } + + @include on-desktop { + font-size: 96px; + line-height: 96px; + margin-bottom: 30px; + } + } + + &__description { + font-family: Raleway, sans-serif; + color: #f1f5f4; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 80px; + } + } + + &__button { + @include on-tablet { + margin: 0; + } + + @include on-desktop { + margin-bottom: 120px; + } + } + + &__photo { + height: 270px; + display: block; + margin: 40px auto 0; + + @include on-tablet { + height: 495px; + margin: 70px auto 0; + } + + @include on-desktop { + height: 665px; + margin: 0; + } + } + + &__bottom { + display: none; + + @include on-desktop { + display: flex; + gap: 20px; + align-items: center; + font-weight: 700; + font-size: 14px; + line-height: 17.5px; + color: #f1f5f4; + + &::after { + content: ''; + display: block; + border-bottom: 1px solid #f1f5f4; + width: 400px; + } + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..3b12cb8a7 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,73 @@ +.icon { + display: block; + background-repeat: no-repeat; + background-size: contain; + + &-menu { + background-image: url(/src/images/icons/icon-menu.svg); + width: 25px; + height: 20px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &-fb { + background-image: url(/src/images/icons/icon-facebook.svg); + width: 20px; + height: 20px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &-twitter { + background-image: url(/src/images/icons/icon-twitter.svg); + width: 20px; + height: 20px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &-telegram { + background-image: url(/src/images/icons/icon-telegram.svg); + width: 20px; + height: 20px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &-instagram { + background-image: url(/src/images/icons/icon-instagram.svg); + width: 20px; + height: 20px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &-scroll { + background-image: url(/src/images/icons/icon-scroll-up.svg); + width: 30px; + height: 30px; + transition: all 0.5s; + + &:hover { + border-radius: 50%; + border: 1px solid #cd4d31; + } + + @include hover(transform, scale(1.1)); + } + + &-close { + background-image: url(/src/images/icons/icon-close.svg); + width: 15px; + height: 15px; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..544b7d973 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,186 @@ +.menu { + height: 100vh; + z-index: 1; + + overflow: auto; + + &__header { + padding-block: 20px; + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &__right { + display: flex; + align-items: center; + gap: 30px; + } + + &__lang { + font-family: Raleway, sans-serif; + font-weight: 500; + color: #f1f5f4; + display: flex; + align-items: center; + gap: 5px; + + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + + &::after { + content: ''; + background-image: url(/src/images/icons/icon-dropdown.svg); + display: block; + width: 10px; + height: 7px; + } + } + + &__info { + color: #f1f5f4; + font-family: Raleway, sans-serif; + cursor: pointer; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &__flex { + @include on-desktop { + display: flex; + align-items: center; + gap: 50px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + font-size: 14px; + line-height: 19.6px; + color: #f1f5f4; + } + + &__text { + font-family: Raleway, sans-serif; + font-weight: 600; + color: #f1f5f4; + } + + &__infotext { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 40px; + + @include on-tablet { + flex-direction: row; + gap: 120px; + margin-top: 30px; + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__nav { + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 60px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + position: relative; + font-weight: 700; + font-size: 20px; + line-height: 30px; + color: #f1f5f4; + + &::after { + content: ''; + display: block; + width: 100%; + position: absolute; + bottom: -8px; + height: 1px; + background-color: #f1f5f4; + + transition: transform 0.5s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + + @include on-tablet { + font-size: 48px; + line-height: 57.6px; + } + } + + &__item { + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + } + + &__border { + display: block; + border-bottom: 1px solid #f1f5f4; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 60px; + } + } + + &__photo { + display: none; + + @include on-tablet { + width: 465px; + display: block; + margin: 0 auto; + margin-top: 30px; + } + + @include on-desktop { + width: 50%; + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..a1d61be0b --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,85 @@ +.news { + padding-top: 120px; + background-color: #f1f5f4; + + &__content { + position: relative; + } + + &__title { + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: #1c1b29; + margin-bottom: 60px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + margin-bottom: 75px; + } + + @include on-desktop { + font-size: 48px; + line-height: 57.6px; + margin-bottom: 55px; + } + } + + &__article { + display: flex; + flex-direction: column; + gap: 50px; + margin-bottom: 30px; + + @include on-tablet { + flex-direction: row; + gap: 30px; + margin: 0; + } + } + + &__photo { + width: 100%; + height: auto; + margin-bottom: 20px; + object-fit: cover; + transition: all 0.5s; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + max-width: 330px; + margin-bottom: 30px; + } + + @include on-desktop { + max-width: 630px; + width: 100%; + margin-bottom: 20px; + } + } + + &__date { + font-family: Raleway, sans-serif; + color: #1c1b29; + margin-bottom: 10px; + } + + &__headline { + font-weight: 700; + font-size: 20px; + line-height: 25px; + color: #1c1b29; + margin-bottom: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..26449ed92 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + font-family: 'Playfair Display', sans-serif; + font-size: 16px; + line-height: 24px; + color: #504f5e; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + transition: all 0.5s; + transform: translateX(-100%); + pointer-events: none; + + background-color: #3f5252; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &__body { + min-width: 320px; + } +} diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss new file mode 100644 index 000000000..c7befb5cc --- /dev/null +++ b/src/styles/blocks/reset.scss @@ -0,0 +1,20 @@ +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..ce8659c4e --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,88 @@ +.subscribe { + padding-top: 120px; + padding-bottom: 80px; + background-color: #f1f5f4; + + @include on-tablet { + padding-top: 160px; + padding-bottom: 128px; + } + + @include on-desktop { + padding-block: 200px; + } + + &__content { + @include on-tablet { + width: 80%; + } + + @include on-desktop { + width: 100%; + } + } + + &__text { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 50px; + + @include on-desktop { + flex-direction: row; + gap: 30px; + } + } + + &__title { + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: #1c1b29; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + } + + @include on-desktop { + font-size: 48px; + line-height: 57.6px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + color: #1c1b29; + } + + &__input { + background-color: #f1f5f4; + border: none; + border-bottom: 1px solid #1c1b29; + width: 100%; + margin-bottom: 30px; + color: #1c1b29; + font-size: 16px; + line-height: 24px; + font-family: Raleway, sans-serif; + transition: all 0.5s; + outline: none; + + &:hover::placeholder { + color: #cd4d31; + } + + &:hover { + @include hover(transform, scale(1.1)); + + border-bottom: 1px solid #cd4d31; + color: #1c1b29; + } + + @include on-desktop { + width: 35%; + display: block; + } + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..bdc8ab9b7 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,61 @@ +.visit { + background-color: #3f5252; + + @include on-desktop { + display: flex; + } + + &__photo { + display: none; + + @include on-desktop { + height: 800px; + display: block; + } + } + + &__content { + padding-block: 50px; + + @include on-tablet { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + } + } + + &__title { + font-weight: 700; + font-size: 38px; + line-height: 38px; + color: #f1f5f4; + margin-bottom: 20px; + + @include on-tablet { + font-size: 62px; + line-height: 62px; + } + + @include on-desktop { + font-size: 80px; + line-height: 80px; + margin-bottom: 10px; + } + } + + &__paragraph { + font-family: Raleway, sans-serif; + color: #f1f5f4; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..b448311b3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,15 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/mixins.scss'; +@import './blocks/reset.scss'; +@import './blocks/page.scss'; +@import './blocks/button.scss'; +@import './blocks/container.scss'; +@import './blocks/icon.scss'; +@import './blocks/header.scss'; +@import './blocks/hero.scss'; +@import './blocks/exibitions.scss'; +@import './blocks/events.scss'; +@import './blocks/visit.scss'; +@import './blocks/news.scss'; +@import './blocks/subscribe.scss'; +@import './blocks/footer.scss'; +@import './blocks/menu.scss'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..249162fe7 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,18 @@ +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} 0.5s; + &:hover { + #{$property}: $toValue; + } +}