diff --git a/README.md b/README.md index a95e97afe..539c76a8a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Kickstarter landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Ujp7bCFuvuJlkn8TSbQPSZ/%E2%84%9611-(kickstarter)?node-id=19655%3A33) - Use BEM and SCSS - The design 1440px @@ -34,7 +34,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Uj 11. `git push origin develop` - to send you code for PR 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Kickstarter/) + [DEMO LINK](https://AntonyShaga.github.io/Kickstarter/) 14. Copy `DEMO LINK` to the PR description > To update you PR repeat steps 7-11 diff --git a/index.html b/index.html index d339e6856..fe5a86e03 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,575 @@ - - - - Title - - - -

Hello Mate Academy

- - + + + + + Kickstarter + + + +
+
+
+ + +
+
+ Specs + +
+ + EN + + + / + + + UA + +
+ + +
+ + + + + + +
+
+
+ +
+
+ + + + + + Futuristic wireless speaker + + +
+

+ Futuristic
+ Wireless
+ Speaker +

+ +

+ Luna’s performance is balanced and smooth in all frequency ranges + which makes the music both naturally pleasant and distinctly more + layered. +

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

+ Futuristic Design +

+ +

+ To give Luna a truly flawless look, we specifically picked aircraft + grade aluminum as its material and adopted both three-dimensional + stretch-bending technology and a high precision cold forging technique. +

+
+ +
+ + + + +

+ Tweeter Speaker System +

+ +

+ To deliver a more layered sound performance better than a sole + full-range speaker, our team equipped Luna with one more tweeter + speaker responsible for high-frequency sound independently. +

+
+ +
+ + + + +

+ Multiroom System +

+ +

+ Luna is natively compatible with your home Wi-Fi. Set up multiple + speakers in different rooms to expand your music experience into the + entire house. +

+
+ +
+ + + + +

+ Intuitive Lighting System +

+ +

+ An intuitive user interface allows you to adjust the hue and saturation + of color for lighting that fits any mood and situation. +

+
+
+ + + + + + + Meet Luna speaker system + +
+ +
+
+ + + + + + Sketches of Luna speaker design + + +
+

+ Designed for the future +

+ +

+ In 2014, a group of geeky industrial designers, engineering veterans + and acoustic experts formed crazybaby. This is a bunch of passionate + people who are crazy enough to think they can challenge the industry + with disruptive audio products. +

+ + + See more about us + +
+
+ +
+ + + + + + Luna Eye speaker on a wooden stump + + +
+

+ Luna Eye +

+ +

+ Luna Eye is to the essence of this innovative light and audio system. + It comprises an independent tweeter speaker, a light guiding component, + a dome and a ring ornament. +

+ + + See more about us + +
+
+
+ +
+
+ + + + +

+ “It really took me by surprise honestly to have such full beautiful + sound that coming out of this small compact device. And with the brush + aluminum surface, it feels so familiar. Like my iPhone.” +

+ +
+ Garrett Martin + + + Garrett Martin + + +

+ Creative Director +

+
+
+
+ +
+
+

+ Features +

+ +
+
+
+

+ Connectivity +

+ +
    +
  • Hands Free Wireless Audio
    • +
  • Bluetooth 4.0 LE
    • +
  • Wi-Fi 2.4 GHz (802.11 b/g/n)
    • +
  • Smart Multiroom System Set Up
    • +
  • Party Mode with 6.0 Units and above
    • +
  • MESHNET Multi Speaker Network
    • +
+
+ +
+

+ Sound & Music +

+ +
    +
  • Feel-in-chest Base Power
    • +
  • Lossless Digital Audio Transmission
    • +
  • Easy & Stable Stereo Pairing
    • +
  • Crisp and Clear High Frequency Sound
    • +
  • Streams from Cloud Music and Local Library
    • +
  • Auto Music Playback from Last Song Stopped
    • +
+
+ +
+

+ App Features +

+ +
    +
  • Customize Music Schedule
    • +
  • Wake Up with Favorite Songs
    • +
  • Home Detection Auto Wake Up
    • +
  • Color Wheel
    • +
+
+
+ +
+
+ + + +
+ +
+ 01 + /03 +
+
+ + + + + + + Exploded view of Luna speaker + +
+
+
+ +
+

+ Do you have any questions? +

+ +
+ + + + + +
+
+ +
+ + + + + diff --git a/package-lock.json b/package-lock.json index ace1ce6c0..606828711 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -60,6 +60,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -544,6 +545,7 @@ "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz", "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==", "dev": true, + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -592,6 +594,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -633,6 +636,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1315,7 +1319,6 @@ "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", "dev": true, - "peer": true, "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", @@ -1333,7 +1336,6 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1346,7 +1348,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz", "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -1358,15 +1359,13 @@ "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", "dev": true, - "peer": true, "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", @@ -1384,7 +1383,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^6.0.1" }, @@ -1400,7 +1398,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", @@ -1875,10 +1872,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -1955,7 +1953,6 @@ "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, - "peer": true, "engines": { "node": ">= 20" } @@ -1984,7 +1981,6 @@ "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0", "universal-user-agent": "^7.0.2" @@ -1998,7 +1994,6 @@ "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", "dev": true, - "peer": true, "dependencies": { "@octokit/request": "^10.0.6", "@octokit/types": "^16.0.0", @@ -2012,8 +2007,7 @@ "version": "27.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -2075,7 +2069,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", "dev": true, - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.2", "@octokit/request-error": "^7.0.2", @@ -2092,7 +2085,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0" }, @@ -2280,7 +2272,6 @@ "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", "dev": true, - "peer": true, "dependencies": { "@octokit/openapi-types": "^27.0.0" } @@ -2587,7 +2578,6 @@ "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", "dev": true, "optional": true, - "peer": true, "engines": { "node": ">=14" } @@ -3073,6 +3063,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3156,6 +3147,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3725,8 +3717,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/bl": { "version": "4.1.0", @@ -3777,8 +3768,7 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/browserslist": { "version": "4.28.0", @@ -3799,6 +3789,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4797,7 +4788,6 @@ "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz", "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==", "dev": true, - "peer": true, "engines": { "node": ">=0.3.1" } @@ -4939,8 +4929,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/ecc-jsbn": { "version": "0.1.2", @@ -4990,6 +4979,7 @@ "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz", "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==", "dev": true, + "peer": true, "dependencies": { "ansi-colors": "^4.1.1", "strip-ansi": "^6.0.1" @@ -5274,6 +5264,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -5329,6 +5320,7 @@ "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz", "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==", "dev": true, + "peer": true, "bin": { "eslint-config-prettier": "bin/cli.js" }, @@ -5431,6 +5423,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz", "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -5485,6 +5478,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz", "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==", "dev": true, + "peer": true, "dependencies": { "eslint-plugin-es": "^3.0.0", "eslint-utils": "^2.0.0", @@ -5535,6 +5529,7 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz", "integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==", "dev": true, + "peer": true, "engines": { "node": ">=6" } @@ -5558,6 +5553,7 @@ "url": "https://feross.org/support" } ], + "peer": true, "peerDependencies": { "eslint": ">=5.0.0" } @@ -5926,8 +5922,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -6099,7 +6094,6 @@ "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz", "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==", "dev": true, - "peer": true, "bin": { "flat": "cli.js" } @@ -6144,7 +6138,6 @@ "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz", "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==", "dev": true, - "peer": true, "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" @@ -6161,7 +6154,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" }, @@ -6697,7 +6689,6 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true, - "peer": true, "bin": { "he": "bin/he" } @@ -7620,7 +7611,6 @@ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", "dev": true, - "peer": true, "dependencies": { "@isaacs/cliui": "^8.0.2" }, @@ -8987,7 +8977,6 @@ "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true, - "peer": true, "engines": { "node": ">=16 || 14 >=14.17" } @@ -8997,7 +8986,6 @@ "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.5.tgz", "integrity": "sha512-mTT6RgopEYABzXWFx+GcJ+ZQ32kp4fMf0xvpZIIfSq9Z8lC/++MtcCnQ9t5FP2veYEP95FIYSvW+U9fV4xrlig==", "dev": true, - "peer": true, "dependencies": { "browser-stdout": "^1.3.1", "chokidar": "^4.0.1", @@ -9033,15 +9021,13 @@ "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/mocha/node_modules/brace-expansion": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==", "dev": true, - "peer": true, "dependencies": { "balanced-match": "^1.0.0" } @@ -9051,7 +9037,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" @@ -9068,7 +9053,6 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==", "dev": true, - "peer": true, "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", @@ -9089,7 +9073,6 @@ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "dev": true, - "peer": true, "dependencies": { "argparse": "^2.0.1" }, @@ -9102,7 +9085,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" }, @@ -9118,7 +9100,6 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "dev": true, - "peer": true, "dependencies": { "brace-expansion": "^2.0.1" }, @@ -9134,7 +9115,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" }, @@ -9150,7 +9130,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -9166,7 +9145,6 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==", "dev": true, - "peer": true, "engines": { "node": ">=12" } @@ -9871,8 +9849,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", - "dev": true, - "peer": true + "dev": true }, "node_modules/parent-module": { "version": "1.0.1", @@ -9966,7 +9943,6 @@ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", "dev": true, - "peer": true, "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" @@ -9982,8 +9958,7 @@ "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/path-to-regexp": { "version": "1.9.0", @@ -10097,6 +10072,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -10175,6 +10151,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -10212,6 +10189,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.1.tgz", "integrity": "sha512-RWKXE4qB3u5Z6yz7omJkjWwmTfLdcbv44jUVHC5NpfXwFGzvpQM798FGv/6WNK879tc+Cn0AAyherCl1KjbyZQ==", "dev": true, + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -10431,7 +10409,6 @@ "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", "dev": true, - "peer": true, "dependencies": { "safe-buffer": "^5.1.0" } @@ -10921,6 +10898,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "dev": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -10962,7 +10940,6 @@ "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "dev": true, - "peer": true, "dependencies": { "randombytes": "^2.1.0" } @@ -11360,7 +11337,6 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", "dev": true, - "peer": true, "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", @@ -11444,7 +11420,6 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", "dev": true, - "peer": true, "dependencies": { "ansi-regex": "^5.0.1" }, @@ -11518,6 +11493,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -12058,6 +12034,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12353,8 +12330,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", @@ -12576,6 +12552,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -12933,8 +12910,7 @@ "version": "9.3.4", "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.4.tgz", "integrity": "sha512-TmPRQYYSAnnDiEB0P/Ytip7bFGvqnSU6I2BcuSw7Hx+JSg/DsUi5ebYfc8GYaSdpuvOcEs6dXxPurOYpe9QFwg==", - "dev": true, - "peer": true + "dev": true }, "node_modules/wrap-ansi": { "version": "6.2.0", @@ -12956,7 +12932,6 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", @@ -13039,20 +13014,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, - "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", @@ -13085,7 +13046,6 @@ "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz", "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==", "dev": true, - "peer": true, "dependencies": { "camelcase": "^6.0.0", "decamelize": "^4.0.0", @@ -13101,7 +13061,6 @@ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13114,7 +13073,6 @@ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz", "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==", "dev": true, - "peer": true, "engines": { "node": ">=10" }, @@ -13127,7 +13085,6 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", "dev": true, - "peer": true, "engines": { "node": ">=8" } diff --git a/package.json b/package.json index 19d2ac56e..cd8f44768 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/fonts/Inter-VariableFont_opsz,wght.ttf b/src/fonts/Inter-VariableFont_opsz,wght.ttf new file mode 100644 index 000000000..e31b51e3e Binary files /dev/null and b/src/fonts/Inter-VariableFont_opsz,wght.ttf differ diff --git a/src/images/about-design-desktop.jpg b/src/images/about-design-desktop.jpg new file mode 100644 index 000000000..108332f33 Binary files /dev/null and b/src/images/about-design-desktop.jpg differ diff --git a/src/images/about-design-mobile.jpg b/src/images/about-design-mobile.jpg new file mode 100644 index 000000000..51f5ac64d Binary files /dev/null and b/src/images/about-design-mobile.jpg differ diff --git a/src/images/about-design-tablet.jpg b/src/images/about-design-tablet.jpg new file mode 100644 index 000000000..524e5ce86 Binary files /dev/null and b/src/images/about-design-tablet.jpg differ diff --git a/src/images/about-luna-eye-desktop.jpg b/src/images/about-luna-eye-desktop.jpg new file mode 100644 index 000000000..ab9fb8728 Binary files /dev/null and b/src/images/about-luna-eye-desktop.jpg differ diff --git a/src/images/about-luna-eye-mobile.jpg b/src/images/about-luna-eye-mobile.jpg new file mode 100644 index 000000000..d7c473c11 Binary files /dev/null and b/src/images/about-luna-eye-mobile.jpg differ diff --git a/src/images/about-luna-eye-tablet.jpg b/src/images/about-luna-eye-tablet.jpg new file mode 100644 index 000000000..d0ec2c208 Binary files /dev/null and b/src/images/about-luna-eye-tablet.jpg differ diff --git a/src/images/features-speaker-desktop.jpg b/src/images/features-speaker-desktop.jpg new file mode 100644 index 000000000..8045270e4 Binary files /dev/null and b/src/images/features-speaker-desktop.jpg differ diff --git a/src/images/features-speaker-mobile.jpg b/src/images/features-speaker-mobile.jpg new file mode 100644 index 000000000..ce1812797 Binary files /dev/null and b/src/images/features-speaker-mobile.jpg differ diff --git a/src/images/features-speaker-tablet.jpg b/src/images/features-speaker-tablet.jpg new file mode 100644 index 000000000..c10beefaf Binary files /dev/null and b/src/images/features-speaker-tablet.jpg differ diff --git a/src/images/garrett-martin.jpg b/src/images/garrett-martin.jpg new file mode 100644 index 000000000..4b040336d Binary files /dev/null and b/src/images/garrett-martin.jpg differ diff --git a/src/images/hero-speaker-desktop.jpg b/src/images/hero-speaker-desktop.jpg new file mode 100644 index 000000000..05fead13a Binary files /dev/null and b/src/images/hero-speaker-desktop.jpg differ diff --git a/src/images/hero-speaker-mobile.jpg b/src/images/hero-speaker-mobile.jpg new file mode 100644 index 000000000..fa969b274 Binary files /dev/null and b/src/images/hero-speaker-mobile.jpg differ diff --git a/src/images/hero-speaker-tablet.jpg b/src/images/hero-speaker-tablet.jpg new file mode 100644 index 000000000..05fead13a Binary files /dev/null and b/src/images/hero-speaker-tablet.jpg differ diff --git a/src/images/meet-luna-desktop.jpg b/src/images/meet-luna-desktop.jpg new file mode 100644 index 000000000..5c0b19eee Binary files /dev/null and b/src/images/meet-luna-desktop.jpg differ diff --git a/src/images/meet-luna-mobile.jpg b/src/images/meet-luna-mobile.jpg new file mode 100644 index 000000000..34e3f67cc Binary files /dev/null and b/src/images/meet-luna-mobile.jpg differ diff --git a/src/images/meet-luna-tablet.jpg b/src/images/meet-luna-tablet.jpg new file mode 100644 index 000000000..2ed90c5a4 Binary files /dev/null and b/src/images/meet-luna-tablet.jpg differ diff --git a/src/images/svg/favicon.svg b/src/images/svg/favicon.svg new file mode 100644 index 000000000..da5158e73 --- /dev/null +++ b/src/images/svg/favicon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/svg/sprite.svg b/src/images/svg/sprite.svg new file mode 100644 index 000000000..88a5edd3f --- /dev/null +++ b/src/images/svg/sprite.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..06a64d783 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,169 @@ 'use strict'; + +const contactForm = document.querySelector('.contact__form'); + +contactForm?.addEventListener('submit', (event) => { + event.preventDefault(); + + contactForm.reset(); +}); + +const SLIDER_ANIMATION_DURATION = 450; + +function initSlider({ + sliderSelector, + slideSelector, + activeClass = 'is-active', + nextButtonSelector, + prevButtonSelector, + counterSelector, + enableClick = true, + enableSwipe = true, +}) { + const slider = document.querySelector(sliderSelector); + + if (!slider) { + return; + } + + const slides = Array.from(slider.querySelectorAll(slideSelector)); + + if (slides.length === 0) { + return; + } + + const nextButton = nextButtonSelector + ? document.querySelector(nextButtonSelector) + : null; + + const prevButton = prevButtonSelector + ? document.querySelector(prevButtonSelector) + : null; + + const counter = counterSelector + ? document.querySelector(counterSelector) + : null; + + let activeIndex = slides.findIndex((slide) => + slide.classList.contains(activeClass), + ); + + if (activeIndex === -1) { + activeIndex = 0; + } + + let isAnimating = false; + let startX = 0; + let endX = 0; + + function updateCounter() { + if (!counter) { + return; + } + + counter.textContent = String(activeIndex + 1).padStart(2, '0'); + } + + function setInitialSlide() { + slides.forEach((slide, index) => { + slide.classList.toggle(activeClass, index === activeIndex); + }); + + updateCounter(); + } + + async function showSlide(nextIndex) { + if (isAnimating || nextIndex === activeIndex) { + return; + } + + isAnimating = true; + + const currentSlide = slides[activeIndex]; + const nextSlide = slides[nextIndex]; + + await currentSlide.animate([{ opacity: 1 }, { opacity: 0 }], { + duration: SLIDER_ANIMATION_DURATION, + easing: 'ease-in-out', + }).finished; + + currentSlide.classList.remove(activeClass); + nextSlide.classList.add(activeClass); + + await nextSlide.animate([{ opacity: 0 }, { opacity: 1 }], { + duration: SLIDER_ANIMATION_DURATION, + easing: 'ease-in-out', + }).finished; + + activeIndex = nextIndex; + updateCounter(); + + isAnimating = false; + } + + function showNextSlide() { + const nextIndex = activeIndex === slides.length - 1 ? 0 : activeIndex + 1; + + showSlide(nextIndex); + } + + function showPrevSlide() { + const prevIndex = activeIndex === 0 ? slides.length - 1 : activeIndex - 1; + + showSlide(prevIndex); + } + + function handleSwipe() { + const swipeDistance = endX - startX; + const minSwipeDistance = 50; + + if (Math.abs(swipeDistance) < minSwipeDistance) { + return; + } + + if (swipeDistance < 0) { + showNextSlide(); + } else { + showPrevSlide(); + } + } + + nextButton?.addEventListener('click', showNextSlide); + prevButton?.addEventListener('click', showPrevSlide); + + if (enableClick) { + slides.forEach((slide) => { + slide.addEventListener('click', showNextSlide); + }); + } + + if (enableSwipe) { + slider.addEventListener('pointerdown', (event) => { + startX = event.clientX; + }); + + slider.addEventListener('pointerup', (event) => { + endX = event.clientX; + handleSwipe(); + }); + } + + setInitialSlide(); +} + +initSlider({ + sliderSelector: '#slider', + slideSelector: '.features__card', + nextButtonSelector: '#btnNext', + prevButtonSelector: '#btnPrev', + counterSelector: '#features__page-first', + enableClick: false, + enableSwipe: true, +}); + +initSlider({ + sliderSelector: '#sliderTop', + slideSelector: '.benefits__item', + enableClick: true, + enableSwipe: true, +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..221eca18f 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,7 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; + font-weight: 100 900; font-style: normal; + font-display: swap; + src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..bd646bb93 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,139 @@ -h1 { - @extend %h1; +%inter-base { + font-family: $font-main; +} + +%inter-400 { + @extend %inter-base; + + font-weight: 400; +} + +%inter-700 { + @extend %inter-base; + + font-weight: 700; +} + +// Headings + +%h1 { + @extend %inter-700; + + font-size: 40px; + line-height: 52px; + text-transform: uppercase; + + @include on-tablet { + font-size: 48px; + line-height: 62px; + } + + @include on-desktop { + font-size: 64px; + line-height: 78px; + } +} + +%h2 { + @extend %inter-700; + + font-size: 30px; + line-height: 40px; + text-transform: uppercase; + + @include on-tablet { + font-size: 36px; + line-height: 46px; + } + + @include on-desktop { + font-size: 56px; + line-height: 70px; + } +} + +%h3 { + @extend %inter-700; + + font-size: 18px; + line-height: 22px; + text-transform: uppercase; + + @include on-tablet { + font-size: 24px; + line-height: 30px; + } + + @include on-desktop { + font-size: 34px; + line-height: 42px; + } +} + +%h4 { + @extend %inter-700; + + font-size: 22px; + line-height: 28px; + text-transform: uppercase; +} + +%h5 { + @extend %inter-700; + + font-size: 16px; + line-height: 22px; + text-transform: uppercase; +} + +%h6 { + @extend %inter-700; + + font-size: 14px; + line-height: 20px; + text-transform: uppercase; +} + +// Text + +%button-text { + @extend %inter-700; + + font-size: 12px; + line-height: 14px; + text-transform: uppercase; +} + +%main-text { + @extend %inter-400; + + font-size: 16px; + line-height: 24px; +} + +%secondary-text { + @extend %inter-400; + + font-size: 14px; + line-height: 21px; +} + +%thirdary-text { + @extend %inter-400; + + font-size: 14px; + line-height: 21px; + text-transform: uppercase; +} + +%quote { + @extend %inter-700; + + font-size: 14px; + line-height: 20px; + + @include on-tablet { + font-size: 24px; + line-height: 36px; + } } diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..3c99d8f32 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,71 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; + +html { + scroll-behavior: smooth; +} + +html:has(.menu:target), +body:has(.menu:target) { + overflow: hidden; +} + +.page { + max-width: 1440px; + margin: 0 auto; + font-family: $font-main; + background-color: $color-bg-page; +} + +.container { + padding: 0 30px; +} + +@media (min-width: $breakpoint-tablet) { + .container { + padding: 0 34px; + } +} + +@media (min-width: $breakpoint-desktop) { + .container { + padding: 0 123px; + } +} + +.link { + text-decoration: none; +} + +img { + width: 100%; +} + +.block__off { + position: absolute; + visibility: hidden; + opacity: 0; +} + +@media (min-width: $breakpoint-desktop-small) { + .block__off { + position: static; + visibility: visible; + opacity: 1; + } +} + +.block__off-slider-top { + position: absolute; + visibility: hidden; + opacity: 0; +} + +@media (min-width: $breakpoint-tablet) { + .block__off-slider-top { + position: static; + visibility: visible; + opacity: 1; + } +} diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss new file mode 100644 index 000000000..a6bfd45fa --- /dev/null +++ b/src/styles/blocks/_about.scss @@ -0,0 +1,128 @@ +.about { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + &__picture { + display: block; + width: 100%; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__content { + width: 100%; + + @include on-tablet { + width: auto; + } + } + + &__item { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 110px; + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: $grid-gap-tablet; + align-items: start; + + margin-bottom: 140px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: $grid-gap-desktop; + margin-bottom: 170px; + } + + &--image-left { + .about__picture { + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + .about__content { + @include on-tablet { + grid-column: 5 / 9; + } + + @include on-desktop { + grid-column: 7 / 12; + } + } + } + + &--image-right { + .about__picture { + @include on-tablet { + grid-column: 5 / 9; + grid-row: 1; + } + + @include on-desktop { + grid-column: 7 / 13; + } + } + + .about__content { + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + } + } + + &__image { + display: block; + width: 100%; + height: auto; + + @include hover(transform, scale(1.05)); + } + + &__title { + @extend %h2; + + margin: 0 0 30px; + color: $color-primary; + text-align: center; + } + + &__text { + @extend %secondary-text; + + margin: 0 0 30px; + color: $color-text-muted; + + @include on-tablet { + margin-bottom: 60px; + } + } + + &__link { + display: inline-flex; + } +} diff --git a/src/styles/blocks/_benefits.scss b/src/styles/blocks/_benefits.scss new file mode 100644 index 000000000..e277be9eb --- /dev/null +++ b/src/styles/blocks/_benefits.scss @@ -0,0 +1,99 @@ +.benefits { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + &__list { + margin-bottom: 70px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 64px $grid-gap-tablet; + margin-bottom: 90px; + } + + @include on-desktop { + grid-template-columns: repeat(4, 1fr); + column-gap: $grid-gap-desktop; + margin-bottom: 120px; + } + } + + &__item { + display: none; + flex-direction: column; + align-items: center; + + width: 100%; + height: 285px; + margin-bottom: 65px; + + text-align: center; + + transition: opacity $transition-extra-slow ease-in-out; + + &.is-active { + display: flex; + } + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + display: flex; + grid-column: span 4; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 1; + } + } + + &__icon { + width: 50px; + height: 41px; + margin-bottom: 40px; + fill: $color-gray-dark; + + @include hover(transform, scale(1.05)); + } + + &__title { + @extend %h4; + + width: 100%; + margin: 0 0 20px; + color: $color-primary; + + @include on-desktop { + min-height: 56px; + } + } + + &__text { + @extend %secondary-text; + + width: 100%; + margin: 0; + color: $color-text-muted; + } + + &__picture { + display: block; + width: 100%; + } + + &__image { + display: block; + width: 100%; + height: auto; + mix-blend-mode: darken; + + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 000000000..cc32cbe14 --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,130 @@ +.button { + cursor: pointer; + + display: inline-flex; + align-items: center; + justify-content: center; + + height: 48px; + padding: 0 24px; + border: 1px solid transparent; + + font-family: $font-secondary; + font-size: 12px; + font-weight: 500; + line-height: 15px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + transition: + color $transition-fast ease, + border-color $transition-fast ease, + background-color $transition-fast ease; + + &:disabled, + &--disabled { + pointer-events: none; + cursor: default; + } + + &--dark { + border-color: $color-primary; + color: $color-white; + background-color: $color-primary; + + &:hover { + border-color: $color-black; + background-color: $color-black; + } + + &:active { + border-color: $color-gray-lighter; + color: $color-white; + background-color: $color-gray-lighter; + } + + &:disabled, + &.button--disabled { + border-color: $color-gray-lighter; + color: $color-white; + background-color: $color-gray-lighter; + } + } + + &--accent { + border-color: $color-accent; + color: $color-white; + background-color: $color-accent; + + &:hover { + border-color: $color-accent-dark; + background-color: $color-accent-dark; + } + + &:active { + border-color: $color-accent-light; + color: $color-white; + background-color: $color-accent-light; + } + + &:disabled, + &.button--disabled { + border-color: $color-accent-light; + color: $color-white; + background-color: $color-accent-light; + } + } + + &--outline-accent { + border-color: $color-accent; + color: $color-accent; + background-color: transparent; + + &:hover { + border-color: $color-accent-dark; + color: $color-white; + background-color: $color-accent-dark; + } + } + + &--outline-dark { + border-color: $color-gray; + color: $color-primary; + background-color: transparent; + + &:hover { + border-color: $color-black; + color: $color-white; + background-color: $color-black; + } + } + + &--link { + display: inline-block; + + height: auto; + padding: 0; + border: 0; + + color: $color-accent; + + background-color: transparent; + + &::after { + content: ''; + + display: block; + + width: 53px; + margin-top: 5px; + border-top: 1px solid $color-accent; + + transition: width $transition-slow ease; + } + + &:hover::after { + width: 100%; + } + } +} diff --git a/src/styles/blocks/_contact.scss b/src/styles/blocks/_contact.scss new file mode 100644 index 000000000..05daac038 --- /dev/null +++ b/src/styles/blocks/_contact.scss @@ -0,0 +1,59 @@ +.contact { + margin-bottom: 110px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: $grid-gap-tablet; + margin-bottom: 140px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: $grid-gap-desktop; + } + + &__title { + @extend %h2; + + margin: 0 0 27px; + color: $color-primary; + + @include on-tablet { + grid-column: 1 / 5; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 5 / 9; + } + + @include on-desktop { + grid-column: 7 / 13; + } + } + + &__field { + &--textarea { + margin-bottom: 10px; + } + } + + &__button { + width: 102px; + + @include on-tablet { + width: 102px; + } + } +} diff --git a/src/styles/blocks/_features.scss b/src/styles/blocks/_features.scss new file mode 100644 index 000000000..9c65924ab --- /dev/null +++ b/src/styles/blocks/_features.scss @@ -0,0 +1,249 @@ +.features { + margin-bottom: 88px; + + @include on-tablet { + margin-bottom: 140px; + } + + &__title { + @extend %h2; + + margin: 0 0 32px; + color: $color-primary; + } + + &__panel { + position: relative; + + overflow: hidden; + + min-height: 575px; + margin-right: -$container-padding-mobile; + margin-left: -$container-padding-mobile; + padding: 32px $container-padding-mobile 0; + + background-color: $color-feature-bg; + + @media (min-width: 390px) and (max-width: 767px) { + min-height: 660px; + } + + @include on-tablet { + min-height: 555px; + margin-right: 0; + margin-left: 0; + padding: 60px 90px 0; + } + + @include on-desktop { + min-height: 640px; + padding: 60px 90px 0; + } + } + + &__list { + touch-action: pan-y; + + position: relative; + z-index: 1; + + display: flex; + + width: 100%; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 56px $grid-gap-desktop; + } + } + + &__card { + display: none; + flex: 0 0 100%; + min-height: 320px; + transition: opacity $transition-extra-slow ease-in-out; + + &.is-active { + display: block; + } + + @include on-tablet { + min-height: 310px; + } + + @include on-desktop { + display: block; + flex: initial; + min-height: auto; + } + + &--connectivity { + @include on-desktop { + grid-column: 2 / 6; + grid-row: 1; + } + } + + &--sound { + @include on-desktop { + grid-column: 2 / 6; + grid-row: 2; + } + } + + &--app { + @include on-desktop { + grid-column: 7 / 12; + grid-row: 1; + } + } + } + + &__card-title { + @extend %h4; + + margin: 0 0 20px; + color: $color-accent-dark; + } + + &__items { + width: 255px; + margin: 0; + padding: 0; + list-style: none; + + @include on-tablet { + width: 300px; + } + + @include on-desktop { + width: 100%; + } + } + + &__item { + @extend %secondary-text; + + position: relative; + margin-bottom: 10px; + padding-left: 10px; + color: $color-primary; + + &::before { + content: ''; + + position: absolute; + top: 9px; + left: 0; + + width: 4px; + height: 4px; + border-radius: 50%; + + background-color: $color-primary; + } + + &:last-child { + margin-bottom: 0; + } + } + + &__controls { + position: relative; + z-index: 5; + width: 90px; + margin-top: 0; + + @include on-tablet { + margin-top: -20px; + } + + @include on-desktop { + display: none; + } + } + + &__arrows { + display: flex; + justify-content: center; + margin-bottom: 8px; + } + + &__arrow { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 49px; + height: 14px; + padding: 0; + border: 0; + + color: $color-gray-light; + + background-color: transparent; + + @include hover(color, $color-accent-dark); + } + + &__arrow-icon { + display: block; + width: 49px; + height: 14px; + fill: currentColor; + } + + &__counter { + display: flex; + align-items: flex-end; + justify-content: center; + } + + &__counter-current { + @extend %main-text; + + color: $color-primary; + } + + &__counter-total { + font-family: $font-main; + font-size: 11px; + font-weight: 400; + line-height: 13px; + color: $color-accent-dark; + } + + &__picture { + position: absolute; + z-index: 2; + right: 0; + bottom: 0; + transform-origin: center bottom; + + display: block; + + width: 100%; + + mix-blend-mode: darken; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + width: 435px; + } + + @include on-desktop { + width: 582px; + } + } + + &__image { + display: block; + width: 100%; + height: auto; + mix-blend-mode: darken; + } +} diff --git a/src/styles/blocks/_field.scss b/src/styles/blocks/_field.scss new file mode 100644 index 000000000..c7f2835e8 --- /dev/null +++ b/src/styles/blocks/_field.scss @@ -0,0 +1,40 @@ +.field { + @extend %main-text; + + resize: none; + + box-sizing: border-box; + width: 100%; + height: 48px; + padding: 12px 20px; + border: 1px solid $color-gray-light; + + color: $color-primary; + + background-color: transparent; + outline: none; + + transition: + border-color $transition-fast ease, + color $transition-fast ease; + + &::placeholder { + color: $color-gray-light; + } + + &:focus { + border-color: $color-accent; + } + + &:invalid:not(:placeholder-shown) { + border-color: #eb5757; + } + + &:invalid:not(:placeholder-shown)::placeholder { + color: #eb5757; + } + + &--textarea { + height: 128px; + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..b2914fbcb --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,113 @@ +.footer { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + + padding-bottom: 30px; + + &__top { + display: none; + + @include on-tablet { + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + margin-bottom: 65px; + } + } + + &__logo { + display: flex; + color: $color-primary; + text-decoration: none; + } + + &__logo-icon { + display: block; + width: 184px; + height: 26px; + fill: currentColor; + + @include hover(transform, scale(1.1)); + } + + &__scroll-top { + position: absolute; + top: 10px; + right: $container-padding-tablet; + + display: flex; + + color: $color-primary; + text-decoration: none; + + @include hover(transform, translateY(-4px)); + + @include on-desktop { + right: $container-padding-desktop; + } + } + + &__scroll-top-icon { + display: block; + width: 25px; + height: 21px; + fill: currentColor; + } + + &__socials { + display: flex; + gap: 40px; + + margin: 0 0 33px; + padding: 0; + + list-style: none; + } + + &__social-link { + display: flex; + color: $color-gray-dark; + text-decoration: none; + + @include hover(color, $color-accent); + } + + &__social-icon { + display: block; + fill: currentColor; + + @include hover(transform, scale(1.1)); + &--facebook { + width: 11px; + height: 19px; + } + + &--twitter { + width: 22px; + height: 17px; + } + + &--instagram { + width: 18px; + height: 18px; + } + } + + &__copyright { + @extend %secondary-text; + + width: 260px; + margin: 0; + color: $color-gray-light; + text-align: center; + + @include on-tablet { + width: 100%; + } + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..36de1a4a9 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,116 @@ +.header { + margin-bottom: clamp(25px, 5vh, 56px); + padding-top: $page-padding-top; + + @include on-tablet { + margin-bottom: clamp(56px, 9vh, 90px); + } + + @include on-desktop { + margin-bottom: clamp(48px, 7vh, 80px); + } + + &__content { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + display: flex; + color: $color-primary; + text-decoration: none; + } + + &__logo-icon { + display: block; + width: 161px; + height: 26px; + fill: currentColor; + + @include hover(transform, scale(1.1)); + } + + &__right { + display: flex; + gap: 24px; + align-items: center; + + @include on-tablet { + gap: 28px; + } + } + + &__actions { + display: none; + + @include on-tablet { + display: flex; + gap: 27px; + align-items: center; + } + } + + &__specs-link { + @extend %button-text; + + color: $color-gray-dark; + text-decoration: none; + + @include hover(color, $color-primary); + } + + &__language { + display: flex; + gap: 3px; + align-items: center; + } + + &__language-link { + @extend %button-text; + + color: $color-gray; + text-decoration: none; + + @include hover(color, $color-primary); + + &--active { + color: $color-primary; + } + } + + &__language-divider { + @extend %button-text; + + color: $color-primary; + } + + &__button { + width: 142px; + } + + &__menu-button { + display: flex; + align-items: center; + justify-content: center; + + width: 24px; + height: 16px; + + color: $color-primary; + text-decoration: none; + + @include on-desktop { + display: none; + } + + @include hover(transform, scale(1.1)); + } + + &__menu-icon { + display: block; + width: 24px; + height: 16px; + fill: currentColor; + } +} diff --git a/src/styles/blocks/_hero.scss b/src/styles/blocks/_hero.scss new file mode 100644 index 000000000..caee3ad03 --- /dev/null +++ b/src/styles/blocks/_hero.scss @@ -0,0 +1,95 @@ +.hero { + display: flex; + flex-grow: 1; + align-items: flex-start; + color: $color-primary; + + @include on-tablet { + align-items: center; + } + + &__content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: $grid-gap-tablet; + align-items: center; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: $grid-gap-desktop; + } + } + + &__picture { + width: 100%; + margin-bottom: clamp(30px, 5vh, 40px); + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 5 / -1; + } + } + + &__image { + display: block; + width: 100%; + height: auto; + mix-blend-mode: darken; + + @include hover(transform, scale(1.05)); + } + + &__text-content { + width: 100%; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + width: auto; + } + + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__title { + @extend %h1; + + position: relative; + z-index: 2; + margin: 0 0 clamp(20px, 3vh, 30px); + text-align: center; + + @include on-tablet { + width: 250px; + } + } + + &__description { + @extend %main-text; + + width: 100%; + margin: 0; + + @include on-tablet { + width: 250px; + } + + @include on-desktop { + width: 276px; + } + } +} diff --git a/src/styles/blocks/_intro.scss b/src/styles/blocks/_intro.scss new file mode 100644 index 000000000..bb71191fd --- /dev/null +++ b/src/styles/blocks/_intro.scss @@ -0,0 +1,14 @@ +.intro { + display: flex; + flex-direction: column; + min-height: 100vh; + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + @include on-desktop { + margin-bottom: 94px; + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..048bf2a8c --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,181 @@ +.menu { + pointer-events: none; + + position: fixed; + z-index: 100; + inset: 0; + transform: translateX(-100%); + + width: 100%; + height: 100vh; + + opacity: 0; + background-color: $color-white; + + transition: + opacity $transition-base ease, + transform $transition-base ease; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + + @include on-desktop { + display: none; + } + + &__content { + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100%; + padding: $page-padding-top $container-padding-mobile 30px; + + background-color: $color-white; + + @include on-tablet { + padding: $page-padding-top $container-padding-tablet 30px; + } + } + + &__top { + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &__logo { + display: flex; + color: $color-primary; + text-decoration: none; + } + + &__logo-icon { + display: block; + width: 161px; + height: 26px; + fill: currentColor; + + @include hover(transform, scale(1.1)); + } + + &__close { + display: flex; + align-items: center; + justify-content: center; + + width: 16px; + height: 16px; + + color: $color-primary; + text-decoration: none; + + @include hover(transform, scale(1.1)); + } + + &__close-icon { + display: block; + width: 16px; + height: 16px; + fill: currentColor; + } + + &__nav { + margin-bottom: 48px; + + @include on-tablet { + margin-bottom: 64px; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + } + + &__item { + margin-bottom: 24px; + + @include on-tablet { + margin-bottom: 32px; + } + + &:last-child { + margin-bottom: 0; + } + } + + &__link { + @extend %thirdary-text; + + color: $color-primary; + text-decoration: none; + transition: + font-weight $transition-fast ease, + color $transition-fast ease; + + &:hover, + &--active { + @extend %h6; + + color: $color-black; + } + } + + &__actions { + display: flex; + gap: 32px; + align-items: center; + margin-bottom: auto; + } + + &__specs-link, + &__language-link { + @extend %button-text; + + color: $color-gray-dark; + text-decoration: none; + + @include hover(color, $color-primary); + } + + &__language { + display: flex; + gap: 3px; + align-items: center; + } + + &__language-link { + color: $color-gray; + + &--active { + color: $color-primary; + } + } + + &__language-divider { + @extend %button-text; + + color: $color-primary; + } + + &__button { + width: 100%; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 000000000..78af4972d --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,35 @@ +.nav { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + justify-content: center; + min-height: $nav-height-desktop; + } + + &__list { + display: flex; + gap: 84px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__link { + font-size: 14px; + font-weight: inherit; + line-height: 20px; + color: $color-primary; + text-decoration: none; + text-transform: uppercase; + + transition: text-shadow $transition-fast; + + &:hover { + text-shadow: 0 0 0.7px $color-primary; + } + } +} diff --git a/src/styles/blocks/_quote.scss b/src/styles/blocks/_quote.scss new file mode 100644 index 000000000..2c4a57c97 --- /dev/null +++ b/src/styles/blocks/_quote.scss @@ -0,0 +1,83 @@ +.quote { + margin-bottom: 110px; + + @include on-tablet { + margin-bottom: 140px; + } + + &__content { + position: relative; + max-width: 260px; + margin: 0 auto; + text-align: center; + + @include on-tablet { + max-width: 600px; + } + + @include on-desktop-small { + max-width: 700px; + } + } + + &__icon { + position: absolute; + z-index: -1; + top: -30px; + left: 50%; + transform: translateX(-50%); + + width: 208px; + height: 171px; + + fill: $color-accent; + } + + &__text { + @extend %quote; + + margin: 0 0 30px; + color: $color-primary; + + @include on-tablet { + margin-bottom: 40px; + } + } + + &__author { + display: flex; + flex-direction: column; + align-items: center; + } + + &__author-image { + width: 62px; + height: 62px; + margin-bottom: 10px; + border-radius: 50%; + + object-fit: cover; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + margin-bottom: 20px; + } + } + + &__author-name { + @extend %h5; + + margin-bottom: 5px; + font-style: normal; + color: $color-primary; + text-transform: none; + } + + &__author-position { + @extend %secondary-text; + + margin: 0; + color: $color-text-muted; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1397e0d68 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/header'; +@import 'blocks/about'; +@import './blocks/benefits'; +@import 'blocks/features'; +@import 'blocks/footer'; +@import 'blocks/contact'; +@import 'blocks/quote'; +@import 'blocks/nav'; +@import 'blocks/hero'; +@import './blocks/intro'; +@import './blocks/menu'; +@import './blocks/button'; +@import './blocks/field'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..c596c4b1f 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,5 +1,58 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin on-tablet { + @media (min-width: $breakpoint-tablet) { + @content; + } +} + +@mixin on-desktop-small { + @media (min-width: $breakpoint-desktop-small) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $breakpoint-desktop) { + @content; + } +} + +@mixin on-nav-desktop { + @media (min-width: $breakpoint-nav-desktop) { + @content; + } +} + +@mixin visually-hidden-until($breakpoint) { + position: absolute; + visibility: hidden; + opacity: 0; + + @media (min-width: $breakpoint) { + position: static; + visibility: visible; + opacity: 1; + } +} + +@mixin grid($columns, $gap: $grid-gap-tablet) { + display: grid; + grid-template-columns: repeat($columns, 1fr); + column-gap: $gap; +} + +@mixin hover-scale($scale: 1.1) { + cursor: pointer; + transition: all $transition-fast; + + &:hover { + transform: scale($scale); + transition: all $transition-fast; + } +} + +@mixin hover($_property, $_toValue, $_duration: $transition-fast) { + transition: #{$_property} $_duration ease; + &:hover { #{$_property}: $_toValue; } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..6de9dfabb 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,35 @@ -$c-gray: #eee; +$font-main: 'Inter', sans-serif; +$font-secondary: 'Helvetica Neue', Arial, sans-serif; +$font-form: 'Arial Narrow', Arial, sans-serif; +$color-bg-page: #f7f7f7; +$color-white: #fff; +$color-primary: #333; +$color-black: #131313; +$color-gray-dark: #4f4f4f; +$color-text-muted: #7c7c7c; +$color-gray: #828282; +$color-gray-light: #bdbdbd; +$color-gray-lighter: #d0d0d0; +$color-accent: #0db2b3; +$color-accent-dark: #0c797a; +$color-accent-light: #cfeff0; +$color-accent-extra-light: #eefafa; +$color-feature-bg: #d6ecec; +$page-max-width: 1440px; +$page-padding-top: 25px; +$container-padding-mobile: 30px; +$container-padding-tablet: 34px; +$container-padding-desktop: 123px; +$breakpoint-tablet: 768px; +$breakpoint-desktop-small: 1024px; +$breakpoint-desktop-small-plus: 1025px; +$breakpoint-desktop: 1440px; +$grid-gap-tablet: 20px; +$grid-gap-desktop: 30px; +$transition-fast: 0.3s; +$transition-base: 0.5s; +$transition-slow: 0.7s; +$transition-extra-slow: 0.9s; +$header-height-mobile: 51px; +$header-height-tablet: 73px; +$nav-height-desktop: 76px;