diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 5f9e97051..a2ce4aa44 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum/). + [DEMO LINK](https://lightdiller.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/checklist.md b/checklist.md index 9fd7002be..f9ec2ccd9 100644 --- a/checklist.md +++ b/checklist.md @@ -27,3 +27,24 @@ 7. The button "tickets" should lead to the block with current events 8. The button "about us" should lead to the email digest 9. All the social icons in the footer should be clickable and open the social networks in a new tab + + + + +Github flow +Сделать Fork репозитория. +Клонировать форкнутый репозиторий. +(Ссылка на проект должна содержать твоё имя, но не mate-academy) +Выполнить npm install (или просто npm i). +Выполнить npm start. +Открыть ещё одно окно терминала для следующих шагов. +Выполнить git checkout -b develop — чтобы создать новую ветку и переключиться на неё. +Писать код в папке src. +Выполнить npm run lint и исправить ошибки стиля кода. +Выполнить npm run deploy, чтобы задеплоить решение на gh-pages. +Выполнить git add . && git commit -m 'solution', чтобы сохранить изменения. +Выполнить git push origin develop, чтобы отправить код для PR. +Создать Pull Request (PR) из ветки develop в ветку master оригинального репозитория. +Заменить на свой Github username в +DEMO LINK. +Скопировать DEMO LINK в описание PR. diff --git a/index.html b/index.html index d339e6856..4b9c8c23b 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,341 @@ - - Title + + + Museum NaMu + + + + + -

Hello Mate Academy

+ +
+
+
+ + burger-menu + + +
+
+
+
+ + + +
+
+
+

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

+ +

КВИТКИ

+ + події +
+
+
+ +
+
+
+

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

+
+ + actual-img-1 + +
+
+

Виставка

+

26.08-29.11.2019

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

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

+
+
+ +
+ + actual-img-2 + +
+
+

Виставка

+

26.08-29.11.2019

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

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

+
+
+
+
+ +
+
+
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+ Від класицизму до романтизму +
+
+
+
+ + + +
+ + + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index ab5f87b9b..d2c5a8560 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/actual/actual-1.jpg b/src/images/actual/actual-1.jpg new file mode 100644 index 000000000..8d6eacb16 Binary files /dev/null and b/src/images/actual/actual-1.jpg differ diff --git a/src/images/actual/actual-2.jpg b/src/images/actual/actual-2.jpg new file mode 100644 index 000000000..988421da3 Binary files /dev/null and b/src/images/actual/actual-2.jpg differ diff --git a/src/images/actual/actual-lection.jpg b/src/images/actual/actual-lection.jpg new file mode 100644 index 000000000..69bd1536b Binary files /dev/null and b/src/images/actual/actual-lection.jpg differ diff --git a/src/images/gallery/gallery-1.jpg b/src/images/gallery/gallery-1.jpg new file mode 100644 index 000000000..0f68e92b1 Binary files /dev/null and b/src/images/gallery/gallery-1.jpg differ diff --git a/src/images/gallery/gallery-2.jpg b/src/images/gallery/gallery-2.jpg new file mode 100644 index 000000000..795c19ee2 Binary files /dev/null and b/src/images/gallery/gallery-2.jpg differ diff --git a/src/images/gallery/gallery-3.jpg b/src/images/gallery/gallery-3.jpg new file mode 100644 index 000000000..2882f4e36 Binary files /dev/null and b/src/images/gallery/gallery-3.jpg differ diff --git a/src/images/gallery/gallery-4.jpg b/src/images/gallery/gallery-4.jpg new file mode 100644 index 000000000..1b497b632 Binary files /dev/null and b/src/images/gallery/gallery-4.jpg differ diff --git a/src/images/gallery/gallery-5.jpg b/src/images/gallery/gallery-5.jpg new file mode 100644 index 000000000..e928d603a Binary files /dev/null and b/src/images/gallery/gallery-5.jpg differ diff --git a/src/images/hero/hero-bg.jpg b/src/images/hero/hero-bg.jpg new file mode 100644 index 000000000..e9d14d5a5 Binary files /dev/null and b/src/images/hero/hero-bg.jpg differ diff --git a/src/images/icons/Facebook.svg b/src/images/icons/Facebook.svg new file mode 100644 index 000000000..6fcb538c9 --- /dev/null +++ b/src/images/icons/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-icon-black.svg b/src/images/icons/arrow-icon-black.svg new file mode 100644 index 000000000..4bd4df415 --- /dev/null +++ b/src/images/icons/arrow-icon-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-icon.svg b/src/images/icons/arrow-icon.svg new file mode 100644 index 000000000..ad9be9fe3 --- /dev/null +++ b/src/images/icons/arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-up.svg b/src/images/icons/arrow-up.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/icons/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger-icon.svg b/src/images/icons/burger-icon.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/icons/burger-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger-menu.svg b/src/images/icons/burger-menu.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/icons/burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 000000000..f2cfd07c0 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..98186ebd2 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/na-mu-logo.svg b/src/images/icons/na-mu-logo.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/icons/na-mu-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/subscribe/subscribe.jpg b/src/images/subscribe/subscribe.jpg new file mode 100644 index 000000000..d69bacb81 Binary files /dev/null and b/src/images/subscribe/subscribe.jpg differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..90b9ca002 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,59 @@ 'use strict'; + +let swiper = null; // Создаем переменую для будущего свайпера + +function swiperInit() { // делаем функцию создания свайпера + + if (swiper) { // если свайпер есть - закріваем функцию + return; + } + + swiper = new Swiper('.gallery__slider', { // создаем свайпер в переменной + pagination: { + el: '.swiper-pagination', // делаем пагинацию и подключаем к контейнера + }, + + slidesPerGroup: 1, // пролистываем максимум один слайд за одно дйствие + + // loop: true, // зациклить слайдер (тут не нужно, на будущее) + + breakpoints: { + 320: { + slidesPerView: 1.15, // колво слайдов на єкране + spaceBetween: 16, // расстояние между слайдами + centeredSlides: true, // центрируем первый слайд + }, + 768: { + slidesPerView: 2.2, + spaceBetween: 20, + centeredSlides: false, // убираем центрацию + }, + // 1280: { + // swiper.destroy(true, true); // НЕ РАБОТАЕТ, сделать иначе + // swiper = null; + // } + }, + }); +} + +function swiperDestroy() { + // функункция удаления свайпера + if (!swiper) { // защита от бага, если свайпера нет заканчиваем функцию + return; + } + swiper.destroy(true, true); // если есть - уничтожаем + swiper = null; // переменную обнуляем +} + +function swiperCheck() { + const isMobile = window.innerWidth < 1280; // константа для проверки разрешния + + if (isMobile) { + swiperInit(); + } else { + swiperDestroy(); + } +} + +swiperCheck(); // обьявляем функцию во время запуска +window.addEventListener('resize', swiperCheck); // включаем функцию при каждом изменение разрешения diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/actual.scss b/src/styles/actual.scss new file mode 100644 index 000000000..caa16137e --- /dev/null +++ b/src/styles/actual.scss @@ -0,0 +1,24 @@ +.actual { + &__content { + justify-self: center; + + @include on-desktop { + max-width: none; + } + } + + &__main-title { + @include title-text(700, $all-black); + + margin-bottom: 40px; + font-size: 36px; + text-align: center; + animation: reveal-image $anim-timming; + + @include on-tablet { + margin-bottom: 48px; + font-size: 48px; + text-align: start; + } + } +} diff --git a/src/styles/animation.scss b/src/styles/animation.scss new file mode 100644 index 000000000..aba2cdc81 --- /dev/null +++ b/src/styles/animation.scss @@ -0,0 +1,104 @@ +@keyframes reveal-image { + // анимация появлния-блюра + 0% { + opacity: 0.3; // Полная прозрачность + filter: blur(20px); // Сильное размытие в начале + } + 100% { + opacity: 1; // Полная видимость + filter: blur(0); // Четкое изображение + } +} + +// отдельная анимация шапки хээдэра +@keyframes header-slide { + from { + transform: translateY(-150%); + } + + to { + transform: translateY(0); + } +} + +@keyframes hero-title { + from { + transform: var(--move-from); + } + + to { + transform: translate(0, 0); + } +} + +// плавная анимация кнопки +@keyframes hero-button { + from { + clip-path: inset( + 0 100% 0 -300% + ); // 100% - полностью скрыта кнопка начиная с левой части, -300% - зазор чтобы был виден зеленый элемент + } + + to { + clip-path: inset(0 0 0 -300%); + } +} + +// анимация проезда зеленого элемента кнопки +@keyframes hero-button-decore { + from { + transform: translateX(-400%); + opacity: 1; + } + + to { + transform: translateX(0); + } +} + +// для декора на hero +// @keyframes hero-decore{ +// from { +// transform: scaleX(0); +// } + +// to{ +// transform: scaleX(1); +// } +// } + +// анимация поялвения карточки при скроле +@keyframes slide-in-up { + from { + transform: translateY(200px); /* Стартуем ниже на 200px */ + opacity: 0; + } + to { + transform: translateY(0); /* Приезжаем в обычную позицию */ + opacity: 1; + } +} + +// анимация поднятия абсолютной карточки +@keyframes slide-in-up-center { + from { + transform: translate(-50%, 100%); + opacity: 0; + } + to { + transform: translate(-50%, 50%); + opacity: 1; + } +} + +@keyframes slide-down { + from { + transform: translateY(-100px); + filter: blur(20px); + } + + to { + transform: translateY(0); + filter: blur(0); + } +} diff --git a/src/styles/burger-menu.scss b/src/styles/burger-menu.scss new file mode 100644 index 000000000..6bb75eaf4 --- /dev/null +++ b/src/styles/burger-menu.scss @@ -0,0 +1,193 @@ +.burger-menu { + position: fixed; + z-index: 0; + + width: 100%; + height: 100vh; + + opacity: 0; + background-color: rgba($color: $all-black, $alpha: 0.5); + + transition: all $anim-timming; + + // прячем изначально верхушку и задаем время анимации отдельно, т.к. оно не наследуется(( + &__top { + transform: translateY(-150%); + min-height: 225px; + background-color: $green; + transition: all $anim-timming; + } + + // при нажатие на кнопку отображаем родительский элемент + &:target { + z-index: 100; + opacity: 1; + + // возвращаем верхушку хэдэра на исходную + .burger-menu__top { + transform: translateY(0); + } + } + + + + &__content { + display: flex; + flex-direction: column; + box-sizing: border-box; + padding: 27px 0; + + @include on-tablet { + flex-direction: row; + gap: 38px; + } + + @include on-s-desktop { + gap: 72px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__content-top { + display: flex; + justify-content: start; + padding-bottom: 24px; + + @include on-tablet { + justify-content: space-between; + } + } + + &__divieder { + display: none; + align-self: start; + + width: 1px; + height: 145px; + + background-color: #fff; + + @include on-tablet { + display: block; + } + } + + &__content-bottom { + position: relative; + + display: flex; + flex-direction: column; + + padding-top: 24px; + border-top: 1px solid #fff; + + @include on-tablet { + // max-height: 140px; + flex-direction: row; + gap: 26px; + align-items: center; + justify-content: center; + + // border-left: 1px solid #fff; + padding: 0; + border-top: none; + } + } + + &__button { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + } + + &__nav { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px 28px; + + width: fit-content; + height: fit-content; + padding-left: 24px; + } + + &__link { + @include second-text(500, #fff); + + position: relative; + + width: fit-content; + max-width: 100px; + height: fit-content; + font-size: 16px; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; // позиционируем єлемент + bottom: -4px; // располагаем ниже + transform-origin: left; // задаем отправную точку анимации + transform: scaleX(0); // скриваем его, уменьшаем масштаб до 0 + + display: block; + + width: 100%; // делаем ширину на весь род єлемент, и высоту в 1 пиксель + height: 1px; + + background-color: #fff; // красим в черный + + transition: transform $anim-timming; // задаем время анимации + } + + &:hover::after { + transform: scaleX(1); // при наведение - рисуем + } + } + + &__sub-title { + @include second-text(400, #fff); + + width: fit-content; + padding-bottom: 20px; + font-size: 14px; + } + + &__time-of-work { + width: fit-content; + } + + &__times { + width: 158px; + padding-bottom: 16px; + list-style: none; + + @include on-tablet { + padding: 0; + } + } + + &__time { + @include second-text(600, #fff); + + width: fit-content; + font-size: 14px; + } + + &__day { + @include second-text(400, #fff); + + width: fit-content; + font-size: 14px; + + @include on-tablet { + align-self: end; + max-width: 144px; + } + } +} diff --git a/src/styles/card.scss b/src/styles/card.scss new file mode 100644 index 000000000..45321ba69 --- /dev/null +++ b/src/styles/card.scss @@ -0,0 +1,172 @@ +.card { + @include grid; + + position: relative; + + align-items: center; + + margin-bottom: 60px; + + background-color: white; + + animation-name: slide-in-up; // оглашаем анимацию, которую мы создали в отдельтом файле + animation-timing-function: ease-out; // плавно анимируем в конце + animation-fill-mode: forwards; // зафиксировать анимацию в конечном положение + animation-timeline: --card-reveal; // подвязываем время к переменной, которая следить, где по вертикали находится наш блок + view-timeline: --card-reveal block; // делаем переменую, она следит за нахождением карточки, Block - отвечает за поиск по вертикали + + animation-range: entry 0% cover 50%; // начинается когда карточки не видно (0), заканчивается когда видно на 50% + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + max-width: none; + margin-bottom: 104px; + } + + &__border-img { + grid-column: 1/-1; + + aspect-ratio: 16/13; + margin-bottom: 16px; + + overflow: hidden; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-s-desktop { + grid-column: 1 /4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 /8; + grid-row: 1; + max-width: 680px; + } + + @include hover(transform, scale(1.05)); + } + + &__img{ + width: 100%; + height: 100%; + object-fit: cover; + } + + &__text { + grid-column: 1/-1; + max-width: 460px; + + @include on-s-desktop { + grid-column: 4 /-1; + } + + @include on-desktop { + grid-column: 9 /-1; + grid-row: 1; + align-self: center; + height: fit-content; + } + } + + &__upper { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: space-between; + + max-width: 260px; + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__eye-brown { + @include second-text(500, $eye-grey); + + font-size: 16px; + line-height: 100%; + text-transform: uppercase; + } + + &__data { + @include second-text(700, $green); + } + + &__title { + cursor: pointer; + + position: relative; + + display: inline-block; + + width: fit-content; + padding-bottom: 10px; + + font-size: 28px; + text-decoration: none; + + background-image: linear-gradient( + 90deg, + #1a5a4c 0%, + #2e7d6d 15%, + #4cb39a 30%, + #000 55% + ); + background-position: 100% 0; // смещаем фон влево, чтобы исходно был черный цвет + background-clip: text; // делаем фоновое изображение внутри букв + background-size: 200% 100%; // делаем его больше по ширинее фон, + + transition: background-position $anim-timming ease; + + &::after { + content: ''; + + position: absolute; + top: 12px; + + width: 10px; + height: 10px; + margin-left: 12px; + + background-color: $red; + + transition: all $anim-timming; + + @include on-tablet { + width: 15px; + height: 15px; + margin-left: 20px; + } + } + + &:hover { + background-position: 0 0; + } + + &:hover::after { + transform: rotate(90deg); + background-color: $green; + } + + @include title-text(400, transparent); + + @include on-tablet { + margin-bottom: 15px; + font-size: 36px; + } + } + + &__description { + @include second-text(300, $desc-grey); + + font-size: 16px; + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..39108e132 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,255 @@ +.footer { + position: relative; + + &__content { + @include grid; + + position: relative; + row-gap: 40px; + height: fit-content; + padding: 40px 0 35px; + } + + &__icons { + display: flex; + grid-column: 1/-1; + flex-direction: row; + justify-content: space-between; + + @include on-tablet { + grid-column: 1; + flex-direction: column; + max-height: 160px; + } + } + + &__logo { + width: fit-content; + height: fit-content; + + @include hover(scale, 1.2); + } + + &__social { + display: flex; + gap: 20px; + align-items: center; + } + + &__soc-icon { + display: flex; + align-items: center; + align-self: center; + justify-content: center; + + width: 24px; + height: 24px; + + @include hover(scale, 1.2); + } + + &__time-of-work { + grid-column: 1; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + } + } + + &__title { + @include second-text(400, $link-black); + + padding-bottom: 20px; + } + + &__times { + list-style: none; + } + + &__time { + @include second-text(600, $link-black); + + font-size: 14px; + } + + &__day { + @include second-text(400, $link-black); + } + + &__weekend { + @include second-text(400, $link-black); + + margin-bottom: 30px; + padding-top: 14px; + font-size: 14px; + } + + &__contacts { + position: relative; + + display: flex; + grid-column: 2; + flex-direction: column; + justify-content: space-between; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__contacts-wrap { + max-width: 250px; + } + + // ховер с жирностью текста с помощью тени + &__link { + @include second-text(400, $link-black); + + display: inline-block; + font-size: 14px; + text-decoration: none; + transition: text-shadow $anim-timming; + + &:hover { + text-shadow: 0 0 0.5px currentColor; // text-shadow: (сдвиг тени по Х) [сдвиг тени по Y ] [радиус тени] [цвет]; + } + } + + &__button-top { + display: inline-block; + place-self: end end; + + width: 50px; + height: 50px; + border: 1px solid $green; + border-radius: 50%; + + background-image: url(/src/images/icons/arrow-up.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + display: none; + } + } + + &__divieder { + display: block; + grid-column: 1/-1; + align-self: start; + + width: 100%; + height: 1px; + + opacity: 0.5; + background-color: $green; + + @include on-tablet { + justify-self: center; + width: 67%; + } + + @include on-desktop { + display: block; + grid-column: 7; + justify-self: center; + + width: 1px; + height: 260px; + } + } + + &__nav { + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + width: 60%; + + @include on-tablet { + grid-column: 2 / 6; + height: fit-content; + } + + @include on-desktop { + grid-column: 8/ 11; + } + } + + // делаем аимацию подчркивания через псевдоэлемент + &__nav-link { + @include second-text(400, $link-black); + + position: relative; + + width: fit-content; + height: fit-content; + + font-size: 14px; + text-decoration: none; + + &::after { + content: ''; + + position: absolute; // позиционируем єлемент + bottom: -4px; // располагаем ниже + transform-origin: left; // задаем отправную точку анимации + transform: scaleX(0); // скриваем его, уменьшаем масштаб до 0 + + display: block; + + width: 100%; // делаем ширину на весь род єлемент, и высоту в 1 пиксель + height: 1px; + + background-color: $all-black; // красим в черный + + transition: transform $anim-timming; // задаем время анимации + } + + &:hover::after { + transform: scaleX(1); // при наведение - рисуем + } + } + + &__creatures { + display: flex; + grid-column: 1/-1; + flex-direction: column; + text-align: center; + + @include on-tablet { + flex-direction: row-reverse; + justify-content: space-between; + } + } + + &__creatures-text { + @include second-text(300, $link-black); + + display: inline-block; + grid-column: 1/-1; + + padding-bottom: 10px; + + text-decoration: none; + + transition: text-shadow, $anim-timming; + + @include on-tablet { + padding-bottom: 0; + } + + &:hover { + text-shadow: 0 0 0.5px currentColor; // text-shadow: (сдвиг тени по Х) [сдвиг тени по Y ] [радиус тени] [цвет]; + } + } +} diff --git a/src/styles/gallery.scss b/src/styles/gallery.scss new file mode 100644 index 000000000..ae7a814c2 --- /dev/null +++ b/src/styles/gallery.scss @@ -0,0 +1,178 @@ +.gallery { + margin-bottom: 130px; + + @include on-desktop { + margin-bottom: 200px; + } + + &__title { + @include title-text(700, $all-black); + + margin-bottom: 40px; + font-size: 36px; + text-align: center; + + @include on-tablet { + padding-inline-start: 35px; + font-size: 48px; + text-align: start; + } + } + + &__slider { + position: relative; + + display: flex; + flex-direction: row; + + width: 100%; + height: 450px; + + @include on-tablet { + height: 600px; + } + + @include on-desktop { + height: 100%; + } + } + + &__wrapper { + @include on-tablet { + padding-inline-start: 35px; + } + + @include on-desktop { + row-gap: 30px; + max-width: none; + + @include grid; + } + } + + &__item { + position: relative; + box-sizing: border-box; + width: 100%; + max-height: 410px; + + @include on-tablet { + max-height: 540px; + } + + @include on-desktop { + max-height: none; + } + + &--1 { + @include on-desktop { + grid-column: 1 / 5; + height: 600px; + } + } + + &--2 { + @include on-tablet { + display: inline-block; + } + + @include on-desktop { + display: none; + } + } + + &--3 { + @include on-desktop { + display: block; + grid-column: 5 / -1; + height: 600px; + } + } + + &--4 { + @include on-desktop { + display: block; + grid-column: 1 / 9; + height: 360px; + } + } + + &--5 { + object-position: left; + + @include on-desktop { + display: block; + grid-column: 9 / -1; + height: 360px; + } + } + } + + &__slides { + width: 100%; + height: 100%; + object-fit: cover; + + &--1 { + transform: scaleX(-1); + } + + &--3 { + transform: scaleX(-1); + } + + &--4 { + transform: scaleX(-1); + } + + &--5 { + transform: scaleX(-1); + } + } + + &__background { + position: absolute; + top: 0; + left: 0; + + display: flex; + flex-direction: column; + align-items: end; + justify-content: end; + + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0 20px 20px 0; + + opacity: 0; + background-color: rgba($color: $all-black, $alpha: 0.3); + + @include hover(opacity, 1); + } + + &__sub-title { + @include title-text(700, white); + + max-width: 80%; + font-size: 26px; + text-align: end; + } + + &__sub-description { + @include second-text(400, white); + + font-size: 18px; + text-align: end; + } + + &__pagination { + --swiper-pagination-color: #1a5a4c; // меняем цвет пагинации + + position: absolute; + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..51320a12b --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,40 @@ +.header { + position: absolute; + z-index: 2; + top: 0; + + box-sizing: border-box; + width: 100%; + + animation: slide-down $anim-timming 0.1s both; + + &__content { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 10px; + + @include on-tablet { + padding-top: 15px; + } + } + + &__button { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 24px; + } + + &__logo { + @include on-tablet { + margin-left: 100px; + } + } + + &__sloop { + width: 24px; + } +} diff --git a/src/styles/hero.scss b/src/styles/hero.scss new file mode 100644 index 000000000..3d7d3466e --- /dev/null +++ b/src/styles/hero.scss @@ -0,0 +1,200 @@ +.hero { + position: relative; + + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100%; + margin-bottom: 70px; + + animation: reveal-image $anim-timming ease-out; + + @include on-tablet { + flex-direction: row; + justify-content: end; + } + + &__left { + align-self: center; + justify-content: center; + order: 2; + + @include on-tablet { + align-items: start; + order: 1; + padding: 0 20px 0 34px; + } + + @include on-desktop { + box-sizing: border-box; + max-width: 555px; + margin-inline: auto; + padding: 0 30px 0 55px; + } + } + + &__right { + z-index: -1; + + order: 1; + + aspect-ratio: 1/0.95; + width: 100%; + height: 100%; + max-height: 500px; + + background-image: url(/src/images/hero/hero-bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + + @include on-tablet { + max-width: 725px; + max-height: 655px; + } + + @include on-desktop { + max-height: 655px; + } + } + + &__title { + --move-from: translateY(-50%); + + padding: 20px 0; + font-size: 45px; + text-align: center; + animation: hero-title $anim-timming 0.1s both; + + @include title-text(700, $all-black); + + @include on-tablet { + --move-from: translateX(-90%); + + padding: 0 0 38px; + font-size: 54px; + text-align: start; + } + + @include on-desktop { + padding: 0 0 90px; + font-size: 72px; + } + } + + &__button { + position: relative; + + display: flex; + align-items: center; + justify-self: center; + + box-sizing: border-box; + width: 280px; + height: 50px; + border: 1px solid $green; + + text-decoration: none; + + animation: hero-button $anim-timming 0.1s both; + + &::after { + content: ''; + + position: absolute; + top: 0; + right: 0; + + box-sizing: border-box; + width: 50px; + height: 100%; + + background-color: $green; + background-image: url(/src/images/icons/arrow-icon.svg); + background-repeat: no-repeat; + background-position: center center; + + transition: $anim-timming; + animation: hero-button-decore $anim-timming 0.1s both; + + @include on-tablet { + width: 70px; + } + } + + @include on-tablet { + justify-self: start; + width: 270px; + height: 70px; + } + + @include on-desktop { + justify-self: end; + } + + &:hover::after { + background-color: $green-hover; + } + } + + &__button-text { + @include second-text(500, $all-black); + + padding-left: 80px; + + @include on-tablet { + padding-left: 68px; + } + } + + &__decore { + @include second-text(700, $eye-grey); + + cursor: pointer; + + position: relative; + transform: rotate(-90deg); + + display: none; + + width: fit-content; + + font-size: 14px; + text-decoration: none; + + transition: 0.3s; + + &::before { + --scale-x: 1; + + content: ''; + + position: absolute; + right: 150%; + bottom: 50%; + transform-origin: right; + + width: 70px; + height: 2px; + + background-color: $green; + + transition: transform, 0.3s; + animation: hero-decore $anim-timming 0.1s forwards; + } + + @include on-desktop { + display: block; + } + + &:hover { + color: $all-black; + } + + &:hover::before { + transform: scaleX(0); + } + } +} diff --git a/src/styles/lection.scss b/src/styles/lection.scss new file mode 100644 index 000000000..b473f0187 --- /dev/null +++ b/src/styles/lection.scss @@ -0,0 +1,125 @@ +.lection { + position: relative; + z-index: 1; + bottom: 0; + + justify-self: center; + + aspect-ratio: 16/9; + width: 100%; + max-width: 700px; + min-height: 210px; + max-height: 390px; + margin-bottom: 180px; + + background-image: url(/src/images/actual/actual-lection.jpg); + background-repeat: no-repeat; + background-position: center bottom; + background-size: cover; + + @include on-tablet { + margin-bottom: 300px; + } + + @include on-desktop { + max-width: none; + max-height: 550px; + margin-bottom: 300px; + background-attachment: fixed; + } + + &__content { + position: absolute; + z-index: 2; + bottom: 0%; + left: 50%; + transform: translate(-50%, 50%); + + box-sizing: border-box; + width: 80%; + min-width: 280px; + min-height: 140px; + padding: 20px 0; + border-bottom: 2px solid #1a5a4c40; + + background-color: white; + + @include on-tablet { + max-width: 570px; + padding: 45px 55px; + } + + @include on-tablet { + max-width: 570px; + padding: 50px 100px; + } + } + + &__text { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: space-around; + + @include on-tablet { + justify-content: space-between; + max-width: 380px; + } + + @include on-desktop { + max-width: 340px; + } + } + + &__eye-brown { + @include second-text(500, $eye-grey); + + font-size: 16px; + line-height: 100%; + text-transform: uppercase; + } + + &__data { + @include second-text(700, $green); + } + + // сделаем тут закрашивание с лева направо текстом + &__title { + @include title-text( + 400, + transparent + ); // Текст становится прозрачным, делаем текст чеерез фоновое изображение далее + + position: relative; + + display: inline-block; // делаем инлайн блок, чтобы коррктно расположить градиент на ней + + padding: 20px 0; + + font-size: 28px; + text-align: center; + text-decoration: none; + + background-image: linear-gradient( + 90deg, + #1a5a4c 0%, + #2e7d6d 15%, + #4cb39a 30%, + #000 55% + ); + background-position: 100% 0; // смещаем фон влево, чтобы исходно был черный цвет + background-clip: text; // делаем фоновое изображение внутри букв + background-size: 200% 100%; // делаем его больше по ширинее фон, + + transition: background-position $anim-timming ease; + + @include on-tablet { + font-size: 36px; + text-align: start; + } + + &:hover { + background-position: 0 0; // при наведение передвигаем фон вправо, на зеленый + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1d7f61390 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,64 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; + +@import 'utils/mixins'; +@import 'utils/vars'; +@import 'animation'; +@import 'header'; +@import 'burger-menu'; +@import 'hero'; +@import 'actual'; +@import 'card'; +@import 'lection'; +@import 'gallery'; +@import 'subscribe'; +@import 'footer'; + +html { + scroll-behavior: smooth; + + &:has(.burger-menu:target) { + overflow: hidden; + } +} + +h1, +h2, +h3, +p, +ul { + margin: 0; + padding: 0; +} + +main { + position: relative; + z-index: 1; +} body { - background: $c-gray; + margin: 0; + background: white; +} + +.container { + box-sizing: border-box; + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 35px; + } + + @include on-desktop { + max-width: 1280px; + padding-inline: 55px; + } + + &--swiper { + padding-inline: 0; + + @include on-desktop { + max-width: 1280px; + padding-inline: 55px; + } + } } diff --git a/src/styles/subscribe.scss b/src/styles/subscribe.scss new file mode 100644 index 000000000..35f4822d0 --- /dev/null +++ b/src/styles/subscribe.scss @@ -0,0 +1,113 @@ +.subscribe { + position: relative; + + width: 100%; + min-height: 380px; + + background-image: url(/src/images/subscribe/subscribe.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + &::before { + content: ''; + + position: absolute; + z-index: 1; + + width: 100%; + height: 100%; + + opacity: 0.75; + background-color: $all-black; + } + + @include on-desktop { + min-height: 550px; + } + &__content { + position: relative; + z-index: 3; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + box-sizing: border-box; + height: 100%; + padding: 88px 0; + + text-align: center; + + @include on-tablet { + padding: 82px 0; + } + + @include on-desktop { + padding: 162px 0; + } + } + &__title { + @include title-text(700, white); + + padding-bottom: 20px; + font-size: 36px; + } + + &__description { + @include second-text(400, white); + + font-size: 18px; + } + + &__input { + display: flex; + flex-direction: row; + + width: 280px; + height: 50px; + padding-top: 50px; + + @include on-tablet { + gap: 16px; + width: 460px; + height: 70px; + } + } + + &__field { + @include title-text(400, $eye-grey); + + box-sizing: border-box; + width: 230px; + height: 100%; + padding-left: 24px; + border: none; + + &:focus { + color: $all-black; + outline: none; + } + + @include on-tablet { + width: 374px; + } + } + + &__button { + width: 50px; + height: 100%; + border: none; + + background-color: $red; + background-image: url(/src/images/icons/arrow-icon-black.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + width: 70px; + } + + @include hover(background-color, $red-hover); + } +} 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..8c1b299f2 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,63 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-s-desktop { + @media (min-width: $s-desktop-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $anim-timming; &:hover { #{$_property}: $_toValue; + cursor: pointer; } } + +@mixin grid { + --columns: 2; + --columns-width: 130px; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + margin-inline: auto; + + @include on-tablet { + --columns: 6; + --columns-width: 90px; + + column-gap: 30px; + } + + @include on-desktop { + --columns-width: 70px; + --columns: 12; + } +} + +@mixin title-text($_style, $_color) { + font-family: Montserrat, sans-serif; + font-weight: #{$_style}; + line-height: 100%; + color: #{$_color}; + letter-spacing: 0; +} + +@mixin second-text($_style, $_color) { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: #{$_style}; + line-height: 150%; + color: #{$_color}; + letter-spacing: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..753770556 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ $c-gray: #eee; +$all-black: #000; +$green: #1a5a4c; +$green-hover: #113c32; +$red: #f14a27; +$red-hover: #bc2f14; +$eye-grey: #687480; +$desc-grey: #4e4e4e; +$link-black: #0f0e08; +$anim-timming: 0.6s; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$s-desktop-min-width: 1024px;