diff --git a/README.md b/README.md index afee6c841..f5df8faf2 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum_2/). + [DEMO LINK](https://NataliaDavida.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/arrow-hover.57c75d8e.png b/arrow-hover.57c75d8e.png new file mode 100644 index 000000000..ef88c8c61 Binary files /dev/null and b/arrow-hover.57c75d8e.png differ diff --git a/arrow.66cd776b.png b/arrow.66cd776b.png new file mode 100644 index 000000000..c8b103e2f Binary files /dev/null and b/arrow.66cd776b.png differ diff --git a/bg.e79a717b.png b/bg.e79a717b.png new file mode 100644 index 000000000..5afbed8f6 Binary files /dev/null and b/bg.e79a717b.png differ diff --git a/bg.png b/bg.png new file mode 100644 index 000000000..5afbed8f6 Binary files /dev/null and b/bg.png differ diff --git a/facebook.a50cc8ee.png b/facebook.a50cc8ee.png new file mode 100644 index 000000000..588de403f Binary files /dev/null and b/facebook.a50cc8ee.png differ diff --git a/header-bg-lr.7cb795ac.png b/header-bg-lr.7cb795ac.png new file mode 100644 index 000000000..8dbd99426 Binary files /dev/null and b/header-bg-lr.7cb795ac.png differ diff --git a/header-bg-sm.24bb2fb9.png b/header-bg-sm.24bb2fb9.png new file mode 100644 index 000000000..15cdbb997 Binary files /dev/null and b/header-bg-sm.24bb2fb9.png differ diff --git a/icon-arrow-down.679ed4a2.png b/icon-arrow-down.679ed4a2.png new file mode 100644 index 000000000..c58e8a89a Binary files /dev/null and b/icon-arrow-down.679ed4a2.png differ diff --git a/icon-close-sm.e8215104.png b/icon-close-sm.e8215104.png new file mode 100644 index 000000000..006e2bd6e Binary files /dev/null and b/icon-close-sm.e8215104.png differ diff --git a/icon-menu-sm.41be9779.png b/icon-menu-sm.41be9779.png new file mode 100644 index 000000000..091acdeae Binary files /dev/null and b/icon-menu-sm.41be9779.png differ diff --git a/image 1-sm.f6a2ce02.png b/image 1-sm.f6a2ce02.png new file mode 100644 index 000000000..899eaf571 Binary files /dev/null and b/image 1-sm.f6a2ce02.png differ diff --git a/image 2-sm.1788a067.png b/image 2-sm.1788a067.png new file mode 100644 index 000000000..ffd22a687 Binary files /dev/null and b/image 2-sm.1788a067.png differ diff --git a/img_03-sm.fb0a3d85.png b/img_03-sm.fb0a3d85.png new file mode 100644 index 000000000..95285c941 Binary files /dev/null and b/img_03-sm.fb0a3d85.png differ diff --git a/img_04-sm.fe52b344.png b/img_04-sm.fe52b344.png new file mode 100644 index 000000000..e0b4b54c1 Binary files /dev/null and b/img_04-sm.fe52b344.png differ diff --git a/img_08.1c58e751.png b/img_08.1c58e751.png new file mode 100644 index 000000000..cf1ab54f4 Binary files /dev/null and b/img_08.1c58e751.png differ diff --git a/img_09.5da91e80.png b/img_09.5da91e80.png new file mode 100644 index 000000000..530057d53 Binary files /dev/null and b/img_09.5da91e80.png differ diff --git a/img_menu-sm.8525da68.png b/img_menu-sm.8525da68.png new file mode 100644 index 000000000..9922cdc5d Binary files /dev/null and b/img_menu-sm.8525da68.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..bccb00628 --- /dev/null +++ b/index.html @@ -0,0 +1,423 @@ + + + + + + Museum + + + + + +
+
+
+
+ + namu logo + +
+
+ UA + +
+ + +
+ +
+ +
+
+
+ 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

+ +

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

+ +

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

+
+
+
+ + +
+
+

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

+

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

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

Контакти

+ +

+ Київ,
+ вул. М. Грушевського, 6
+ тел. 278-13-57, 278-74-54
+ info@namu.kiev.ua +

+ + +
+ +
+

Розклад роботи

+ +
    +
  • ПН: вихідни
    • +
  • ВТ: вихідний
    • +
  • СР: 10:00 - 17:00
    • +
  • ЧТ: 10:00 - 17:00
    • +
  • ПТ: 12:00 - 19:00
    • +
  • СБ: 11:00 - 18:00
    • +
  • НД: 10:00 - 17:00
    • +
+
+ +
+

Головна

+ + +
+
+ +
+
+

© 2010 — 2020

+

Privacy — Terms

+
+ + + scroll up + +
+
+
+ + + diff --git a/instagram.224fc421.png b/instagram.224fc421.png new file mode 100644 index 000000000..31407c70a Binary files /dev/null and b/instagram.224fc421.png differ diff --git a/logo.6023b87e.png b/logo.6023b87e.png new file mode 100644 index 000000000..b7aa34a8f Binary files /dev/null and b/logo.6023b87e.png differ diff --git a/main.39afc03c.css b/main.39afc03c.css new file mode 100644 index 000000000..3225ead7c --- /dev/null +++ b/main.39afc03c.css @@ -0,0 +1,742 @@ +@charset "UTF-8"; +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap"); +.container { + padding-inline: 20px; } + @media (min-width: 768px) { + .container { + padding-inline: 39px; } } + @media (min-width: 1280px) { + .container { + min-width: 1280px; + margin-inline: auto; + padding-inline: 55px; } } + +.btn { + height: 60px; + background-color: #cd4d31; + border-radius: 4px; + border: 2px solid transparent; + color: #eee; + font-size: 16px; + font-weight: 600; + line-height: 16px; + transition: 0.5s; } + .btn:hover { + background-color: #af3419; } + .btn--secondary { + display: none; + align-items: center; + background-color: #eee; + border: 2px solid #cd4d31; + color: #cd4d31; + background-image: url("/arrow.66cd776b.png"); + background-repeat: no-repeat; + background-size: 20px; + background-position: right 24px center; } + @media (min-width: 768px) { + .btn--secondary { + display: grid; } } + .btn--secondary:hover { + background-color: #eee; + background-image: url("/arrow-hover.57c75d8e.png"); + color: #af3419; + border: 2px solid #af3419; } + .btn--secondary--sm { + display: block; + width: 100%; + margin-top: 30px; } + @media (min-width: 768px) { + .btn--secondary--sm { + display: none; } } + +.exhibition { + margin-bottom: 120px; } + @media (min-width: 768px) { + .exhibition { + margin-bottom: 160px; } } + @media (min-width: 1280px) { + .exhibition { + margin-bottom: 200px; } } + .exhibition__wrapper { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + row-gap: 60px; } + @media (min-width: 768px) { + .exhibition__wrapper { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .exhibition__wrapper { + --columns: 12; } } + .exhibition__angel { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .exhibition__angel { + grid-column: 1 / 4; } } + @media (min-width: 1280px) { + .exhibition__angel { + grid-column: 1 / 7; } } + .exhibition__ХХ-XXI { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .exhibition__ХХ-XXI { + grid-column: 4 / 7; } } + @media (min-width: 1280px) { + .exhibition__ХХ-XXI { + grid-column: 7 / 13; } } + +.header { + background-color: #3f5252; + background-image: url("/header-bg-sm.24bb2fb9.png"); + background-repeat: no-repeat; + background-position: bottom 0 center; + background-size: 300px; } + @media (min-width: 768px) { + .header { + background-size: 500px; } } + @media (min-width: 1280px) { + .header { + background-position: right 0 bottom 0; + background-size: 600px; } } + .header__content { + height: 100vh; + display: flex; + flex-direction: column; + color: #eee; + position: relative; } + +.description { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + margin: 0; + margin-top: 50px; } + @media (min-width: 768px) { + .description { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .description { + --columns: 12; } } + @media (min-width: 768px) { + .description { + margin-top: 100px; } } + .description__wrapper { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .description__wrapper { + grid-column: 1 / 6; } } + @media (min-width: 1280px) { + .description__wrapper { + grid-column: 1 / 7; } } + .description__schedule { + font-size: 14px; } + .description__title { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 48px; + line-height: 48px; + margin: 0; + margin-top: 10px; } + @media (min-width: 768px) { + .description__title { + font-size: 72px; + line-height: 72px; } } + @media (min-width: 1280px) { + .description__title { + font-size: 96px; + line-height: 96px; } } + .description__sub-title { + margin: 0; + margin-top: 30px; } + .description__btn-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; } + @media (min-width: 768px) { + .description__btn-wrapper { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; } } + .description__btn { + grid-column: 1 / -1; + margin: 0; + margin-top: 40px; } + @media (min-width: 768px) { + .description__btn { + grid-column: 1 / 4; } } + .description__bottom { + display: none; } + @media (min-width: 1280px) { + .description__bottom { + grid-column: 1 / 7; + display: grid; + column-gap: 10px; + grid-template-columns: repeat(7, 1fr); + position: absolute; + bottom: 50px; + left: 50px; } } + .description__time { + grid-column: span 1; + font-size: 14px; + font-weight: 700; + line-height: 17px; + margin-bottom: -3px; + padding: 0; } + .description__line { + grid-column: 2 / 7; + border-bottom: 1px solid #eee; } + +.icon { + display: block; + width: 25px; + height: 20px; + background-size: cover; + background-position: center; } + .icon--menu { + background-image: url("/icon-menu-sm.41be9779.png"); } + .icon--arrow--down { + background-image: url("/icon-arrow-down.679ed4a2.png"); + width: 20px; + height: 10px; } + .icon--close { + background-image: url("/icon-close-sm.e8215104.png"); } + .icon--hidden { + display: none; } + @media (min-width: 768px) { + .icon--hidden { + display: block; } } + +.main__content { + display: grid; + padding-block: 90px; } + @media (min-width: 768px) { + .main__content { + padding-block: 100px; } } + @media (min-width: 1280px) { + .main__content { + padding-block: 110px; } } + +.menu { + height: 100vh; + background-color: #3f5252; + color: #eee; } + .menu__bottom { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + height: 100vh; } + @media (min-width: 768px) { + .menu__bottom { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .menu__bottom { + --columns: 12; } } + .menu__order { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .menu__order { + grid-column: 1 / 5; } } + @media (min-width: 1280px) { + .menu__order { + grid-column: 1 / 7; } } + .menu__info-wrapper { + display: grid; + grid-template-rows: 2; + margin-top: 10px; } + @media (min-width: 768px) { + .menu__info-wrapper { + grid-template-rows: 1; + margin-top: 40px; } } + .menu__schedule { + margin: 0; + grid-column: 1 / -1; + grid-row: 1 / 2; } + @media (min-width: 768px) { + .menu__schedule { + grid-column: 1 / 3; + grid-row: 1 / 2; } } + .menu__adress { + margin: 0; + grid-row: 2 / 3; } + @media (min-width: 768px) { + .menu__adress { + grid-column: 3 / 6; + grid-row: 1 / 2; } } + .menu__info { + margin: 0; } + .menu__info--weigth { + font-weight: 600; } + .menu__events { + padding: 40px 0; + border-bottom: 1px solid #eee; } + @media (min-width: 768px) { + .menu__events { + padding-top: 70px; + padding-bottom: 60px; } } + .menu__event { + margin: 0; } + .menu__event:not(:last-child) { + margin-bottom: 20px; } + @media (min-width: 768px) { + .menu__event:not(:last-child) { + margin-bottom: 60px; } } + .menu__link { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 20px; + line-height: 30px; + text-decoration: none; + color: #eee; } + @media (min-width: 768px) { + .menu__link { + font-size: 48px; + line-height: 58px; } } + .menu__btn-wrapper { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; } + .menu__btn { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .menu__btn { + grid-column: 1 / 4; } } + .menu__img-wrapper { + grid-column: 1 / -1; + display: none; } + @media (min-width: 768px) { + .menu__img-wrapper { + grid-column: 2 / 6; + display: flex; + align-items: flex-end; } } + @media (min-width: 1280px) { + .menu__img-wrapper { + grid-column: 7 / 13; + grid-row: 1 / 3; } } + .menu__img { + width: 100%; } + +.page { + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 20px; + text-align: left; + scroll-behavior: smooth; } + .page__body { + height: 100%; + min-width: 325px; + padding: 0; + margin: 0; } + .page__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + pointer-events: none; + transform: translateX(-100%); + transition: 0.5s; } + .page__menu:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; } + .page:has(.page__menu:target) { + overflow: hidden; } + +.section-title { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: #1c1b29; + margin: 0; } + @media (min-width: 768px) { + .section-title { + font-size: 40px; + line-height: 50px; } } + @media (min-width: 1280px) { + .section-title { + font-size: 48px; + line-height: 58px; } } + +.top-bar { + padding-block: 20px; + display: flex; + justify-content: space-between; + align-items: center; } + .top-bar__logo { + height: 40px; } + .top-bar__icons { + display: flex; + gap: 40px; } + .top-bar__lang { + display: flex; + align-items: center; } + .top-bar__lang--hidden { + display: none; } + @media (min-width: 768px) { + .top-bar__lang--hidden { + display: inline; } } + +.card { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + margin: 0; + margin-bottom: 60px; } + @media (min-width: 768px) { + .card { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .card { + --columns: 12; } } + @media (min-width: 768px) { + .card { + margin-bottom: 75px; } } + @media (min-width: 1280px) { + .card { + margin-bottom: 70px; } } + .card__title { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .card__title { + grid-column: 1 / 5; } } + @media (min-width: 1280px) { + .card__title { + grid-column: 1 / 6; } } + .card__btn { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .card__btn { + grid-column: 5 / 7; } } + @media (min-width: 1280px) { + .card__btn { + grid-column: 10 / 13; } } + .card__img { + width: 100%; + height: 356px; + object-fit: cover; } + @media (min-width: 768px) { + .card__img { + height: 420px; } } + @media (min-width: 1280px) { + .card__img { + height: 484px; } } + .card__date { + color: #CD4D31; + margin: 0; + margin-top: 20px; } + .card__name { + font-family: 'Playfair Display', serif; + font-size: 24px; + font-weight: 700; + line-height: 30px; + margin: 0; + margin-top: 10px; } + .card__description { + margin: 0; + margin-top: 20px; } + .card-btn-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); } + @media (min-width: 768px) { + .card-btn-wrapper { + grid-template-columns: repeat(3, 1fr); } } + @media (min-width: 1280px) { + .card-btn-wrapper { + grid-template-columns: repeat(6, 1fr); } } + .card-btn { + grid-column: 1 / -1; + margin-top: 30px; } + @media (min-width: 768px) { + .card-btn { + grid-column: 1 / 3; } } + +.events { + margin-bottom: 90px; } + @media (min-width: 768px) { + .events { + margin-bottom: 120px; } } + .events__wrapper { + display: grid; + row-gap: 60px; } + .events__excursion { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); } + @media (min-width: 768px) { + .events__excursion { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .events__excursion { + --columns: 12; } } + .events__master-class { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); } + @media (min-width: 768px) { + .events__master-class { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .events__master-class { + --columns: 12; } } + .events__img { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .events__img { + grid-column: 1 / 4; } } + @media (min-width: 1280px) { + .events__img { + grid-column: 1 / 5; } } + .events__content { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .events__content { + grid-column: 4 / 7; } } + @media (min-width: 1280px) { + .events__content { + grid-column: 5 / 10; } } + +.planing-visit { + background-color: #3f5252; + color: #eee; + margin-bottom: 90px; } + @media (min-width: 768px) { + .planing-visit { + margin-bottom: 120px; } } + @media (min-width: 1280px) { + .planing-visit { + background-image: url("/bg.e79a717b.png"); + background-repeat: no-repeat; + background-size: contain; } } + .planing-visit__content { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + padding: 50px 0; } + @media (min-width: 768px) { + .planing-visit__content { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .planing-visit__content { + --columns: 12; } } + @media (min-width: 768px) { + .planing-visit__content { + padding: 80px 0; } } + @media (min-width: 1280px) { + .planing-visit__content { + padding: 200px 0; } } + .planing-visit__title { + grid-column: 1 / -1; + color: #eee; + font-size: 38px; + line-height: 38px; + margin: 0; + margin-bottom: 20px; } + @media (min-width: 768px) { + .planing-visit__title { + grid-column: 1 / 5; + font-size: 62px; + line-height: 62px; } } + @media (min-width: 1280px) { + .planing-visit__title { + grid-column: 6 / 11; } } + .planing-visit__text { + grid-column: 1 / -1; + font-size: 16px; + line-height: 24px; + margin: 0; + margin-bottom: 40px; } + @media (min-width: 768px) { + .planing-visit__text { + grid-column: 1 / 5; + margin-bottom: 60px; } } + @media (min-width: 1280px) { + .planing-visit__text { + grid-column: 6 / 11; } } + .planing-visit__btn { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .planing-visit__btn { + grid-column: 1 / 4; } } + @media (min-width: 1280px) { + .planing-visit__btn { + grid-column: 6 / 9; } } + +.news { + margin-bottom: 120px; } + @media (min-width: 768px) { + .news { + margin-bottom: 160px; } } + @media (min-width: 1280px) { + .news { + margin-bottom: 200px; } } + .news__wrapper { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + row-gap: 60px; } + @media (min-width: 768px) { + .news__wrapper { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .news__wrapper { + --columns: 12; } } + .news__winner { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .news__winner { + grid-column: 1 / 4; } } + @media (min-width: 1280px) { + .news__winner { + grid-column: 1 / 7; } } + .news__cats-day { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .news__cats-day { + grid-column: 4 / 7; } } + @media (min-width: 1280px) { + .news__cats-day { + grid-column: 7 / 13; } } + +.form { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); } + @media (min-width: 768px) { + .form { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .form { + --columns: 12; } } + .form__title { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .form__title { + grid-column: 1 / 6; } } + .form__content { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .form__content { + grid-column: 1 / 5; } } + @media (min-width: 1280px) { + .form__content { + grid-column: 7 / 13; } } + .form__form { + margin-top: 30px; + grid-column: 1 / -1; } + @media (min-width: 768px) { + .form__form { + grid-column: 1 / 4; } } + .form__input { + width: 100%; + border: none; + border-bottom: 1px solid #1c1b29; + margin-bottom: 30px; } + .form__btn { + grid-column: 1 /-1; } + @media (min-width: 768px) { + .form__btn { + grid-column: 1 / 3; } } + +.footer { + background-color: #3f5252; + color: #eee; } + .footer__content { + --columns: 2; + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + row-gap: 50px; + padding: 0; + padding-top: 34px; } + @media (min-width: 768px) { + .footer__content { + --columns: 6; + column-gap: 30px; } } + @media (min-width: 1280px) { + .footer__content { + --columns: 12; } } + .footer__title { + font-family: 'Playfair Display', serif; + font-size: 18px; + line-height: 27px; + font-weight: 700; + margin: 0; } + .footer__contacts { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .footer__contacts { + grid-column: 1 / 3; } } + @media (min-width: 1280px) { + .footer__contacts { + grid-column: 1 / 5; } } + .footer__schedule { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .footer__schedule { + grid-column: 3 / 5; } } + @media (min-width: 1280px) { + .footer__schedule { + grid-column: 5 / 9; } } + .footer__nav { + grid-column: 1 / -1; } + @media (min-width: 768px) { + .footer__nav { + grid-column: 5 / 9; } } + @media (min-width: 1280px) { + .footer__nav { + grid-column: 9 / 13; } } + .footer__social-media { + display: flex; + margin: 0; + margin-top: 30px; } + .footer__icon { + padding: 0; + padding-right: 20px; } + .footer__working-time { + list-style: none; + padding: 0; + margin-bottom: 0; } + .footer__nav-list { + list-style: none; + padding: 0; + margin-bottom: 0; } + .footer__nav-link { + text-decoration: none; + color: #eee; } + .footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 60px; + padding-bottom: 30px; } + .footer__copyrigth { + display: flex; + justify-content: space-between; } + .footer__copyrigth-item { + margin: 0; } + .footer__copyrigth-item:first-child { + padding-right: 22px; } + + +/*# sourceMappingURL=/main.39afc03c.css.map */ \ No newline at end of file diff --git a/main.39afc03c.css.map b/main.39afc03c.css.map new file mode 100644 index 000000000..55ea9cd1e --- /dev/null +++ b/main.39afc03c.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["styles/_fonts.scss","styles/utils/mixins.scss","styles/btn.scss","styles/utils/vars.scss","styles/exhibition.scss","styles/header.scss","styles/icon.scss","styles/main.scss","styles/menu.scss","styles/page.scss","styles/section-title.scss","styles/top-bar.scss","styles/card.scss","styles/events.scss","styles/planing-visit.scss","styles/news.scss","styles/form.scss","styles/footer.scss"],"names":[],"mappings":"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","file":"main.39afc03c.css","sourceRoot":"../Museum_2 copy/src","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');\n","@mixin hover($_property, $_toValue) {\n transition: #{$_property} $effectDuration;\n &:hover {\n #{$_property}: $_toValue;\n }\n}\n\n@mixin onTablet {\n @media (min-width: $tablet-min-width) {\n @content;\n }\n}\n\n@mixin onDesktop {\n @media (min-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin padding-content-inline {\n padding-inline: 20px;\n\n @include onTablet {\n padding-inline: 39px;\n }\n\n @include onDesktop {\n min-width: 1280px;\n margin-inline: auto;\n padding-inline: 55px;\n }\n}\n.container {\n @include padding-content-inline\n}\n\n@mixin pageGrid {\n --columns: 2;\n display: grid;\n column-gap: 20px;\n grid-template-columns: repeat(var(--columns), 1fr);\n\n @include onTablet {\n --columns: 6;\n column-gap: 30px;\n }\n\n @include onDesktop {\n --columns: 12;\n }\n}\n\n",".btn {\n height: 60px;\n background-color: $accent;\n border-radius: 4px;\n border: 2px solid transparent;\n color: $c-gray;\n font-size: 16px;\n font-weight: 600;\n line-height: 16px;\n transition: $effectDuration;\n\n &:hover {\n background-color: $hover;\n }\n\n &--secondary {\n display: none;\n align-items: center;\n background-color: $c-gray;\n border: 2px solid $accent;\n color: $accent;\n background-image: url(\"./images/icons/arrow.png\");\n background-repeat: no-repeat;\n background-size: 20px;\n background-position: right 24px center;\n\n @include onTablet{\n display: grid;\n }\n\n &:hover {\n background-color: $c-gray;\n background-image: url(\"./images/icons/arrow-hover.png\");\n color: $hover;\n border: 2px solid $hover;\n }\n\n &--sm {\n display: block;\n width: 100%;\n margin-top: 30px;\n\n @include onTablet{\n display: none;\n }\n }\n }\n}\n","$c-gray: #eee;\n$primary-color:#3f5252;\n$accent: #cd4d31;\n$hover:#af3419;\n$color-text:#1c1b29;\n$gray: #504f5e;\n\n$tablet-min-width: 768px;\n$desktop-min-width: 1280px;\n$effectDuration: 0.5s;\n\n\n",".exhibition {\n margin-bottom: 120px;\n\n @include onTablet {\n margin-bottom: 160px;\n }\n\n @include onDesktop {\n margin-bottom: 200px;\n }\n\n &__wrapper {\n @include pageGrid;\n row-gap: 60px;\n }\n\n &__angel {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n\n @include onDesktop {\n grid-column: 1 / 7;\n }\n }\n\n &__ХХ-XXI {\n grid-column: 1 / -1;\n\n\n @include onTablet {\n grid-column: 4 / 7;\n }\n\n @include onDesktop {\n grid-column: 7 / 13;\n }\n }\n\n}\n",".header {\n background-color: $primary-color;\n background-image: url(\"./images/header-bg-sm.png\");\n background-repeat: no-repeat;\n background-position: bottom 0 center;\n background-size: 300px;\n\n @include onTablet {\n background-size: 500px;\n }\n\n @include onDesktop {\n background-position: right 0 bottom 0;\n background-size: 600px;\n\n }\n\n &__content {\n height: 100vh;\n display: flex;\n flex-direction: column;\n color: $c-gray;\n position: relative;\n }\n}\n\n.description {\n @include pageGrid;\n margin: 0;\n margin-top: 50px;\n\n @include onTablet {\n margin-top: 100px;\n }\n\n &__wrapper {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 6;\n }\n\n @include onDesktop {\n grid-column: 1 / 7;\n }\n }\n\n &__schedule {\n font-size: 14px;\n }\n\n &__title {\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n font-size: 48px;\n line-height: 48px;\n margin: 0;\n margin-top: 10px;\n\n @include onTablet {\n font-size: 72px;\n line-height: 72px;\n }\n\n @include onDesktop {\n font-size: 96px;\n line-height: 96px;\n }\n\n }\n\n &__sub-title {\n margin: 0;\n margin-top: 30px;\n }\n\n &__btn-wrapper {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n column-gap: 20px;\n\n @include onTablet {\n grid-template-columns: repeat(6, 1fr);\n column-gap: 30px;\n }\n }\n\n &__btn {\n grid-column: 1 / -1;\n margin: 0;\n margin-top: 40px;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n }\n\n &__bottom {\n display: none;\n\n @include onDesktop {\n grid-column: 1 / 7;\n display: grid;\n column-gap: 10px;\n grid-template-columns: repeat(7, 1fr);\n position: absolute;\n bottom: 50px;\n left: 50px;\n }\n }\n\n &__time {\n grid-column: span 1;\n font-size: 14px;\n font-weight: 700;\n line-height: 17px;\n margin-bottom: -3px;\n padding: 0;\n\n }\n\n &__line {\n grid-column: 2 / 7;\n border-bottom: 1px solid $c-gray;\n }\n}\n",".icon {\n display: block;\n width: 25px;\n height: 20px;\n background-size: cover;\n background-position: center;\n\n &--menu {\n background-image: url(\"./images/icons/icon-menu-sm.png\");\n }\n\n &--arrow--down {\n background-image: url(\"./images/icons/icon-arrow-down.png\");\n width: 20px;\n height: 10px;\n }\n\n &--close {\n background-image: url(\"./images/icons/icon-close-sm.png\");\n }\n\n &--hidden {\n display: none;\n\n @include onTablet {\n display: block;\n }\n }\n}\n",".main {\n &__content {\n display: grid;\n padding-block: 90px;\n\n @include onTablet {\n padding-block: 100px;\n }\n\n @include onDesktop {\n padding-block: 110px;\n }\n }\n}\n",".menu {\n height: 100vh;\n background-color: $primary-color;\n color: $c-gray;\n\n &__bottom {\n @include pageGrid;\n height: 100vh;\n }\n\n &__order {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 5;\n }\n\n @include onDesktop{\n grid-column: 1 / 7;\n }\n }\n\n &__info-wrapper {\n display: grid;\n grid-template-rows: 2;\n margin-top: 10px;\n\n @include onTablet {\n grid-template-rows: 1;\n margin-top: 40px;\n\n }\n }\n\n &__schedule {\n margin: 0;\n grid-column: 1 / -1;\n grid-row: 1 / 2;\n\n @include onTablet {\n grid-column: 1 / 3;\n grid-row: 1 / 2;\n }\n }\n\n &__adress {\n margin: 0;\n grid-row: 2 / 3;\n\n @include onTablet {\n grid-column: 3 / 6;\n grid-row: 1 / 2;\n }\n }\n\n &__info {\n margin: 0;\n\n &--weigth {\n font-weight: 600;\n }\n }\n\n &__events {\n padding: 40px 0;\n border-bottom: 1px solid $c-gray;\n\n @include onTablet {\n padding-top: 70px;\n padding-bottom: 60px;\n }\n }\n\n &__event {\n margin: 0;\n\n &:not(:last-child) {\n margin-bottom: 20px;\n }\n\n @include onTablet {\n &:not(:last-child) {\n margin-bottom: 60px;\n }\n }\n }\n &__link {\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n text-decoration: none;\n color: $c-gray;\n\n @include onTablet {\n font-size: 48px;\n line-height: 58px;\n }\n\n }\n\n &__btn-wrapper {\n margin-top: 40px;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n column-gap: 30px;\n }\n\n &__btn {\n grid-column: 1 / -1;\n @include onTablet {\n grid-column: 1 / 4;\n }\n }\n\n &__img-wrapper {\n grid-column: 1 / -1;\n display: none;\n\n @include onTablet {\n grid-column: 2 / 6;\n display: flex;\n align-items: flex-end;\n }\n\n @include onDesktop {\n grid-column: 7 / 13;\n grid-row: 1 / 3;\n }\n }\n\n &__img {\n width: 100%;\n }\n}\n",".page {\n font-family: 'Raleway', sans-serif;\n font-size: 16px;\n font-weight: 400;\n line-height: 20px;\n text-align: left;\n scroll-behavior: smooth;\n\n &__body {\n height: 100%;\n min-width: 325px;\n padding: 0;\n margin: 0;\n }\n\n &__menu {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n\n opacity: 0;\n pointer-events: none;\n transform: translateX(-100%);\n transition: $effectDuration;\n\n &:target {\n opacity: 1;\n transform: translateX(0);\n pointer-events: all;\n }\n }\n\n &:has(.page__menu:target) {\n overflow: hidden;\n }\n}\n",".section-title {\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n font-size: 28px;\n line-height: 35px;\n color: $color-text;\n margin: 0;\n\n @include onTablet {\n font-size: 40px;\n line-height: 50px;\n }\n\n @include onDesktop {\n font-size: 48px;\n line-height: 58px;\n }\n}\n",".top-bar {\n padding-block: 20px;\n\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &__logo {\n height: 40px;\n }\n\n &__icons {\n display: flex;\n gap: 40px;\n }\n &__lang {\n display: flex;\n align-items: center;\n\n &--hidden {\n display: none;\n\n @include onTablet {\n display: inline;\n }\n }\n }\n}\n",".card {\n @include pageGrid;\n margin: 0;\n margin-bottom: 60px;\n\n @include onTablet {\n margin-bottom: 75px;\n }\n\n @include onDesktop {\n margin-bottom: 70px;\n }\n\n\n &__title {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 5;\n }\n\n @include onDesktop {\n grid-column: 1 / 6;\n }\n }\n\n &__btn {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 5 / 7;\n }\n\n @include onDesktop {\n grid-column: 10 / 13;\n }\n }\n\n &__img {\n width: 100%;\n height: 356px;\n object-fit: cover;\n\n @include onTablet {\n height: 420px;\n }\n\n @include onDesktop {\n height: 484px;\n }\n }\n\n &__date {\n color: #CD4D31;\n margin: 0;\n margin-top: 20px;\n }\n\n &__name {\n font-family: 'Playfair Display', serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 30px;\n margin: 0;\n margin-top: 10px;\n }\n\n &__description {\n margin: 0;\n margin-top: 20px;\n }\n\n &-btn-wrapper {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n\n @include onTablet {\n grid-template-columns:repeat(3, 1fr);\n }\n\n @include onDesktop {\n grid-template-columns: repeat(6, 1fr);\n }\n }\n\n &-btn {\n grid-column: 1 / -1;\n margin-top: 30px;\n\n @include onTablet {\n grid-column: 1 / 3;\n }\n }\n}\n",".events {\n margin-bottom: 90px;\n\n @include onTablet {\n margin-bottom: 120px;\n }\n\n &__wrapper {\n display: grid;\n row-gap: 60px;\n }\n\n &__excursion {\n @include pageGrid;\n }\n\n &__master-class {\n @include pageGrid;\n }\n\n &__img {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n\n @include onDesktop {\n grid-column: 1 / 5;\n }\n }\n &__content {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 4 / 7;\n }\n\n @include onDesktop {\n grid-column: 5 / 10;\n }\n }\n}\n",".planing-visit {\n background-color: $primary-color;\n color: $c-gray;\n margin-bottom: 90px;\n\n @include onTablet {\n margin-bottom: 120px;\n }\n\n\n @include onDesktop {\n background-image: url(\"./images/bg.png\");\n background-repeat: no-repeat;\n background-size: contain;\n\n }\n\n &__content {\n @include pageGrid;\n padding: 50px 0;\n\n @include onTablet {\n padding: 80px 0;\n }\n\n @include onDesktop {\n padding: 200px 0;\n }\n }\n\n\n &__title {\n grid-column: 1 / -1;\n color: $c-gray;\n font-size: 38px;\n line-height: 38px;\n margin: 0;\n margin-bottom: 20px;\n\n @include onTablet {\n grid-column: 1 / 5;\n font-size: 62px;\n line-height: 62px;\n }\n\n @include onDesktop {\n grid-column: 6 / 11;\n }\n }\n\n &__text {\n grid-column: 1 / -1;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n margin-bottom: 40px;\n\n @include onTablet {\n grid-column: 1 / 5;\n margin-bottom: 60px;\n }\n\n @include onDesktop {\n grid-column: 6 / 11;\n }\n }\n\n &__btn {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n\n @include onDesktop {\n grid-column: 6 / 9;\n }\n }\n}\n",".news {\n margin-bottom: 120px;\n\n @include onTablet {\n margin-bottom: 160px;\n }\n\n @include onDesktop {\n margin-bottom: 200px;\n }\n\n &__wrapper {\n @include pageGrid;\n row-gap: 60px;\n }\n\n &__winner {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n\n @include onDesktop {\n grid-column: 1 / 7;\n }\n }\n\n &__cats-day {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 4 / 7;\n }\n\n @include onDesktop {\n grid-column: 7 / 13;\n }\n }\n\n}\n",".form {\n @include pageGrid;\n\n &__title {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 6;\n }\n }\n\n &__content {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 5;\n }\n\n @include onDesktop {\n grid-column: 7 / 13;\n }\n }\n\n &__form {\n margin-top: 30px;\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 4;\n }\n }\n\n &__input {\n width: 100%;\n border: none;\n border-bottom: 1px solid $color-text;\n margin-bottom: 30px;\n }\n\n &__btn {\n grid-column: 1 /-1;\n\n @include onTablet {\n grid-column: 1 / 3;\n }\n }\n}\n",".footer {\n background-color: $primary-color;\n color: $c-gray;\n\n &__content {\n @include pageGrid;\n row-gap: 50px;\n padding: 0;\n padding-top: 34px;\n }\n\n &__title {\n font-family: 'Playfair Display', serif;\n font-size: 18px;\n line-height: 27px;\n font-weight: 700;\n margin: 0;\n }\n\n &__contacts {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 1 / 3;\n }\n\n @include onDesktop {\n grid-column: 1 / 5;\n }\n }\n\n &__schedule {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 3 / 5;\n }\n\n @include onDesktop {\n grid-column: 5 / 9;\n }\n }\n\n &__nav {\n grid-column: 1 / -1;\n\n @include onTablet {\n grid-column: 5 / 9;\n }\n\n @include onDesktop {\n grid-column: 9 / 13;\n }\n }\n\n &__social-media {\n display: flex;\n margin: 0;\n margin-top: 30px;\n }\n\n &__icon {\n padding: 0;\n padding-right: 20px;\n\n }\n\n &__working-time {\n list-style: none;\n padding: 0;\n margin-bottom: 0;\n }\n\n &__nav-list {\n list-style: none;\n padding: 0;\n margin-bottom: 0;\n }\n\n &__nav-link {\n text-decoration: none;\n color: $c-gray;\n }\n\n &__bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 60px;\n padding-bottom: 30px;\n }\n\n &__copyrigth {\n display: flex;\n justify-content: space-between;\n }\n\n &__copyrigth-item {\n margin: 0;\n\n &:first-child {\n padding-right: 22px;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/main.39afc03c.js b/main.39afc03c.js new file mode 100644 index 000000000..4a608b74f --- /dev/null +++ b/main.39afc03c.js @@ -0,0 +1,396 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles +parcelRequire = (function (modules, cache, entry, globalName) { + // Save the require from previous bundle to this closure if any + var previousRequire = typeof parcelRequire === 'function' && parcelRequire; + var nodeRequire = typeof require === 'function' && require; + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = typeof parcelRequire === 'function' && parcelRequire; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error('Cannot find module \'' + name + '\''); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = cache[name] = new newRequire.Module(name); + + modules[name][0].call(module.exports, localRequire, module, module.exports, this); + } + + return cache[name].exports; + + function localRequire(x){ + return newRequire(localRequire.resolve(x)); + } + + function resolve(x){ + return modules[name][1][x] || x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [function (require, module) { + module.exports = exports; + }, {}]; + }; + + var error; + for (var i = 0; i < entry.length; i++) { + try { + newRequire(entry[i]); + } catch (e) { + // Save first error but execute all entries + if (!error) { + error = e; + } + } + } + + if (entry.length) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(entry[entry.length - 1]); + + // CommonJS + if (typeof exports === "object" && typeof module !== "undefined") { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === "function" && define.amd) { + define(function () { + return mainExports; + }); + + // diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 000000000..c93af2a91 --- /dev/null +++ b/src/main.scss @@ -0,0 +1,19 @@ +@import "styles/utils/vars"; +@import "styles/utils/mixins"; + +@import "styles/fonts"; +@import "styles/btn"; +@import "styles/exhibition"; +@import "styles/header"; +@import "styles/icon"; +@import "styles/main"; +@import "styles/menu"; +@import "styles/page"; +@import "styles/section-title"; +@import "styles/top-bar"; +@import "styles/card"; +@import "styles/events"; +@import "styles/planing-visit"; +@import "styles/news"; +@import "styles/form"; +@import "styles/footer"; diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 33c3ed2b3..5313d46fa 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1 +1,2 @@ -// put fonts here +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap"); 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 1366a06aa..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/btn.scss b/src/styles/btn.scss new file mode 100644 index 000000000..efe4b9d45 --- /dev/null +++ b/src/styles/btn.scss @@ -0,0 +1,44 @@ +.btn { + height: 60px; + background-color: $accent; + border-radius: 4px; + border: 2px solid transparent; + color: $c-gray; + font-size: 16px; + font-weight: 600; + line-height: 16px; + transition: $effectDuration; + cursor: pointer; + @include hover(transform, scale(1.05)); + + &--secondary { + display: none; + align-items: center; + background-color: white; + border: 2px solid $accent; + color: $accent; + background-image: url("./images/icons/arrow.png"); + background-repeat: no-repeat; + background-size: 20px; + background-position: right 24px center; + outline: none; + + @include onTablet { + display: grid; + } + + &:hover { + background-image: url("./images/icons/arrow-hover.png"); + } + + &--sm { + display: block; + width: 100%; + margin-top: 30px; + + @include onTablet { + display: none; + } + } + } +} diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 000000000..27a79d58a --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,94 @@ +.card { + @include pageGrid; + margin: 0; + margin-bottom: 60px; + + @include onTablet { + margin-bottom: 75px; + } + + @include onDesktop { + margin-bottom: 70px; + } + + &__title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 1 / 6; + } + } + + &__btn { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / 7; + } + + @include onDesktop { + grid-column: 10 / 13; + } + } + + &__img { + width: 100%; + height: 356px; + object-fit: cover; + @include hover(transform, scale(1.05)); + + @include onTablet { + height: 420px; + } + + @include onDesktop { + height: 484px; + } + } + + &__date { + color: #cd4d31; + margin: 0; + margin-top: 20px; + } + + &__name { + font-family: "Playfair Display", serif; + font-size: 24px; + font-weight: 700; + line-height: 30px; + margin: 0; + margin-top: 10px; + } + + &__description { + margin: 0; + margin-top: 20px; + } + + &-btn-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include onTablet { + grid-template-columns: repeat(3, 1fr); + } + + @include onDesktop { + grid-template-columns: repeat(6, 1fr); + } + } + + &-btn { + grid-column: 1 / -1; + margin-top: 30px; + + @include onTablet { + grid-column: 1 / 3; + } + } +} diff --git a/src/styles/events.scss b/src/styles/events.scss new file mode 100644 index 000000000..a10cd42ac --- /dev/null +++ b/src/styles/events.scss @@ -0,0 +1,43 @@ +.events { + margin-bottom: 90px; + + @include onTablet { + margin-bottom: 120px; + } + + &__wrapper { + display: grid; + row-gap: 60px; + } + + &__excursion { + @include pageGrid; + } + + &__master-class { + @include pageGrid; + } + + &__img { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + &__content { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 5 / 10; + } + } +} diff --git a/src/styles/exhibition.scss b/src/styles/exhibition.scss new file mode 100644 index 000000000..e5076b4dc --- /dev/null +++ b/src/styles/exhibition.scss @@ -0,0 +1,41 @@ +.exhibition { + margin-bottom: 120px; + + @include onTablet { + margin-bottom: 160px; + } + + @include onDesktop { + margin-bottom: 200px; + } + + &__wrapper { + @include pageGrid; + row-gap: 60px; + } + + &__angel { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__ХХ-XXI { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..b196f4cb4 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,114 @@ +.footer { + background-color: $primary-color; + color: $c-gray; + + &__content { + @include pageGrid; + row-gap: 50px; + padding: 0; + padding-top: 34px; + } + + &__title { + font-family: "Playfair Display", serif; + font-size: 18px; + line-height: 27px; + font-weight: 700; + margin: 0; + } + + &__contacts { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 3; + } + + @include onDesktop { + grid-column: 1 / 5; + } + } + + &__schedule { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 3 / 5; + } + + @include onDesktop { + grid-column: 5 / 9; + } + } + + &__nav { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 5 / 9; + } + + @include onDesktop { + grid-column: 9 / 13; + } + } + + &__social-media { + display: flex; + margin: 0; + margin-top: 30px; + } + + &__icon { + padding: 0; + padding-right: 20px; + @include hover(transform, scale(1.1)); + } + + &__working-time { + list-style: none; + padding: 0; + margin-bottom: 0; + } + + &__nav-list { + list-style: none; + padding: 0; + margin-bottom: 0; + } + + &__nav-item { + text-decoration: none; + color: $c-gray; + line-height: 24px; + + &:hover { + color: $links-hover; + } + } + + &__bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 60px; + padding-bottom: 30px; + } + + &__copyrigth { + display: flex; + justify-content: space-between; + } + + &__copyrigth-item { + margin: 0; + + &:first-child { + padding-right: 22px; + } + } + + &__scloll-up { + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/form.scss b/src/styles/form.scss new file mode 100644 index 000000000..2f7a9dce6 --- /dev/null +++ b/src/styles/form.scss @@ -0,0 +1,87 @@ +.form { + @include pageGrid; + + &__title { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 6; + } + + } + + &__content { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 5; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + + &__form { + margin-top: 30px; + grid-column: 1 / -1; + + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 30px; + + @include onTablet { + grid-column: 1 / 4; + } + } + + &__input { + border: none; + border-bottom: 1px solid $color-text; + margin-bottom: 30px; + outline: none; + + &:-webkit-autofill { + background-color: white; + } + + &::placeholder { + color: $color-text; + } + + &:hover::placeholder { + color: $links-hover; + } + + &:hover { + color: $links-hover; + } + + &:focus { + color: $color-text; + border-color: $links-hover; + } + + &:valid { + color: $color-text; + } + + &:invalid { + border-color: $accent; + } + + grid-column: 1 /-1; + + @include onTablet { + grid-column: 1 / 5; + } + } + + &__btn { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..ac8a1ad42 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,125 @@ +.header { + background-color: $primary-color; + background-image: url("./images/header-bg-sm.png"); + background-repeat: no-repeat; + background-position: bottom 0 center; + background-size: 35vh; + + @include onTablet { + background-size: 494px; + } + + @include onDesktop { + background-position: right 0 bottom 0; + background-size: 625px; + } + + &__content { + height: 100vh; + display: flex; + flex-direction: column; + color: $c-gray; + position: relative; + } +} + +.description { + @include pageGrid; + margin: 0; + margin-top: 50px; + + @include onTablet { + margin-top: 100px; + } + + &__wrapper { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 6; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__schedule { + font-size: 14px; + } + + &__title { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 48px; + line-height: 48px; + margin: 0; + margin-top: 10px; + + @include onTablet { + font-size: 72px; + line-height: 72px; + } + + @include onDesktop { + font-size: 96px; + line-height: 96px; + } + + } + + &__sub-title { + margin: 0; + margin-top: 30px; + } + + &__btn-wrapper { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include onTablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + } + + &__btn { + grid-column: 1 / -1; + margin: 0; + margin-top: 40px; + + @include onTablet { + grid-column: 1 / 4; + } + } + + &__bottom { + display: none; + + @include onDesktop { + grid-column: 1 / 7; + display: grid; + column-gap: 10px; + grid-template-columns: repeat(7, 1fr); + position: absolute; + bottom: 50px; + left: 50px; + } + } + + &__time { + grid-column: span 1; + font-size: 14px; + font-weight: 700; + line-height: 17px; + margin-bottom: -3px; + padding: 0; + + } + + &__line { + grid-column: 2 / 7; + border-bottom: 1px solid $c-gray; + } +} diff --git a/src/styles/icon.scss b/src/styles/icon.scss new file mode 100644 index 000000000..75b3b1475 --- /dev/null +++ b/src/styles/icon.scss @@ -0,0 +1,25 @@ +.icon { + display: block; + width: 25px; + height: 20px; + background-size: cover; + background-position: center; + cursor: pointer; + @include hover(transform, scale(1.1)); + + &--menu { + background-image: url("./images/icons/icon-menu-sm.png"); + } + + &--close { + background-image: url("./images/icons/icon-close-sm.png"); + } + + &--hidden { + display: none; + + @include onTablet { + display: block; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 0f8860e4d..505e8b010 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,14 @@ -@import "utils"; -@import "fonts"; -@import "typography"; +.main { + &__content { + display: grid; + padding-block: 90px; -body { - background: $c-gray; + @include onTablet { + padding-block: 100px; + } + + @include onDesktop { + padding-block: 110px; + } + } } diff --git a/src/styles/menu.scss b/src/styles/menu.scss new file mode 100644 index 000000000..5995b2d60 --- /dev/null +++ b/src/styles/menu.scss @@ -0,0 +1,139 @@ +.menu { + height: 100vh; + background-color: $primary-color; + color: $c-gray; + overflow: hidden; + + @include onTablet { + background-image: url("./images/img_menu-sm.png"); + background-repeat: no-repeat; + background-position: center bottom 0; + background-size: 466px; + } + + @include onDesktop { + background-position: right 0 bottom 0; + background-size: 600px; + } + + &__bottom { + @include pageGrid; + height: 100vh; + } + + &__order { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 6; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__info-wrapper { + display: grid; + grid-template-rows: 2; + margin-top: 10px; + + @include onTablet { + grid-template-rows: 1; + margin-top: 40px; + + } + } + + &__schedule { + margin: 0; + grid-column: 1 / -1; + grid-row: 1 / 2; + + @include onTablet { + grid-column: 1 / 3; + grid-row: 1 / 2; + } + } + + &__adress { + margin: 0; + grid-row: 2 / 3; + + @include onTablet { + grid-column: 3 / 6; + grid-row: 1 / 2; + } + } + + &__info { + margin: 0; + text-decoration: none; + color: $c-gray; + + &--weigth { + font-weight: 600; + } + + &--link { + &:hover { + color: $links-hover; + } + } + } + + &__events { + padding: 40px 0; + border-bottom: 1px solid $c-gray; + + @include onDesktop { + padding-top: 70px; + padding-bottom: 60px; + } + } + + &__event { + margin: 0; + + &:not(:last-child) { + margin-bottom: 20px; + } + + @include onDesktop { + &:not(:last-child) { + margin-bottom: 60px; + } + } + } + &__link { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 20px; + line-height: 30px; + text-decoration: none; + color: $c-gray; + &:hover { + color: $links-hover; + } + + @include onTablet { + font-size: 48px; + line-height: 58px; + } + + } + + &__btn-wrapper { + margin-top: 40px; + display: grid; + grid-template-columns: repeat(6, 1fr); + column-gap: 30px; + } + + &__btn { + grid-column: 1 / -1; + @include onTablet { + grid-column: 1 / 4; + } + } +} diff --git a/src/styles/news.scss b/src/styles/news.scss new file mode 100644 index 000000000..a6d669c97 --- /dev/null +++ b/src/styles/news.scss @@ -0,0 +1,41 @@ +.news { + margin-bottom: 120px; + + @include onTablet { + margin-bottom: 160px; + } + + @include onDesktop { + margin-bottom: 200px; + } + + &__wrapper { + @include pageGrid; + row-gap: 60px; + } + + &__winner { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 1 / 7; + } + } + + &__cats-day { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 4 / 7; + } + + @include onDesktop { + grid-column: 7 / 13; + } + } + +} diff --git a/src/styles/page.scss b/src/styles/page.scss new file mode 100644 index 000000000..89bb67693 --- /dev/null +++ b/src/styles/page.scss @@ -0,0 +1,37 @@ +.page { + font-family: "Raleway", sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 20px; + text-align: left; + scroll-behavior: smooth; + + &__body { + height: 100%; + min-width: 325px; + padding: 0; + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + transform: translateX(-100%); + transition: $effectDuration; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/planing-visit.scss b/src/styles/planing-visit.scss new file mode 100644 index 000000000..8be9a617a --- /dev/null +++ b/src/styles/planing-visit.scss @@ -0,0 +1,77 @@ +.planing-visit { + background-color: $primary-color; + color: $c-gray; + margin-bottom: 90px; + + @include onTablet { + margin-bottom: 120px; + } + + @include onDesktop { + background-image: url("./images/bg.png"); + background-repeat: no-repeat; + background-size: contain; + + } + + &__content { + @include pageGrid; + padding: 50px 0; + + @include onTablet { + padding: 80px 0; + } + + @include onDesktop { + padding: 200px 0; + } + } + + &__title { + grid-column: 1 / -1; + color: $c-gray; + font-size: 38px; + line-height: 38px; + margin: 0; + margin-bottom: 20px; + + @include onTablet { + grid-column: 1 / 5; + font-size: 62px; + line-height: 62px; + } + + @include onDesktop { + grid-column: 6 / 11; + } + } + + &__text { + grid-column: 1 / -1; + font-size: 16px; + line-height: 24px; + margin: 0; + margin-bottom: 40px; + + @include onTablet { + grid-column: 1 / 5; + margin-bottom: 60px; + } + + @include onDesktop { + grid-column: 6 / 11; + } + } + + &__btn { + grid-column: 1 / -1; + + @include onTablet { + grid-column: 1 / 4; + } + + @include onDesktop { + grid-column: 6 / 9; + } + } +} diff --git a/src/styles/section-title.scss b/src/styles/section-title.scss new file mode 100644 index 000000000..2b2a4ee34 --- /dev/null +++ b/src/styles/section-title.scss @@ -0,0 +1,18 @@ +.section-title { + font-family: "Playfair Display", serif; + font-weight: 700; + font-size: 28px; + line-height: 35px; + color: $color-text; + margin: 0; + + @include onTablet { + font-size: 40px; + line-height: 50px; + } + + @include onDesktop { + font-size: 48px; + line-height: 58px; + } +} diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 000000000..945fac218 --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,58 @@ +.top-bar { + padding-block: 20px; + + display: flex; + justify-content: space-between; + align-items: center; + + &__logo { + height: 40px; + } + + &__logo-link { + cursor: pointer; + @include hover(transform, scale(1.1)); + } + + &__icons { + display: flex; + gap: 40px; + + &--menu { + display: flex; + gap: 15px; + } + + @include onTablet { + &--menu { + gap: 40px; + } + } + } + + &__lang { + display: none; + background-color: transparent; + color: $c-gray; + font-size: 16px; + border: none; + outline: none; + + &--menu { + display: inline; + } + + @include onTablet { + display: inline; + + &--menu { + display: none; + } + } + + &--visible { + display: none; + } + } + +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index a1a5dd0e3..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..770216984 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,52 @@ +@mixin hover($_property, $_toValue) { + transition: #{$_property} $effectDuration; + &:hover { + #{$_property}: $_toValue; + } +} + +@mixin onTablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin onDesktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin padding-content-inline { + padding-inline: 20px; + + @include onTablet { + padding-inline: 39px; + } + + @include onDesktop { + min-width: 1280px; + margin-inline: auto; + padding-inline: 55px; + } +} +.container { + @include padding-content-inline +} + +@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/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..b537d3bed --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,13 @@ +$c-gray: #eee; +$primary-color:#3f5252; +$accent: #cd4d31; +$hover:#af3419; +$links-hover:#cfcfd5; +$color-text:#1c1b29; +$gray: #504f5e; + +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$effectDuration: 0.5s; + + diff --git a/telegram.ccca437c.png b/telegram.ccca437c.png new file mode 100644 index 000000000..264d1dea5 Binary files /dev/null and b/telegram.ccca437c.png differ diff --git a/twitter.1b30927d.png b/twitter.1b30927d.png new file mode 100644 index 000000000..73783c5f6 Binary files /dev/null and b/twitter.1b30927d.png differ