diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/about-us_bg.png b/src/images/about-us_bg.png new file mode 100644 index 000000000..8d14dfb3e Binary files /dev/null and b/src/images/about-us_bg.png differ diff --git a/src/images/events_lecture.png b/src/images/events_lecture.png new file mode 100644 index 000000000..bd0f43a87 Binary files /dev/null and b/src/images/events_lecture.png differ diff --git a/src/images/events_presentation_1.png b/src/images/events_presentation_1.png new file mode 100644 index 000000000..87799fab3 Binary files /dev/null and b/src/images/events_presentation_1.png differ diff --git a/src/images/events_presentation_2.png b/src/images/events_presentation_2.png new file mode 100644 index 000000000..1e99fc943 Binary files /dev/null and b/src/images/events_presentation_2.png differ diff --git a/src/images/gallery_photo-1.png b/src/images/gallery_photo-1.png new file mode 100644 index 000000000..bde1786d1 Binary files /dev/null and b/src/images/gallery_photo-1.png differ diff --git a/src/images/gallery_photo-2.png b/src/images/gallery_photo-2.png new file mode 100644 index 000000000..68736f3eb Binary files /dev/null and b/src/images/gallery_photo-2.png differ diff --git a/src/images/gallery_photo-3.png b/src/images/gallery_photo-3.png new file mode 100644 index 000000000..b7d488864 Binary files /dev/null and b/src/images/gallery_photo-3.png differ diff --git a/src/images/gallery_photo-4.png b/src/images/gallery_photo-4.png new file mode 100644 index 000000000..fcf8349d3 Binary files /dev/null and b/src/images/gallery_photo-4.png differ diff --git a/src/images/gallery_photo-5.png b/src/images/gallery_photo-5.png new file mode 100644 index 000000000..81cdddf40 Binary files /dev/null and b/src/images/gallery_photo-5.png differ diff --git a/src/images/header_museun_bg.png b/src/images/header_museun_bg.png new file mode 100644 index 000000000..56d031b5e Binary files /dev/null and b/src/images/header_museun_bg.png differ diff --git a/src/images/icons/burger-menu.svg b/src/images/icons/burger-menu.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icons/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/favicon.svg b/src/images/icons/favicon.svg new file mode 100644 index 000000000..2cda206c3 --- /dev/null +++ b/src/images/icons/favicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon_NA-MU_logo.svg b/src/images/icons/icon_NA-MU_logo.svg new file mode 100644 index 000000000..a4c9234aa --- /dev/null +++ b/src/images/icons/icon_NA-MU_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon_about-us_arrow.svg b/src/images/icons/icon_about-us_arrow.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/icons/icon_about-us_arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon_arrow-up.svg b/src/images/icons/icon_arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icons/icon_arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon_close_menu.svg b/src/images/icons/icon_close_menu.svg new file mode 100644 index 000000000..251368179 --- /dev/null +++ b/src/images/icons/icon_close_menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon_facebook.svg b/src/images/icons/icon_facebook.svg new file mode 100644 index 000000000..511e7205b --- /dev/null +++ b/src/images/icons/icon_facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon_header_arrow.svg b/src/images/icons/icon_header_arrow.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/icons/icon_header_arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon_instagram.svg b/src/images/icons/icon_instagram.svg new file mode 100644 index 000000000..575d51788 --- /dev/null +++ b/src/images/icons/icon_instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..3bfb3125e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,509 @@ + - + - Title + Художній Музей + - -

Hello Mate Academy

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

ХУДОЖНІЙ МУЗЕЙ

+
+

КВИТКИ

+
+ +
+
+
+ + ПОДІЇ +
+
+
+
+ + + +
+
+
+
+

Актуальні події

+
+ Йду і повертаюсь +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+
+

Йду і повертаюсь

+
+
+

+ Національний Художній Музей України презентує унікальну + частину колекції Градобанку - українське мистецтво другої + половини 1980-1995 років. +

+
+
+ +
+ І спогади і мрії +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+
+

І спогади і мрії

+
+
+

+ Національний художній музей України до 100 річчя від дня + народження видатної української художниці Тетяни Яблонської + відкриває ретроспективну ювілейну виставку «І спогади і мрії». +

+
+
+
+ +
+ Від класицизму до романтизму +
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+

Від класицизму до романтизму

+
+
+
+ + + +
+
+
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+ +
+
+
+
+
+
+ + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..ba6369072 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,71 @@ +.about-us { + position: relative; + width: 100%; + height: 386px; + margin-top: 129px; + margin-bottom: 50px; + + @include on-tablet { + height: 380px; + margin-top: 133px; + } + + @include on-desktop { + height: 550px; + margin-top: 200px; + } + + &__background { + position: absolute; + z-index: -1; + top: 0; + + width: 100vw; + height: 100%; + + background-image: url(../images/about-us_bg.png); + background-position: center; + background-size: cover; + } + + &__content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 0 auto; + text-align: center; + + padding-top: 88px; + + @include on-tablet { + padding-top: 82px; + } + + @include on-desktop { + padding-top: 163px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 50px; + + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: $main-white-color; + text-align: center; + } + + &__subscription { + display: flex; + place-content: center center; + align-items: center; + margin-bottom: 88px; + + @include on-tablet { + gap: 16px; + } + } +} diff --git a/src/styles/blocks/activities.scss b/src/styles/blocks/activities.scss new file mode 100644 index 000000000..10e41b040 --- /dev/null +++ b/src/styles/blocks/activities.scss @@ -0,0 +1,31 @@ +.activities { + display: none; + + @include on-desktop { + position: absolute; + display: flex; + align-items: center; + + bottom: 0; + transform-origin: bottom left; + transform: rotate(-90deg); + + flex-direction: row; + gap: 20px; + } + + &__line { + width: 70px; + height: 1px; + + background-color: $accent-green-color; + } + + &__text { + margin: 0; + font-weight: 700; + line-height: 100%; + width: 14px; + color: $grey-color; + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..1f6d12c7e --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,49 @@ +.contacts { + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + &__title { + margin: 0; + margin-bottom: 20px; + line-height: 141%; + } + + &__list { + padding: 0; + list-style: none; + } + + &__item { + margin: 0; + margin-bottom: 10px; + } + + &__link { + text-decoration: none; + color: $main-black-color; + position: relative; + width: fit-content; + white-space: nowrap; + + &::after { + content: ''; + position: absolute; + bottom: -5px; + display: block; + height: 1px; + width: 100%; + background-color: $main-black-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + outline: none; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..40a5ee51a --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,6 @@ +.container { + box-sizing: border-box; + width: 100%; + + @include content-padding-inline; +} diff --git a/src/styles/blocks/design.scss b/src/styles/blocks/design.scss new file mode 100644 index 000000000..5c519b301 --- /dev/null +++ b/src/styles/blocks/design.scss @@ -0,0 +1,31 @@ +.design { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 50px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + padding-left: 34px; + padding-right: 36px; + margin-bottom: 36px; + } + + @include on-desktop { + padding-left: 55px; + padding-right: 55px; + margin-bottom: 35px; + } + + &__text { + margin: 0; + + font-weight: 300; + font-size: 12px; + line-height: 141%; + letter-spacing: 0%; + text-align: center; + color: $main-black-color; + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..842e4cdca --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,137 @@ +.exhibitions { + display: flex; + flex-direction: column; + margin-bottom: 60px; + + font-size: 16px; + + @include on-tablet { + margin-bottom: 112px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + align-items: center; + } + + &__photo { + cursor: pointer; + display: block; + width: 100%; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: span 7; + } + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + } + + &__content { + @include on-tablet { + width: 460px; + } + + @include on-desktop { + grid-column: 9 / -1; + width: 100%; + } + } + + &__description { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin-bottom: 10px; + + @include on-tablet { + gap: 30px; + justify-content: start; + margin-bottom: 30px; + } + } + + &__type { + margin: 0; + + font-weight: 500; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + color: $grey-color; + } + + &__date { + margin: 0; + + font-weight: 700; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + color: $accent-green-color; + } + + &__article { + margin: 0; + + font-weight: 300; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + color: $dark-grey-color; + } + + &__name { + display: flex; + gap: 12px; + line-height: 34px; + align-items: center; + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 15px; + } + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + } + + &__title { + margin: 0; + + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0%; + color: $main-black-color; + + @include on-tablet { + font-size: 36px; + } + } + + &__point { + width: 10px; + height: 10px; + background-color: $accent-red-color; + + @include on-tablet { + width: 15px; + height: 15px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..fa79aa97e --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,122 @@ +.footer { + display: grid; + + &__main { + @include on-tablet { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__info { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include on-tablet { + grid-column: span 4; + grid-template-columns: repeat(4, 1fr); + row-gap: 64px; + } + + @include on-desktop { + grid-column: span 10; + grid-template-columns: repeat(10, 1fr); + margin-bottom: 87px; + align-items: flex-start; + } + } + + &__description-graphic { + grid-column: span 1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__description-contacts { + grid-column: span 1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__button { + display: flex; + grid-column: 1 / -1; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + margin-bottom: 20px; + margin-left: auto; + border: 1px solid $accent-green-color; + border-radius: 50px; + + @include on-tablet { + display: none; + } + } + + &__barrier { + display: block; + grid-column: 1 / -1; + + width: 100%; + height: 1px; + margin-bottom: 40px; + background-color: #1a5a4c80; + + @include on-tablet { + grid-column: 1 / -1; + margin: 0; + } + + @include on-desktop { + grid-column: 5; + width: 1px; + height: 100%; + align-self: stretch; + margin: 0 auto; + } + } + + &__nav { + grid-column: 1 / -1; + gap: 20px; + justify-content: flex-start; + + margin-bottom: 80px; + + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + + color: $main-black-color; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..5b255274e --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,77 @@ +.form { + display: flex; + flex-direction: row; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + + &__email { + display: flex; + align-items: center; + + box-sizing: border-box; + width: 230px; + height: 50px; + padding: 18px; + padding-left: 24px; + border: none; + + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + color: $grey-color; + + background-color: $main-white-color; + + &:focus { + outline: none; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px $main-white-color inset; + } + + @include on-tablet { + width: 374px; + height: 70px; + padding: 28px 24px; + } + + @include on-desktop { + width: 470px; + height: 70px; + padding-left: 32px; + } + } + + &__button { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border: none; + + background-color: $accent-red-color; + + @include on-tablet { + width: 70px; + height: 70px; + } + + transition: $effect-duration; + + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..f54f7304c --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,129 @@ +.gallery { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + &__container { + scroll-behavior: smooth; + overflow: visible; + scroll-snap-type: x mandatory; + + display: flex; + + max-width: 100%; + + @include on-desktop { + all: unset; + display: block; + } + } + + &__track { + display: flex; + transition: transform $effect-duration ease-in-out; + + @include until-desktop { + gap: 16px; + width: 100%; + + @include on-tablet { + gap: 20px; + width: 100%; + } + } + + @include on-desktop { + display: contents; + width: auto !important; + transition: none !important; + } + } + + .gallery__radio { + display: none; + } + + /* stylelint-disable selector-max-id */ + #photo1:checked ~ .gallery__photos .gallery__track { + transform: translateX(0%); + } + + #photo2:checked ~ .gallery__photos .gallery__track { + transform: translateX(-25%); + } + + #photo3:checked ~ .gallery__photos .gallery__track { + transform: translateX(-50%); + } + + #photo4:checked ~ .gallery__photos .gallery__track { + transform: translateX(-75%); + + @include on-tablet { + transform: translateX(-50%); + } + } + + #photo1:checked ~ .gallery__scroll label:nth-child(1), + #photo2:checked ~ .gallery__scroll label:nth-child(2), + #photo3:checked ~ .gallery__scroll label:nth-child(3), + #photo4:checked ~ .gallery__scroll label:nth-child(4) { + background-color: $accent-green-color; + } + /* stylelint-enable */ + &__photos { + display: grid; + width: 100%; + overflow: hidden; + scroll-snap-type: x mandatory; + + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__photo { + cursor: pointer; + scroll-snap-align: start; + + width: 280px; + height: 410px; + + object-fit: cover; + object-position: center; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + width: 340px; + height: 543px; + } + + @include on-desktop { + width: 100%; + height: 600px; + } + + &--small { + @include on-desktop { + height: 360px; + } + } + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/blocks/graphic.scss b/src/styles/blocks/graphic.scss new file mode 100644 index 000000000..4cd51e3b8 --- /dev/null +++ b/src/styles/blocks/graphic.scss @@ -0,0 +1,53 @@ +.graphic { + font-weight: 400; + line-height: 150%; + color: $main-white-color; + + &--black-text { + color: $main-black-color; + } + + &__title { + margin: 0; + margin-bottom: 20px; + line-height: 141%; + } + + &__content { + @include on-tablet { + display: flex; + flex-direction: row; + gap: 26px; + } + } + + &__list { + margin: 0; + margin-bottom: 16px; + padding: 0; + } + + &__item { + list-style: none; + + @include on-tablet { + white-space: nowrap; + } + } + + &__text { + display: inline; + margin: 0; + + &--time { + font-weight: 600; + } + &--time-bold { + font-weight: 600; + } + } + + &__off { + width: fit-content; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..2ba922d99 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,123 @@ +.header { + display: flex; + flex-direction: column; + + margin-bottom: 70px; + + @include on-tablet { + margin-bottom: 88px; + flex-direction: row-reverse; + gap: 20px; + } + + @include on-desktop { + margin-bottom: 200px; + } + + &__top { + width: 100%; + height: 300px; + margin-bottom: 20px; + + background-image: url(../images/header_museun_bg.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + height: 384px; + margin: 0; + } + + @include on-desktop { + height: 655px; + } + } + + &__right-content { + @include on-tablet { + padding-inline: 0; + } + } + + &__logo { + cursor: pointer; + display: flex; + justify-content: center; + width: 55px; + + @include on-tablet { + width: 220px; + } + + @include on-desktop { + width: 170px; + } + } + + &__top-bar { + display: flex; + flex-direction: row; + gap: 88px; + align-items: center; + + padding-top: 10px; + + @include on-tablet { + padding-top: 15px; + } + } + + &__bottom { + position: relative; + display: flex; + flex-direction: column; + + @include on-tablet { + margin-top: 127px; + } + + @include on-desktop { + margin-top: 200px; + } + } + + &__button { + margin: 0 auto; + + @include on-tablet { + margin: 0; + } + } + + &__left-content { + @include on-tablet { + padding-right: 0; + } + } + + &__title { + display: block; + + margin: 0; + margin-bottom: 20px; + + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 45px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + color: $main-black-color; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + text-align: left; + } + + @include on-desktop { + font-size: 72px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..ff1bbe2b6 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,51 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: $effect-duration; + + @include hover(transform, scale(1.3)); + + &--menu { + background-image: url(../images/icons/burger-menu.svg); + } + + &--arrow { + width: 100%; + height: 100%; + background-image: url(../images/icons/icon_header_arrow.svg); + background-size: 24px 24px; + } + + &--close { + background-image: url(../images/icons/icon_close_menu.svg); + } + + &--facebook { + background-image: url(../images/icons/icon_facebook.svg); + } + + &--instagram { + background-image: url(../images/icons/icon_instagram.svg); + } + + &--arrow-up { + width: 100%; + height: 100%; + background-image: url(../images/icons/icon_arrow-up.svg); + background-size: 16px 16px; + } + + &--arrow-black { + width: 100%; + height: 100%; + background-image: url(../images/icons/icon_about-us_arrow.svg); + background-size: 24px 24px; + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..47f1d6322 --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,108 @@ +.lecture { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + + padding-top: 153px; + + margin-bottom: 100px; + + @include on-tablet { + padding-top: 306px; + margin-bottom: 88px; + } + + @include on-desktop { + padding-top: 448px; + margin-bottom: 200px; + } + + &__photo { + position: absolute; + z-index: -1; + top: 0; + + width: 100vw; + height: 210px; + + @include on-tablet { + height: 390px; + } + + @include on-desktop { + height: 550px; + } + } + + &__content { + display: flex; + flex-direction: column; + + width: 280px; + padding: 20px; + + background-color: $main-white-color; + box-shadow: 0 2px 0 0 #1a5a4c40; + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + width: 570px; + padding: 45px 55px 50px; + } + } + + &__description { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; + justify-content: space-between; + + margin-bottom: 10px; + } + + &__type { + margin: 0; + + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: $grey-color; + } + + &__date { + margin: 0; + + font-weight: 700; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + color: $accent-green-color; + } + + &__title { + margin: 0; + + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + color: $main-black-color; + + @include on-tablet { + font-size: 36px; + text-align: start; + } + + transition: $effect-duration; + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..7cc4b630d --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,17 @@ +.logo { + display: block; + height: 61px; + + background-image: url(../images/icons/icon_NA-MU_logo.svg); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + transition: $effect-duration; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + height: 72px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..786908ec9 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,91 @@ +.menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + display: block; + width: 100vw; + height: auto; + background-color: $accent-green-color; + + opacity: 0; + pointer-events: none; + + transform: translateY(-100%); + + &:target { + pointer-events: all; + opacity: 1; + transform: translateY(0); + } + + &::after { + content: ''; + position: fixed; + top: auto; + left: 0; + + width: 100%; + height: 100vw; + + background: rgba(0, 0, 0, 0.5); + } + + &__content { + display: flex; + flex-direction: column; + padding-block: 27px; + + @include on-tablet { + flex-direction: row; + gap: 38px; + padding-block: 40px; + } + + @include on-desktop { + gap: 102px; + padding-bottom: 48px; + } + } + + &__top { + display: flex; + flex-direction: row; + gap: 28px; + + position: sticky; + top: 0; + z-index: 1; + } + + &__nav { + gap: 28px; + justify-content: center; + margin-bottom: 20px; + + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + + @include on-tablet { + margin: 0; + } + } + + &__barrier { + display: block; + width: 280px; + height: 1px; + margin-bottom: 24px; + + background: rgba(255, 255, 255, 0.5); + + @include on-tablet { + box-sizing: border-box; + width: 1px; + height: 145px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..d382872f0 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,51 @@ +.nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + &__block { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__link { + position: relative; + width: fit-content; + text-decoration: none; + box-sizing: border-box; + + &::after { + content: ''; + position: absolute; + display: block; + bottom: -5px; + height: 1px; + width: 100%; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + + &--black { + color: $main-black-color; + + &::after { + background-color: $main-black-color; + } + } + + &--white { + color: $main-white-color; + + &::after { + background-color: $main-white-color; + } + } + } +} diff --git a/src/styles/blocks/networks.scss b/src/styles/blocks/networks.scss new file mode 100644 index 000000000..b4fd087f1 --- /dev/null +++ b/src/styles/blocks/networks.scss @@ -0,0 +1,29 @@ +.networks { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + grid-column: span 1; + flex-direction: column; + gap: 64px; + justify-content: flex-start; + } + + @include on-desktop { + grid-column: span 2; + align-items: flex-start; + } + + &__logo { + width: 63px; + } + + &__icons { + display: flex; + flex-direction: row; + gap: 20px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..e1549a147 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,34 @@ +.page { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + + scroll-behavior: smooth; + + &__body { + min-width: 320px; + margin: 0; + overflow-x: hidden; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: all $effect-duration; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/picture.scss b/src/styles/blocks/picture.scss new file mode 100644 index 000000000..003b020d0 --- /dev/null +++ b/src/styles/blocks/picture.scss @@ -0,0 +1,22 @@ +.picture { + display: grid; + scroll-snap-align: start; + + &--wide { + @include on-desktop { + grid-column: span 8; + } + } + + &--thin { + @include on-desktop { + grid-column: span 4; + } + } + + &--mobile-only { + @include on-desktop { + display: none !important; + } + } +} diff --git a/src/styles/blocks/scroll.scss b/src/styles/blocks/scroll.scss new file mode 100644 index 000000000..3963d45d1 --- /dev/null +++ b/src/styles/blocks/scroll.scss @@ -0,0 +1,25 @@ +.scroll { + position: absolute; + bottom: -20px; + left: 50%; + + transform: translateX(-50%); + display: flex; + gap: 22px; + + @include on-desktop { + display: none; + } + + &__point { + cursor: pointer; + display: inline-block; + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: #e0e0e0; + + transition: background-color $effect-duration ease; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..330b68890 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,31 @@ +.section { + &__title { + margin: 0; + margin-bottom: 40px; + + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + @include on-tablet { + width: 100%; + text-align: start; + } + + &--white { + margin: 0; + margin-bottom: 20px; + color: $main-white-color; + text-align: center; + + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + } + } +} diff --git a/src/styles/blocks/tickets.scss b/src/styles/blocks/tickets.scss new file mode 100644 index 000000000..e8d279acb --- /dev/null +++ b/src/styles/blocks/tickets.scss @@ -0,0 +1,57 @@ +.tickets { + display: flex; + align-items: center; + box-sizing: border-box; + padding-left: 80px; + width: 280px; + height: 50px; + border: 1px solid $accent-green-color; + + transition: $effect-duration; + + @include hover(transform, scale(1.1)); + + &:hover { + box-shadow: 3px 3px 3px 0 rgba(26, 90, 76, 0.5); + } + + @include on-tablet { + width: 270px; + height: 70px; + padding-left: 68px; + } + + @include on-desktop { + margin-left: auto; + } + + &__title { + display: flex; + + flex-grow: 1; + justify-self: center; + + margin: 0; + width: 70px; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + color: $main-black-color; + } + + &__block { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 100%; + + background-color: $accent-green-color; + + @include on-tablet { + width: 70px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..f6ea8b275 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,12 @@ +.top-bar { + &__icon { + @include on-tablet { + position: absolute; + left: $tablet-content-padding; + } + + @include on-desktop { + left: $desktop-content-padding; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..a95a706cc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import '/src/styles/utils/variables'; +@import '/src/styles/utils/fonts'; +@import '/src/styles/utils/mixins'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/logo'; +@import '/src/styles/blocks/top-bar'; +@import '/src/styles/blocks/icon'; +@import '/src/styles/blocks/tickets'; +@import '/src/styles/blocks/activities'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/graphic'; +@import '/src/styles/blocks/container'; +@import '/src/styles/blocks/section'; +@import '/src/styles/blocks/exhibitions'; +@import '/src/styles/blocks/lecture'; +@import '/src/styles/blocks/picture'; +@import '/src/styles/blocks/gallery'; +@import '/src/styles/blocks/scroll'; +@import '/src/styles/blocks/about-us'; +@import '/src/styles/blocks/form'; +@import '/src/styles/blocks/footer'; +@import '/src/styles/blocks/design'; +@import '/src/styles/blocks/networks'; +@import '/src/styles/blocks/contacts'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/fonts.scss b/src/styles/utils/fonts.scss new file mode 100644 index 000000000..55c49a95d --- /dev/null +++ b/src/styles/utils/fonts.scss @@ -0,0 +1,2 @@ +@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..ecd695958 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,37 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + width: 100%; + padding-inline: 20px; + + @include on-tablet { + padding-inline: $tablet-content-padding; + } + + @include on-desktop { + padding-inline: $desktop-content-padding; + } +} + +@mixin until-desktop { + @media (max-width: ($desktop-min-width - 1)) { + @content; + } +} + +@mixin hover($property, $to_value) { + transition: #{$property} 0.5s; + &:hover { + #{$property}: $to_value; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..dcf20a2db --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,11 @@ +$tablet-min-width: 768px; +$desktop-min-width: 1024px; +$tablet-content-padding: 34px; +$desktop-content-padding: 55px; +$effect-duration: 0.5s; +$main-black-color: #0f0e08; +$main-white-color: #fff; +$accent-green-color: #1a5a4c; +$accent-red-color: #f14a27; +$grey-color: #687480; +$dark-grey-color: #4e4e4e;