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 @@
-
+
+
+
+
Актуальні виставки
+
+
+
+
+
+
+
+
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;
+ }
+ }
+}