diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 000000000..4176a9e04 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,30 @@ +# Museum Project Guidelines + +## Code Style +- **BEM Methodology**: Use `__` for elements, `--` for modifiers. Enforced by `.bemlintrc.json`. +- **SCSS Organization**: Follow [src/styles/main.scss](src/styles/main.scss) import order: utils → fonts → typography → blocks. +- **Formatting**: 2-space indentation, 80-char width, trailing commas. Auto-format with `npm run format`. +- **Linting**: Run `npm run lint` before commits. Includes stylelint, prettier, and HTML linting. + +## Architecture +- **Build Tool**: Vite (layoutVite project type). +- **Styling**: SCSS-first with responsive mixins. CSS handles interactions (e.g., menu toggle via `:target`). +- **JavaScript**: Minimal; add custom scripts to [src/scripts/lib/](src/scripts/lib/). +- **Structure**: Static HTML site with semantic markup. + +## Build and Test +- **Start Dev Server**: `npm start` +- **Build Production**: `npm run build` +- **Test Suite**: `npm test` (includes linting + Cypress tests) +- **Deploy**: `npm run deploy` (GitHub Pages) + +## Conventions +- **Responsive Design**: Use `@mixin on-tablet()` (≥640px) and `@mixin on-desktop()` (≥1280px). Design width: 1440px. +- **Transitions**: All hover effects use 0.3s duration via `@mixin hover()`. +- **Grid System**: `@mixin page-grid()` for 2/6/12 column layouts. +- **Padding**: `@mixin content-padding` for responsive spacing (20px/34px/55px). +- **Menu Navigation**: CSS-only toggle using `:target` pseudo-class. +- **Checklist Compliance**: Ensure smooth scroll, hover cursors, form validation, no horizontal scroll. + +See [README.md](README.md) and [checklist.md](checklist.md) for detailed requirements. +d:\projects\Museum\.github\copilot-instructions.md \ No newline at end of file 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..1ebd00e6d 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://SashaGlazko.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..5a4a03672 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,303 @@ + - - + + + + + - Title + Museum + - -

Hello Mate Academy

+ + +
+ +
+ + +
+ header-bg +
+
+

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

+
+
ПОДІЇ
+
+ КВИТКИ +
+
+
+
+
+ + +
+
+
+

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

+
+ + + + actual img + +
+
+
ВИСТАВКА
+
26.08-29.11.2019
+
+

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

+

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

+ +
+
+
+ + + + actual img + +
+
+
ВИСТАВКА
+
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/bg-subscribe.png b/src/images/bg-subscribe.png new file mode 100644 index 000000000..9f97df417 Binary files /dev/null and b/src/images/bg-subscribe.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..8ccf7abc5 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icons/burger-menu-icon.svg b/src/images/icons/burger-menu-icon.svg new file mode 100644 index 000000000..4808d19e1 --- /dev/null +++ b/src/images/icons/burger-menu-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close-w-icon.svg b/src/images/icons/close-w-icon.svg new file mode 100644 index 000000000..f43a579a4 --- /dev/null +++ b/src/images/icons/close-w-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-letter-logo.svg b/src/images/icons/facebook-letter-logo.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/icons/facebook-letter-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon_arrow-up.svg b/src/images/icons/icon_arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icons/icon_arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram-letter-logo.svg b/src/images/icons/instagram-letter-logo.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/icons/instagram-letter-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/title.svg b/src/images/icons/title.svg new file mode 100644 index 000000000..afda68b0f --- /dev/null +++ b/src/images/icons/title.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/img-gooses.png b/src/images/img-gooses.png new file mode 100644 index 000000000..d7af904de Binary files /dev/null and b/src/images/img-gooses.png differ diff --git a/src/images/img-rectangle-2.1.png b/src/images/img-rectangle-2.1.png new file mode 100644 index 000000000..55faaacd9 Binary files /dev/null and b/src/images/img-rectangle-2.1.png differ diff --git a/src/images/img-rectangle-2.3.png b/src/images/img-rectangle-2.3.png new file mode 100644 index 000000000..a8b247f2c Binary files /dev/null and b/src/images/img-rectangle-2.3.png differ diff --git a/src/images/img-rectangle-2.4.png b/src/images/img-rectangle-2.4.png new file mode 100644 index 000000000..4beb9df7d Binary files /dev/null and b/src/images/img-rectangle-2.4.png differ diff --git a/src/images/img-rectangle-4.1.png b/src/images/img-rectangle-4.1.png new file mode 100644 index 000000000..0a2a0b5f7 Binary files /dev/null and b/src/images/img-rectangle-4.1.png differ diff --git a/src/images/img-rectangle-4.3.png b/src/images/img-rectangle-4.3.png new file mode 100644 index 000000000..47f22882d Binary files /dev/null and b/src/images/img-rectangle-4.3.png differ diff --git a/src/images/img-rectangle-4.4.png b/src/images/img-rectangle-4.4.png new file mode 100644 index 000000000..1b66c0471 Binary files /dev/null and b/src/images/img-rectangle-4.4.png differ diff --git a/src/images/img-sea.png b/src/images/img-sea.png new file mode 100644 index 000000000..15e315a0e Binary files /dev/null and b/src/images/img-sea.png differ diff --git a/src/images/img-summer.png b/src/images/img-summer.png new file mode 100644 index 000000000..c18cd18c7 Binary files /dev/null and b/src/images/img-summer.png differ diff --git a/src/images/img-sunset.png b/src/images/img-sunset.png new file mode 100644 index 000000000..a88113307 Binary files /dev/null and b/src/images/img-sunset.png differ diff --git a/src/images/img-winter.png b/src/images/img-winter.png new file mode 100644 index 000000000..da9a12583 Binary files /dev/null and b/src/images/img-winter.png differ diff --git a/src/images/img-women.png b/src/images/img-women.png new file mode 100644 index 000000000..e39b26e23 Binary files /dev/null and b/src/images/img-women.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..d49e2fd6e 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,27 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const track = document.querySelector('.gallery__track'); + const slides = document.querySelectorAll('.gallery__photo'); + const dots = document.querySelectorAll('.gallery__dot'); + + let currentSlide = 0; + + setInterval(() => { + currentSlide++; + + if (currentSlide >= slides.length) { + currentSlide = 0; + } + + const slideWidth = slides[0].clientWidth; + + track.scrollTo({ + left: slideWidth * currentSlide, + behavior: 'smooth', + }); + + dots.forEach((d) => d.classList.remove('active')); + dots[currentSlide].classList.add('active'); + }, 3000); +}); diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..4ba2ddae9 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,56 @@ +.button { + @include hover(transform, scale(1.05)); + + @include on-tablet { + height: $button-big-size; + } + + &--header { + @include on-tablet { + max-width: 340px; + } + + @include on-desktop { + width: 270px; + } + } + + &__link { + display: flex; + justify-content: center; + align-items: center; + padding-right: $button-size; + position: relative; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0%; + text-decoration: none; + color: $c-text; + border: 1px solid $c-green; + height: $button-size; + + @include on-tablet { + height: $button-big-size; + padding-right: $button-big-size; + } + + &::after { + content: '>'; + display: flex; + justify-content: center; + align-items: center; + color: $c-light-gray; + position: absolute; + right: 0; + width: $button-size; + height: $button-size; + background-color: $c-green; + + @include on-tablet { + height: $button-big-size; + width: $button-big-size; + } + } + } +} diff --git a/src/styles/blocks/current-events.scss b/src/styles/blocks/current-events.scss new file mode 100644 index 000000000..a4b6d0bca --- /dev/null +++ b/src/styles/blocks/current-events.scss @@ -0,0 +1,19 @@ +.current-events { + display: grid; + row-gap: 40px; + + @include on-tablet { + row-gap: 48px; + } + + @include on-desktop { + row-gap: 56px; + } + + &__content { + @include content-padding; + + display: grid; + row-gap: 60px; + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..baf025331 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,99 @@ +.event { + @include page-grid; + + row-gap: 16px; + + @include on-tablet { + row-gap: 40px; + } + + &__picture { + grid-column: 1/-1; + + @include on-desktop { + grid-column: 1/8; + } + } + + &__photo { + width: 100%; + + object-fit: cover; + + @include hover(transform, scale(1.05)); + } + + &__info { + align-content: center; + display: grid; + row-gap: 10px; + + grid-column: 1/-1; + + @include on-tablet { + row-gap: 30px; + grid-column: 1/5; + } + + @include on-desktop { + grid-column: 9/-1; + } + } + + &__time { + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + justify-content: flex-start; + gap: 24px; + align-items: center; + } + } + + &__exibition { + font-weight: 500; + font-size: 16px; + color: $c-dark-gray; + } + + &__date { + color: $c-green; + font-size: 16px; + line-height: 150%; + } + + &__title { + margin: 0; + color: $c-text; + position: relative; + font-weight: 400; + font-size: 28px; + line-height: 100%; + width: fit-content; + letter-spacing: 0%; + + &::after { + content: ''; + position: absolute; + width: 10px; + height: 10px; + right: -20px; + bottom: 5px; + background: $c-light-gray; + margin-top: 16px; + background-color: $c-orange; + } + } + + &__description { + margin: 0; + font-weight: 300; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + + color: $c-dark-gray; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9424d6688 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,167 @@ +.footer { + max-width: 100%; + &__content { + @include content-padding; + + @include page-grid; + } + + &__content > :not(.footer__go-to-top) { + margin-bottom: 40px; + } + + &__top { + display: flex; + grid-column: 1/-1; + justify-content: space-between; + align-items: center; + + @include on-tablet { + grid-column: span 1; + row-gap: 62px; + justify-content: flex-start; + flex-direction: column; + } + } + + &__title { + @include hover(transform, scale(1.05)); + } + + &__icons { + display: flex; + gap: 20px; + } + + &__when-work { + display: flex; + flex-direction: column; + row-gap: 20px; + + grid-column: span 1; + + @include on-tablet { + grid-column: 2/4; + } + + @include on-desktop { + grid-column: 3/5; + } + } + + &__weekends { + font-weight: 400; + } + + &__contacts { + grid-column: 2/-1; + + @include on-tablet { + grid-column: 4/6; + } + + @include on-desktop { + grid-column: 5/7; + } + + display: flex; + flex-direction: column; + row-gap: 20px; + + font-weight: 400; + font-size: 14px; + letter-spacing: 0%; + } + + &__contacts-text { + line-height: 141%; + } + + &__address { + line-height: 150%; + @media (max-width: 350px) { + font-size: 12px; + } + } + + &__link { + color: $c-text; + text-decoration: none; + transition: all 0.3s; + + &:hover { + font-weight: 700; + } + } + + &__go-to-top { + @include round(50px); + + @include hover(transform, scale(1.05)); + + grid-column: 2/-1; + justify-self: center; + + display: flex; + justify-content: center; + align-items: center; + border: 1px solid $c-green; + + @include on-tablet { + display: none; + } + } + + &__line { + grid-column: 1/-1; + + height: 1px; + background-color: $c-green; + margin-top: 20px; + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 7/8; + width: 1px; + height: 100%; + margin: 0; + } + } + + &__nav { + margin: 0; + padding: 0; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 8/12; + } + } + + &__nav-item { + color: $c-text; + } + + &__made-by { + grid-column: 1/-1; + + font-weight: 300; + font-size: 12px; + line-height: 141%; + letter-spacing: 0%; + text-align: center; + display: flex; + flex-direction: column; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..66bfc67af --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,103 @@ +.gallery { + &__content { + @include content-padding; + + position: relative; + } + + /* TRACK (slider container) */ + + &__track { + display: flex; + gap: 16px; + + overflow: hidden; + scroll-behavior: smooth; + + margin-top: 40px; + + @include on-desktop { + @include page-grid; + + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 24px; + + overflow: visible; + } + } + + /* SLIDES */ + + &__photo { + max-width: 100%; + flex-shrink: 0; + + @include on-desktop { + min-width: auto; + } + } + + /* desktop layout */ + + &__photo--narrow { + @include on-desktop { + grid-column: span 4; + } + } + + &__photo--wide { + @include on-desktop { + grid-column: span 8; + } + } + + /* IMAGE */ + + &__img { + width: 100%; + height: 100%; + display: block; + + @include on-tablet { + max-height: 600px; + max-width: 700px; + } + + @include on-desktop { + max-width: 900px; + object-fit: cover; + + @include hover(transform, scale(1.05)); + } + } + + /* DOTS */ + + &__dots { + display: flex; + justify-content: center; + gap: 8px; + + margin-top: 20px; + + @include on-desktop { + display: none; + } + } + + &__dot { + width: 10px; + height: 10px; + + border-radius: 50%; + border: none; + + background: #d9d9d9; + cursor: pointer; + + &.active { + background: #000; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..421183f2d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,133 @@ +.header { + &__content > :not(.header__cover, .header__icon) { + @include content-padding; + } + + &__content { + @include page-grid; + + row-gap: 20px; + position: relative; + } + + &__logo { + position: absolute; + padding: 10px; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + display: flex; + justify-self: center; + + @include on-tablet { + grid-column: 4/6; + } + + @include on-desktop { + grid-column: 6/9; + } + } + + &__cover { + grid-row: 1; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/-1; + } + + @include on-desktop { + grid-column: 6/-1; + } + } + + &__photo { + grid-row: 1; + + object-fit: cover; + object-position: center; + grid-column: 1/-1; + width: 100%; + max-height: 700px; + } + + &__icon { + position: absolute; + top: 40px; + left: 20px; + + @include on-tablet { + left: 38px; + } + + @include on-desktop { + left: 56px; + } + } + + &__left { + display: grid; + row-gap: 20px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/6; + + &-cover { + display: flex; + justify-content: space-between; + } + } + } + + &__title { + margin: 0; + font-size: 45px; + text-align: center; + font-weight: 700; + line-height: 120%; + letter-spacing: 0%; + + @include on-tablet { + font-size: 54px; + text-align: left; + margin-top: 128px; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__actions { + position: relative; + top: 40px; + display: none; + color: $c-dark-gray; + font-style: 14px; + transform: rotate(-90deg); + transform-origin: 30px 30px; + + @include on-desktop { + display: flex; + } + + &::after { + content: ''; + display: block; + position: absolute; + right: 150px; + top: 8px; + width: 1px; + height: 70px; + background-color: $c-green; + transform: rotate(-90deg); + transform-origin: top; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..0dccd395e --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,30 @@ +.icon { + display: flex; + height: $image-size; + width: $image-size; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + + @include hover(transform, scale(1.05)); + + &--menu { + background-image: url(/src/images/icons/burger-menu-icon.svg); + } + + &--close { + background-image: url(/src/images/icons/close-w-icon.svg); + } + + &--inst { + background-image: url(/src/images/icons/instagram-letter-logo.svg); + } + + &--facebook { + background-image: url(/src/images/icons/facebook-letter-logo.svg); + } + + &--arrow { + background-image: url(/src/images/icons/icon_arrow-up.svg); + } +} diff --git a/src/styles/blocks/layout-main.scss b/src/styles/blocks/layout-main.scss new file mode 100644 index 000000000..7171847b6 --- /dev/null +++ b/src/styles/blocks/layout-main.scss @@ -0,0 +1,12 @@ +.main { + display: grid; + row-gap: 100px; + + @include on-desktop { + row-gap: 200px; + } + + & > :not(.lecture) { + row-gap: 100px; + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..21b7d88f7 --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,88 @@ +.lecture { + &__content > :not(.lecture__photo, .lecture__info) { + @include content-padding; + } + @include on-tablet { + &__content { + @include content-padding; + } + } + + &__content { + @include on-tablet { + row-gap: 48px; + } + + @include on-desktop { + row-gap: 56px; + } + } + + &__photo { + width: 100%; + aspect-ratio: 16/9; + + background-image: url('/src/images/img-sunset.png'); + background-size: cover; + background-position: center; + } + + &__info { + margin-inline: 20px; + padding: 24px 0; + + position: relative; + display: grid; + bottom: 64px; + + background-color: $c-gray; + grid-column: 1/-1; + justify-self: center; + text-align: center; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); + gap: 24px; + + @include on-tablet { + padding: 34px; + } + } + + &__time { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + + @include on-tablet { + gap: 140px; + } + } + + &__text { + color: $c-dark-gray; + font-weight: 500; + } + + &__date { + color: $c-green; + font-size: 16px; + line-height: 150%; + } + + &__title { + margin: 0; + font-weight: 400; + font-size: 28px; + text-align: center; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + width: 300px; + } + + @include on-desktop { + width: 400px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..75d9c333f --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,98 @@ +.menu { + background: rgba(0, 0, 0, 0.5); + pointer-events: none; + + &__content { + @include content-padding; + + @include page-grid; + + padding-block: 40px; + min-width: 100%; + background: $c-green; + + gap: 24px; + + @include on-tablet { + flex-direction: row; + } + } + + &__top { + grid-column: 1/-1; + + display: flex; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/6; + } + } + + &__container { + display: grid; + gap: 24px; + grid-column: 1/-1; + + @include on-tablet { + grid-auto-flow: column; + column-gap: 38px; + + grid-column: 4/-1; + } + + @include on-desktop { + column-gap: 102px; + grid-column: 8/12; + } + } + + &__line { + height: 1px; + background: $c-white; + + @include on-tablet { + height: 100%; + width: 1px; + transform-origin: center; + } + } + + &__schedule { + color: $c-white; + display: grid; + grid-auto-flow: row; + gap: 16px; + + @include on-tablet { + grid-auto-flow: column; + column-gap: 38px; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__day { + font-weight: 400; + font-size: 14px; + } + + &__weekend { + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + + &__day { + font-weight: 400; + font-size: 14px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..be103132d --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,67 @@ +.nav { + margin: 0 auto; + &__list { + display: flex; + justify-content: space-between; + gap: 20px; + margin: 0; + list-style: none; + + &--footer { + padding: 0; + justify-content: center; + @include on-tablet { + justify-content: space-between; + } + } + } + + &__item { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + &--footer-2 { + position: relative; + left: -140px; + } + } + } + + &__link { + color: $c-white; + text-decoration: none; + font-weight: 500; + line-height: 100%; + letter-spacing: 0%; + position: relative; + + &::after { + content: ''; + position: absolute; + display: block; + bottom: -8px; + right: 0; + left: 0; + height: 1px; + background-color: $c-white; + transition: all 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + content: ''; + transform: scale(1); + } + + &--footer { + color: $c-text; + + &::after { + background-color: $c-text; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..9bb8fe161 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,48 @@ +.page { + font-family: Montserrat, sans-serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; + line-height: 100%; + letter-spacing: 0%; + scroll-behavior: smooth; + + &__body { + background: $c-gray; + margin: 0; + } + + &__menu { + position: fixed; + left: 0; + top: 0; + right: 0; + min-height: 100vh; + opacity: 0; + pointer-events: none; + transform: translateY(-100%); + transition: all 0.3s; + + &:target { + opacity: 1; + pointer-events: all; + transform: translateY(0); + } + } + + &__main { + margin-top: 70px; + + @include on-tablet { + margin-top: 88px; + } + } + + &__footer { + margin-top: 50px; + } +} + +* { + box-sizing: border-box; +} diff --git a/src/styles/blocks/scedule.scss b/src/styles/blocks/scedule.scss new file mode 100644 index 000000000..0eaee500c --- /dev/null +++ b/src/styles/blocks/scedule.scss @@ -0,0 +1,19 @@ +.scedule { + display: flex; + flex-direction: column; + row-gap: 20px; + + &__text { + font-weight: 400; + font-size: 14px; + line-height: 141%; + } + + &__plan { + min-width: 150px; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0%; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..ed693c1e2 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,12 @@ +.section-title { + font-weight: 700; + font-size: 36px; + line-height: 100%; + color: $c-text; + grid-column: 1/-1; + margin: 0 auto; + @include on-tablet { + font-size: 48px; + margin: 0; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..ee37ba97e --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,132 @@ +.subscribe { + background-image: url(/src/images/bg-subscribe.png); + background-size: cover; + background-position: center; + width: 100%; + height: 100%; + background-repeat: no-repeat; + background-color: rgba(0, 0, 0, 0.75); + + &__content { + @include content-padding; + + @include page-grid; + + padding-block: 88px; + color: $c-white; + gap: 50px; + + @include on-tablet { + padding-block: 105px; + gap: 64px; + } + + @include on-desktop { + gap: 72px; + } + } + + &__info { + grid-column: 1/-1; + display: flex; + flex-direction: column; + gap: 20px; + justify-content: center; + } + + &__title { + margin: 0; + font-size: 36px; + line-height: 100%; + letter-spacing: 0%; + text-align: center; + + @include on-tablet { + font-size: 48px; + } + } + + &__description { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0%; + text-align: center; + + @include on-tablet { + font-size: 18px; + } + } + + &__button { + grid-column: 1/-1; + width: 100%; + display: flex; + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 4/10; + } + + @include hover(transform, scale(1.05)); + } + + &__link { + height: $button-size; + box-sizing: border-box; + padding-left: 24px; + width: 100%; + outline: none; + + @include on-tablet { + height: $button-big-size; + } + + &::placeholder { + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0%; + } + + &:focus { + padding-left: 24px; + } + } + + &__send { + width: $button-size; + border: 0; + background-color: $c-orange; + + @include on-tablet { + width: $button-big-size; + } + + & :hover { + animation: move 0.3s; + } + } + + &__letter { + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } +} + +@keyframes move { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..fb0871f22 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,18 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/button'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/layout-main'; +@import 'blocks/section-title'; +@import 'blocks/current-events'; +@import 'blocks/event'; +@import 'blocks/lecture'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/scedule'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..f0050bbde 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,57 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet() { + @media (min-width: $tablet-size) { + @content; + } +} + +@mixin on-desktop() { + @media (min-width: $desktop-size) { + @content; + } +} + +@mixin content-padding { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + max-width: 1440px; + margin: 0 auto; + } +} + +.container { + @include content-padding; +} + +@mixin page-grid() { + --size: 2; + + display: grid; + grid-template-columns: repeat(var(--size), 1fr); + column-gap: 20px; + + @include on-tablet { + --size: 6; + + column-gap: 30px; + } + + @include on-desktop { + --size: 12; + } +} + +@mixin round($size) { + width: $size; + height: $size; + border-radius: 50%; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..ac8cdb357 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ +$c-white: #fff; $c-gray: #eee; +$c-light-gray: #d7dde3; +$c-dark-gray: #687480; +$c-text: #0f0e08; +$c-green: #1a5a4c; +$c-orange: #f14a27; +$tablet-size: 768px; +$desktop-size: 1280px; +$image-size: 24px; +$button-size: 50px; +$button-big-size: 70px;