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..55ee9cff5 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,54 @@ # Museum landing page -Implement landing page according to [Figma design](https://www.figma.com/file/cRBCqE06cDrY3s4jX7h3iY/%D0%9D%D0%90%D0%9C%D0%A3-(Edit)?node-id=0%3A1) - Use BEM and SCSS - -Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm), [Montserrat](https://fonts.google.com/specimen/Montserrat?query=mon) - -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) - -1. Implement the header with hamburger menu. -1. Implement `Художній Музей` block. -1. Implement `Актуальні події` block with two similar blocks `Йду і повертаюсь`, `І спогади і мрії`. -1. Implement `Від класицизму до романтизму` block. -1. Implement `Галерея` block and slider. -1. Implement `Підписка` block. -1. Implement footer. - -## Checklist for preparing a portfolio project for HR review - -1. Don’t forget to add a title for the whole web page (it could be the name of your landing) -2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The buttons "exhibitions" and "tickets" should lead to the block with current events -13. The button "about us" should lead to the email digest -14. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab -15. Pictures in the gallery and exhibitions sections should increase on hover -16. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) - - -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. + +Landing Page Project + +Demo +You can view a live demo of the project here: + +[DEMO LINK](https://Vitaligna.github.io/Museum/) + +Project Description + +This project is a responsive landing page built using HTML and CSS (SCSS). +The main goal of the project is to practice modern frontend layout techniques, semantic markup and clean project structure. + +The project was created as part of the Mate Academy Frontend course. + +The landing page includes several sections such as: + +- Header with navigation; +- Hero section; +- Content sections; +- Images and visual elements; +- Footer with additional information. + +The layout is responsive and works correctly on different screen sizes. + +Technologies used: + +- HTML5 – semantic markup; +- SCSS (Sass) – styling and modular CSS structure; +- Parcel – project bundler; +- ESLint & Stylelint – code quality and linting. + +Project structure: + +src/index.html (Main HTML file) +src/styles/ (SCSS styles) +src/images/ (Project images) + +Installation and setup: + +1. Clone the repository + git clone https://github.com/vitaligna/Museum.git + +2. Go to the project folder + cd html-css-landing-pages + +3. Install dependencies + npm install + +4. Run the project locally + npm start + +Parcel will start a development server and open the project in your browser. diff --git a/index.html b/index.html index d339e6856..441a823f5 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,418 @@ - + - - Title + + Museum + + - -

Hello Mate Academy

- + +
+
+ + + +
+ +
+
+
+ +
+

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

+ +
+
+

ПОДІЇ

+
+
+ + + КВИТКИ +
+ +
+
+
+ + + +
+
+
+

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

+ +
+
+
+ Landscape_with_sea_view +
+ +
+
+

ВИСТАВКА

+ +

26.08-29.11.2019

+
+ +
+

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

+ +
+
+ +

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

+
+
+ +
+
+ Girl_with_a_peacock +
+ +
+
+

ВИСТАВКА

+ +

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/fonts/IBMPlexSans-Bold.ttf b/src/fonts/IBMPlexSans-Bold.ttf new file mode 100644 index 000000000..258c10a96 Binary files /dev/null and b/src/fonts/IBMPlexSans-Bold.ttf differ diff --git a/src/fonts/IBMPlexSans-BoldItalic.ttf b/src/fonts/IBMPlexSans-BoldItalic.ttf new file mode 100644 index 000000000..fabdca044 Binary files /dev/null and b/src/fonts/IBMPlexSans-BoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans-ExtraLight.ttf b/src/fonts/IBMPlexSans-ExtraLight.ttf new file mode 100644 index 000000000..46f52c481 Binary files /dev/null and b/src/fonts/IBMPlexSans-ExtraLight.ttf differ diff --git a/src/fonts/IBMPlexSans-ExtraLightItalic.ttf b/src/fonts/IBMPlexSans-ExtraLightItalic.ttf new file mode 100644 index 000000000..6fac7fa38 Binary files /dev/null and b/src/fonts/IBMPlexSans-ExtraLightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans-Italic.ttf b/src/fonts/IBMPlexSans-Italic.ttf new file mode 100644 index 000000000..bf4395636 Binary files /dev/null and b/src/fonts/IBMPlexSans-Italic.ttf differ diff --git a/src/fonts/IBMPlexSans-Light.ttf b/src/fonts/IBMPlexSans-Light.ttf new file mode 100644 index 000000000..56e7db7dc Binary files /dev/null and b/src/fonts/IBMPlexSans-Light.ttf differ diff --git a/src/fonts/IBMPlexSans-LightItalic.ttf b/src/fonts/IBMPlexSans-LightItalic.ttf new file mode 100644 index 000000000..1e2e86af8 Binary files /dev/null and b/src/fonts/IBMPlexSans-LightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans-Medium.ttf b/src/fonts/IBMPlexSans-Medium.ttf new file mode 100644 index 000000000..fb75072d8 Binary files /dev/null and b/src/fonts/IBMPlexSans-Medium.ttf differ diff --git a/src/fonts/IBMPlexSans-MediumItalic.ttf b/src/fonts/IBMPlexSans-MediumItalic.ttf new file mode 100644 index 000000000..1b059bebd Binary files /dev/null and b/src/fonts/IBMPlexSans-MediumItalic.ttf differ diff --git a/src/fonts/IBMPlexSans-Regular.ttf b/src/fonts/IBMPlexSans-Regular.ttf new file mode 100644 index 000000000..5387ad48c Binary files /dev/null and b/src/fonts/IBMPlexSans-Regular.ttf differ diff --git a/src/fonts/IBMPlexSans-SemiBold.ttf b/src/fonts/IBMPlexSans-SemiBold.ttf new file mode 100644 index 000000000..a63f1c562 Binary files /dev/null and b/src/fonts/IBMPlexSans-SemiBold.ttf differ diff --git a/src/fonts/IBMPlexSans-SemiBoldItalic.ttf b/src/fonts/IBMPlexSans-SemiBoldItalic.ttf new file mode 100644 index 000000000..981d51425 Binary files /dev/null and b/src/fonts/IBMPlexSans-SemiBoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans-Thin.ttf b/src/fonts/IBMPlexSans-Thin.ttf new file mode 100644 index 000000000..918d4a0c4 Binary files /dev/null and b/src/fonts/IBMPlexSans-Thin.ttf differ diff --git a/src/fonts/IBMPlexSans-ThinItalic.ttf b/src/fonts/IBMPlexSans-ThinItalic.ttf new file mode 100644 index 000000000..f7d1dabae Binary files /dev/null and b/src/fonts/IBMPlexSans-ThinItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Bold.ttf b/src/fonts/IBMPlexSans_Condensed-Bold.ttf new file mode 100644 index 000000000..064ffb443 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Bold.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-BoldItalic.ttf b/src/fonts/IBMPlexSans_Condensed-BoldItalic.ttf new file mode 100644 index 000000000..924b914f3 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-BoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-ExtraLight.ttf b/src/fonts/IBMPlexSans_Condensed-ExtraLight.ttf new file mode 100644 index 000000000..cdf06a1ac Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-ExtraLight.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-ExtraLightItalic.ttf b/src/fonts/IBMPlexSans_Condensed-ExtraLightItalic.ttf new file mode 100644 index 000000000..9b9f6cef6 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-ExtraLightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Italic.ttf b/src/fonts/IBMPlexSans_Condensed-Italic.ttf new file mode 100644 index 000000000..03de618df Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Italic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Light.ttf b/src/fonts/IBMPlexSans_Condensed-Light.ttf new file mode 100644 index 000000000..f8f53b9d2 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Light.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-LightItalic.ttf b/src/fonts/IBMPlexSans_Condensed-LightItalic.ttf new file mode 100644 index 000000000..b0cd1b273 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-LightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Medium.ttf b/src/fonts/IBMPlexSans_Condensed-Medium.ttf new file mode 100644 index 000000000..7ae38bab0 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Medium.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-MediumItalic.ttf b/src/fonts/IBMPlexSans_Condensed-MediumItalic.ttf new file mode 100644 index 000000000..0a09a4fa0 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-MediumItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Regular.ttf b/src/fonts/IBMPlexSans_Condensed-Regular.ttf new file mode 100644 index 000000000..fd7f8a04d Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Regular.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-SemiBold.ttf b/src/fonts/IBMPlexSans_Condensed-SemiBold.ttf new file mode 100644 index 000000000..a715d679a Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-SemiBold.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-SemiBoldItalic.ttf b/src/fonts/IBMPlexSans_Condensed-SemiBoldItalic.ttf new file mode 100644 index 000000000..1ca118079 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-SemiBoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-Thin.ttf b/src/fonts/IBMPlexSans_Condensed-Thin.ttf new file mode 100644 index 000000000..f2bce483b Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-Thin.ttf differ diff --git a/src/fonts/IBMPlexSans_Condensed-ThinItalic.ttf b/src/fonts/IBMPlexSans_Condensed-ThinItalic.ttf new file mode 100644 index 000000000..b2ff4b1f5 Binary files /dev/null and b/src/fonts/IBMPlexSans_Condensed-ThinItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Bold.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Bold.ttf new file mode 100644 index 000000000..e6f743978 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Bold.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-BoldItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-BoldItalic.ttf new file mode 100644 index 000000000..15a7756d5 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-BoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-ExtraLight.ttf b/src/fonts/IBMPlexSans_SemiCondensed-ExtraLight.ttf new file mode 100644 index 000000000..cd729393c Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-ExtraLight.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-ExtraLightItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-ExtraLightItalic.ttf new file mode 100644 index 000000000..ec6f0f0e3 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-ExtraLightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Italic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Italic.ttf new file mode 100644 index 000000000..0b6665d57 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Italic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Light.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Light.ttf new file mode 100644 index 000000000..3a2435964 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Light.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-LightItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-LightItalic.ttf new file mode 100644 index 000000000..64cb0e752 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-LightItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Medium.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Medium.ttf new file mode 100644 index 000000000..a43275857 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Medium.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-MediumItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-MediumItalic.ttf new file mode 100644 index 000000000..c8f51aad9 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-MediumItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Regular.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Regular.ttf new file mode 100644 index 000000000..ad9a6259b Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Regular.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-SemiBold.ttf b/src/fonts/IBMPlexSans_SemiCondensed-SemiBold.ttf new file mode 100644 index 000000000..77832b0b8 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-SemiBold.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-SemiBoldItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-SemiBoldItalic.ttf new file mode 100644 index 000000000..6f11e691f Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-SemiBoldItalic.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-Thin.ttf b/src/fonts/IBMPlexSans_SemiCondensed-Thin.ttf new file mode 100644 index 000000000..dda2e8af0 Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-Thin.ttf differ diff --git a/src/fonts/IBMPlexSans_SemiCondensed-ThinItalic.ttf b/src/fonts/IBMPlexSans_SemiCondensed-ThinItalic.ttf new file mode 100644 index 000000000..4d4518e2a Binary files /dev/null and b/src/fonts/IBMPlexSans_SemiCondensed-ThinItalic.ttf differ diff --git a/src/fonts/Montserrat-Black.ttf b/src/fonts/Montserrat-Black.ttf new file mode 100644 index 000000000..2fab7ab04 Binary files /dev/null and b/src/fonts/Montserrat-Black.ttf differ diff --git a/src/fonts/Montserrat-BlackItalic.ttf b/src/fonts/Montserrat-BlackItalic.ttf new file mode 100644 index 000000000..04d3b47f3 Binary files /dev/null and b/src/fonts/Montserrat-BlackItalic.ttf differ diff --git a/src/fonts/Montserrat-Bold.ttf b/src/fonts/Montserrat-Bold.ttf new file mode 100644 index 000000000..403358755 Binary files /dev/null and b/src/fonts/Montserrat-Bold.ttf differ diff --git a/src/fonts/Montserrat-BoldItalic.ttf b/src/fonts/Montserrat-BoldItalic.ttf new file mode 100644 index 000000000..0cc5c2cb6 Binary files /dev/null and b/src/fonts/Montserrat-BoldItalic.ttf differ diff --git a/src/fonts/Montserrat-ExtraBold.ttf b/src/fonts/Montserrat-ExtraBold.ttf new file mode 100644 index 000000000..476ec30b6 Binary files /dev/null and b/src/fonts/Montserrat-ExtraBold.ttf differ diff --git a/src/fonts/Montserrat-ExtraBoldItalic.ttf b/src/fonts/Montserrat-ExtraBoldItalic.ttf new file mode 100644 index 000000000..a1ac9a955 Binary files /dev/null and b/src/fonts/Montserrat-ExtraBoldItalic.ttf differ diff --git a/src/fonts/Montserrat-ExtraLight.ttf b/src/fonts/Montserrat-ExtraLight.ttf new file mode 100644 index 000000000..efaeab067 Binary files /dev/null and b/src/fonts/Montserrat-ExtraLight.ttf differ diff --git a/src/fonts/Montserrat-ExtraLightItalic.ttf b/src/fonts/Montserrat-ExtraLightItalic.ttf new file mode 100644 index 000000000..a8d18decb Binary files /dev/null and b/src/fonts/Montserrat-ExtraLightItalic.ttf differ diff --git a/src/fonts/Montserrat-Italic.ttf b/src/fonts/Montserrat-Italic.ttf new file mode 100644 index 000000000..5f08df020 Binary files /dev/null and b/src/fonts/Montserrat-Italic.ttf differ diff --git a/src/fonts/Montserrat-Light.ttf b/src/fonts/Montserrat-Light.ttf new file mode 100644 index 000000000..881f12d06 Binary files /dev/null and b/src/fonts/Montserrat-Light.ttf differ diff --git a/src/fonts/Montserrat-LightItalic.ttf b/src/fonts/Montserrat-LightItalic.ttf new file mode 100644 index 000000000..b2991d025 Binary files /dev/null and b/src/fonts/Montserrat-LightItalic.ttf differ diff --git a/src/fonts/Montserrat-Medium.ttf b/src/fonts/Montserrat-Medium.ttf new file mode 100644 index 000000000..c9a39ea16 Binary files /dev/null and b/src/fonts/Montserrat-Medium.ttf differ diff --git a/src/fonts/Montserrat-MediumItalic.ttf b/src/fonts/Montserrat-MediumItalic.ttf new file mode 100644 index 000000000..086dd6e44 Binary files /dev/null and b/src/fonts/Montserrat-MediumItalic.ttf differ diff --git a/src/fonts/Montserrat-Regular.ttf b/src/fonts/Montserrat-Regular.ttf new file mode 100644 index 000000000..895e220a1 Binary files /dev/null and b/src/fonts/Montserrat-Regular.ttf differ diff --git a/src/fonts/Montserrat-SemiBold.ttf b/src/fonts/Montserrat-SemiBold.ttf new file mode 100644 index 000000000..161477a81 Binary files /dev/null and b/src/fonts/Montserrat-SemiBold.ttf differ diff --git a/src/fonts/Montserrat-SemiBoldItalic.ttf b/src/fonts/Montserrat-SemiBoldItalic.ttf new file mode 100644 index 000000000..73dc6c61e Binary files /dev/null and b/src/fonts/Montserrat-SemiBoldItalic.ttf differ diff --git a/src/fonts/Montserrat-Thin.ttf b/src/fonts/Montserrat-Thin.ttf new file mode 100644 index 000000000..c9cf19565 Binary files /dev/null and b/src/fonts/Montserrat-Thin.ttf differ diff --git a/src/fonts/Montserrat-ThinItalic.ttf b/src/fonts/Montserrat-ThinItalic.ttf new file mode 100644 index 000000000..e6dfc05dc Binary files /dev/null and b/src/fonts/Montserrat-ThinItalic.ttf differ diff --git a/src/images/arrows/footer-arrow.svg b/src/images/arrows/footer-arrow.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/arrows/footer-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrows/form-button-arrow.svg b/src/images/arrows/form-button-arrow.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/arrows/form-button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/arrows/ticket-button-arrow.svg b/src/images/arrows/ticket-button-arrow.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/arrows/ticket-button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/events/events-1.png b/src/images/events/events-1.png new file mode 100644 index 000000000..529af6552 Binary files /dev/null and b/src/images/events/events-1.png differ diff --git a/src/images/events/events-2.png b/src/images/events/events-2.png new file mode 100644 index 000000000..9702d7cc7 Binary files /dev/null and b/src/images/events/events-2.png differ diff --git a/src/images/gallery/gallery-1.png b/src/images/gallery/gallery-1.png new file mode 100644 index 000000000..a4eeb3c09 Binary files /dev/null and b/src/images/gallery/gallery-1.png differ diff --git a/src/images/gallery/gallery-2.png b/src/images/gallery/gallery-2.png new file mode 100644 index 000000000..3b1a5938a Binary files /dev/null and b/src/images/gallery/gallery-2.png differ diff --git a/src/images/gallery/gallery-3.png b/src/images/gallery/gallery-3.png new file mode 100644 index 000000000..0097173d6 Binary files /dev/null and b/src/images/gallery/gallery-3.png differ diff --git a/src/images/gallery/gallery-4.png b/src/images/gallery/gallery-4.png new file mode 100644 index 000000000..558de0bdf Binary files /dev/null and b/src/images/gallery/gallery-4.png differ diff --git a/src/images/gallery/gallery-5.png b/src/images/gallery/gallery-5.png new file mode 100644 index 000000000..7cf48d113 Binary files /dev/null and b/src/images/gallery/gallery-5.png differ diff --git a/src/images/header/museum.png b/src/images/header/museum.png new file mode 100644 index 000000000..9b6ce249f Binary files /dev/null and b/src/images/header/museum.png differ diff --git a/src/images/icons/menu-burger.svg b/src/images/icons/menu-burger.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icons/menu-burger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/menu-close.svg b/src/images/icons/menu-close.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/icons/menu-close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/lecture/lecture.png b/src/images/lecture/lecture.png new file mode 100644 index 000000000..c0112e211 Binary files /dev/null and b/src/images/lecture/lecture.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/facebook.svg b/src/images/social-media/facebook.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/social-media/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/social-media/instagram.svg b/src/images/social-media/instagram.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/social-media/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/subscription/subscription.png b/src/images/subscription/subscription.png new file mode 100644 index 000000000..e5bf0b943 Binary files /dev/null and b/src/images/subscription/subscription.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..809d3ad96 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,97 @@ +/* global Swiper */ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const slides = document.querySelectorAll('.swiper-slide'); + + const gallerySwiper = new Swiper('.gallery__swiper', { + slidesPerView: 1, + spaceBetween: 20, + + breakpoints: { + 640: { + slidesPerView: 2, + spaceBetween: 20, + }, + }, + + pagination: { + el: '.gallery__pagination', + clickable: true, + dynamicBullets: false, + }, + + autoplay: { + delay: 5000, + disableOnInteraction: false, + pauseOnMouseEnter: true, + }, + + effect: 'slide', + + speed: 600, + + loop: true, + loopAdditionalSlides: 1, + + centeredSlides: false, + + lazy: { + loadPrevNext: true, + loadPrevNextAmount: 2, + }, + + keyboard: { + enabled: true, + }, + + mousewheel: { + invert: false, + forceToAxis: true, + }, + + grabCursor: true, + + parallax: true, + }); + + slides.forEach((slide) => { + slide.addEventListener('click', () => { + gallerySwiper.autoplay.stop(); + }); + }); +}); + +const subscribeForm = document.querySelector('.subscribe__form'); + +if (subscribeForm) { + subscribeForm.addEventListener('submit', (e) => { + e.preventDefault(); + subscribeForm.reset(); + }); +} + +const burgerButton = document.querySelector('.top-bar__menu'); +const closeButton = document.querySelector('.menu__close'); +const menuLinks = document.querySelectorAll('.menu__link'); +const menu = document.querySelector('.menu'); + +burgerButton.addEventListener('click', () => { + menu.classList.add('is-open'); + menu.classList.remove('is-close'); + document.body.classList.add('no-scroll'); +}); + +closeButton.addEventListener('click', () => { + menu.classList.remove('is-open'); + menu.classList.add('is-close'); + document.body.classList.remove('no-scroll'); +}); + +menuLinks.forEach((menuLink) => { + menuLink.addEventListener('click', () => { + menu.classList.remove('is-open'); + menu.classList.add('is-close'); + document.body.classList.remove('no-scroll'); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..b17b7a763 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,61 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Montserrat; + font-weight: 400; font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic_latin-regular.woff2') + format('woff2'); +} + +@font-face { + font-family: Montserrat; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic_latin-700.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 300; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2') + format('woff2'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..ff25be307 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,7 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f044aad29 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/reset'; diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..a09de36a0 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,154 @@ +.events { + margin: 70px 20px 60px; + + @include on-tablet { + margin: 88px 34px 112px; + } + + @include on-desktop { + margin: 200px 55px 104px; + } + + &__container { + display: flex; + flex-direction: column; + gap: 60px; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 104px; + } + } + + &__event { + display: grid; + gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 40px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__title { + margin-bottom: 40px; + text-align: center; + + @include on-tablet { + margin-bottom: 48px; + text-align: start; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 10px; + + @include on-tablet { + grid-column: 1 / 5; + gap: 15px; + } + + @include on-desktop { + grid-column: 8 / -1; + justify-content: center; + } + } + + &__name { + @extend %title; + } + + &__name-container { + display: flex; + align-items: center; + } + + &__name-square { + display: block; + + width: 10px; + height: 10px; + margin-left: 30px; + + background-color: $form-button-color; + + @include on-tablet { + width: 15px; + height: 15px; + margin-left: 40px; + } + } + + &__info { + display: flex; + justify-content: space-between; + padding-bottom: 5px; + + @include on-tablet { + gap: 30px; + justify-content: start; + padding-bottom: 15px; + } + } + + &__subtitle { + @extend %main-date; + + font-weight: 500; + color: $inner-title-color; + } + + &__date { + @extend %main-date; + + color: $menu-background-color; + } + + &__description { + @extend %description; + + color: $description-color; + } + + &__image { + will-change: transform; + + aspect-ratio: 4 / 3; + width: 100%; + height: 100%; + + object-fit: cover; + + transition: transform 0.5s ease; + } + + &__image-container { + position: relative; + overflow: hidden; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + + &:hover { + .events__image { + transform: scale(1.1); + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..a8f5b621d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,233 @@ +.footer { + @extend %menu-footer; + + display: grid; + grid-template-columns: repeat(2, 1fr); + margin: 50px 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + margin: 51px 36px 36px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + margin: 48px 55px; + } + + &__icons { + display: flex; + grid-column: 1 / -1; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1; + flex-direction: column; + gap: 62px; + justify-content: flex-start; + } + } + + &__logo { + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__social { + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + gap: 32px; + } + } + + &__social-icon { + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + + &__facebook { + background-image: url('../images/social-media/facebook.svg'); + } + + &__instagram { + background-image: url('../images/social-media/instagram.svg'); + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 2 / 5; + } + } + + &__item-bold { + font-weight: 600; + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__address, + &__num, + &__fax, + &__email { + transition: color 0.3s ease; + + &:hover { + color: $menu-background-color; + } + } + + &__button-arrow { + cursor: pointer; + + position: absolute; + top: 17px; + left: 17px; + + display: block; + + width: 16px; + height: 16px; + + background-image: url('../images/arrows/footer-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + } + + &__button { + position: relative; + + grid-column: 1 / -1; + + width: 50px; + height: 50px; + margin-left: auto; + border: 1px solid $menu-background-color; + border-radius: 50%; + + &:hover { + .footer__button-arrow { + transform: scale(1.6); + } + } + + @include on-tablet { + display: none; + } + } + + &__line { + grid-column: 1 / -1; + + width: 100%; + margin-block: 20px 40px; + border: none; + border-top: 1px solid #1a5a4c80; + + @include on-tablet { + grid-column: 2 / 6; + margin-block: 64px; + } + + @include on-desktop { + grid-column: 7; + + width: 1px; + height: 260px; + margin-block: 0; + border: none; + border-right: 1px solid #1a5a4c80; + + writing-mode: vertical-rl; + } + } + + &__nav { + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(2, 1fr); + line-height: 100%; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__nav-group { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + transition: color 0.3s ease; + + &:hover { + color: $menu-background-color; + } + } + + &__bottom { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + margin-top: 80px; + + font-size: 12px; + font-weight: 300; + text-align: center; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + margin-top: 120px; + } + + @include on-desktop { + margin-top: 87px; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..803596e02 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,152 @@ +.gallery { + position: relative; + box-sizing: border-box; + margin: 183px 0 100px; + padding-inline: 20px; + + @include on-tablet { + margin: 208px 0 92px; + padding-inline: 34px; + } + + @include on-desktop { + margin: 302px 55px 200px; + } + + &__container { + display: none; + + @include on-desktop { + display: grid; + grid-template-areas: + 'woman village village' + 'woman village village' + 'park park beach'; + gap: 30px; + } + } + + &__slide-1 { + grid-area: woman; + } + + &__slide-2 { + grid-area: village; + } + + &__slide-3 { + grid-area: park; + } + + &__slide-4 { + grid-area: beach; + } + + &__title { + margin-bottom: 40px; + text-align: center; + + @include on-tablet { + margin-bottom: 48px; + text-align: start; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__swiper { + overflow: hidden; + width: 100%; + height: auto; + + @include on-desktop { + display: none; + } + } + + &__image { + will-change: transform; + + display: block; + + aspect-ratio: 28 / 41; + width: 100%; + height: auto; + + object-fit: cover; + + transition: transform 0.5s ease; + + @include on-tablet { + aspect-ratio: 340 / 543; + } + + @include on-desktop { + aspect-ratio: auto; + } + } + + &__image-3 { + object-position: left; + + @include on-desktop { + object-position: center; + } + } + + &__image-4 { + object-position: 82%; + + @include on-desktop { + object-position: center; + } + } + + &__slide { + overflow: hidden; + transition: transform 0.5s ease; + + &:hover { + .gallery__image { + transform: scale(1.1); + } + } + } + + &__pagination { + position: relative; + bottom: 0 !important; + + display: flex; + gap: 22px; + justify-content: center; + + margin-block: 20px; + + @include on-tablet { + margin-block: 32px; + } + + .swiper-pagination-bullet { + width: 9px; + height: 9px; + + opacity: 1; + background-color: $radio-button; + + transition: + transform 0.3s ease, + background-color 0.3s ease; + + &:hover { + transform: scale(1.6); + } + + &-active { + background-color: $menu-background-color; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..237e91e8d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,183 @@ +.header { + position: relative; + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + height: 50vh; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + height: 100vh; + } + + &__top-bar { + grid-column: 1 / -1; + } + + &__bottom-container { + display: flex; + grid-column: 1 / -1; + + @include on-desktop { + justify-content: space-between; + } + } + + &__bottom { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1 / 2; + flex-direction: column; + gap: 20px; + align-items: center; + + margin-top: 43px; + } + } + + &__events { + @extend %main-date; + + transform: rotate(180deg); + writing-mode: vertical-rl; + color: $inner-title-color; + } + + &__line { + flex-grow: 1; + min-height: 70px; + max-height: max-content; + border-right: 1px solid $menu-background-color; + } + + &__picture { + height: calc(100vw - 50px); + + @include on-tablet { + grid-column: 2 / -1; + height: 100%; + } + + @include on-desktop { + grid-column: 6 / -1; + } + } + + &__image { + position: absolute; + z-index: -1; + top: 0; + left: 0; + + aspect-ratio: 3 / 3; + width: 100%; + + background-image: url('../images/header/museum.png'); + background-position: center; + background-size: cover; + + @include on-tablet { + grid-column: 2 / -1; + height: 100%; + min-height: 384px; + } + + @include on-desktop { + grid-column: 6 / -1; + max-height: 100vh; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 20px; + + margin: 20px 20px 0; + + @include on-tablet { + grid-column: 1 / 2; + gap: 38px; + margin: 40px 20px 0 34px; + } + + @include on-desktop { + grid-column: 1 / 6; + gap: 89px; + margin: 120px 30px 0 55px; + } + } + + &__title { + text-align: center; + + @include on-tablet { + text-align: start; + } + } + + &__button-arrow { + cursor: pointer; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + + display: block; + + width: 50px; + height: 50px; + + background-color: $menu-background-color; + background-image: url('../images/arrows/ticket-button-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: background-image 0.5s ease; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + + &__button { + @extend %button; + + position: relative; + + width: 100%; + padding-right: 50px; + padding-block: 18px; + border: 1px solid $menu-background-color; + + color: $inner-title-color; + text-align: center; + + transition: box-shadow 0.5s ease; + + &:hover { + box-shadow: 5px 7px 3px 0 #1a5a4c40; + + .header__button-arrow { + background-image: url('../images/arrows/form-button-arrow.svg'); + } + } + + @include on-tablet { + width: 270px; + padding-right: 70px; + padding-block: 27px; + } + + @include on-desktop { + align-self: flex-start; + } + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..4d6bd825a --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,110 @@ +.lecture { + position: relative; + height: 236px; + + @include on-tablet { + height: 426px; + } + + @include on-desktop { + height: 550px; + } + + &__info { + display: flex; + justify-content: space-between; + padding: 24px 21px; + + @include on-tablet { + gap: 140px; + justify-content: start; + padding: 45px 0 23px 55px; + } + + @include on-desktop { + gap: 130px; + padding-left: 100px; + } + } + + &__subtitle { + @extend %main-date; + + font-weight: 500; + color: $inner-title-color; + } + + &__date { + @extend %main-date; + + color: $menu-background-color; + } + + &__name { + @extend %title; + + text-align: center; + + @include on-tablet { + padding-left: 55px; + text-align: start; + } + + @include on-desktop { + padding-left: 100px; + } + } + + &__content { + position: absolute; + z-index: 2; + top: 153px; + left: 50%; + transform: translateX(-50%); + + display: flex; + flex-direction: column; + + width: 280px; + height: 140px; + + background-color: $menu-footer-text-color; + box-shadow: 0 2px 0 0 #1a5a4c40; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + top: 306px; + width: 570px; + height: 204px; + } + + @include on-desktop { + top: 448px; + width: 570px; + height: 204px; + } + + &:hover { + box-shadow: 5px 7px 3px 0 #1a5a4c40; + } + } + + &__image { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + + display: block; + + width: 100%; + height: 100%; + + background-image: url('../images/lecture/lecture.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..83ba01950 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,165 @@ +.menu { + @extend %menu-footer; + + pointer-events: none; + + position: fixed; + top: 0; + left: 0; + transform: translateY(-100%); + + overflow: auto; + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100vh; + + color: $menu-footer-text-color; + + opacity: 0; + + transition: + opacity 0.5s ease-in-out, + transform 0.5s ease-in-out; + + &.is-open { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + &.is-close { + pointer-events: none; + transform: translateY(-100%); + opacity: 0; + } + + &__top { + flex-shrink: 0; + + height: auto; + min-height: 400px; + padding: 27px 20px 0; + + background-color: $menu-background-color; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(12, 1fr); + min-height: 280px; + padding: 39px 34px 0; + } + + @include on-desktop { + padding: 40px 56px 0; + } + } + + &__close { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/menu-close.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__nav { + display: flex; + gap: 28px; + + @include on-tablet { + grid-column: 1 / 6; + gap: 38px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__nav-group { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__link { + @extend %button; + + font-size: 16px; + transition: color 0.5s ease; + + @include on-desktop { + font-size: 22px; + } + + &:hover { + color: $inner-title-color; + } + } + + &__line { + width: 100%; + margin-block: 24px; + border: none; + border-top: 1px solid #ffffff80; + + @include on-tablet { + grid-column: 7; + + width: 1px; + height: 80%; + margin-block: 0; + margin-inline: 0; + border: none; + border-right: 1px solid #ffffff80; + + writing-mode: vertical-rl; + } + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 8 / -1; + } + } + + &__schedule-block { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__item-bold { + font-weight: 600; + } + + &__bottom { + flex-grow: 1; + width: 100%; + height: auto; + background-color: #1a5a4c50; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..4e9002758 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page { + scroll-behavior: smooth; + color: $title-color; + background-color: $main-background; + + &__body:has(.menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..82bef7ee9 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,151 @@ +.subscribe { + position: relative; + + display: flex; + flex-direction: column; + gap: 50px; + justify-content: center; + + height: 386px; + + @include on-tablet { + gap: 64px; + align-items: center; + height: 380px; + } + + @include on-desktop { + gap: 72px; + height: 550px; + } + + &__content { + z-index: 2; + color: $menu-footer-text-color; + text-align: center; + } + + &__description { + @extend %menu-footer; + + margin-top: 20px; + font-size: 18px; + + @include on-tablet { + margin-top: 16px; + line-height: 100%; + } + } + + &__form { + z-index: 2; + + display: flex; + gap: 0; + + margin-inline: 20px; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + + @include on-tablet { + box-shadow: none; + } + } + } + + &__input { + @extend %title; + + width: 80vw; + height: 50px; + padding-left: 24px; + border: none; + + font-size: 14px; + color: $title-color; + + background-color: $menu-footer-text-color; + outline: none; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + width: 374px; + height: 70px; + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + } + } + + @include on-desktop { + width: 470px; + padding-left: 32px; + } + + &::placeholder { + color: $inner-title-color; + } + } + + &__button { + cursor: pointer; + + display: block; + + width: 50px; + height: 50px; + border: none; + + background-color: $form-button-color; + background-image: url('../images/arrows/form-button-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: + box-shadow 0.5s ease, + background-image 0.5s ease; + + &:hover { + background-image: url('../images/arrows/ticket-button-arrow.svg'); + } + + @include on-tablet { + width: 70px; + height: 70px; + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + } + } + } + + &__image { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + + display: block; + + width: 100%; + height: 100%; + + background-image: url('../images/subscription/subscription.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..a72eb36c5 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,56 @@ +.top-bar { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + + padding-top: 10px; + padding-left: 20px; + + @include on-tablet { + padding-top: 15px; + padding-left: 34px; + } + + @include on-desktop { + padding-left: 55px; + } + + &__menu { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/menu-burger.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__logo { + width: 55px; + height: 61px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + width: 63px; + height: 72px; + margin-left: 78px; + } + + @include on-desktop { + margin-left: 54px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1a00a3090 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,12 @@ @import 'fonts'; @import 'typography'; -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/top-bar'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/events'; +@import 'blocks/lecture'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..60cfd380e 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,74 @@ %h1 { - font-family: Roboto, sans-serif; + // font-family: Roboto, sans-serif; + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + } + + @include on-desktop { + font-size: 72px; + } +} + +%h2 { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 48px; + } +} + +%title { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + } +} + +%button { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 100%; + + @include on-tablet { + font-size: 16px; + } +} + +%main-date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + + @include on-tablet { + font-size: 14px; + } +} + +%description { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; +} + +%menu-footer { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; font-weight: 400; + line-height: 150%; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..590ea0329 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,23 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-large-desktop { + @media screen and (min-width: 1440px) { + @content; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..eacfd5078 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,32 @@ +body, +html, +ul, +p, +h1, +h2, +h3, +h4, +h5, +input { + margin: 0; + padding: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 50px $menu-footer-text-color inset !important; + transition: background-color 0.3s ease-in-out 0s; + + -webkit-text-fill-color: $title-color !important; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..ee5d61c06 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ -$c-gray: #eee; +$main-background: #eee; +$title-color: #0f0e08; +$menu-background-color: #1a5a4c; +$menu-footer-text-color: #fff; +$inner-title-color: #687480; +$description-color: #4e4e4e; +$form-button-color: #f14a27; +$radio-button: #e0e0e0;