diff --git a/src/images/gallery/img-1.jpg b/src/images/gallery/img-1.jpg new file mode 100644 index 000000000..0f68e92b1 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..2882f4e36 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..1b497b632 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..e928d603a 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..10bd10c11 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..bd675efdf --- /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..575d51788 --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/namu-logo.svg b/src/images/icons/namu-logo.svg new file mode 100644 index 000000000..2cda206c3 --- /dev/null +++ b/src/images/icons/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..8d6eacb16 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..988421da3 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..69bd1536b 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..d93b7220a 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..fb08e1759 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

+
+

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

+
+
+
+
+ + + +
+
+ +
+
+
+ + + + + + + - + \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..392acc5ca 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 \ No newline at end of file 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/css/blocks/button.css b/src/styles/css/blocks/button.css new file mode 100644 index 000000000..bdd49d8c6 --- /dev/null +++ b/src/styles/css/blocks/button.css @@ -0,0 +1,18 @@ +/* Error: Undefined variable. + * , + * 3 | color: $main-text-dark; + * | ^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\button.scss 3:10 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined variable.\a \2577 \a 3 \2502 color: $main-text-dark;\a \2502 ^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\button.scss 3:10 root stylesheet'; +} diff --git a/src/styles/css/blocks/container.css b/src/styles/css/blocks/container.css new file mode 100644 index 000000000..7c9cdfe7f --- /dev/null +++ b/src/styles/css/blocks/container.css @@ -0,0 +1,19 @@ +/* Error: Undefined mixin. + * , + * 4 | / @include on-tablet { + * 5 | | padding-inline: 39px; + * 6 | \ } + * ' + * src\styles\scss\blocks\container.scss 4:3 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 4 \2502 \250c @include on-tablet {\a 5 \2502 \2502 padding-inline: 39px;\a 6 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\container.scss 4:3 root stylesheet'; +} diff --git a/src/styles/css/blocks/events.css b/src/styles/css/blocks/events.css new file mode 100644 index 000000000..f81b1a7e7 --- /dev/null +++ b/src/styles/css/blocks/events.css @@ -0,0 +1,19 @@ +/* Error: Undefined mixin. + * , + * 5 | / @include on-tablet { + * 6 | | margin-bottom: 43px; + * 7 | \ } + * ' + * src\styles\scss\blocks\events.scss 5:5 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 5 \2502 \250c @include on-tablet {\a 6 \2502 \2502 margin-bottom: 43px;\a 7 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\events.scss 5:5 root stylesheet'; +} diff --git a/src/styles/css/blocks/footer.css b/src/styles/css/blocks/footer.css new file mode 100644 index 000000000..e5dcc1b4e --- /dev/null +++ b/src/styles/css/blocks/footer.css @@ -0,0 +1,18 @@ +/* Error: Undefined mixin. + * , + * 5 | @include page-grid; + * | ^^^^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\footer.scss 5:5 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 5 \2502 @include page-grid;\a \2502 ^^^^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\footer.scss 5:5 root stylesheet'; +} diff --git a/src/styles/css/blocks/gallery.css b/src/styles/css/blocks/gallery.css new file mode 100644 index 000000000..210279b7e --- /dev/null +++ b/src/styles/css/blocks/gallery.css @@ -0,0 +1,19 @@ +/* Error: Undefined mixin. + * , + * 5 | / @include on-desktop { + * 6 | | margin-bottom: 200px; + * 7 | \ } + * ' + * src\styles\scss\blocks\gallery.scss 5:5 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 5 \2502 \250c @include on-desktop {\a 6 \2502 \2502 margin-bottom: 200px;\a 7 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\gallery.scss 5:5 root stylesheet'; +} diff --git a/src/styles/css/blocks/header.css b/src/styles/css/blocks/header.css new file mode 100644 index 000000000..e7c78c450 --- /dev/null +++ b/src/styles/css/blocks/header.css @@ -0,0 +1,19 @@ +/* Error: Undefined mixin. + * , + * 7 | / @include on-tablet { + * 8 | | margin-bottom: 30px; + * 9 | \ } + * ' + * src\styles\scss\blocks\header.scss 7:5 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 7 \2502 \250c @include on-tablet {\a 8 \2502 \2502 margin-bottom: 30px;\a 9 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\header.scss 7:5 root stylesheet'; +} diff --git a/src/styles/css/blocks/icons.css b/src/styles/css/blocks/icons.css new file mode 100644 index 000000000..f13f0d29d --- /dev/null +++ b/src/styles/css/blocks/icons.css @@ -0,0 +1,18 @@ +/* Error: Undefined variable. + * , + * 5 | color: $main-text-dark; + * | ^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\icons.scss 5:10 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined variable.\a \2577 \a 5 \2502 color: $main-text-dark;\a \2502 ^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\icons.scss 5:10 root stylesheet'; +} diff --git a/src/styles/css/blocks/lection.css b/src/styles/css/blocks/lection.css new file mode 100644 index 000000000..b7ba5d926 --- /dev/null +++ b/src/styles/css/blocks/lection.css @@ -0,0 +1,20 @@ +/* Error: Undefined mixin. + * , + * 17 | / @include on-tablet { + * 18 | | height: 390px; + * 19 | | margin-bottom: 208px; + * 20 | \ } + * ' + * src\styles\scss\blocks\lection.scss 17:3 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 17 \2502 \250c @include on-tablet {\a 18 \2502 \2502 height: 390px;\a 19 \2502 \2502 margin-bottom: 208px;\a 20 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\lection.scss 17:3 root stylesheet'; +} diff --git a/src/styles/css/blocks/menu.css b/src/styles/css/blocks/menu.css new file mode 100644 index 000000000..b37c80859 --- /dev/null +++ b/src/styles/css/blocks/menu.css @@ -0,0 +1,18 @@ +/* Error: Undefined variable. + * , + * 3 | color: $main-text-light; + * | ^^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\menu.scss 3:10 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined variable.\a \2577 \a 3 \2502 color: $main-text-light;\a \2502 ^^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\menu.scss 3:10 root stylesheet'; +} diff --git a/src/styles/css/blocks/nav.css b/src/styles/css/blocks/nav.css new file mode 100644 index 000000000..4a1f320f2 --- /dev/null +++ b/src/styles/css/blocks/nav.css @@ -0,0 +1,18 @@ +/* Error: Undefined mixin. + * , + * 12 | @include effects; + * | ^^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\nav.scss 12:5 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 12 \2502 @include effects;\a \2502 ^^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\nav.scss 12:5 root stylesheet'; +} diff --git a/src/styles/css/blocks/page.css b/src/styles/css/blocks/page.css new file mode 100644 index 000000000..5ae129b99 --- /dev/null +++ b/src/styles/css/blocks/page.css @@ -0,0 +1,42 @@ +.page { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 100%; + scroll-behavior: smooth; +} + +.page--no-scroll { + overflow: hidden; +} + +.page__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; +} + +.page__body--is-under-menu::after { + z-index: 999; + display: block; +} + +.page__menu { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); +} + +.page__menu--is-open { + transform: translateY(0); + transition: transform 0.3s ease-in-out; +} diff --git a/src/styles/css/blocks/page.css.map b/src/styles/css/blocks/page.css.map new file mode 100644 index 000000000..8ff85efcc --- /dev/null +++ b/src/styles/css/blocks/page.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/blocks/page.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAIA;EACE;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;;AAIA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA","file":"page.css"} \ No newline at end of file diff --git a/src/styles/css/blocks/subscribe.css b/src/styles/css/blocks/subscribe.css new file mode 100644 index 000000000..557e45b32 --- /dev/null +++ b/src/styles/css/blocks/subscribe.css @@ -0,0 +1,18 @@ +/* Error: Undefined variable. + * , + * 3 | color: $main-text-light; + * | ^^^^^^^^^^^^^^^^ + * ' + * src\styles\scss\blocks\subscribe.scss 3:10 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined variable.\a \2577 \a 3 \2502 color: $main-text-light;\a \2502 ^^^^^^^^^^^^^^^^\a \2575 \a src\\styles\\scss\\blocks\\subscribe.scss 3:10 root stylesheet'; +} diff --git a/src/styles/css/blocks/top-bar.css b/src/styles/css/blocks/top-bar.css new file mode 100644 index 000000000..029b6ee4a --- /dev/null +++ b/src/styles/css/blocks/top-bar.css @@ -0,0 +1,21 @@ +/* Error: Undefined mixin. + * , + * 7 | / @include on-tablet { + * 8 | | @include page-grid; + * 9 | | + * 10 | | padding-block: 15px; + * 11 | \ } + * ' + * src\styles\scss\blocks\top-bar.scss 7:3 root stylesheet */ + +body::before { + font-family: + 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono', + 'Droid Sans Mono', monospace; + white-space: pre; + display: block; + padding: 1em; + margin-bottom: 1em; + border-bottom: 2px solid black; + content: 'Error: Undefined mixin.\a \2577 \a 7 \2502 \250c @include on-tablet {\a 8 \2502 \2502 @include page-grid;\a 9 \2502 \2502 \a 10 \2502 \2502 padding-block: 15px;\a 11 \2502 \2514 }\a \2575 \a src\\styles\\scss\\blocks\\top-bar.scss 7:3 root stylesheet'; +} diff --git a/src/styles/_fonts.scss b/src/styles/css/fonts.css similarity index 61% rename from src/styles/_fonts.scss rename to src/styles/css/fonts.css index 45cdd5400..733968002 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/css/fonts.css @@ -1,6 +1,6 @@ @font-face { font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + src: url('../../fonts/Roboto-Regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } diff --git a/src/styles/css/fonts.css.map b/src/styles/css/fonts.css.map new file mode 100644 index 000000000..582d779ab --- /dev/null +++ b/src/styles/css/fonts.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/fonts.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA","file":"fonts.css"} \ No newline at end of file diff --git a/src/styles/css/main.css b/src/styles/css/main.css new file mode 100644 index 000000000..e36c158b3 --- /dev/null +++ b/src/styles/css/main.css @@ -0,0 +1,1652 @@ +/* === 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; + } +} + +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@media (min-width: 768px) { + h1 { + text-align: left; + line-height: 120%; + } +} + +.title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + text-align: center; +} + +@media (min-width: 768px) { + .title { + text-align: left; + font-size: 48px; + margin-bottom: 43px; + } +} + +@media (min-width: 1280px) { + .title { + margin-bottom: 56px; + } +} + +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + src: url('../../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@media (min-width: 768px) { + h1 { + text-align: left; + line-height: 120%; + } +} + +@media (min-width: 768px) { + .title { + text-align: left; + font-size: 48px; + margin-bottom: 43px; + } +} + +@media (min-width: 1280px) { + .title { + margin-bottom: 56px; + } +} + +body { + background: #eee; +} + +.page { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 14px; + line-height: 100%; + scroll-behavior: smooth; +} + +.page--no-scroll { + overflow: hidden; +} + +.page__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; +} + +.page__body--is-under-menu::after { + z-index: 999; + display: block; +} + +.page__menu { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); +} + +.page__menu--is-open { + transform: translateY(0); + transition: transform 0.3s ease-in-out; +} + +.header { + position: relative; +} + +.header__top-bar { + margin-bottom: 239px; +} + +@media (min-width: 768px) { + .header__top-bar { + margin-bottom: 30px; + } +} + +@media (min-width: 1280px) { + .header__top-bar { + margin-bottom: 104px; + } +} + +.header__content { + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); +} + +@media (min-width: 768px) { + .header__content { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 1280px) { + .header__content { + --columns: 12; + } +} + +@media (min-width: 768px) { + .header__content { + margin-bottom: 107px; + } +} + +@media (min-width: 1280px) { + .header__content { + padding-bottom: 118px; + margin-bottom: 200px; + } +} + +.header__title { + text-transform: uppercase; + grid-column: 1/-1; + font-size: 45px; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + .header__title { + grid-column: 1/4; + font-size: 53px; + margin-bottom: 38px; + } +} + +@media (min-width: 1280px) { + .header__title { + grid-column: 1/6; + font-size: 72px; + margin-bottom: 89px; + } +} + +.header__button { + grid-column: 1/-1; + border: 1px solid #1a5a4c; +} + +.header__button::after { + background-color: #1a5a4c; +} + +@media (min-width: 768px) { + .header__button { + grid-column: 1/4; + } +} + +@media (min-width: 1280px) { + .header__button { + grid-column: 3/6; + } +} + +.header__events { + display: none; + transform: rotate(-90deg); + position: absolute; + bottom: 0; + left: 0; + color: #687480; +} + +.header__events::before { + content: ''; + display: inline-block; + width: 70px; + height: 1px; + background-color: #1a5a4c; + margin: 0 auto; +} + +@media (min-width: 1280px) { + .header__events { + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + } +} + +.header__bg { + width: 100%; + position: absolute; + top: 0; + right: 0; + z-index: -1; + height: 300px; + background-image: url('/src/images/header-img/header-bg.jpg'); + background-repeat: no-repeat; + background-size: cover; + transform: scaleX(-1); + background-position: center; +} + +@media (min-width: 768px) { + .header__bg { + width: 50%; + height: 384px; + } +} + +@media (min-width: 1280px) { + .header__bg { + height: 655px; + } +} + +.top-bar { + display: flex; + flex-direction: row; + align-items: center; + padding-block: 10px; +} + +@media (min-width: 768px) { + .top-bar { + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + padding-block: 15px; + } +} + +@media (min-width: 768px) and (min-width: 768px) { + .top-bar { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 768px) and (min-width: 1280px) { + .top-bar { + --columns: 12; + } +} + +.top-bar__logo { + margin: 0 auto; + height: 61px; + width: 55px; +} + +@media (min-width: 768px) { + .top-bar__logo { + grid-column: 4/6; + } +} + +@media (min-width: 1280px) { + .top-bar__logo { + grid-column: 7/9; + } +} + +.button { + position: relative; + color: #0f0e08; + line-height: 100%; + height: 50px; + border-right: none; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + text-transform: uppercase; + transition: all 0.3s ease-in; +} + +.button span { + margin: 0 auto; +} + +@media (min-width: 768px) { + .button { + height: 70px; + } +} + +.button::after { + content: ''; + display: inline-block; + width: 50px; + height: 100%; + background-image: url('/src/images/icons/button-arrow.svg'); + background-repeat: no-repeat; + background-size: 24px 24px; + background-position: center; +} + +@media (min-width: 768px) { + .button::after { + width: 70px; + } +} + +.button:hover { + background-color: #1a5a4c; + color: #fff; +} + +.button-menu { + border: none; + padding: 0; + margin: 0; + cursor: pointer; + position: relative; + height: 24px; + width: 24px; +} + +.button-menu span { + transition: all 0.3s ease-in; + position: absolute; + left: 3px; + right: 3px; + width: 18px; + height: 2px; + background-color: #0f0e08; +} + +.button-menu span:nth-child(1) { + top: 6px; +} + +.button-menu span:nth-child(2) { + top: 11px; +} + +.button-menu span:nth-child(3) { + top: 16px; +} + +.button-menu--is-active span:nth-child(1) { + transform: rotate(45deg); + left: 3px; + top: 11px; + background-color: #fff; +} + +.button-menu--is-active span:nth-child(2) { + display: none; +} + +.button-menu--is-active span:nth-child(3) { + transform: rotate(-45deg); + left: 3px; + top: 11px; + background-color: #fff; +} + +.button-menu:hover span { + background-color: #f14a27; +} + +.button-menu:hover span:nth-child(1) { + transform: translateX(-2px); +} + +.button-menu:hover span:nth-child(2) { + transform: translateX(2px); +} + +.button-menu:hover span:nth-child(3) { + transform: translateX(-2px); +} + +.button-menu--is-active:hover span:nth-child(1) { + transform: rotate(45deg) scale(1.2); +} + +.container { + padding-inline: 20px; +} + +@media (min-width: 768px) { + .container { + padding-inline: 39px; + } +} + +@media (min-width: 1280px) { + .container { + padding-inline: 55px; + margin: 0 auto; + max-width: 1440px; + } +} + +.menu { + font-weight: 400; + color: #fff; + background-color: #1a5a4c; +} + +.menu__wrapper { + display: flex; + flex-direction: column; + gap: 24px; +} + +@media (min-width: 768px) { + .menu__wrapper { + flex-direction: row; + gap: 38px; + } +} + +@media (min-width: 1280px) { + .menu__wrapper { + gap: 102px; + } +} + +.menu__top-bar { + position: relative; + align-items: flex-start; + justify-content: space-between; + gap: 28px; + padding-top: 27px; + padding-bottom: 24px; +} + +@media (min-width: 768px) { + .menu__top-bar { + padding-top: 40px; + display: flex; + } +} + +@media (min-width: 1280px) { + .menu__top-bar { + gap: 102px; + } +} + +.menu__top-bar::after { + position: absolute; + content: ''; + display: inline-block; + width: 100%; + height: 1px; + background-color: #fff; + bottom: 0; +} + +@media (min-width: 768px) { + .menu__top-bar::after { + width: 1px; + height: 145px; + top: 40px; + right: 0; + } +} + +.menu__top-bar .nav__list { + gap: 24px 28px; +} + +@media (min-width: 768px) { + .menu__top-bar .nav__list { + margin-right: 36px; + } +} + +@media (min-width: 1280px) { + .menu__top-bar .nav__list { + margin-right: 102px; + } +} + +.menu__top-bar .nav__link { + font-size: 16px; + font-weight: 500; +} + +.menu__content { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap: 20px; + padding-bottom: 27px; +} + +@media (min-width: 768px) { + .menu__content { + padding-block: 40px; + max-width: 340px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 26px; + } +} + +@media (min-width: 768px) { + .menu__content { + min-width: 370px; + } +} + +.menu__accent { + font-weight: 600; +} + +.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 .nav__item { + transition: all 0.3s ease-in; +} + +.nav .nav__item:hover { + color: #f14a27; +} + +.events__title { + margin-bottom: 40px; +} + +@media (min-width: 768px) { + .events__title { + margin-bottom: 43px; + } +} + +@media (min-width: 1280px) { + .events__title { + margin-bottom: 56px; + } +} + +.events__cards { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + gap: 60px; + margin-bottom: 60px; +} + +@media (min-width: 768px) { + .events__cards { + margin-bottom: 112px; + } +} + +@media (min-width: 1280px) { + .events__cards { + margin-bottom: 104px; + } +} + +.events__card { + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); +} + +@media (min-width: 768px) { + .events__card { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 1280px) { + .events__card { + --columns: 12; + } +} + +@media (min-width: 768px) { + .events__card { + row-gap: 40px; + } +} + +.events__image { + object-fit: cover; + grid-column: 1/-1; + width: 100%; + height: 210px; + transition: all 0.3s ease-in; +} + +.events__image:hover { + transform: scale(1.02); +} + +@media (min-width: 768px) { + .events__image { + height: 420px; + } +} + +@media (min-width: 1280px) { + .events__image { + height: 520px; + grid-column: 1/8; + } +} + +.events__info { + grid-column: 1/-1; + display: flex; + flex-direction: column; +} + +@media (min-width: 1280px) { + .events__info { + grid-column: 9/-1; + place-self: center center; + } +} + +.events__tech-info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 15px; + font-size: 16px; +} + +@media (min-width: 768px) { + .events__tech-info { + justify-content: flex-start; + gap: 27px; + margin-bottom: 32px; + } +} + +@media (min-width: 1280px) { + .events__tech-info { + margin-bottom: 30; + } +} + +.events__type { + font-weight: 500; + color: #687480; + line-height: 100%; +} + +@media (min-width: 768px) { + .events__type { + font-size: 14px; + } +} + +.events__date { + color: #1a5a4c; + font-weight: 700; + line-height: 150%; +} + +.events__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; +} + +@media (min-width: 768px) { + .events__name { + margin-bottom: 15px; + font-size: 36px; + gap: 24px; + } +} + +.events__name::after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + background-color: #f14a27; +} + +.events__description { + font-size: 16px; + font-weight: 300; + line-height: 150%; +} + +.lection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-image: url('/src/images/pictures/img-3.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: top; + position: relative; + width: 100%; + height: 210px; + margin-bottom: 183px; +} + +@media (min-width: 768px) { + .lection { + height: 390px; + margin-bottom: 208px; + } +} + +@media (min-width: 1280px) { + .lection { + height: 550px; + margin-bottom: 302px; + } +} + +.lection__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: #fff; + gap: 24px; + padding-block: 20px; + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); +} + +@media (min-width: 768px) { + .lection__info { + align-items: flex-start; + max-width: 570px; + padding: 45px 55px 50px; + top: 306px; + gap: 16px; + } +} + +@media (min-width: 1280px) { + .lection__info { + grid-column: 1/-1; + top: 448px; + } +} + +.lection__tech-info { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + gap: 27px; + font-size: 16px; + margin: 0; +} + +@media (min-width: 768px) { + .lection__tech-info { + gap: 186px; + } +} + +@media (min-width: 1280px) { + .lection__tech-info { + gap: 130px; + } +} + +.lection__type { + font-weight: 500; + color: #687480; + line-height: 100%; +} + +@media (min-width: 768px) { + .lection__type { + font-size: 14px; + } +} + +.lection__date { + color: #1a5a4c; + font-weight: 700; + line-height: 150%; +} + +.lection__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; +} + +@media (min-width: 768px) { + .lection__name { + margin-bottom: 15px; + font-size: 36px; + gap: 24px; + text-align: left; + } +} + +.gallery__slider { + margin-bottom: 100px; +} + +@media (min-width: 1280px) { + .gallery__slider { + margin-bottom: 200px; + } +} + +.slider__track { + gap: 20px; + margin-bottom: 20px; + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; +} + +.slider__track::-webkit-scrollbar { + display: none; +} + +@media (min-width: 768px) { + .slider__track { + margin-bottom: 32px; + } +} + +@media (min-width: 1280px) { + .slider__track { + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + } +} + +@media (min-width: 1280px) and (min-width: 768px) { + .slider__track { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 1280px) and (min-width: 1280px) { + .slider__track { + --columns: 12; + } +} + +.slider__slide { + flex: 0 0 100%; + scroll-snap-align: center; + text-align: center; + height: 410px; + transition: all 0.3s ease-in; +} + +.slider__slide:hover { + transform: scale(1.02); +} + +@media (min-width: 768px) { + .slider__slide { + flex: 0 0 50%; + height: 543px; + } +} + +@media (min-width: 1280px) { + .slider__slide { + height: 600px; + } + .slider__slide--width--small { + grid-column: span 4; + } + .slider__slide--width--big { + grid-column: span 8; + } + .slider__slide--height--small { + height: 360px; + } +} + +.slider__image { + display: block; + object-fit: cover; + object-position: top; + width: 100%; + height: 100%; +} + +.slider__dots { + display: flex; + justify-content: center; + gap: 22px; +} + +.slider__dots-button { + width: 9px; + height: 9px; + border-radius: 50%; + border: none; + background-color: #e0e0e0; +} + +.slider__dots-button--active { + background-color: #1a5a4c; +} + +.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; +} + +.slider-lightbox__img { + max-width: 90%; + max-height: 90%; + object-fit: contain; + border-radius: 8px; +} + +.slider-lightbox__button { + position: absolute; + width: 24px; + height: 24px; + top: 20px; + right: 20px; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + min-width: 24px; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.slider-lightbox__button span:nth-child(2) { + left: 3px; + top: 11px; + transform: rotate(-45deg); +} + +.slider-lightbox__button:hover .button-close span:nth-child(1) { + transform: rotate(45deg) scale(1.2); +} + +.slider-lightbox__button:hover .button-close span:nth-child(2) { + transform: rotate(-45deg) scale(1.2); +} + +.slider-lightbox--active { + display: flex; +} + +.subscribe { + background-image: url('/src/images/pictures/img-4.jpg'); + color: #fff; +} + +.subscribe__wrapper { + padding-block: 82px; + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); +} + +@media (min-width: 768px) { + .subscribe__wrapper { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 1280px) { + .subscribe__wrapper { + --columns: 12; + } +} + +.subscribe__title { + grid-column: 1/-1; + text-align: center; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + .subscribe__title { + grid-column: 2/-2; + margin-bottom: 16px; + } +} + +@media (min-width: 1280px) { + .subscribe__title { + grid-column: 4/10; + } +} + +.subscribe__text { + grid-column: 1/-1; + font-size: 18px; + line-height: 150%; + text-align: center; + margin-bottom: 50px; +} + +@media (min-width: 768px) { + .subscribe__text { + grid-column: 2/-2; + margin-bottom: 64px; + } +} + +@media (min-width: 1280px) { + .subscribe__text { + grid-column: 4/10; + margin-bottom: 72px; + } +} + +.subscribe__form { + width: 100%; + grid-column: 1/-1; + margin: 0 auto; +} + +@media (min-width: 768px) { + .subscribe__form { + grid-column: 2/-2; + } +} + +@media (min-width: 1280px) { + .subscribe__form { + grid-column: 4/10; + } +} + +.subscribe__label { + display: flex; + justify-content: space-between; + height: 50px; +} + +@media (min-width: 768px) { + .subscribe__label { + height: 70px; + gap: 18px; + } +} + +@media (min-width: 1280px) { + .subscribe__label { + gap: 30px; + } +} + +.subscribe__button { + flex-shrink: 0; + display: block; + content: ''; + width: 50px; + height: 100%; + background-color: #f14a27; + background-image: url(/src/images/icons/button-arrow.svg); + background-repeat: no-repeat; + background-size: 24px 24px; + background-position: center; + transition: all 0.3s ease-in; +} + +.subscribe__button:hover { + background-size: 48px 48px; +} + +@media (min-width: 768px) { + .subscribe__button { + width: 70px; + } +} + +.subscribe__email { + border: 0; + font-family: Montserrat, sans-serif; + padding: 18px 32px; + width: 100%; + color: #0f0e08; + font-size: 14px; + background-color: #fff; + transition: all 0.3s ease-in; +} + +@media (min-width: 768px) { + .subscribe__email { + padding-inline: 24px; + } +} + +@media (min-width: 1280px) { + .subscribe__email { + padding-inline: 32px; + } +} + +.subscribe__email::placeholder { + color: #687480; +} + +.subscribe__email:hover { + border: 1px solid #f14a27; + border-right: none; +} + +@media (min-width: 768px) { + .subscribe__email:hover { + border-right: 1px solid #f14a27; + } +} + +.subscribe__email:focus { + border-width: 2px; +} + +.footer__wrapper { + padding-block: 50px; + display: grid; + column-gap: 20px; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); +} + +@media (min-width: 768px) { + .footer__wrapper { + --columns: 6; + + column-gap: 30px; + } +} + +@media (min-width: 1280px) { + .footer__wrapper { + --columns: 12; + } +} + +.footer__accent { + font-weight: 600; +} + +.footer__top { + grid-column: 1/-1; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; +} + +@media (min-width: 768px) { + .footer__top { + flex-direction: column; + justify-content: flex-start; + gap: 62px; + grid-column: span 1; + margin-bottom: 0; + } +} + +.footer__socials { + display: flex; + gap: 20px; +} + +.footer__info { + grid-column: 1/2; + display: flex; + flex-direction: column; + margin-bottom: 20px; + gap: 20px; +} + +@media (min-width: 768px) { + .footer__info { + grid-column: 2/4; + margin-bottom: 64px; + } +} + +@media (min-width: 1280px) { + .footer__info { + grid-column: 3/5; + margin-bottom: 87px; + } +} + +.footer__contacts { + display: flex; + flex-direction: column; + gap: 20px; + grid-column: 2/3; +} + +@media (min-width: 768px) { + .footer__contacts { + grid-column: 4/-2; + } +} + +@media (min-width: 1280px) { + .footer__contacts { + grid-column: 5/7; + } +} + +.footer__contacts a { + transition: all 0.3s ease-in; +} + +.footer__contacts a:hover { + color: #f14a27; +} + +.footer__button-to-top { + place-self: flex-end flex-end; + grid-column: 2/3; + padding: 17px; + width: 50px; + height: 50px; + border: 1px solid #1a5a4c; + border-radius: 50%; + background-image: url(/src/images/icons/arrow-up.svg); + background-repeat: no-repeat; + background-position: center; +} + +@media (min-width: 768px) { + .footer__button-to-top { + display: none; + } +} + +.footer__line { + grid-column: 1/-1; + display: block; + background-color: #1a5a4c; + height: 1px; + width: 100%; + margin-bottom: 40px; +} + +@media (min-width: 768px) { + .footer__line { + grid-column: 2/-2; + margin-bottom: 64px; + } +} + +@media (min-width: 1280px) { + .footer__line { + justify-self: center; + height: 260px; + width: 1px; + grid-column: 7/8; + } +} + +.footer__nav { + grid-column: 1/-1; + margin-bottom: 80px; +} + +@media (min-width: 768px) { + .footer__nav { + grid-column: 2/-2; + } +} + +@media (min-width: 1280px) { + .footer__nav { + grid-column: 8/-2; + } +} + +.footer__nav .nav__list { + gap: 20px; +} + +@media (min-width: 768px) { + .footer__nav .nav__list { + column-gap: 30px; + } +} + +@media (min-width: 1280px) { + .footer__nav .nav__list { + column-gap: 32px; + } +} + +.footer__designed-info { + grid-column: 1/-1; + font-size: 12px; + text-align: center; + color: #687480; +} + +@media (min-width: 768px) { + .footer__designed-info { + display: flex; + justify-content: space-between; + } +} + +.icon { + display: block; + height: 24px; + width: 24px; + color: #0f0e08; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: all 0.3s ease-in; +} + +.icon:hover { + color: #f14a27; +} + +.icon--facebook { + background-color: currentColor; + -webkit-mask: url(/src/images/icons/facebook-icon.svg); + mask: url(/src/images/icons/facebook-icon.svg); +} + +.icon--instagram { + background-color: currentColor; + -webkit-mask: url(/src/images/icons/facebook-icon.svg); + mask: url(/src/images/icons/instagram-icon.svg); +} diff --git a/src/styles/css/main.css.map b/src/styles/css/main.css.map new file mode 100644 index 000000000..cafa28edf --- /dev/null +++ b/src/styles/css/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../utils/normalize.scss","../utils/extends.scss","../utils/mixins.scss","../utils/typography.scss","../scss/fonts.scss","../scss/main.scss","../utils/vars.scss","../scss/blocks/page.scss","../scss/blocks/header.scss","../scss/blocks/top-bar.scss","../scss/blocks/button.scss","../scss/blocks/container.scss","../scss/blocks/menu.scss","../scss/blocks/nav.scss","../scss/blocks/events.scss","../scss/blocks/lection.scss","../scss/blocks/gallery.scss","../scss/blocks/subscribe.scss","../scss/blocks/footer.scss","../scss/blocks/icons.scss"],"names":[],"mappings":"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ACA;EAEA;EACA;EACA;;AZnHF;EYyGA;IAaI;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA,kBRlIa;;AQsIjB;EACE;EACA;EACA;;;AC/IJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;AbNA;EaRF;IAiBI;IACA;;;AbJF;EadF;IAsBI;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBTlCc;ESmCd;EACA;EACA;;Ab/BF;EakBA;IAgBI;IACA;IACA;IACA;IACA;;;AbhCJ;EaYA;IAwBI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AbtDF;Ea+CA;IAUI;;;AbnDJ;EayCA;IAcI;;;AAIJ;EACE;EACA,OTvEc;ESwEd;;AbpEF;EaiEA;IAMI;;;AAIJ;EACE,OT/Ea;ESgFb;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;Ab5FF;EaiFA;IAcI;IACA;IACA;IACA;;;;ACzGJ;EACE;;AdYF;EcbA;IAII;;;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AARJ;EAWE;EACA;;AdfF;EcGA;IAeI;;;AdZJ;EcHA;IdSA;IACA;IAEA;IAEA;;;AAjBA;EcGA;IdiBE;IAEA;;;AAhBF;EcHA;IduBE;;;AcAF;EACE;EACA;EACA;EACA;EdCF;;AcGE;EACE;;AdnCJ;Ec0BA;IAaI;IAEA;;;AdnCJ;EcoBA;IAmBI;;EACA;IACE;;EAGF;IACE;;EAGF;IACE;;;AAKN;EACE;EACA;EACA;EAEA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,kBVrFS;;;AU2FjB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA,kBVxIY;;AU0IZ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAKN;EACE;;;ACpKJ;EACE;EACA;;AAEA;EfgBA;EACA;EAEA;EAEA;;AAjBA;EeJA;IfwBE;IAEA;;;AAhBF;EeVA;If8BE;;;Ae9BF;EAGE;;AAGF;EACE;EACA;EACA;;AfLF;EeEA;IAMI;IACA;;;AfHJ;EeJA;IAWI;;;AAIJ;EACE;EACA;EACA;EACA;EAEA;;AfvBF;EeiBA;IASI;IACA;;;AfrBJ;EeWA;IAcI;IACA;;;AAIJ;EACE;EACA;EACA;;AfvCF;EeoCA;IAMI;;;AfpCJ;Ee8BA;IAUI;;;AAIJ;EACE;EACA;EACA;;AfrDF;EekDA;IAMI;IACA;;;AfnDJ;Ee4CA;IAWI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,kBXzEe;EW0Ef;EACA;EACA;EACA;Ef5CF;;Ae+CE;EACE;;Af/EJ;EeiEA;IAkBI;;;AAIJ;EACE;EACA;EACA;EACA;EACA,OXnGa;EWoGb;EACA,kBXpGc;EJqChB;;AA/BA;EeuFA;IAYI;;;Af7FJ;EeiFA;IAgBI;;;AAGF;EACE,OX/GY;;AWkHd;EACE;EACA;;AfhHJ;Ee8GE;IAKI;;;AAIJ;EACE;;;AC/HJ;EACE;EhBkBF;EACA;EAEA;EAEA;;AAjBA;EgBPA;IhB2BE;IAEA;;;AAhBF;EgBbA;IhBiCE;;;AgB3BF;EACE;;AAIF;EACE;EACA;EACA;EACA;EAEA;;AhBVF;EgBIA;IASI;IACA;IAEA;IACA;IACA;;;AAIJ;EACE;EACA;;AAMF;EACE;EACA;EACA;EACA;EAEA;;AhBpCF;EgB8BA;IASI;IACA;;;AhBlCJ;EgBwBA;IAcI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;AhBrDF;EgBiDA;IAOI;;;AhBlDJ;EgB2CA;IAWI;;;AAGF;EhBhCF;;AgBmCI;EACE,OZrEW;;AY0EjB;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AhBlFF;EgBwEA;IAaI;;;AAMJ;EACE;EACA;EACA,kBZjGa;EYkGb;EACA;EACA;;AhBjGF;EgB2FA;IASI;IACA;;;AhB/FJ;EgBqFA;IAcI;IACA;IACA;IACA;;;AAIJ;EACE;EAEA;;AhBnHF;EgBgHA;IAMI;;;AhBhHJ;EgB0GA;IAUI;;;AAGF;EACE;;AhB9HJ;EgB6HE;IAII;;;AhB3HN;EgBuHE;IAQI;;;AAKN;EACE;EACA;EACA;EACA,OZlJc;;AJIhB;EgB0IA;IAOI;IACA;;;;AC1JN;EACE;EACA;EACA;EACA,ObHe;EaKf;EACA;EACA;EjB+BA;;AiB3BA;EACE,ObPe;;AaUjB;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/src/styles/css/utils.css b/src/styles/css/utils.css new file mode 100644 index 000000000..063689a93 --- /dev/null +++ b/src/styles/css/utils.css @@ -0,0 +1,244 @@ +/* === 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; + } +} + +h1 { + font-family: Roboto, sans-serif; + font-weight: 400; +} + +@media (min-width: 768px) { + h1 { + text-align: left; + line-height: 120%; + } +} + +.title { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + text-align: center; +} + +@media (min-width: 768px) { + .title { + text-align: left; + font-size: 48px; + margin-bottom: 43px; + } +} + +@media (min-width: 1280px) { + .title { + margin-bottom: 56px; + } +} diff --git a/src/styles/css/utils.css.map b/src/styles/css/utils.css.map new file mode 100644 index 000000000..b4b27512f --- /dev/null +++ b/src/styles/css/utils.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../utils/normalize.scss","../utils/extends.scss","../utils/mixins.scss","../utils/typography.scss"],"names":[],"mappings":"AAAA;AACA;AACE;EACA;AAAA;AAAA;IAGE;;EAEF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;IAME;;EAEF;AAAA;AAAA;AAAA;AAAA;IAKE;;EAGF;AAAA;IAEE;;EAEF;AAAA;IAEE;;EAEF;IACE;;EAGF;AAAA;IAEE;IACA;IACA;IACA;;EAEF;IACE;;EAEF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;AAGF;EACA;AAAA;IAEE;IACA;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;IAKE;IACA;IACA;;AAGF;EACA;IACE;IACA;IACA;;EAEF;AAAA;IAEE;;AAGF;EACA;AAAA;AAAA;AAAA;IAIE;IACA;IACA;IACA;IACA;IACA;;EAEF;AAAA;IAEE;;EAEF;IACE;;EAGF;IACE;;EAEF;AAAA;IAEE;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;;EAEF;AAAA;IAEE;;EAEF;IACE;;EAGF;AAAA;IAEE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE;IACA;IACA;;AAGF;EACA;IACE;IACA;;EAGF;AAAA;IAEE;;EAGF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AChOJ;EACE;EACA;;;ACMA;ECJF;IAEI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;;ADPA;ECGF;IAOI;IACA;IACA;;;ADNF;ECHF;IAaI","file":"utils.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/scss/blocks/button.scss b/src/styles/scss/blocks/button.scss new file mode 100644 index 000000000..9abad75be --- /dev/null +++ b/src/styles/scss/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('/src/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/scss/blocks/container.scss b/src/styles/scss/blocks/container.scss new file mode 100644 index 000000000..0f9865546 --- /dev/null +++ b/src/styles/scss/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/scss/blocks/events.scss b/src/styles/scss/blocks/events.scss new file mode 100644 index 000000000..4e0a69583 --- /dev/null +++ b/src/styles/scss/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/scss/blocks/footer.scss b/src/styles/scss/blocks/footer.scss new file mode 100644 index 000000000..712627a63 --- /dev/null +++ b/src/styles/scss/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(/src/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/scss/blocks/gallery.scss b/src/styles/scss/blocks/gallery.scss new file mode 100644 index 000000000..e86e68c1f --- /dev/null +++ b/src/styles/scss/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/scss/blocks/header.scss b/src/styles/scss/blocks/header.scss new file mode 100644 index 000000000..6ba16cc12 --- /dev/null +++ b/src/styles/scss/blocks/header.scss @@ -0,0 +1,119 @@ +.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('/src/images/header-img/header-bg.jpg'); + background-repeat: no-repeat; + background-size: cover; + transform: scaleX(-1); + + background-position: center; + + @include on-tablet { + width: 50%; + height: 384px; + } + + @include on-desktop { + height: 655px; + } + } +} diff --git a/src/styles/scss/blocks/icons.scss b/src/styles/scss/blocks/icons.scss new file mode 100644 index 000000000..916bc781e --- /dev/null +++ b/src/styles/scss/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(/src/images/icons/facebook-icon.svg); + mask: url(/src/images/icons/facebook-icon.svg); + } + + &--instagram { + background-color: currentColor; + -webkit-mask: url(/src/images/icons/facebook-icon.svg); + mask: url(/src/images/icons/instagram-icon.svg); + } +} diff --git a/src/styles/scss/blocks/lection.scss b/src/styles/scss/blocks/lection.scss new file mode 100644 index 000000000..f545816d7 --- /dev/null +++ b/src/styles/scss/blocks/lection.scss @@ -0,0 +1,110 @@ +.lection { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-image: url('/src/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/scss/blocks/menu.scss b/src/styles/scss/blocks/menu.scss new file mode 100644 index 000000000..9bd3fcaa5 --- /dev/null +++ b/src/styles/scss/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/scss/blocks/nav.scss b/src/styles/scss/blocks/nav.scss new file mode 100644 index 000000000..efef6f7ba --- /dev/null +++ b/src/styles/scss/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/scss/blocks/page.scss b/src/styles/scss/blocks/page.scss new file mode 100644 index 000000000..56d971e24 --- /dev/null +++ b/src/styles/scss/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/scss/blocks/subscribe.scss b/src/styles/scss/blocks/subscribe.scss new file mode 100644 index 000000000..c08fe563f --- /dev/null +++ b/src/styles/scss/blocks/subscribe.scss @@ -0,0 +1,132 @@ +.subscribe { + background-image: url('/src/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(/src/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/scss/blocks/top-bar.scss b/src/styles/scss/blocks/top-bar.scss new file mode 100644 index 000000000..df2c2f8ac --- /dev/null +++ b/src/styles/scss/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/scss/fonts.scss b/src/styles/scss/fonts.scss new file mode 100644 index 000000000..733968002 --- /dev/null +++ b/src/styles/scss/fonts.scss @@ -0,0 +1,6 @@ +@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/scss/main.scss b/src/styles/scss/main.scss new file mode 100644 index 000000000..111d7dfe4 --- /dev/null +++ b/src/styles/scss/main.scss @@ -0,0 +1,21 @@ +@import 'utils'; +@import 'fonts'; +@import '../utils/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/scss/utils.scss b/src/styles/scss/utils.scss new file mode 100644 index 000000000..4b2d6aa91 --- /dev/null +++ b/src/styles/scss/utils.scss @@ -0,0 +1,5 @@ +@import '../utils/normalize'; +@import '../utils/vars'; +@import '../utils/mixins'; +@import '../utils/extends'; +@import '../utils/typography'; 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/_extends.scss b/src/styles/utils/extends.scss similarity index 100% rename from src/styles/utils/_extends.scss rename to src/styles/utils/extends.scss diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..a9e36f48d --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,41 @@ +@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..8d792bad9 --- /dev/null +++ b/src/styles/utils/typography.scss @@ -0,0 +1,25 @@ +h1 { + @extend %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 new file mode 100644 index 000000000..0e7568530 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,11 @@ +$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;