diff --git a/src/images/Following/following-2.png b/src/images/Following/following-2.png new file mode 100644 index 000000000..fb194ea42 Binary files /dev/null and b/src/images/Following/following-2.png differ diff --git a/src/index.html b/src/index.html index a39d004bf..896c40ff3 100644 --- a/src/index.html +++ b/src/index.html @@ -58,7 +58,7 @@

Художній музей

Про Нас
  • - Виставки та події + Виставки та події
  • Контакти @@ -109,7 +109,7 @@

    Художній музей

    -
    +

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

    @@ -172,9 +172,9 @@

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

    -
    +
    -

    Галерея

    +

    Галерея

    @@ -236,7 +236,142 @@

    Галерея

    + +
    + picture + +
    +
    +
    +

    Підписка

    +

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

    +
    + +
    + +
    +
    +
    +
    +
    + + diff --git a/src/styles/blocks/following.scss b/src/styles/blocks/following.scss new file mode 100644 index 000000000..e7d89899a --- /dev/null +++ b/src/styles/blocks/following.scss @@ -0,0 +1,129 @@ +.main { + &__following { + position: relative; + + &-img { + width: 100%; + height: 386px; + object-fit: cover; + position: relative; + + @include on-tablet { + height: 380px; + } + + @include on-desktop { + height: 550px; + } + } + + &-content { + display: grid; + gap: 50px; + position: absolute; + top: 22%; + left: 0; + width: 100%; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 72px; + top: 29%; + } + } + + &-text { + display: grid; + gap: 20px; + text-align: center; + color: $acc-text-color; + + @include on-tablet { + gap: 16px; + text-align: center; + } + } + + &-title { + margin: 0; + font-family: $Montserrat-font; + font-weight: $font-weight-acc; + font-size: 36px; + line-height: 36px; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + } + + &-description { + margin: 0; + font-family: $IBM-Plex-Sans-font; + font-size: 18px; + line-height: 27px; + padding-inline: 20px; + font-weight: normal; + + @include on-tablet { + line-height: 18px; + } + } + + &-form { + justify-self: center; + display: flex; + height: 50px; + + @include hover (transform, scale(1.02)); + + &:hover { + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); + } + + @include on-tablet { + height: 70px; + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + } + + &-input { + border: none; + padding-inline: 24px; + + &:focus { + outline: none; + } + + @include on-tablet { + width: 320px; + } + + @include on-desktop { + width: 404px; + padding-inline: 32px; + } + } + + &-dec { + height: 100%; + width: 50px; + background-color: $red; + background-image: url(../images/Following/following-2.png); + background-repeat: no-repeat; + background-size: 24px 24px; + background-position: center; + + @include on-tablet { + width: 70px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..c088938ce --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,253 @@ +.footer { + background-color: $bg-color; + margin-block: 50px; + + @include on-tablet { + margin-top: 51px; + margin-bottom: 36px; + } + + @include on-desktop { + margin-top: 47px; + } + + &__wrapper { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + gap: 40px 20px; + display: grid; + + @include on-tablet { + --columns: 6; + + display: grid; + gap: 34px 20px; + grid-template-columns: repeat(var(--columns), 1fr); + } + + @include on-desktop { + --columns: 12; + + gap: 0 32px; + grid-template-columns: repeat(var(--columns), 1fr); + margin-bottom: 87px; + } + } + + &__icon-logo { + grid-column: 1 / -1; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + grid-column: 1 / 2; + display: grid; + gap: 62px; + padding-bottom: 98px; + } + + @include on-desktop { + padding-bottom: 113px; + } + } + + &__logo { + width: 58px; + height: 62px; + + @include hover (transform, scale(1.05)); + } + + &__icons { + display: flex; + gap: 26.51px; + + @include on-tablet { + gap: 32px; + } + + @include on-desktop { + gap: 22.12px; + } + } + + &__icon { + width: 24px; + height: 24px; + + @include hover (transform, scale(1.2)); + + &--facebook { + background-image: url(../images/Footer/Facebook.webp); + background-repeat: no-repeat; + background-size: contain; + } + + &--instagram { + background-image: url(../images/Footer/Instagram.webp); + background-repeat: no-repeat; + background-size: contain; + } + } + + &__schedule { + color: $main-text-color; + display: grid; + gap: 20px; + padding-bottom: 30px; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + padding-bottom: 0; + } + + &-title { + margin: 0; + font-family: $IBM-Plex-Sans-font; + font-size: 14px; + line-height: 19.69px; + } + + &-list { + list-style-type: none; + margin: 0; + padding-left: 0; + } + + &-item { + font-family: $IBM-Plex-Sans-font; + font-size: 14px; + margin: 0; + line-height: 21px; + + &--bold { + font-weight: 600; + } + } + + &-descriprion { + font-family: $IBM-Plex-Sans-font; + font-size: 14px; + margin: 0; + line-height: 21px; + + &--bold { + font-weight: 600; + } + } + } + + &__contact { + gap: 20px; + display: grid; + align-self: flex-start; + + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + &-list { + list-style-type: none; + margin: 0; + padding-left: 0; + } + + &-title { + margin: 0; + font-family: $IBM-Plex-Sans-font; + font-size: 14px; + line-height: 19.69px; + } + + &-link { + text-decoration: none; + color: $main-text-color; + } + + &-item { + font-family: $IBM-Plex-Sans-font; + font-size: 14px; + margin: 0; + line-height: 21px; + } + } + + &__nav { + border-top: 1px solid #1A5A4C80; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -1; + } + + @include on-desktop { + margin-left: 32px; + grid-column: 7 / 12; + border-top: none; + border-left: 1px solid #1A5A4C80; + ; + } + + &-list { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + list-style-type: none; + padding-left: 0; + display: grid; + gap: 20px; + margin-top: 40px; + margin-bottom: 80px; + + @include on-desktop { + margin-top: 0; + padding-left: 65px; + } + } + + &-item { + @include hover (transform, scale(1.01)); + } + + &-link { + text-decoration: none; + color: $main-text-color; + font-family: $IBM-Plex-Sans-font; + font-weight: normal; + font-size: 14px; + line-height: 14px; + margin: 0; + } + } + + &__description-wrapper { + display: grid; + gap: 10px; + + @include on-tablet { + display: flex; + justify-content: space-between; + flex-direction: row-reverse; + } + } + + &__description { + font-family: $IBM-Plex-Sans-font; + font-size: 12px; + line-height: 16.88px; + font-weight: 300; + text-align: center; + margin: 0; + color: $main-text-color; + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss index 08ae179f1..dcde5e6cf 100644 --- a/src/styles/blocks/gallery.scss +++ b/src/styles/blocks/gallery.scss @@ -1,4 +1,4 @@ -.gallery { +.main__gallery { grid-column: 1 / -1; overflow: hidden; display: flex; @@ -7,11 +7,11 @@ margin: 185px 0 129px; @include on-tablet { - margin: 390px 0 133px; + margin: 211px 0 133px; } @include on-desktop { - margin: 708px 0 200px; + margin: 304px 0 200px; } } @@ -28,7 +28,6 @@ .slider { width: 280px; - height: 410px; @include on-tablet { width: 340px; @@ -85,8 +84,7 @@ justify-content: center; } - margin: 30px 0 0; - + margin: 30px; display: flex; justify-content: center; align-items: center; @@ -141,7 +139,7 @@ } [id='radio4']:checked ~ .first { - margin-left: -20%; + margin-left: -22%; } } @@ -153,6 +151,10 @@ @include hover(scale, 1.01); + &:hover { + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); + } + &--width { grid-column: span 8; width: 100%; @@ -168,7 +170,6 @@ } } - @include on-desktop { display: flex; flex-direction: column; @@ -185,3 +186,7 @@ @include page-grid; } } + +.main__title--gallery { + margin-top: 0 !important; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss index 8b3f9b440..7f231ef37 100644 --- a/src/styles/blocks/menu.scss +++ b/src/styles/blocks/menu.scss @@ -108,6 +108,7 @@ display: grid; padding-top: 24px; grid-column: 1 / -1; + color: $acc-text-color; @include on-tablet { --columns: 2; @@ -136,7 +137,6 @@ font-family: $IBM-Plex-Sans-font; font-size: 14px; line-height: 19.69px; - color: $acc-text-color; margin-bottom: 4px; @include on-tablet { @@ -160,7 +160,6 @@ font-family: $IBM-Plex-Sans-font; font-size: 14px; margin: 0; - color: $acc-text-color; line-height: 21px; &--bold { @@ -172,7 +171,6 @@ font-family: $IBM-Plex-Sans-font; font-size: 14px; margin: 0; - color: $acc-text-color; line-height: 21px; @include on-tablet { @@ -191,7 +189,7 @@ } .menu:target { - max-height: 500px; /* Висота для відображення меню (налаштуйте за вашим бажанням) */ - transform: translateY(0); /* Повертає меню в нормальне положення */ + max-height: 500px; + transform: translateY(0); opacity: 1; } diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index bf6bb14aa..8bd174389 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -9,7 +9,6 @@ body { overflow-x: hidden; } - .container { padding-inline: 20px; @@ -28,19 +27,18 @@ body { left: 0; width: 100%; height: 100vh; - background-color: rgba(0, 0, 0, 0.5); /* Змінюємо фон сторінки */ + background-color: rgba(0, 0, 0, 0.5); z-index: 1; - display: none; /* Спочатку приховуємо overlay */ + display: none; } -/* Коли відкрито меню (селектор на основі псевдокласу :target) */ .menu:target ~ .page-overlay { - display: block; /* Відображаємо overlay */ - background-color: rgba(0, 0, 0, 0.5); /* Можна змінити колір сторінки */ + display: block; + background-color: rgba(0, 0, 0, 0.5); } .menu:target ~ .header { - background-color: rgba(0, 0, 0, 0.5); /* Якщо хочете, щоб хедер також змінився */ + background-color: rgba(0, 0, 0, 0.5); } .page__main { diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss index d7a413991..cc8a96fd7 100644 --- a/src/styles/blocks/top-bar.scss +++ b/src/styles/blocks/top-bar.scss @@ -36,7 +36,7 @@ &__logo { width: 49px; - height: 52; + height: 52px; @include hover (transform, scale(1.05)); diff --git a/src/styles/html.scss b/src/styles/html.scss index b403b2811..03f1f9a6a 100644 --- a/src/styles/html.scss +++ b/src/styles/html.scss @@ -8,3 +8,5 @@ @import 'blocks/current-events'; @import 'blocks/lecture'; @import 'blocks/gallery'; +@import 'blocks/following'; +@import 'blocks/footer';