diff --git a/.eslintignore b/.eslintignore index c925c21d56..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,2 @@ +/backstop_data /dist -/node_modules diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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/.gitignore b/.gitignore index 885c5fa6a4..bd08555482 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,17 @@ +# IDE .idea .vscode -build -dist + +# Node node_modules -.DS_Store -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# MacOS +.DS_Store -raw_reports -reports -cypress/screenshots -cypress/videos +# Generated files +backstop_data +dist +.cache +.parcel-cache +src/styles/styles.css +src/styles/styles.css.map diff --git a/.stylelintignore b/.stylelintignore index f1d4bd2757..032d498bab 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,2 +1,4 @@ /backstop_data/ /dist +src/styles/styles.css +src/styles/styles.css.map diff --git a/README.md b/README.md index 97d3c9060a..911042d5d6 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that: - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0) - watch the lesson videos and implement your page blocks similarly to the videos; - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; -- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://.github.io/layout_miami/) +- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Qbusik.github.io/layout_miami/) - after each next block do the same (add, commit and push the changes, and deploy the updated demo; - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished; diff --git a/index.html b/index.html index 06bcd7773a..52372c2502 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,401 @@ - + - - - Miami + + + THE MET - + rel="icon" + type="image/x-icon" + href="src/images/icons/favicon.png" + > + + + + -

Miami

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

The Met Fifth Avenue

+

+1 212-535-7710

+

The Met Cloisters

+

+1 212-923-3700

+
+
+ + +
+ +
+ +
+ +
+ Welcome
to The MET +
+ +
+ + + +
+ +
+ +
+

Plan your visit

+

Museum hours

+
+ +
+ +

The Met Fifth Avenue

+ +
+
+

10 am - 5 pm

+

10 am - 9 pm

+

Closed

+
+
+

Sun, Mon, Tue, Thu

+

Fri, Sat

+

Wen

+
+
+ +
+

Closed on

+

Thanksgiving Day, Dec 25, Jan 1, and the first Monday in May.

+
+ +

The Met Cloisters

+ +
+
+

10 am - 4.30 pm

+

Closed

+
+
+

Thu - Tue

+

Wen

+
+
+ +
+

Closed on

+

Thanksgiving Day, Dec 25, Jan 1

+
+ +
+ +
+ +
+ +
+

Now On View

+

Explore exhibition gallery guides, videos, articles, and more.

+
+ +
+ +
+ photo +
+ +
+ photo +
+ +
+

A New Look at Old Masters

+

December 12, 2020 - Through Spring 2023

+
+ +
+ +
+ +
+ photo +
+ +
+ photo +
+ +
+ photo +
+ +
+

Bodhisattvas of Wisdom, Compassion, and Power

+

March 27, 2021 - October 30, 2022

+
+ +
+ +
+ +
+ photo +
+ +
+ photo +
+ +
+

Inspiring Walt Disney: The Animation of French Decorative Arts

+

December 10, 2021 - March 6, 2022

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

More to Explore Online

+
+ +
+ +
+
+ photo +

Collection Areas

+

These collection areas study, exhibit, and care for the objects in The Met collection.

+
+
+ +
+
+ photo +

Travel

+

Travel with The Met connects the Museum's wide and diverse audience to art, inspiration, and historical perspective.

+
+
+ +
+
+ photo +

Virtual group tours

+

Request a guided tour, reserve admission and lead your own small group, or request a live virtual tour led by a Museum guide.

+
+
+ +
+ +
+ +
+ +
+

Contact us

+
+ +
+ +
+

The Met Fifth Avenue

+

Phone

+

+1 212-535-7710

+

Address

+

+ + 1000 Fifth Avenue
+ New York, NY 10028 + +

+
+ +
+

The Met Cloisters

+

Phone

+

+1 212-923-3700

+

Address

+

+ + 99 Margaret Corbin Drive
+ Fort Tryon Park
+ New York, NY 10040 + +

+
+ +
+ +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ +
+ +
+ +
+ + + + + diff --git a/package-lock.json b/package-lock.json index 5cfe8293fe..18368717ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,9 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", + "cross-env": "^10.1.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", @@ -64,6 +65,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz", "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.24.7", @@ -617,6 +619,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" }, @@ -639,6 +642,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": "^14 || ^16 || >=18" } @@ -698,6 +702,13 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/@epic-web/invariant": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz", + "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==", + "dev": true, + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.10", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz", @@ -1572,9 +1583,9 @@ "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": { @@ -1636,22 +1647,19 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@mate-academy/stylelint-config/node_modules/balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@mate-academy/stylelint-config/node_modules/camelcase": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1664,7 +1672,6 @@ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", "dev": true, - "peer": true, "dependencies": { "camelcase": "^6.3.0", "map-obj": "^4.1.0", @@ -1683,7 +1690,6 @@ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", "dev": true, - "peer": true, "dependencies": { "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", @@ -1710,7 +1716,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1723,7 +1728,6 @@ "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz", "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==", "dev": true, - "peer": true, "dependencies": { "flat-cache": "^3.2.0" }, @@ -1736,7 +1740,6 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", "dev": true, - "peer": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -1753,7 +1756,6 @@ "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", "dev": true, - "peer": true, "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.3", @@ -1768,7 +1770,6 @@ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1781,7 +1782,6 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -1800,7 +1800,6 @@ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", "dev": true, - "peer": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -1816,7 +1815,6 @@ "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", "dev": true, - "peer": true, "dependencies": { "@types/minimist": "^1.2.2", "camelcase-keys": "^7.0.0", @@ -1843,7 +1841,6 @@ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", "dev": true, - "peer": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -1859,7 +1856,6 @@ "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", "dev": true, - "peer": true, "engines": { "node": ">=12.0" }, @@ -1876,7 +1872,6 @@ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -1889,7 +1884,6 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", "dev": true, - "peer": true, "dependencies": { "@types/normalize-package-data": "^2.4.0", "normalize-package-data": "^3.0.2", @@ -1908,7 +1902,6 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", "dev": true, - "peer": true, "dependencies": { "find-up": "^5.0.0", "read-pkg": "^6.0.0", @@ -1926,7 +1919,6 @@ "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", "dev": true, - "peer": true, "dependencies": { "indent-string": "^5.0.0", "strip-indent": "^4.0.0" @@ -1943,7 +1935,6 @@ "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, - "peer": true, "engines": { "node": ">=14" }, @@ -1956,7 +1947,6 @@ "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", "dev": true, - "peer": true, "dependencies": { "min-indent": "^1.0.1" }, @@ -2113,7 +2103,6 @@ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -2126,7 +2115,6 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -2139,7 +2127,6 @@ "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==", "dev": true, - "peer": true, "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" @@ -2189,7 +2176,6 @@ "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">= 20" } @@ -2220,7 +2206,6 @@ "integrity": "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/types": "^14.0.0", "universal-user-agent": "^7.0.2" @@ -2234,8 +2219,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/endpoint/node_modules/@octokit/types": { "version": "14.1.0", @@ -2243,7 +2227,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2254,7 +2237,6 @@ "integrity": "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/request": "^10.0.2", "@octokit/types": "^14.0.0", @@ -2269,8 +2251,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/graphql/node_modules/@octokit/types": { "version": "14.1.0", @@ -2278,7 +2259,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2288,8 +2268,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-26.0.0.tgz", "integrity": "sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -2358,7 +2337,6 @@ "integrity": "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.0", "@octokit/request-error": "^7.0.0", @@ -2376,7 +2354,6 @@ "integrity": "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/types": "^14.0.0" }, @@ -2389,8 +2366,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/request-error/node_modules/@octokit/types": { "version": "14.1.0", @@ -2398,7 +2374,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2408,8 +2383,7 @@ "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz", "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@octokit/request/node_modules/@octokit/types": { "version": "14.1.0", @@ -2417,7 +2391,6 @@ "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^25.1.0" } @@ -2622,7 +2595,6 @@ "integrity": "sha512-8o6yDfmoGJUIeR9OfYU0/TUJTnMPG2r68+1yEdUeG2Fdqpj8Qetg0ziKIgcBm0RW/j29H41WP37CYCEhp6GoHQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@octokit/openapi-types": "^26.0.0" } @@ -3781,8 +3753,7 @@ "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", "dev": true, - "license": "Apache-2.0", - "peer": true + "license": "Apache-2.0" }, "node_modules/bl": { "version": "4.1.0", @@ -3836,6 +3807,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001640", "electron-to-chromium": "^1.4.820", @@ -4204,6 +4176,24 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/cross-env": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz", + "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@epic-web/invariant": "^1.0.0", + "cross-spawn": "^7.0.6" + }, + "bin": { + "cross-env": "dist/bin/cross-env.js", + "cross-env-shell": "dist/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4810,8 +4800,7 @@ "url": "https://opencollective.com/fastify" } ], - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5391,7 +5380,6 @@ "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==", "dev": true, - "peer": true, "engines": { "node": ">=8" } @@ -7248,6 +7236,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -7326,6 +7315,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz", "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7704,7 +7694,6 @@ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "deprecated": "Rimraf versions prior to v4 are no longer supported", "dev": true, - "peer": true, "dependencies": { "glob": "^7.1.3" }, @@ -7830,6 +7819,7 @@ "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -8160,8 +8150,7 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/stylelint": { "version": "16.7.0", @@ -8500,6 +8489,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -8648,8 +8638,7 @@ "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", "dev": true, - "license": "ISC", - "peer": true + "license": "ISC" }, "node_modules/universalify": { "version": "2.0.1", @@ -8830,6 +8819,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -9178,21 +9168,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index e1ec547e1a..ec1c2ca491 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,9 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", + "cross-env": "^10.1.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/icons/burger-hover.svg b/src/images/icons/burger-hover.svg new file mode 100644 index 0000000000..1fc00346bf --- /dev/null +++ b/src/images/icons/burger-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger.svg b/src/images/icons/burger.svg new file mode 100644 index 0000000000..b5ea4b25d0 --- /dev/null +++ b/src/images/icons/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 0000000000..3de8dd7bd8 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 0000000000..6b34aacc0e Binary files /dev/null and b/src/images/icons/favicon.png differ diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 0000000000..171f121f2d --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/phone.svg b/src/images/icons/phone.svg new file mode 100644 index 0000000000..ce3f027938 --- /dev/null +++ b/src/images/icons/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/images/photos/footer.jpg b/src/images/photos/footer.jpg new file mode 100644 index 0000000000..885960e5d5 Binary files /dev/null and b/src/images/photos/footer.jpg differ diff --git a/src/images/photos/header.jpg b/src/images/photos/header.jpg new file mode 100644 index 0000000000..87ced3d4d4 Binary files /dev/null and b/src/images/photos/header.jpg differ diff --git a/src/images/photos/pic-1.jpg b/src/images/photos/pic-1.jpg new file mode 100644 index 0000000000..afae92ddb5 Binary files /dev/null and b/src/images/photos/pic-1.jpg differ diff --git a/src/images/photos/pic-10.jpg b/src/images/photos/pic-10.jpg new file mode 100644 index 0000000000..f71bb8938a Binary files /dev/null and b/src/images/photos/pic-10.jpg differ diff --git a/src/images/photos/pic-2.jpg b/src/images/photos/pic-2.jpg new file mode 100644 index 0000000000..f443b3a1f7 Binary files /dev/null and b/src/images/photos/pic-2.jpg differ diff --git a/src/images/photos/pic-3.jpg b/src/images/photos/pic-3.jpg new file mode 100644 index 0000000000..513a19e14a Binary files /dev/null and b/src/images/photos/pic-3.jpg differ diff --git a/src/images/photos/pic-4.jpg b/src/images/photos/pic-4.jpg new file mode 100644 index 0000000000..bb360d03b0 Binary files /dev/null and b/src/images/photos/pic-4.jpg differ diff --git a/src/images/photos/pic-5.jpg b/src/images/photos/pic-5.jpg new file mode 100644 index 0000000000..a9efb41397 Binary files /dev/null and b/src/images/photos/pic-5.jpg differ diff --git a/src/images/photos/pic-6.jpg b/src/images/photos/pic-6.jpg new file mode 100644 index 0000000000..f99e7f7d96 Binary files /dev/null and b/src/images/photos/pic-6.jpg differ diff --git a/src/images/photos/pic-7.jpg b/src/images/photos/pic-7.jpg new file mode 100644 index 0000000000..066a0532e7 Binary files /dev/null and b/src/images/photos/pic-7.jpg differ diff --git a/src/images/photos/pic-8.jpg b/src/images/photos/pic-8.jpg new file mode 100644 index 0000000000..7f5e2ccdcd Binary files /dev/null and b/src/images/photos/pic-8.jpg differ diff --git a/src/images/photos/pic-9.jpg b/src/images/photos/pic-9.jpg new file mode 100644 index 0000000000..98ba3071de Binary files /dev/null and b/src/images/photos/pic-9.jpg differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- 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 1837eb46e2..0000000000 --- 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 3280c3fe10..0000000000 --- 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/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 0000000000..8360f71b5f --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,89 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.about { + line-height: 27px; + + @include grid; + + justify-content: center; + + &__article { + margin-top: 32px; + grid-column: span 2; + + @include for-tablet { + margin-top: 0; + grid-column: span 3; + } + + @include for-desktop { + margin-top: 0; + grid-column: span 7; + } + } + + &__bold { + font-weight: $bold; + } + + &__item { + margin-top: 16px; + + &--open-time { + display: flex; + flex-direction: row; + justify-content: start; + gap: 24px; + font-size: $font-small; + } + } + + &__accent { + margin-top: 20px; + color: $accent-color; + font-size: 12px; + line-height: 140%; + } + + &__name { + font-size: $font-big; + line-height: $font-big; + letter-spacing: -1.5px; + + @include for-tablet { + font-size: $font-huge; + line-height: $font-huge; + } + } + + &__title { + font-weight: $bold; + width: 100%; + grid-column: span 2; + + @include for-tablet { + grid-column: span 3; + } + + @include for-desktop { + grid-column: span 5; + } + } + + &__branch-name { + font-weight: $bold; + font-size: 24px; + line-height: 30px; + + &:nth-of-type(1) { + @include for-tablet { + margin-top: 20px; + } + } + + &:nth-of-type(2) { + margin-top: 24px; + } + } +} diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss new file mode 100644 index 0000000000..374e335057 --- /dev/null +++ b/src/styles/blocks/address.scss @@ -0,0 +1,34 @@ +@use '../utils/vars' as *; + +.address { + width: 237px; + line-height: 27px; + margin-bottom: 48px; + font-size: $font-small; + + &__title { + font-weight: $bold; + margin-bottom: 16px; + display: inline-block; + } + + &__paragraph { + font-size: 14px; + margin-bottom: 4px; + } + + &__bold { + font-weight: $bold; + margin-bottom: 8px; + } + + &__link { + text-decoration: none; + color: $main-dark; + transition: color $transition-time; + + &:hover { + color: $accent-color; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..8f48421552 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,40 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.button { + width: 280px; + background-color: $accent-color; + color: $white; + border: 0; + font-family: $main-font; + font-weight: $bold; + font-size: $font-small; + line-height: 56px; + display: block; + margin: 0 auto; + cursor: pointer; + + &:hover { + background-color: $dark-accent; + } + + &:active { + background-color: $light-accent; + } + + &--form { + width: 100%; + } + + &--gallery { + margin-top: 40px; + + @include for-tablet { + width: 392px; + } + + @include for-desktop { + width: 324px; + } + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..8055370be2 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,63 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.contact { + @include grid; + + justify-content: center; + + &__title { + font-weight: $bold; + margin-bottom: 48px; + margin-top: 20px; + font-size: $font-big; + line-height: $font-big; + letter-spacing: -1.5px; + + @include for-tablet { + font-size: $font-huge; + line-height: $font-huge; + width: 392px; + margin: 20px auto 48px; + } + } + + &__center { + text-align: center; + grid-column: span 2; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__item { + grid-column: span 2; + + @include for-tablet { + grid-column: span 3; + } + + @include for-desktop { + grid-column: span 7; + display: flex; + } + } + + &__form { + grid-column: span 2; + + @include for-tablet { + grid-column: span 3; + margin-top: 0; + } + + @include for-desktop { + grid-column: span 5; + } + } +} diff --git a/src/styles/blocks/explore.scss b/src/styles/blocks/explore.scss new file mode 100644 index 0000000000..706cdbd745 --- /dev/null +++ b/src/styles/blocks/explore.scss @@ -0,0 +1,96 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.explore { + display: flex; + flex-direction: column; + justify-content: center; + + &__articles { + display: flex; + flex-direction: column; + justify-content: center; + + @include for-desktop { + flex-direction: row; + gap: 24px; + } + } + + &__title { + display: inline-block; + font-weight: $bold; + margin-bottom: 40px; + margin-top: 20px; + font-size: $font-big; + line-height: $font-big; + letter-spacing: -1.5px; + width: 280px; + + @include for-tablet { + font-size: $font-huge; + line-height: $font-huge; + width: 392px; + } + + @include for-desktop { + width: 498px; + } + } + + &__center { + text-align: center; + } + + &__article { + margin-bottom: 48px; + } + + &__item { + text-align: center; + width: 100%; + } + + &__image { + width: 280px; + margin-bottom: 24px; + transition: $transition-time; + + &:hover { + transform: scale(1.05); + } + + @include for-tablet { + width: 392px; + margin-bottom: 32px; + } + + @include for-desktop { + width: 324px; + } + } + + &__subtitle { + color: $accent-color; + font-weight: $bold; + font-size: 24px; + line-height: 140%; + margin-bottom: 4px; + } + + &__paragraph { + width: 280px; + font-family: $sec-font; + font-size: $font-small; + line-height: 27px; + margin: 0 auto; + + @include for-tablet { + width: 392px; + } + + @include for-desktop { + width: 324px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..8bec1fe0dd --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,23 @@ +@use '../utils/mixins' as *; + +.footer { + display: block; + margin-top: 84px; + width: 100%; + height: 180px; + background-image: url(../images/photos/footer.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include for-tablet { + margin-top: 156px; + height: 359px; + } + + @include for-desktop { + background-repeat: repeat; + background-size: auto; + background-position: center; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..c4a7d1bfa2 --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,59 @@ +@use '../utils/mixins' as *; +@use '../utils/vars' as *; + +.form { + display: flex; + flex-direction: column; + gap: 16px; + + &__input { + height: 48px; + border: 0; + background-color: $form-bg; + width: 100%; + box-sizing: border-box; + font-family: $main-font; + font-size: 14px; + line-height: 20px; + padding-left: 11px; + + &::placeholder { + color: $gray; + } + + &:hover::placeholder { + color: $main-dark; + } + + &:focus { + border: 1px solid $main-dark; + } + } + + &__textarea { + font-family: $main-font; + height: 144px; + border: 0; + background-color: $form-bg; + width: 100%; + line-height: 20px; + padding-left: 11px; + padding-top: 14px; + box-sizing: border-box; + resize: none; + + &::placeholder { + color: $gray; + } + + &:hover::placeholder { + color: $main-dark; + } + } + + &__label { + &:not(:focus, :active) { + @include visually-hidden; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 0000000000..fc323c4f4c --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,37 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.gallery { + &__title { + display: inline-block; + margin-top: 20px; + font-weight: $bold; + font-size: $font-big; + line-height: $font-big; + letter-spacing: -1.5px; + + @include for-tablet { + font-size: $font-huge; + } + } + + &__center { + text-align: center; + } + + &__photos { + margin-top: 48px; + } + + &__description { + width: 280px; + margin: 8px auto 0; + font-weight: 400; + font-size: $font-small; + line-height: 27px; + + @include for-tablet { + width: 392px; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..1d1e8c309f --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,127 @@ +@use '../utils/mixins' as *; +@use '../utils/vars' as *; + +.header { + box-sizing: border-box; + height: 100vh; + width: 100%; + padding: 25px 20px; + background-image: url(../images/photos/header.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + color: $white; + + @include grid; + + justify-content: space-between; + align-items: start; + grid-template-rows: 1fr 1fr 1fr; + + @include for-tablet { + padding: 50px 72px; + } + + @include for-desktop { + padding: 50px 120px; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + } + + &__top { + grid-column: span 2; + display: flex; + justify-content: space-between; + align-items: center; + align-self: start; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__logo { + width: 64px; + height: 46px; + + @include for-tablet { + width: 87px; + height: 65px; + } + } + + &__buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; + text-decoration: none; + + @include for-tablet { + gap: 55px; + } + } + + &__burger { + &::before { + content: ''; + background-image: url(../images/icons/burger.svg); + background-size: cover; + display: block; + width: 18px; + height: 12px; + + @include for-tablet { + width: 24px; + height: 16px; + } + } + + &::after { + content: ''; + background-image: url(../images/icons/burger-hover.svg); + background-size: cover; + width: 18px; + height: 12px; + display: none; + + @include for-tablet { + width: 24px; + height: 16px; + } + } + + &:hover { + &::before { + display: none; + } + &::after { + display: block; + } + } + } + + &__middle { + grid-column: span 2; + font-weight: $bold; + font-size: 40px; + line-height: 40px; + letter-spacing: -1.5px; + text-align: center; + + @include for-tablet { + grid-column: span 6; + font-size: 64px; + line-height: 64px; + } + + @include for-desktop { + grid-column: span 12; + font-size: 80px; + line-height: 80px; + } + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..2d55349aac --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,26 @@ +@use '../utils/vars' as *; + +.links { + padding-top: 30px; + + &__link { + display: inline-block; + font-weight: $bold; + font-size: 22px; + line-height: 22px; + letter-spacing: 2px; + text-transform: uppercase; + color: $white; + text-decoration: none; + padding-bottom: 8px; + + &:hover { + border-bottom: 1px solid $white; + margin-bottom: -1px; + } + } + + &__item { + margin-bottom: 26px; + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 0000000000..d07226f428 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,9 @@ +@use '../utils/mixins' as *; + +.logo { + @include for-tablet { + width: 87px; + height: 65px; + padding-top: 25px; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..749499da62 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,15 @@ +@use '../utils/mixins' as *; + +.main { + box-sizing: border-box; + width: 100%; + padding: 0 20px; + + @include for-tablet { + padding: 0 75px; + } + + @include for-desktop { + padding: 0 120px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..3e95c933d8 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,92 @@ +@use '../utils/mixins' as *; +@use '../utils/vars' as *; + +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); + transition: transform $transition-time ease-in-out; + background-color: $accent-color; + padding: 0 20px 20px; + height: 100vh; + box-sizing: border-box; + overflow-y: auto; + z-index: 1; + + @include for-tablet { + padding: 0 72px 32px; + } + + @include for-desktop { + padding: 0 120px 32px; + } + + @include grid; + + place-content: start space-between; + gap: 0; + + &:target { + transform: translateX(0); + } + + &__links { + margin-bottom: 30px; + grid-column: span 2; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__navigation { + grid-column: span 2; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__paragraph { + font-weight: $bold; + font-size: $font-small; + line-height: 27px; + text-transform: uppercase; + color: $white; + grid-column: span 2; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + + &__call-link { + font-weight: $bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + color: $white; + text-decoration: none; + padding-bottom: 8px; + + &:hover { + border-bottom: 1px solid $white; + margin-bottom: -1px; + } + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..b1b16790a4 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,11 @@ +.navigation { + display: flex; + justify-content: space-between; + padding-top: 25px; + align-items: center; + + &__close { + margin-top: 10px; + width: 20px; + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..57663463fb --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,39 @@ +@use '../utils/vars' as *; +@use '../utils/mixins' as *; + +.phone { + &__label { + text-align: right; + font-size: $font-small; + line-height: 27px; + font-weight: $bold; + text-decoration: none; + color: $white; + text-transform: uppercase; + position: absolute; + transform: translateX(calc(-100% - 20px)) translateY(-40%); + display: none; + + @include for-desktop { + display: block; + } + } + + &:not(:hover) .phone__label { + @include visually-hidden; + } + + &__icon { + display: block; + margin: auto; + width: 18px; + height: 18px; + background-image: url(../images/icons/phone.svg); + background-size: cover; + + @include for-tablet { + width: 24px; + height: 24px; + } + } +} diff --git a/src/styles/blocks/photos.scss b/src/styles/blocks/photos.scss new file mode 100644 index 0000000000..d5d553d0a8 --- /dev/null +++ b/src/styles/blocks/photos.scss @@ -0,0 +1,154 @@ +@use '../utils/mixins' as *; +@use '../utils/vars' as *; + +.photos { + box-sizing: border-box; + width: 100%; + + @include grid; + + justify-content: center; + grid-template-rows: 1fr auto; + gap: 24px 20px; + + @include for-tablet { + grid-template-rows: 186px auto; + gap: 24px; + } + + @include for-desktop { + grid-template-rows: 320px auto; + } + + &--mid { + grid-template-columns: repeat(3, 88px); + gap: 24px 8px; + + @include for-tablet { + grid-template-columns: repeat(6, 80px); + gap: 25px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 63px); + gap: 24px; + } + } + + &__item { + width: 100%; + position: relative; + padding-top: 100%; + overflow: hidden; + cursor: pointer; + transition: $transition-time; + + &:hover { + transform: scale(1.05); + } + + @include for-tablet { + grid-column: span 3; + padding-top: 156px; + } + + @include for-desktop { + grid-column: span 6; + padding-top: 320px; + } + + &--small { + @include for-tablet { + grid-column: span 2; + } + + @include for-desktop { + grid-column: span 4; + } + } + + &--big { + @include for-tablet { + grid-column: span 4; + } + + @include for-desktop { + grid-column: span 8; + } + } + + &--mid { + width: 88px; + position: relative; + padding-top: 100%; + + @include for-tablet { + width: 181px; + grid-column: span 2; + } + + @include for-desktop { + width: 324px; + grid-column: span 4; + } + } + } + + &__image { + top: 0; + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + + &--framed { + object-fit: cover; + object-position: 18% 100%; + transform: scale(1.4); + + @include for-tablet { + transform: scale(1); + object-position: 0; + } + } + + &--framed-right { + object-fit: cover; + object-position: 100% 100%; + } + } + + &__title { + font-size: $font-small; + line-height: 27px; + + &--accent { + color: $accent-color; + font-weight: $bold; + } + } + + &__description { + grid-column: span 2; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + + &--mid { + grid-column: span 3; + + @include for-tablet { + grid-column: span 6; + } + + @include for-desktop { + grid-column: span 12; + } + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..56150bf2fc --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,9 @@ +@use '../utils/mixins' as *; + +.section { + padding-top: 80px; + + @include for-tablet { + padding-top: 120px; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..948a28b2a2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,31 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use 'utils/vars' as *; +@use 'utils/reset'; +@use 'blocks/header'; +@use 'blocks/main'; +@use 'blocks/section'; +@use 'blocks/photos'; +@use 'blocks/button'; +@use 'blocks/about'; +@use 'blocks/gallery'; +@use 'blocks/explore'; +@use 'blocks/contact'; +@use 'blocks/address'; +@use 'blocks/form'; +@use 'blocks/footer'; +@use 'blocks/navigation'; +@use 'blocks/menu'; +@use 'blocks/links'; +@use 'blocks/logo'; +@use 'blocks/phone'; -body { - background: $c-gray; +html { + font-family: $main-font; + font-weight: 400; + color: $main-dark; + background-color: $background; + scroll-behavior: smooth; +} + +.page__body--with-menu { + overflow: hidden; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3e..0000000000 --- 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 80c79780dc..421af0b808 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,37 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin for-tablet() { + @media (min-width: 744px) { + @content; } } + +@mixin for-desktop() { + @media (min-width: 1260px) { + @content; + } +} + +@mixin grid { + display: grid; + grid-template-columns: repeat(2, 130px); + gap: 20px; + + @include for-tablet { + grid-template-columns: repeat(6, 80px); + gap: 24px; + } + + @include for-desktop { + grid-template-columns: repeat(12, 63px); + gap: 24px; + } +} + +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 0000000000..f5b418594d --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,138 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: inherit; + font-weight: inherit; + font-style: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..060bb601e9 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,19 @@ -$c-gray: #eee; +$background: #e5e5e5; +$gray: #7e7e83; +$main-dark: #161616; +$white: #fff; +$form-bg: #f8f8fa; +$accent-color: #d12d35; +$dark-accent: #ae1c23; +$light-accent: #eb343d; + +/* Fonts */ +$main-font: Cinzel, serif; +$sec-font: Roboto, sans-serif; +$bold: 700; +$font-small: 16px; +$font-big: 32px; +$font-huge: 48px; + +/* Animation */ +$transition-time: 0.2s;