diff --git a/README.md b/README.md index 97d3c9060a..bf01b499f5 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://dziadulec.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..f2e5824f32 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,223 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami + MYBIKE + + + + -

Miami

+ +
+ + + + + +
+ +
+ +1 234 5555-55-55 +

Book a test ride

+
+ + +
+ +

Take the Streets

+
+
+
+

Move Free

+

Shift your ride, not gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.

+
+

Compare bikes

+
+ +
+ Sporty 4 +

Sporty 4

+

The iconic frame brought to a new performance height as a sporty, active ride.

+

$ 2 590

+
+
+ Ride in town ST +

Ride in town ST

+

An open frame for an upright riding position as the most comfortable ride in town.

+

$ 2 590

+
+
+ Agile ride 3 +

Agile ride 3

+

The lightweight frame that has earned its street tread as a sleek, agile ride.

+

$ 2 090

+
+
+
+

The details

+
+ Agile ride 3 + Agile ride 3 +

Auto Unlock

+

The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.

+
+
+ Agile ride 3 + Agile ride 3 +

Range & Integrated lights

+

The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.

+
+
+ Agile ride 3 + Agile ride 3 +

Hydraulic disc brakes & Lightweight

+

Brakes with total stopping power the second you make contact. The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.

+
+ +
+
+

Contact us

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

+ Phone: + + +1 234 5555-55-55 + +

+

+ Email: + + hello@miami.com + +

+

+ Address: + + 400 first ave,
suite 700, Minneapolis, MN 55401 + +

+
+
+
+
+ footer image 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/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea (1).jpg b/src/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea (1).jpg new file mode 100644 index 0000000000..3109c16e38 Binary files /dev/null and b/src/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea (1).jpg differ diff --git a/src/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea.jpg b/src/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea.jpg new file mode 100644 index 0000000000..3109c16e38 Binary files /dev/null and b/src/images/photos/75d297df5101dbe1dd55f818092e4eb22a439eea.jpg differ diff --git a/src/images/photos/Agile_ride_3_392.jpg b/src/images/photos/Agile_ride_3_392.jpg new file mode 100644 index 0000000000..3469ebf52b Binary files /dev/null and b/src/images/photos/Agile_ride_3_392.jpg differ diff --git a/src/images/photos/Auto Unlock_1.jpg b/src/images/photos/Auto Unlock_1.jpg new file mode 100644 index 0000000000..ded57db45a Binary files /dev/null and b/src/images/photos/Auto Unlock_1.jpg differ diff --git a/src/images/photos/Auto Unlock_2_small.jpg b/src/images/photos/Auto Unlock_2_small.jpg new file mode 100644 index 0000000000..90f7cde004 Binary files /dev/null and b/src/images/photos/Auto Unlock_2_small.jpg differ diff --git a/src/images/photos/Buttons_x.svg b/src/images/photos/Buttons_x.svg new file mode 100644 index 0000000000..d35cf26932 --- /dev/null +++ b/src/images/photos/Buttons_x.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/MyBiKE_logo.svg b/src/images/photos/MyBiKE_logo.svg new file mode 100644 index 0000000000..4fa6cd0bc6 --- /dev/null +++ b/src/images/photos/MyBiKE_logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/photos/MyBiKE_logo_Black.svg b/src/images/photos/MyBiKE_logo_Black.svg new file mode 100644 index 0000000000..7025785957 --- /dev/null +++ b/src/images/photos/MyBiKE_logo_Black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/photos/MyBike_Vector_favikon.svg b/src/images/photos/MyBike_Vector_favikon.svg new file mode 100644 index 0000000000..f40830ee08 --- /dev/null +++ b/src/images/photos/MyBike_Vector_favikon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/MyBike_general.jpg b/src/images/photos/MyBike_general.jpg new file mode 100644 index 0000000000..3109c16e38 Binary files /dev/null and b/src/images/photos/MyBike_general.jpg differ diff --git a/src/images/photos/MyBike_general_mobile.jpg b/src/images/photos/MyBike_general_mobile.jpg new file mode 100644 index 0000000000..8119010a73 Binary files /dev/null and b/src/images/photos/MyBike_general_mobile.jpg differ diff --git a/src/images/photos/MyBike_white_logo.jpg b/src/images/photos/MyBike_white_logo.jpg new file mode 100644 index 0000000000..913deaa91d Binary files /dev/null and b/src/images/photos/MyBike_white_logo.jpg differ diff --git a/src/images/photos/My_bikes_brakes_mobile.jpg b/src/images/photos/My_bikes_brakes_mobile.jpg new file mode 100644 index 0000000000..9d311f4e56 Binary files /dev/null and b/src/images/photos/My_bikes_brakes_mobile.jpg differ diff --git a/src/images/photos/My_bikes_light_back_mobile.jpg b/src/images/photos/My_bikes_light_back_mobile.jpg new file mode 100644 index 0000000000..42e14230c5 Binary files /dev/null and b/src/images/photos/My_bikes_light_back_mobile.jpg differ diff --git a/src/images/photos/My_bikes_light_front_mobile.jpg b/src/images/photos/My_bikes_light_front_mobile.jpg new file mode 100644 index 0000000000..8a27bef46f Binary files /dev/null and b/src/images/photos/My_bikes_light_front_mobile.jpg differ diff --git a/src/images/photos/My_bikes_lightweight_mobile.jpg b/src/images/photos/My_bikes_lightweight_mobile.jpg new file mode 100644 index 0000000000..7a7020b308 Binary files /dev/null and b/src/images/photos/My_bikes_lightweight_mobile.jpg differ diff --git a/src/images/photos/Ride in town ST_392.jpg b/src/images/photos/Ride in town ST_392.jpg new file mode 100644 index 0000000000..491d83e992 Binary files /dev/null and b/src/images/photos/Ride in town ST_392.jpg differ diff --git a/src/images/photos/Sporty 4_392.jpg b/src/images/photos/Sporty 4_392.jpg new file mode 100644 index 0000000000..0cb8f6f50b Binary files /dev/null and b/src/images/photos/Sporty 4_392.jpg differ diff --git a/src/images/photos/auto_unlock_672.jpg b/src/images/photos/auto_unlock_672.jpg new file mode 100644 index 0000000000..32a27bb70c Binary files /dev/null and b/src/images/photos/auto_unlock_672.jpg differ diff --git a/src/images/photos/burger_clicked.svg b/src/images/photos/burger_clicked.svg new file mode 100644 index 0000000000..1fc00346bf --- /dev/null +++ b/src/images/photos/burger_clicked.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/favicon.svg b/src/images/photos/favicon.svg new file mode 100644 index 0000000000..f40830ee08 --- /dev/null +++ b/src/images/photos/favicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/photos/ffa793c437ea939517652cd41ee797dd863a0409.png b/src/images/photos/ffa793c437ea939517652cd41ee797dd863a0409.png new file mode 100644 index 0000000000..3f9538a46f Binary files /dev/null and b/src/images/photos/ffa793c437ea939517652cd41ee797dd863a0409.png differ diff --git a/src/images/photos/footer_image.jpg b/src/images/photos/footer_image.jpg new file mode 100644 index 0000000000..c547a787d2 Binary files /dev/null and b/src/images/photos/footer_image.jpg differ diff --git a/src/images/photos/sporty_4_test.jpg b/src/images/photos/sporty_4_test.jpg new file mode 100644 index 0000000000..0cb8f6f50b Binary files /dev/null and b/src/images/photos/sporty_4_test.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/address.scss b/src/styles/blocks/address.scss new file mode 100644 index 0000000000..f794dac0d3 --- /dev/null +++ b/src/styles/blocks/address.scss @@ -0,0 +1,29 @@ +@use '../utils/vars.scss' as *; + +.address { + display: flex; + flex-direction: column; + gap: 20px; + font-weight: 400; + font-size: $font-text; + line-height: 140%; + letter-spacing: 0; + + &__text { + display: flex; + flex-direction: column; + text-decoration: none; + font-style: normal; + } + + &__link { + padding-top: 10px; + text-decoration: none; + color: $color_white; + + &:hover { + border-bottom: 1px solid $color_white; + color: $color_menu_bg; + } + } +} diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss new file mode 100644 index 0000000000..4608ecfcb5 --- /dev/null +++ b/src/styles/blocks/article.scss @@ -0,0 +1,18 @@ +.article{ + line-height: 140%; + letter-spacing: 0px; + + &__lead{ + padding-top: 32px; + font-weight: 500; + font-style: Medium; + font-size: 23px; + } + + &__description{ + font-weight: 400; + font-style: normal; + font-size: 16px; + } + +} diff --git a/src/styles/blocks/bike.scss b/src/styles/blocks/bike.scss new file mode 100644 index 0000000000..ca9e0f009a --- /dev/null +++ b/src/styles/blocks/bike.scss @@ -0,0 +1,44 @@ +@use '../utils/vars.scss' as *; + +.bike { + padding-bottom: 40px; + display: flex; + flex-direction: column; + max-width: 390px; + width: 100%; + + &__image { + width: 100%; + display: block; + transition: transform 0.3s ease-in-out; + cursor: pointer; + } + + &__image:hover { + transform: scale(1.2); + } + + &__name { + padding-top: 32px; + } + + &__name, + &__price { + font-weight: 700; + font-size: $font-article; + } + + &__text { + padding-top: 8px; + padding-bottom: 16px; + font-weight: 400; + font-size: 16px; + } + + &__price, + &__name, + &__text { + line-height: 140%; + letter-spacing: 0; + } +} diff --git a/src/styles/blocks/bikes.scss b/src/styles/blocks/bikes.scss new file mode 100644 index 0000000000..b6042f17b0 --- /dev/null +++ b/src/styles/blocks/bikes.scss @@ -0,0 +1,21 @@ +@use '../utils/vars.scss' as *; + +.bikes { + display: flex; + flex-direction: column; + align-items: center; +} + +@media screen and (min-width: 744px) { + .bikes { + gap: 24px; + padding: 0 102px; + } +} + +@media screen and (min-width: 1260px) { + .bikes { + flex-direction: row; + padding: 0; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..7aff9cbcfa --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,23 @@ +@use '../utils/vars.scss' as *; + +.button { + margin: auto; + display: block; + max-width: 360px; + width: 100%; + height: 56px; + border-radius: 48px; + background-color: $color_white; + font-weight: 700; + font-size: $font-text; + line-height: 27px; + color: $color_black; + + &--form { + max-width: 100%; + } + + &:hover { + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.6); + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..01e96ea0e1 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,21 @@ +@use '../utils/vars.scss' as *; + +.contact { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 48px; +} + +@media screen and (min-width: 744px) { + .contact { + flex-direction: row; + gap: 24px; + } +} + +@media screen and (min-width: 1260px) { + .contact { + gap: 180px; + } +} diff --git a/src/styles/blocks/content.scss b/src/styles/blocks/content.scss new file mode 100644 index 0000000000..c24bc6e9ab --- /dev/null +++ b/src/styles/blocks/content.scss @@ -0,0 +1,17 @@ +@use '../utils/vars.scss' as *; + +.content { + padding: 0 $padding-for-mobile; +} + +@media screen and (min-width: 744px) { + .content { + padding: 0 $padding-for-tablet; + } +} + +@media screen and (min-width: 1260px) { + .content { + padding: 0 $padding-for-desktop; + } +} diff --git a/src/styles/blocks/detail.scss b/src/styles/blocks/detail.scss new file mode 100644 index 0000000000..dcf1070276 --- /dev/null +++ b/src/styles/blocks/detail.scss @@ -0,0 +1,65 @@ +.detail { + display: grid; + grid-template-columns: 1fr 1fr; + line-height: 140%; + letter-spacing: 0; + padding-bottom: 40px; + column-gap: 20px; + + &__image { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + transition: transform 0.3s ease-in-out; + } + + &__image:hover { + transform: scale(1.02); + } + + &__title { + padding-top: 16px; + padding-bottom: 8px; + font-weight: 700; + font-size: 24px; + grid-column: span 2; + } + + &__description { + font-weight: 400; + font-size: 16px; + grid-column: span 2; + } +} + +@media screen and (min-width: 744px) { + .detail { + column-gap: 24px; + grid-template-columns: repeat(6, 1fr); + + &__image { + grid-column: span 2; + + &--wide { + grid-column: span 4; + } + } + + &__title { + grid-column: span 6; + } + + &__description { + grid-column: span 6; + } + } +} + +@media screen and (min-width: 1260px) { + .detail { + &__description { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..a92acada93 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,5 @@ +.footer { + display: flex; + flex-direction: column; + gap: 24px; +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..c9362370bc --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,37 @@ +@use '../utils/vars.scss' as *; + +.form { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; + + + &__label { + display: none; + } + + &__input { + padding: 15px; + height: 48px; + font-weight: 500; + font-size: $font-text; + line-height: 140%; + letter-spacing: 0; + border-radius: 16px; + } + &__textarea { + padding: 15px; + font-weight: 500; + font-size: $font-text; + line-height: 140%; + letter-spacing: 0; + border-radius: 12px; + } +} + +@media screen and (min-width: 744px) { + .form { + max-width: 500px; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..524af29912 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,28 @@ +@use '../utils/vars.scss' as *; + +.header { + min-height: 100vh; + background-image: url('../images/photos/MyBike_general.jpg');; + background-repeat: no-repeat; + background-position: right center; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: $padding-header-mobile; +} + + +@media screen and (min-width: 744px) { + .header { + padding: $padding-header-tablet; + background-position: center center; + background-image: url('../images/photos/MyBike_general.jpg'); + } +} + +@media screen and (min-width: 1260px) { + .header { + padding: $padding-header-desktop; + } +} diff --git a/src/styles/blocks/image.scss b/src/styles/blocks/image.scss new file mode 100644 index 0000000000..ba1dc09c44 --- /dev/null +++ b/src/styles/blocks/image.scss @@ -0,0 +1,17 @@ +@use '../utils/vars.scss' as *; + +.image { + padding-top: 120px; + width: 100%; + left: 0; + position: relative; + object-fit: cover; + + @media screen and (min-width: 744px) { + padding-top: 102px; + } + + @media screen and (min-width: 1260px) { + padding-top: 164px; + } +} diff --git a/src/styles/blocks/lead.scss b/src/styles/blocks/lead.scss new file mode 100644 index 0000000000..7d0f2032af --- /dev/null +++ b/src/styles/blocks/lead.scss @@ -0,0 +1,48 @@ +@use '../utils/vars.scss' as *; + +.lead { + padding-top: 60px; + display: grid; + grid-template-columns: 1fr; + gap: 32px; + + &__title { + font-size: $font-lead-mobile; + line-height: 100%; + letter-spacing: -1.5px; + font-weight: 500; + } + + &__text { + font-size: $font-article; + line-height: 140%; + letter-spacing: 0; + } +} + +@media screen and (min-width: 744px) { + .lead { + padding-top: 120px; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + + &__title { + font-size: $font-lead-tablet; + grid-column: span 1; + } + } +} + +@media screen and (min-width: 1260px) { + .lead { + grid-template-columns: repeat(6, 1fr); + &__title { + font-size: $font-lead-desktop; + grid-column: span 2; + } + + &__text { + grid-column: span 3; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..8266e24e45 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,106 @@ +@use '../utils/vars.scss' as *; + +.menu { + position: fixed; + top: 0; + right: 0; + left: 0; + min-height: 100vh; + background: $color-menu-bg; + z-index: 1; + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + border: $color_black solid 1px; + padding: $padding-header-mobile; + font-weight: 600; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + } + + &:target { + transform: translateX(0); + } + + &__logo { + width: 187px; + } + + &__close { + width: 28px; + height: 28px; + background-image: url('/src/images/photos/Buttons_x.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + cursor: pointer; + } + + &__list { + display: flex; + flex-direction: column; + } + + &__item { + list-style-type: none; + } + + &__links { + display: flex; + flex-direction: column; + gap: 32px; + padding-top: 48px; + } + + &__link { + font-size: 22px; + line-height: 140%; + letter-spacing: 0; + text-transform: capitalize; + color: $color_black; + text-decoration: none; + + &:hover { + border-bottom: 1px solid #1d1d1d; + } + } + + &__footer { + padding-top: 40px; + display: flex; + flex-direction: column; + } + + &__phone { + font-size: 16px; + color: $color_black; + text-decoration: none; + line-height: 27px; + } + + &__info { + width: 140px; + color: $color_black; + font-size: 12px; + padding-top: 16px; + padding-bottom: 8px; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + border-bottom: 1px solid $color_black; + } +} + +@media screen and (min-width: 744px) { + .menu { + padding: $padding-header-tablet; + } +} + +@media screen and (min-width: 1260px) { + .menu { + padding: $padding-header-desktop; + } +} diff --git a/src/styles/blocks/navigaction.scss b/src/styles/blocks/navigaction.scss new file mode 100644 index 0000000000..f4c2cad80d --- /dev/null +++ b/src/styles/blocks/navigaction.scss @@ -0,0 +1,88 @@ +@use '../utils/vars.scss' as *; + +.navigation { + display: flex; + justify-content: space-between; + + &__logo { + width: 130px; + } + + &__buttons { + gap: 24px; + display: flex; + justify-content: space-between; + } + + &__icon { + width: 18px; + padding: 6px; + position: relative; + } + + &__icon--burger { + background-image: url('/src/images/menu.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + cursor: pointer; + + &:hover { + background-image: url('/src/images/menu_hover.svg'); + } + + &:active { + .menu { + transform: translateX(0); + } + } + } + + &__icon--phone { + background-image: url('/src/images/phone.svg'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + cursor: pointer; + } +} + +@media screen and (min-width: 744px) { + .navigation { + &__logo { + width: 187px; + } + + &__buttons { + gap: 32px; + } + + &__icon { + width: 24px; + padding: 8px; + } + + &__icon--phone::after { + content: '+1 234 555-55-55'; + position: absolute; + left: -140px; + top: 50%; + transform: translateY(-50%); + color: white; + font-size: 14px; + visibility: hidden; + } + + &__icon--phone:hover::after { + visibility: visible; + } + } +} + +@media screen and (min-width: 1260px) { + .navigation { + &__buttons { + gap: 32px; + } + } +} diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss new file mode 100644 index 0000000000..8182bb6cea --- /dev/null +++ b/src/styles/blocks/reset.scss @@ -0,0 +1,33 @@ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..048a6e927a --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,47 @@ +@use '../utils/vars.scss' as *; + +.title { + font-weight: 700; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + + &__main { + padding-bottom: 88px; + } + + &__section { + font-weight: 500; + font-size: 32px; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + text-transform: capitalize; + padding-top: 92px; + padding-bottom: 48px; + } +} + +@media screen and (min-width: 744px) { + .title { + &__main { + padding-bottom: 130px; + font-size: $font-title-tablet; + } + + &__section { + font-size: $font-lead-tablet; + } + } +} + +@media screen and (min-width: 1260px) { + .title { + + + &__main { + padding-bottom: 210px; + font-size: $font-title-desktop; + } + } +} diff --git a/src/styles/fonts/_fonts.scss b/src/styles/fonts/_fonts.scss new file mode 100644 index 0000000000..d85907d179 --- /dev/null +++ b/src/styles/fonts/_fonts.scss @@ -0,0 +1,6 @@ +@font-face { + font-family: Poppins, Arial, Helvetica, sans-serif; + src: url('../fonts/Poppins-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 0000000000..b06d0bd041 --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["blocks/reset.scss","blocks/title.scss","blocks/navigaction.scss","main.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AC9CD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACvBA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;;;ACxBN;EACE;EACA","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..8af150d5c4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,31 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@use '../styles/utils/vars.scss' as *; +@use '../styles/blocks/reset.scss'; +@use '../styles/blocks/address.scss'; +@use '../styles/blocks/bike.scss'; +@use '../styles/blocks/bikes.scss'; +@use '../styles/blocks/button.scss'; +@use '../styles/blocks/contact.scss'; +@use '../styles/blocks/content.scss'; +@use '../styles/blocks/detail.scss'; +@use '../styles/blocks/form.scss'; +@use '../styles/blocks/header.scss'; +@use '../styles/blocks/lead.scss'; +@use '../styles/blocks/menu.scss'; +@use '../styles/blocks/navigaction.scss'; +@use '../styles/blocks/title.scss'; +@use '../styles/blocks/footer.scss'; +@use '../styles/blocks/image.scss'; + +html { + scroll-behavior: smooth; +} body { - background: $c-gray; + background: $color_black; + font-family: Poppins, Arial, sans-serif; + color: $color_white; +} + +.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 deleted file mode 100644 index 80c79780dc..0000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffbb..a79edb81e5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,23 @@ -$c-gray: #eee; +/* PADDINGS */ +$padding-for-mobile: 20px; +$padding-for-tablet: 72px; +$padding-for-desktop: 120px; +$padding-header-mobile: 24px 20px 0; +$padding-header-tablet: 36px 72px 0; +$padding-header-desktop: 36px 120px 0; + +/* COLORS */ + +$color-menu-bg: #c2c2c2; +$color_black: #1d1d1d; +$color_white: #fff; + +/* FONT SIZES */ +$font-title-mobile: 26px; +$font-title-tablet: 64px; +$font-title-desktop: 80px; +$font-lead-mobile: 32px; +$font-lead-tablet: 48px; +$font-lead-desktop: 64px; +$font-article: 24px; +$font-text: 16px;