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/gallery/img-1.jpg b/src/images/gallery/img-1.jpg new file mode 100644 index 000000000..64d5a3f05 Binary files /dev/null and b/src/images/gallery/img-1.jpg differ diff --git a/src/images/gallery/img-2.jpg b/src/images/gallery/img-2.jpg new file mode 100644 index 000000000..1b77f8234 Binary files /dev/null and b/src/images/gallery/img-2.jpg differ diff --git a/src/images/gallery/img-3.jpg b/src/images/gallery/img-3.jpg new file mode 100644 index 000000000..a5c8d79c8 Binary files /dev/null and b/src/images/gallery/img-3.jpg differ diff --git a/src/images/gallery/img-4.jpg b/src/images/gallery/img-4.jpg new file mode 100644 index 000000000..fd4924f34 Binary files /dev/null and b/src/images/gallery/img-4.jpg differ diff --git a/src/images/header-img/header-bg.jpg b/src/images/header-img/header-bg.jpg new file mode 100644 index 000000000..0026330fa Binary files /dev/null and b/src/images/header-img/header-bg.jpg differ diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/button-arrow.svg b/src/images/icons/button-arrow.svg new file mode 100644 index 000000000..4c1cc2baa --- /dev/null +++ b/src/images/icons/button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..267b4ef27 --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/instagram-icon.svg b/src/images/icons/instagram-icon.svg new file mode 100644 index 000000000..724f731bc --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/namu-logo.svg b/src/images/namu-logo.svg new file mode 100644 index 000000000..2b4e1a3c1 --- /dev/null +++ b/src/images/namu-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/pictures/img-1.jpg b/src/images/pictures/img-1.jpg new file mode 100644 index 000000000..ba336f7b4 Binary files /dev/null and b/src/images/pictures/img-1.jpg differ diff --git a/src/images/pictures/img-2.jpg b/src/images/pictures/img-2.jpg new file mode 100644 index 000000000..ca91f78d9 Binary files /dev/null and b/src/images/pictures/img-2.jpg differ diff --git a/src/images/pictures/img-3.jpg b/src/images/pictures/img-3.jpg new file mode 100644 index 000000000..ff08966bb Binary files /dev/null and b/src/images/pictures/img-3.jpg differ diff --git a/src/images/pictures/img-4.jpg b/src/images/pictures/img-4.jpg new file mode 100644 index 000000000..4539222f4 Binary files /dev/null and b/src/images/pictures/img-4.jpg differ diff --git a/src/index.html b/src/index.html index 8019b83ec..b92c829fb 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,465 @@ - + - Title + + + + + NAMU - -

Hello Mate Academy

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

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

+ + КВИТКИ + + +

ПОДІЇ

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

Графік роботи

+

+ 12:00 — 20:00 + середа +
+ 12:00 — 20:00 + четвер +
+ 12:00 — 20:00 + п’ятниця +
+ 11:00 — 19:00 + субота +
+ 11:00 — 19:00 + неділя +

+
+ +

+ Вихідні: + понеділок, вівторок Каса припиняє роботу за 1 годину до закриття + музею +

+
+
+
+
+ + + +
+
+
+

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

+
+
+ Event 1 +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+ +

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

+

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

+
+
+ +
+ Event 2 +
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+

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

+

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

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

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+

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

+
+
+
+
+ + + +
+
+ +
+
+
+ + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..b9efdf668 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,170 @@ 'use strict'; +// #region menu + +const menuBtn = document.querySelectorAll('.button-menu'); +const sideMenu = document.querySelector('.page__menu'); +const menuLinks = document.querySelectorAll('.page__menu .nav__link'); +const body = document.querySelector('.page__body'); + +function toggleMenu(forceState) { + const isActive = + forceState !== undefined + ? forceState + : !sideMenu.classList.contains('page__menu--is-open'); + + sideMenu.classList.toggle('page__menu--is-open', isActive); + body.classList.toggle('page__body--no-scroll', isActive); + body.classList.toggle('page__body--is-under-menu', isActive); + + menuBtn.forEach((btn) => { + btn.classList.toggle('button-menu--is-active', isActive); + }); +} + +menuBtn.forEach((btn) => { + btn.addEventListener('click', () => toggleMenu()); +}); + +menuLinks.forEach((link) => { + link.addEventListener('click', () => toggleMenu(false)); +}); +// #endregion + +// #region slider +function initSlider() { + const track = document.getElementById('slider-track'); + const slides = Array.from(track.querySelectorAll('.slider__slide')); + const dotsContainer = document.getElementById('slider-dots'); + + let slidesPerPage = calcSlidesPerPage(); + let pageCount = Math.ceil(slides.length / slidesPerPage); + + function calcSlidesPerPage() { + if (window.matchMedia('(min-width: 1280px)').matches) { + return slides.length; + } + + return window.matchMedia('(min-width: 768px)').matches ? 2 : 1; + } + + function renderDots() { + slidesPerPage = calcSlidesPerPage(); + pageCount = Math.ceil(slides.length / slidesPerPage); + + if (window.matchMedia('(min-width: 1024px)').matches) { + dotsContainer.style.display = 'none'; + + return; + } else { + dotsContainer.style.display = ''; + } + + dotsContainer.innerHTML = ''; + + for (let i = 0; i < pageCount; i++) { + const btn = document.createElement('button'); + + btn.className = 'slider__dots-button'; + btn.type = 'button'; + btn.setAttribute('aria-label', `Перейти на сторінку ${i + 1}`); + btn.dataset.index = String(i); + + if (i === 0) { + btn.classList.add('slider__dots-button--active'); + } + + btn.addEventListener('click', () => { + const left = i * track.clientWidth; + + track.scrollTo({ left, behavior: 'smooth' }); + updateActiveDot(); + }); + + dotsContainer.appendChild(btn); + } + } + + function updateActiveDot() { + let pageIndex = Math.round( + track.scrollLeft / (track.clientWidth / slidesPerPage), + ); + + if (track.scrollLeft + track.clientWidth >= track.scrollWidth - 2) { + pageIndex = pageCount - 1; + } + + const dots = dotsContainer.querySelectorAll('.slider__dots-button'); + + dots.forEach((d, i) => { + d.classList.toggle('slider__dots-button--active', i === pageIndex); + }); + } + + let rafPending = false; + + function onScroll() { + if (!rafPending) { + rafPending = true; + + window.requestAnimationFrame(() => { + updateActiveDot(); + rafPending = false; + }); + } + } + track.addEventListener('scroll', onScroll, { passive: true }); + + let resizeTimer; + + window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + + resizeTimer = setTimeout(() => { + const oldSlidesPerPage = slidesPerPage; + const newSlidesPerPage = calcSlidesPerPage(); + + if (newSlidesPerPage !== oldSlidesPerPage) { + renderDots(); + track.scrollTo({ left: 0 }); + } + }, 150); + }); + + renderDots(); + setTimeout(updateActiveDot, 0); + + // open img + const lightbox = document.getElementById('slider-lightbox'); + const lightboxImg = document.getElementById('slider-lightbox-img'); + const lightboxClose = document.querySelector('.slider-lightbox__button'); + + slides.forEach((slide) => { + slide.addEventListener('click', () => { + const img = slide.querySelector('img'); + + if (!img) { + return; + } + + lightboxImg.src = img.src; + lightbox.classList.add('slider-lightbox--active'); + }); + }); + + function closeLightbox() { + lightbox.classList.remove('slider-lightbox--active'); + lightboxImg.src = ''; + } + + lightboxClose.addEventListener('click', closeLightbox); + + lightbox.addEventListener('click', (e) => { + if (e.target === lightbox) { + closeLightbox(); + } + }); +} + +document.addEventListener('DOMContentLoaded', initSlider); + +// #endregion 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 index 3280c3fe1..1ef8ed7ba 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ +@import 'utils/normalize'; @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; +@import 'utils/typography'; diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..25b74a993 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,117 @@ +.button { + position: relative; + color: $main-text-dark; + line-height: 100%; + + height: 50px; + + border-right: none; + + display: flex; + flex-direction: row; + + justify-content: space-between; + align-items: center; + text-transform: uppercase; + + @include effects; + + span { + margin: 0 auto; + } + + @include on-tablet { + height: 70px; + } + + &::after { + content: ''; + display: inline-block; + width: 50px; + height: 100%; + + background-image: url(../images/icons/button-arrow.svg); + background-repeat: no-repeat; + background-size: 24px 24px; + background-position: center; + + @include on-tablet { + width: 70px; + } + } + + &:hover { + background-color: $accent-primary; + color: $main-text-light; + } +} + +.button-menu { + border: none; + padding: 0; + margin: 0; + cursor: pointer; + position: relative; + height: 24px; + width: 24px; + + span { + @include effects; + + position: absolute; + left: 3px; + right: 3px; + width: 18px; + height: 2px; + background-color: $main-text-dark; + } + + span:nth-child(1) { + top: 6px; + } + span:nth-child(2) { + top: 11px; + } + span:nth-child(3) { + top: 16px; + } + + /* active */ + &--is-active span:nth-child(1) { + transform: rotate(45deg); + left: 3px; + top: 11px; + background-color: $main-text-light; + } + &--is-active span:nth-child(2) { + display: none; + } + &--is-active span:nth-child(3) { + transform: rotate(-45deg); + left: 3px; + top: 11px; + background-color: $main-text-light; + } + + /* hover */ + &:hover span { + background-color: $accent-secondary; + } + &:hover span:nth-child(1) { + transform: translateX(-2px); + } + &:hover span:nth-child(2) { + transform: translateX(2px); + } + &:hover span:nth-child(3) { + transform: translateX(-2px); + } + + /* active + hover */ + &--is-active:hover span:nth-child(1) { + transform: rotate(45deg) scale(1.2); + } + &--is-active:hover span:nth-child(3) { + transform: rotate(-45deg) scale(1.2); + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..0f9865546 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,13 @@ +.container { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + margin: 0 auto; + max-width: $max-content-width; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..4e0a69583 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,146 @@ +.events { + &__title { + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 43px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__cards { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 60px; + + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 112px; + } + + @include on-desktop { + margin-bottom: 104px; + } + } + + &__card { + @include page-grid; + + row-gap: 60px; + + @include on-tablet { + row-gap: 40px; + } + } + + &__image { + object-fit: cover; + grid-column: 1 / -1; + + width: 100%; + height: 210px; + + @include effects; + + &:hover { + transform: scale(1.02); + } + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 520px; + + grid-column: 1 / 8; + } + } + + &__info { + grid-column: 1 / -1; + + display: flex; + flex-direction: column; + + @include on-desktop { + grid-column: 9 / -1; + place-self: center center; + } + } + + &__tech-info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin-bottom: 15px; + font-size: 16px; + + @include on-tablet { + justify-content: flex-start; + gap: 27px; + margin-bottom: 32px; + } + + @include on-desktop { + margin-bottom: 30; + } + } + + &__type { + font-weight: 500; + color: $additional-text; + line-height: 100%; + + @include on-tablet { + font-size: 14px; + } + } + + &__date { + color: $accent-primary; + font-weight: 700; + line-height: 150%; + } + + &__name { + font-family: Montserrat, sans-serif; + position: relative; + font-size: 28px; + font-weight: 400; + line-height: 100%; + margin-bottom: 10px; + + display: flex; + align-items: center; + gap: 10px; + + @include on-tablet { + margin-bottom: 15px; + font-size: 36px; + gap: 24px; + } + + &::after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + background-color: $accent-secondary; + } + } + + &__description { + font-size: 16px; + font-weight: 300; + line-height: 150%; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..1d7c33a53 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,158 @@ +.footer { + &__wrapper { + padding-block: 50px; + + @include page-grid; + } + + &__accent { + font-weight: 600; + } + + // #region footer__top + &__top { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: space-between; + + margin-bottom: 40px; + + @include on-tablet { + flex-direction: column; + justify-content: flex-start; + + gap: 62px; + grid-column: span 1; + margin-bottom: 0; + } + } + + &__socials { + display: flex; + gap: 20px; + } + + // #endregion + + // #region footer__information + &__info { + grid-column: 1 / 2; + display: flex; + flex-direction: column; + margin-bottom: 20px; + + gap: 20px; + + @include on-tablet { + grid-column: 2 / 4; + margin-bottom: 64px; + } + + @include on-desktop { + grid-column: 3 / 5; + margin-bottom: 87px; + } + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 20px; + grid-column: 2 / 3; + + @include on-tablet { + grid-column: 4 / -2; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + & a { + @include effects; + + &:hover { + color: $accent-secondary; + } + } + } + + &__button-to-top { + place-self: flex-end flex-end; + grid-column: 2 / 3; + padding: 17px; + width: 50px; + height: 50px; + border: 1px solid $accent-primary; + border-radius: 50%; + background-image: url(../images/icons/arrow-up.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + display: none; + } + } + + // #endregion + + &__line { + grid-column: 1 / -1; + display: block; + background-color: $accent-primary; + height: 1px; + width: 100%; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 64px; + } + + @include on-desktop { + justify-self: center; + height: 260px; + width: 1px; + grid-column: 7 / 8; + } + } + + &__nav { + grid-column: 1 / -1; + + margin-bottom: 80px; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 8 / -2; + } + + .nav__list { + gap: 20px; + + @include on-tablet { + column-gap: 30px; + } + + @include on-desktop { + column-gap: 32px; + } + } + } + + &__designed-info { + grid-column: 1 / -1; + font-size: 12px; + text-align: center; + color: $additional-text; + + @include on-tablet { + display: flex; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..e86e68c1f --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,167 @@ +.gallery { + &__slider { + margin-bottom: 100px; + + @include on-desktop { + margin-bottom: 200px; + } + } +} + +.slider { + &__track { + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; + + &::-webkit-scrollbar { + display: none; + } + + gap: 20px; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 32px; + } + + @include on-desktop { + @include page-grid; + } + } + + &__slide { + flex: 0 0 100%; + scroll-snap-align: center; + text-align: center; + height: 410px; + + @include effects; + + &:hover { + transform: scale(1.02); + } + + @include on-tablet { + flex: 0 0 50%; + + height: 543px; + } + + @include on-desktop { + height: 600px; + &--width--small { + grid-column: span 4; + } + + &--width--big { + grid-column: span 8; + } + + &--height--small { + height: 360px; + } + } + } + + &__image { + display: block; + object-fit: cover; + object-position: top; + + width: 100%; + height: 100%; + } + + &__dots { + display: flex; + justify-content: center; + gap: 22px; + + &-button { + width: 9px; + height: 9px; + border-radius: 50%; + border: none; + background-color: #e0e0e0; + + &--active { + background-color: $accent-primary; + } + } + } +} + +.slider-lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.85); + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 9999; + + display: none; + + &__img { + max-width: 90%; + max-height: 90%; + object-fit: contain; + border-radius: 8px; + } + + &__button { + position: absolute; + width: 24px; + height: 24px; + + top: 20px; + right: 20px; + + border: none; + padding: 0; + margin: 0; + cursor: pointer; + + min-width: 24px; + + span { + position: absolute; + left: 3px; + right: 3px; + width: 18px; + height: 2px; + background-color: $main-text-light; + + &:nth-child(1) { + left: 3px; + top: 11px; + transform: rotate(45deg); + } + + &:nth-child(2) { + left: 3px; + top: 11px; + transform: rotate(-45deg); + } + } + + &:hover .button-close span { + &:nth-child(1) { + transform: rotate(45deg) scale(1.2); + } + &:nth-child(2) { + transform: rotate(-45deg) scale(1.2); + } + } + } + + &--active { + display: flex; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..d2e36dc75 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,118 @@ +.header { + position: relative; + + &__top-bar { + margin-bottom: 239px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 104px; + } + } + + &__content { + @include page-grid; + + margin-bottom: 70px; + + @include on-tablet { + margin-bottom: 107px; + } + + @include on-desktop { + padding-bottom: 118px; + margin-bottom: 200px; + } + } + + &__title { + text-transform: uppercase; + grid-column: 1 / -1; + font-size: 45px; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 4; + + font-size: 53px; + margin-bottom: 38px; + } + + @include on-desktop { + grid-column: 1 / 6; + + font-size: 72px; + margin-bottom: 89px; + } + } + + &__button { + grid-column: 1 / -1; + border: 1px solid $accent-primary; + + &::after { + background-color: $accent-primary; + } + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &__events { + display: none; + transform: rotate(-90deg); + position: absolute; + bottom: 0; + left: 0; + color: $additional-text; + + &::before { + content: ''; + display: inline-block; + width: 70px; + height: 1px; + background-color: $accent-primary; + margin: 0 auto; + } + + @include on-desktop { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + } + } + + &__bg { + width: 100%; + + position: absolute; + top: 0; + right: 0; + + z-index: -1; + height: 300px; + background-image: url(../images/header-img/header-bg.jpg); + background-repeat: no-repeat; + background-size: cover; + + background-position: center; + + @include on-tablet { + width: 50%; + height: 384px; + } + + @include on-desktop { + height: 655px; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..60788b7ef --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,28 @@ +.icon { + display: block; + height: 24px; + width: 24px; + color: $main-text-dark; + + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include effects; + + &:hover { + color: $accent-secondary; + } + + &--facebook { + background-color: currentColor; + -webkit-mask: url('../images/icons/facebook-icon.svg'); + mask: url('../images/icons/facebook-icon.svg'); + } + + &--instagram { + background-color: currentColor; + -webkit-mask: url(../images/icons/instagram-icon.svg); + mask: url(../images/icons/instagram-icon.svg); + } +} diff --git a/src/styles/blocks/lection.scss b/src/styles/blocks/lection.scss new file mode 100644 index 000000000..ac1815bf1 --- /dev/null +++ b/src/styles/blocks/lection.scss @@ -0,0 +1,110 @@ +.lection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-image: url(../images/pictures/img-3.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: top; + + position: relative; + width: 100%; + height: 210px; + + margin-bottom: 183px; + + @include on-tablet { + height: 390px; + margin-bottom: 208px; + } + + @include on-desktop { + height: 550px; + margin-bottom: 302px; + } + + &__info { + display: flex; + flex-direction: column; + margin: 0 auto; + max-width: 280px; + position: absolute; + align-items: center; + top: 153px; + left: 0; + right: 0; + background-color: $main-text-light; + gap: 24px; + padding-block: 20px; + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); + + @include on-tablet { + align-items: flex-start; + max-width: 570px; + padding: 45px 55px 50px; + top: 306px; + gap: 16px; + } + + @include on-desktop { + grid-column: 1 / -1; + top: 448px; + } + } + + &__tech-info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + gap: 27px; + font-size: 16px; + margin: 0; + + @include on-tablet { + gap: 186px; + } + + @include on-desktop { + gap: 130px; + } + } + + &__type { + font-weight: 500; + color: $additional-text; + line-height: 100%; + + @include on-tablet { + font-size: 14px; + } + } + + &__date { + color: $accent-primary; + font-weight: 700; + line-height: 150%; + } + + &__name { + font-family: Montserrat, sans-serif; + position: relative; + font-size: 28px; + font-weight: 400; + line-height: 100%; + + display: flex; + align-items: center; + gap: 10px; + margin: 0; + text-align: center; + + @include on-tablet { + margin-bottom: 15px; + font-size: 36px; + gap: 24px; + text-align: left; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..9bd3fcaa5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,97 @@ +.menu { + font-weight: 400; + color: $main-text-light; + background-color: $accent-primary; + + &__wrapper { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + flex-direction: row; + gap: 38px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__top-bar { + position: relative; + align-items: flex-start; + justify-content: space-between; + gap: 28px; + padding-top: 27px; + padding-bottom: 24px; + + @include on-tablet { + padding-top: 40px; + display: flex; + } + + @include on-desktop { + gap: 102px; + } + + &::after { + position: absolute; + content: ''; + display: inline-block; + width: 100%; + height: 1px; + background-color: $main-text-light; + bottom: 0; + + @include on-tablet { + width: 1px; + height: 145px; + top: 40px; + right: 0; + } + } + + .nav__list { + gap: 24px 28px; + + @include on-tablet { + margin-right: 36px; + } + + @include on-desktop { + margin-right: 102px; + } + } + + .nav__link { + font-size: 16px; + font-weight: 500; + } + } + + &__content { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap: 20px; + padding-bottom: 27px; + + @include on-tablet { + padding-block: 40px; + max-width: 340px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 26px; + } + + @include on-tablet { + min-width: 370px; + } + } + + &__accent { + font-weight: 600; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..efef6f7ba --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,18 @@ +.nav { + .nav__list { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, auto); + + grid-auto-flow: column; + justify-content: center; + } + + .nav__item { + @include effects; + + &:hover { + color: $accent-secondary; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..56d971e24 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,52 @@ +.page { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 100%; + + scroll-behavior: smooth; + + &--no-scroll { + overflow: hidden; + } + + &__body { + &::after { + content: ''; + + position: fixed; + + top: 0; + left: 0; + width: 100%; + height: 100vh; + + background: rgba(0, 0, 0, 0.5); + z-index: -1; + + display: none; + } + + &--is-under-menu { + &::after { + z-index: 999; + display: block; + } + } + } + + &__menu { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + + transform: translateY(-100%); + + &--is-open { + transform: translateY(0); + transition: transform 0.3s ease-in-out; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..dd395bb8f --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,132 @@ +.subscribe { + background-image: url(../images/pictures/img-4.jpg); + color: $main-text-light; + + &__wrapper { + @include page-grid; + + padding-block: 82px; + } + + &__title { + grid-column: 1 / -1; + text-align: center; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 16px; + } + + @include on-desktop { + grid-column: 4 / 10; + } + } + + &__text { + grid-column: 1 / -1; + font-size: 18px; + line-height: 150%; + text-align: center; + + margin-bottom: 50px; + + @include on-tablet { + grid-column: 2 / -2; + margin-bottom: 64px; + } + + @include on-desktop { + grid-column: 4 / 10; + margin-bottom: 72px; + } + } + + &__form { + width: 100%; + grid-column: 1 / -1; + margin: 0 auto; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 4 / 10; + } + } + + &__label { + display: flex; + justify-content: space-between; + height: 50px; + + @include on-tablet { + height: 70px; + gap: 18px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__button { + flex-shrink: 0; + display: block; + content: ''; + width: 50px; + height: 100%; + background-color: $accent-secondary; + background-image: url(../images/icons/button-arrow.svg); + background-repeat: no-repeat; + background-size: 24px 24px; + background-position: center; + + @include effects; + &:hover { + background-size: 48px 48px; + } + + @include on-tablet { + width: 70px; + } + } + + &__email { + border: 0; + font-family: Montserrat, sans-serif; + padding: 18px 32px; + width: 100%; + color: $main-text-dark; + font-size: 14px; + background-color: $main-text-light; + + @include effects; + + @include on-tablet { + padding-inline: 24px; + } + + @include on-desktop { + padding-inline: 32px; + } + + &::placeholder { + color: $additional-text; + } + + &:hover { + border: 1px solid $accent-secondary; + border-right: none; + + @include on-tablet { + border-right: 1px solid $accent-secondary; + } + } + + &:focus { + border-width: 2px; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..df2c2f8ac --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,26 @@ +.top-bar { + display: flex; + flex-direction: row; + align-items: center; + padding-block: 10px; + + @include on-tablet { + @include page-grid; + + padding-block: 15px; + } + + &__logo { + margin: 0 auto; + height: 61px; + width: 55px; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 7 / 9; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..e9bd643b3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,14 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/button'; +@import 'blocks/container'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/events'; +@import 'blocks/lection'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; +@import 'blocks/icons'; 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 index 80c79780d..4212a5a86 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,34 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; } } + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin page-grid { + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin effects { + transition: all $animation-time ease-in; +} diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..33814c557 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,227 @@ +/* === reset + normalize hybrid (2025) === */ +@layer reset { + /* Base */ + *, + *::before, + *::after { + box-sizing: border-box; + } + * { + margin: 0; + } + + html { + font-size: 16px; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + text-size-adjust: 100%; + } + + body { + min-height: 100dvh; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + main { + display: block; + } + + /* Typography */ + h1, + h2, + h3, + h4, + h5, + h6 { + font: inherit; + } + p, + figure, + blockquote, + dl, + dd { + margin: 0; + } + + b, + strong { + font-weight: bolder; + } + i, + em { + font-style: italic; + } + small { + font-size: 80%; + } + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + + a { + display: inline-block; + color: inherit; + background: transparent; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + } + + a:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + ::selection { + background: #bcdcff; + color: #000; + } + + /* Lists */ + ul, + ol { + padding: 0; + list-style: none; + } + + /* Media */ + img, + picture, + video, + canvas, + svg { + display: block; + max-width: 100%; + height: auto; + } + + /* Tables */ + table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + } + th, + td { + padding: 0; + } + + /* Forms */ + button, + input, + select, + textarea { + font: inherit; + color: inherit; + margin: 0; + padding: 0; + border: 0; + background: transparent; + } + button, + [role='button'] { + cursor: pointer; + } + :disabled { + cursor: not-allowed; + } + + textarea { + resize: vertical; + } + textarea::placeholder, + input::placeholder { + opacity: 0.6; + } + + input, + textarea, + select { + -webkit-appearance: none; + appearance: none; + border-radius: 0; + } + [type='number']::-webkit-inner-spin-button, + [type='number']::-webkit-outer-spin-button { + -webkit-appearance: none; + } + [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + } + + fieldset, + legend { + margin: 0; + padding: 0; + border: 0; + } + + label { + cursor: pointer; + } + + *:focus-visible { + outline: transparent; + } + + /* Autofill fixes */ + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + textarea:-webkit-autofill, + textarea:-webkit-autofill:hover, + textarea:-webkit-autofill:focus, + select:-webkit-autofill, + select:-webkit-autofill:hover, + select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px transparent inset; + -webkit-text-fill-color: currentColor; + transition: background-color 5000s ease-in-out 0s; + } + + /* Misc */ + hr { + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.12); + } + + [hidden], + template { + display: none; + } + + details { + display: block; + } + summary { + cursor: pointer; + list-style: none; + } + summary::-webkit-details-marker { + display: none; + } + + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + border: 0; + } +} diff --git a/src/styles/utils/_typography.scss b/src/styles/utils/_typography.scss new file mode 100644 index 000000000..f85c51276 --- /dev/null +++ b/src/styles/utils/_typography.scss @@ -0,0 +1,23 @@ +h1 { + @include on-tablet { + text-align: left; + line-height: 120%; + } +} + +.title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + text-align: center; + + @include on-tablet { + text-align: left; + font-size: 48px; + margin-bottom: 43px; + } + + @include on-desktop { + margin-bottom: 56px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..ae5e3e829 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ -$c-gray: #eee; +$main-text-dark: #0f0e08; +$main-text-light: #fff; +$secondary-text: #4e4e4e; +$additional-text: #687480; +$accent-primary: #1a5a4c; +$accent-secondary: #f14a27; +$tablet-width: 768px; +$desktop-width: 1280px; +$max-content-width: 1440px; +$animation-time: 0.3s;