diff --git a/src/images/Group5.png b/src/images/Group5.png new file mode 100644 index 000000000..091acdeae Binary files /dev/null and b/src/images/Group5.png differ diff --git a/src/images/arrow.png b/src/images/arrow.png new file mode 100644 index 000000000..c8b103e2f Binary files /dev/null and b/src/images/arrow.png differ diff --git a/src/images/cross.png b/src/images/cross.png new file mode 100644 index 000000000..aac557d46 Binary files /dev/null and b/src/images/cross.png differ diff --git a/src/images/facebook.png b/src/images/facebook.png new file mode 100644 index 000000000..588de403f Binary files /dev/null and b/src/images/facebook.png differ diff --git a/src/images/images1.png b/src/images/images1.png new file mode 100644 index 000000000..3f277068f Binary files /dev/null and b/src/images/images1.png differ diff --git a/src/images/images2.png b/src/images/images2.png new file mode 100644 index 000000000..5905ccf1c Binary files /dev/null and b/src/images/images2.png differ diff --git a/src/images/img_01.png b/src/images/img_01.png new file mode 100644 index 000000000..eb77846df Binary files /dev/null and b/src/images/img_01.png differ diff --git a/src/images/img_05.png b/src/images/img_05.png new file mode 100644 index 000000000..971da4f34 Binary files /dev/null and b/src/images/img_05.png differ diff --git a/src/images/img_06.png b/src/images/img_06.png new file mode 100644 index 000000000..a9a1b02e1 Binary files /dev/null and b/src/images/img_06.png differ diff --git a/src/images/img_07.png b/src/images/img_07.png new file mode 100644 index 000000000..7a2644971 Binary files /dev/null and b/src/images/img_07.png differ diff --git a/src/images/img_08.jpg b/src/images/img_08.jpg new file mode 100644 index 000000000..eddd5ed06 Binary files /dev/null and b/src/images/img_08.jpg differ diff --git a/src/images/img_09.jpg b/src/images/img_09.jpg new file mode 100644 index 000000000..a73328540 Binary files /dev/null and b/src/images/img_09.jpg differ diff --git a/src/images/img_099.png b/src/images/img_099.png new file mode 100644 index 000000000..01a3b6f9a Binary files /dev/null and b/src/images/img_099.png differ diff --git a/src/images/img_99.png b/src/images/img_99.png new file mode 100644 index 000000000..f5264696d Binary files /dev/null and b/src/images/img_99.png differ diff --git a/src/images/img_menu.png b/src/images/img_menu.png new file mode 100644 index 000000000..c05223cdd Binary files /dev/null and b/src/images/img_menu.png differ diff --git a/src/images/instagram.png b/src/images/instagram.png new file mode 100644 index 000000000..31407c70a Binary files /dev/null and b/src/images/instagram.png differ diff --git a/src/images/language.png b/src/images/language.png new file mode 100644 index 000000000..b8148efcb Binary files /dev/null and b/src/images/language.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..000fb79fb Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/scroll_up.png b/src/images/scroll_up.png new file mode 100644 index 000000000..639b16f1f Binary files /dev/null and b/src/images/scroll_up.png differ diff --git a/src/images/telegram.png b/src/images/telegram.png new file mode 100644 index 000000000..264d1dea5 Binary files /dev/null and b/src/images/telegram.png differ diff --git a/src/images/twitter.png b/src/images/twitter.png new file mode 100644 index 000000000..73783c5f6 Binary files /dev/null and b/src/images/twitter.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..612ad1948 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,341 @@ - + - Title + Museum 2 - -

Hello Mate Academy

+ +
+
+ + namu + + + +
+ +

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

+

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

+

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

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

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

+ +
+ +
+
+
+ +

11.07 - 22.09

+

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

+

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

+ + +
+ +
+
+ +

Діє постійно

+

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

+

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

+ + + +
+
+
+ +
+
+

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

+ +
+ +
+
+
+

14.08 о 13:00

+

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

+

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

+ + +
+
+ +
+
+
+

16.08 о 13:00

+

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

+

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

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

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

+

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

+ + +
+
+
+ +
+
+

Новини

+ +
+ +
+
+
+ +

9 серпня 2019

+

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

+

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

+
+ +
+
+ +

9 серпня 2019

+

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

+

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

+ + +
+
+
+
+

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

+

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

+ +
+ +
+
+ + diff --git a/src/styles/button.scss b/src/styles/button.scss new file mode 100644 index 000000000..46bea6268 --- /dev/null +++ b/src/styles/button.scss @@ -0,0 +1,28 @@ +button { + font-family: Raleway, sans-serif; + background-color: $c-orenge; + border: 2px solid transparent; + width: 100%; + height: 60px; + color: $c-white; + font-size: 16px; + line-height: 16px; + font-weight: 600; + cursor: pointer; + transition: transform 0.3s; + + margin-top: 40px; + + &:hover { + background-color: $c-orenge-hover; + transform: scale(1.1); + } + + &:active { + background-color: $c-orenge-pressed; + } + + &:disabled { + background-color: $c-orenge-disabled; + } +} diff --git a/src/styles/digest.scss b/src/styles/digest.scss new file mode 100644 index 000000000..f5b10c73b --- /dev/null +++ b/src/styles/digest.scss @@ -0,0 +1,78 @@ +.digest { + padding-inline: 20px; + padding-top: 120px; + + @include on-tablet { + padding-top: 160px; + padding-inline: 39px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + align-items: center; + padding-top: 200px; + } + + &__text { + font-weight: 700; + font-size: 28px; + line-height: 35px; + + @include on-desktop { + text-align: left; + grid-area: 1 / 1 / auto / span 5; + font-size: 48px; + line-height: 57.6px; + width: 570px; + } + } + + &__text1 { + font-family: Raleway, sans-serif; + padding-top: 20px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + + @include on-desktop { + grid-area: 1 / 7 / auto / span 5; + padding: 0; + margin-bottom: 50px; + padding-left: 15px; + } + } + + &__mail { + width: 100%; + margin-top: 50px; + border: none; + border-bottom: 1px solid black; + background-color: $c-gray; + font-size: 16px; + line-height: 24px; + + @include on-tablet { + width: 450px; + } + + @include on-desktop { + grid-area: 2 / 1 / auto / span 5; + width: 470px; + } + } + + &__button2 { + margin-top: 30px; + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + grid-area: 4 / 1 / auto / span 5; + margin-top: 40px; + width: 270px; + } + } +} diff --git a/src/styles/events.scss b/src/styles/events.scss new file mode 100644 index 000000000..f44fde458 --- /dev/null +++ b/src/styles/events.scss @@ -0,0 +1,231 @@ +.events { + padding-top: 120px; + box-sizing: border-box; + + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-top: 140px; + } + + &__top { + display: flex; + flex-direction: column; + text-align: center; + + @include on-tablet { + height: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + &__container { + @include on-desktop { + padding-top: 45px; + grid-template-columns: repeat(12, 1fr); + } + } + + &__container1 { + margin-top: 50px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + padding: 0; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-column: 1 / 7; + } + } + + &__box1 { + @include on-tablet { + width: 330px; + grid-column: 4 /-1; + } + + @include on-desktop { + width: 100%; + } + } + + &__container2 { + margin-top: 70px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + padding: 0; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-column: 7 / -1; + } + } + + &__box2 { + @include on-tablet { + width: 330px; + grid-column: 4 /-1; + + @include on-desktop { + width: 100%; + } + } + } + + &__text { + font-weight: 700; + font-size: 28px; + line-height: 35px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + width: 330px; + } + } + + &__text1 { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $c-orenge; + + padding-top: 20px; + + @include on-tablet { + padding: 0; + } + } + + &__text2 { + padding-top: 10px; + font-weight: 700; + font-size: 20px; + line-height: 25px; + } + + &__text3 { + padding-top: 20px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + &__img { + width: 100%; + margin: 0 auto; + + @include on-tablet { + width: 100%; + } + } + + &__button { + display: none; + + @include on-tablet { + display: block; + width: 210px; + align-self: center; + margin-bottom: 50px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + } + + @include on-desktop { + width: 270px; + } + } + + &__button::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } + + &__button2 { + margin-top: 30px; + + @include on-desktop { + align-items: start; + width: 270px; + margin-top: 50px; + } + } + + &__button1 { + margin-top: 30px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + + @include on-tablet { + display: none; + } + } + + &__button1::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } +} + +.one1 { + background-image: url(../images/img_05.png); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 358px; + + @include on-tablet { + height: 422px; + grid-column: 1 / 4; + } + + @include on-desktop { + height: 484px; + } +} + +.two2 { + background-image: url(../images/img_06.png); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 358px; + + @include on-tablet { + height: 424px; + grid-column: 1 / 4; + } + + @include on-desktop { + height: 484px; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..c9d63039c --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,154 @@ +.footer { + background-color: $c-green; + color: $c-white; + margin-top: 80px; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + &__one { + padding-top: 34px; + + @include on-tablet { + padding-top: 50px; + } + } + + &__text1 { + padding-top: 10px; + } + + &__container { + @include on-tablet { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column: 1 / 2; + column-gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(3, 1fr); + } + } + + a { + font-family: Raleway, sans-serif; + color: $c-white; + text-decoration: none; + font-size: 16px; + line-height: 24px; + } + + &__social-icons { + display: flex; + gap: 20px; + padding-top: 30px; + background-repeat: no-repeat; + background-size: cover; + } + + &__facebook { + background-image: url(../images/facebook.png); + width: 20px; + height: 20px; + cursor: pointer; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__twiter { + background-image: url(../images/twitter.png); + width: 20px; + height: 20px; + cursor: pointer; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__telegram { + background-image: url(../images/telegram.png); + width: 20px; + height: 20px; + cursor: pointer; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__instagram { + background-image: url(../images/instagram.png); + width: 20px; + height: 20px; + cursor: pointer; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + &__two { + padding-top: 50px; + } + + &__text-days { + padding-top: 10px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + &__three { + padding-top: 50px; + } + + &__text-items { + display: flex; + flex-direction: column; + gap: 5px; + padding-top: 10px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + &__bottom { + display: flex; + gap: 30px; + padding-top: 60px; + padding-bottom: 30px; + + @include on-tablet { + justify-content: space-between; + padding-top: 72px; + } + } + + &__bottom1 { + display: flex; + gap: 23px; + } + + &__back { + background-image: url(../images/scroll_up.png); + width: 30px; + height: 30px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..453320491 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,147 @@ +.header { + background-color: $c-green; + box-sizing: border-box; + padding: 20px 20px 0; + + @include on-tablet { + padding: 20px 39px 0; + } + + @include on-desktop { + padding: 26px 55px 0; + } + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__text--1 { + padding-top: 50px; + font-size: 14px; + + @include on-tablet { + padding-top: 99px; + } + + @include on-desktop { + padding-top: 90px; + } + } + + &__text--2 { + padding-top: 30px; + font-size: 16px; + + @include on-tablet { + width: 250px; + } + + @include on-desktop { + width: 100%; + } + } + + &__title { + font-family: "Playfair Display", sans-serif;; + width: 300px; + color: $c-white; + font-size: 48px; + font-weight: 700; + line-height: 48px; + + padding-top: 10px; + + @include on-tablet { + width: 550px; + font-size: 72px; + line-height: 72px; + } + + @include on-desktop { + width: 550px; + font-size: 96px; + line-height: 96px; + } + } + + &__button { + @include on-tablet { + align-items: start; + width: 330px; + + margin-top: 50px; + } + + @include on-desktop { + width: 270px; + + margin-top: 80px; + } + } + + &__data--line { + display: none; + + @include on-desktop { + width: 50%; + display: flex; + gap: 20px; + align-items: center; + + padding-top: 135px; + padding-bottom: 50px; + } + } + + &__data { + width: 19%; + color: $c-white; + font-size: 14px; + font-weight: 700; + line-height: 15.5px; + } + + &__line { + @include on-desktop { + width: 100%; + height: 1px; + background-color: $c-white; + } + } + + &__img { + margin: 0 auto; + background-image: url(../images/img_01.png); + background-size: cover; + background-position: center; + width: 245px; + height: 273px; + + margin-top: 40px; + + @include on-tablet { + width: 443px; + height: 494px; + + margin-top: 70px; + } + + @include on-desktop { + position: absolute; + top: 45px; + bottom: 0; + right: 0; + width: 625px; + height: 663px; + } + } +} + +.text { + font-family: Raleway, sans-serif; + color: $c-white; + font-weight: 400; + line-height: 24px; +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..19ecf6dd4 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,14 @@ +.icon { + display: block; + width: 25px; + height: 20px; + transition: transform 0.3s; + + &--menu { + background-image: url(../images/Group5.png); + } + + &:hover { + transform: scale(1.2); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..48032a152 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,27 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import 'header'; +@import 'icon'; +@import 'button'; +@import 'menu'; +@import 'page'; +@import 'show'; +@import 'events'; +@import 'visit'; +@import 'news'; +@import 'digest'; +@import 'footer'; + +* { + margin: 0; + padding: 0; +} + +html { + font-family: "Playfair Display", sans-serif; + scroll-behavior: smooth; +} body { background: $c-gray; diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..dc485c46f --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,177 @@ +.menu { + background-color: $c-green; + box-sizing: border-box; + height: 100vh; + padding: 20px 20px 0; + + @include on-tablet { + padding: 20px 39px 0; + } + + @include on-desktop { + padding: 26px 55px 0; + } + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__icons { + display: flex; + gap: 30px; + } + + .icons--close { + background-image: url(../images/cross.png); + background-size: cover; + width: 22px; + height: 22px; + transition: transform 0.3s; + + &:hover { + transform: scale(1.2); + } + } + + .icons--language { + background-image: url(../images/language.png); + width: 34px; + height: 24px; + } + + &__text { + @include on-tablet { + display: flex; + flex-direction: row; + align-items: center; + gap: 123px; + + padding-top: 30px; + } + + @include on-desktop { + padding-top: 40px; + } + } + + &__part1 { + @include on-tablet { + display: flex; + flex-direction: column; + } + } + + &__text--1 { + font-family: Raleway, sans-serif; + color: $c-white; + font-weight: 400; + font-size: 14px; + line-height: 19.6px; + + padding-top: 20px; + + @include on-tablet { + padding: 0; + } + } + + &__text--bold { + font-family: Raleway, sans-serif; + color: $c-white; + font-weight: 600; + font-size: 16px; + line-height: 24px; + } + + &__section { + padding-top: 40px; + + @include on-tablet { + padding-top: 50px; + } + + @include on-desktop { + padding-top: 70px; + } + } + + &__section--item { + display: flex; + text-decoration: none; + padding-top: 20px; + + color: $c-white; + font-weight: 700; + font-size: 20px; + line-height: 30px; + + @include on-tablet { + padding-top: 30px; + font-size: 48px; + line-height: 57.6px; + } + + @include on-desktop { + padding-top: 60px; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: $c-white; + + margin-top: 40px; + + @include on-tablet { + margin-top: 50px; + } + + @include on-desktop { + width: 51%; + margin-top: 60px; + } + } + + &__button { + @include on-tablet { + align-items: start; + width: 330px; + + margin-top: 50px; + } + + @include on-desktop { + width: 270px; + margin-top: 60px; + } + } + + &__img { + @include on-tablet { + background-image: url(../images/img_menu.png); + margin: 0 auto; + background-size: cover; + background-position: center; + width: 422px; + height: 466px; + + margin-top: 30px; + } + + @include on-desktop { + position: absolute; + width: 624px; + height: 697px; + top: 50px; + bottom: 0; + right: 0; + } + } +} + +.page__body:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/news.scss b/src/styles/news.scss new file mode 100644 index 000000000..c953495c8 --- /dev/null +++ b/src/styles/news.scss @@ -0,0 +1,210 @@ +.news { + padding-top: 90px; + box-sizing: border-box; + + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-top: 140px; + } + + &__top { + display: flex; + flex-direction: column; + text-align: center; + + @include on-tablet { + height: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + &__container { + @include on-tablet { + padding-top: 50px; + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + padding-top: 45px; + grid-template-columns: repeat(12, 1fr); + } + } + + &__container1 { + padding-top: 60px; + + @include on-tablet { + padding: 0; + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__container2 { + padding-top: 60px; + + @include on-tablet { + padding: 0; + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__text { + text-align: left; + font-weight: 700; + font-size: 28px; + line-height: 35px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + } + } + + &__text1 { + padding-top: 20px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $c-black; + } + + &__text2 { + padding-top: 10px; + font-weight: 700; + font-size: 20px; + line-height: 25px; + } + + &__text3 { + padding-top: 20px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + + @include on-desktop { + width: 550px; + } + } + + &__img { + width: 100%; + margin: 0 auto; + padding-top: 60px; + + @include on-tablet { + width: 100%; + } + } + + &__button { + display: none; + + @include on-tablet { + display: block; + width: 210px; + align-self: center; + margin-bottom: 50px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + } + + @include on-desktop { + width: 270px; + } + } + + &__button::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } + + &__button2 { + margin-top: 30px; + + @include on-desktop { + align-items: start; + width: 270px; + margin-top: 50px; + } + } + + &__button1 { + margin-top: 30px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + + @include on-tablet { + display: none; + } + } + + &__button1::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } +} + +.one01 { + background-image: url(../images/img_09.jpg); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 356px; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + background-image: url(../images/img_99.png); + } +} + +.two02 { + background-image: url(../images/img_08.jpg); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 356px; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + background-image: url(../images/img_099.png); + } +} diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 000000000..e2eff00a6 --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,14 @@ +.page__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } +} diff --git a/src/styles/show.scss b/src/styles/show.scss new file mode 100644 index 000000000..0b483b7e2 --- /dev/null +++ b/src/styles/show.scss @@ -0,0 +1,203 @@ +.show { + padding-top: 90px; + box-sizing: border-box; + + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-top: 140px; + } + + &__top { + display: flex; + flex-direction: column; + text-align: center; + + @include on-tablet { + height: auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + + &__container { + @include on-tablet { + padding-top: 50px; + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + @include on-desktop { + padding-top: 45px; + grid-template-columns: repeat(12, 1fr); + } + } + + &__container1 { + padding-top: 60px; + + @include on-tablet { + padding: 0; + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__container2 { + padding-top: 60px; + + @include on-tablet { + padding: 0; + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__text { + font-weight: 700; + font-size: 28px; + line-height: 35px; + + @include on-tablet { + font-size: 40px; + line-height: 50px; + } + } + + &__text1 { + padding-top: 20px; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $c-orenge; + } + + &__text2 { + padding-top: 10px; + font-weight: 700; + font-size: 20px; + line-height: 25px; + } + + &__text3 { + padding-top: 20px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + } + + &__img { + width: 100%; + margin: 0 auto; + padding-top: 60px; + + @include on-tablet { + width: 100%; + } + } + + &__button { + display: none; + + @include on-tablet { + display: block; + width: 210px; + align-self: center; + margin-bottom: 50px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + } + + @include on-desktop { + width: 270px; + } + } + + &__button::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } + + &__button2 { + margin-top: 30px; + + @include on-desktop { + align-items: start; + width: 270px; + margin-top: 50px; + } + } + + &__button1 { + margin-top: 30px; + background-color: $c-white; + border: 2px solid $c-orenge; + color: $c-orenge; + position: relative; + + @include on-tablet { + display: none; + } + } + + &__button1::after { + content: url(../images/arrow.png); + position: absolute; + margin-left: 8px; + top: 53%; + transform: translateY(-50%); + } +} + +.one { + background-image: url(../images/images2.png); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 356px; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + } +} + +.two { + background-image: url(../images/images1.png); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 356px; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..2ef46b6f6 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,16 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..6b0217279 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ $c-gray: #eee; +$c-green: #3F5252; +$c-orenge: #CD4D31; +$c-white: #F1F5F4; +$c-orenge-hover: #AF3419; +$c-orenge-pressed: #EA340D; +$c-orenge-disabled: #DD836F; +$c-black: #1C1B29; + diff --git a/src/styles/visit.scss b/src/styles/visit.scss new file mode 100644 index 000000000..ae007bc1f --- /dev/null +++ b/src/styles/visit.scss @@ -0,0 +1,87 @@ +.visit { + background-color: $c-green; + margin-top: 90px; + + &__container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + + display: flex; + flex-direction: column; + width: 500px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + align-items: center; + + padding: 0; + } + } + + &__text { + font-family: + "Playfair Display", + sans-serif; + padding-top: 50px; + color: $c-white; + font-weight: 700; + font-size: 38px; + line-height: 38px; + + @include on-tablet { + font-size: 62px; + line-height: 62px; + } + + @include on-desktop { + font-size: 80px; + line-height: 80px; + width: 650px; + } + } + + &__text1 { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: $c-white; + padding-top: 20px; + + @include on-tablet { + width: 450px; + } + + @include on-desktop { + width: 500px; + } + } + + &__button2 { + margin-bottom: 50px; + + @include on-tablet { + width: 330px; + } + + @include on-desktop { + width: 270px; + } + } + + &__bg { + @include on-desktop { + background-image: url(../images/img_07.png); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + width: 500px; + height: 800px; + } + } +}