diff --git a/.eslintignore b/.eslintignore index c925c21d56..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,2 @@ +/backstop_data /dist -/node_modules diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/.gitignore b/.gitignore index 885c5fa6a4..1558091fd7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,15 @@ +# IDE .idea .vscode -build -dist + +# Node node_modules -.DS_Store -npm-debug.log* -yarn-debug.log* -yarn-error.log* +# MacOS +.DS_Store -raw_reports -reports -cypress/screenshots -cypress/videos +# Generated files +backstop_data +dist +.cache +.parcel-cache diff --git a/README.md b/README.md index 97d3c9060a..fa868d4215 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://chalaczi.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..7838b1843e 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,210 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Miami - + Mybike + + + + + -

Miami

+
+ +

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

+
+
+ bike1 +

Sporty 4

+

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

+

$ 2 590

+
+ +
+ bike2 +

Ride in town ST

+

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

+

$ 2 590

+
+ +
+ bike3 +

Agile ride 3

+

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

+

$ 2 090

+
+ +
+ +
+ +
+

The Details

+
+
+
+ 1 +
+ +
+ 2 +
+
+

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. +

+
+ +
+
+
+ 1 +
+ +
+ 2 +
+
+

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. track it anytime. +

+
+ +
+
+
+ 1 +
+ +
+ 2 +
+
+

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. track it anytime. +

+
+ Explore +
+ +
+

Contact us

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

Phone

+

+1 234 5555-55-55

+

Email

+

hello@miami.com

+

Address

+

+ 400 first ave. +
+ suite 700 +
+ Minneapolis, MN 55401 +

+
+
+
+
+ diff --git a/package-lock.json b/package-lock.json index 5cfe8293fe..7ca8d9d5ff 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", @@ -698,6 +699,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 +1580,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": { @@ -4204,6 +4212,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", 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/picture-1.jpg b/picture-1.jpg new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d7310..0000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Cover_photo.jpg b/src/images/Cover_photo.jpg new file mode 100644 index 0000000000..12d1d284c4 Binary files /dev/null and b/src/images/Cover_photo.jpg differ diff --git a/src/images/Icon-Burger-menu-hover.svg b/src/images/Icon-Burger-menu-hover.svg new file mode 100644 index 0000000000..44fbb1cd62 --- /dev/null +++ b/src/images/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg new file mode 100644 index 0000000000..6d404da6e2 --- /dev/null +++ b/src/images/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg new file mode 100644 index 0000000000..29f7735357 --- /dev/null +++ b/src/images/Icon-Close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg new file mode 100644 index 0000000000..b125f72e6f --- /dev/null +++ b/src/images/Icon-Phone-call.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/MyBiKE blk.svg b/src/images/MyBiKE blk.svg new file mode 100644 index 0000000000..20bda93daa --- /dev/null +++ b/src/images/MyBiKE blk.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/MyBiKE.svg b/src/images/MyBiKE.svg new file mode 100644 index 0000000000..d309032462 --- /dev/null +++ b/src/images/MyBiKE.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/Screenshot 2022-01-14 at 11.12 1.png b/src/images/Screenshot 2022-01-14 at 11.12 1.png new file mode 100644 index 0000000000..251ff1647e Binary files /dev/null and b/src/images/Screenshot 2022-01-14 at 11.12 1.png differ diff --git a/src/images/Screenshot 2022-01-14 at 11.12 2.png b/src/images/Screenshot 2022-01-14 at 11.12 2.png new file mode 100644 index 0000000000..9f2b24b218 Binary files /dev/null and b/src/images/Screenshot 2022-01-14 at 11.12 2.png differ diff --git a/src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg b/src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg new file mode 100644 index 0000000000..db8fa3a2f9 Binary files /dev/null and b/src/images/Screenshot 2022-01-14 at 11.12 3 (1).jpg differ diff --git a/src/images/Vector.png b/src/images/Vector.png new file mode 100644 index 0000000000..908e6b4f04 Binary files /dev/null and b/src/images/Vector.png differ diff --git a/src/images/X icon.svg b/src/images/X icon.svg new file mode 100644 index 0000000000..9dadbf7142 --- /dev/null +++ b/src/images/X icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/cross.svg b/src/images/cross.svg deleted file mode 100644 index 08f1f27cea..0000000000 --- a/src/images/cross.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/crown.svg b/src/images/crown.svg deleted file mode 100644 index 962d90e9ca..0000000000 --- a/src/images/crown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/favicon.png b/src/images/favicon.png deleted file mode 100644 index 0e04c361e1..0000000000 Binary files a/src/images/favicon.png and /dev/null differ diff --git a/src/images/footer-pic.jpg b/src/images/footer-pic.jpg new file mode 100644 index 0000000000..3fe46bb909 Binary files /dev/null and b/src/images/footer-pic.jpg differ diff --git a/src/images/logo.png b/src/images/logo.png deleted file mode 100644 index 9b6a4dd7d4..0000000000 Binary files a/src/images/logo.png and /dev/null differ diff --git a/src/images/menu.svg b/src/images/menu.svg deleted file mode 100644 index 5d6b5a0b38..0000000000 --- a/src/images/menu.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg deleted file mode 100644 index 39263b75bc..0000000000 --- a/src/images/menu_hover.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/mikkel-bech-yjAFnkLtKY0-unsplash 2.jpg b/src/images/mikkel-bech-yjAFnkLtKY0-unsplash 2.jpg new file mode 100644 index 0000000000..9b1336659e Binary files /dev/null and b/src/images/mikkel-bech-yjAFnkLtKY0-unsplash 2.jpg differ diff --git a/src/images/phone.svg b/src/images/phone.svg deleted file mode 100644 index 0c2c52cb54..0000000000 --- a/src/images/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg deleted file mode 100644 index f796f55605..0000000000 Binary files a/src/images/photos/1.jpg and /dev/null differ diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg deleted file mode 100644 index d9053b6a20..0000000000 Binary files a/src/images/photos/2.jpg and /dev/null differ diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg deleted file mode 100644 index 5e40be94d2..0000000000 Binary files a/src/images/photos/3.jpg and /dev/null differ diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg deleted file mode 100644 index de64313343..0000000000 Binary files a/src/images/photos/4.jpg and /dev/null differ diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg deleted file mode 100644 index aad06bff54..0000000000 Binary files a/src/images/photos/5.jpg and /dev/null differ diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg deleted file mode 100644 index 104ff18faa..0000000000 Binary files a/src/images/photos/6.jpg and /dev/null differ diff --git a/src/images/picture-1.jpg b/src/images/picture-1.jpg new file mode 100644 index 0000000000..d4d45a9bfd Binary files /dev/null and b/src/images/picture-1.jpg differ diff --git a/src/images/picture-2.jpg b/src/images/picture-2.jpg new file mode 100644 index 0000000000..b3b537bfc9 Binary files /dev/null and b/src/images/picture-2.jpg differ diff --git a/src/images/picture-3.jpg b/src/images/picture-3.jpg new file mode 100644 index 0000000000..fec945b649 Binary files /dev/null and b/src/images/picture-3.jpg differ diff --git a/src/images/picture-4.jpg b/src/images/picture-4.jpg new file mode 100644 index 0000000000..2cb2eedafd Binary files /dev/null and b/src/images/picture-4.jpg differ diff --git a/src/images/picture-5.jpg b/src/images/picture-5.jpg new file mode 100644 index 0000000000..47ad5ded8a Binary files /dev/null and b/src/images/picture-5.jpg differ diff --git a/src/images/picture-6.jpg b/src/images/picture-6.jpg new file mode 100644 index 0000000000..a9f1363933 Binary files /dev/null and b/src/images/picture-6.jpg differ diff --git a/src/images/picture-7.jpg b/src/images/picture-7.jpg new file mode 100644 index 0000000000..b2202047a6 Binary files /dev/null and b/src/images/picture-7.jpg differ diff --git a/src/images/picture-8.jpg b/src/images/picture-8.jpg new file mode 100644 index 0000000000..f6c27ac31b Binary files /dev/null and b/src/images/picture-8.jpg differ diff --git a/src/images/picture-9.jpg b/src/images/picture-9.jpg new file mode 100644 index 0000000000..335c2adcb3 Binary files /dev/null and b/src/images/picture-9.jpg differ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd54008..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e2..0000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe10..0000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss new file mode 100644 index 0000000000..9b17ef3a16 --- /dev/null +++ b/src/styles/blocks/address.scss @@ -0,0 +1,21 @@ +.address { + &__label { + font-family: Poppins, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + margin-bottom: 8px; + } + + &__content { + font-family: Poppins, sans-serif; + font-weight: 500; + font-style: Medium; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + margin-bottom: 24px; + } +} diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss new file mode 100644 index 0000000000..c8cd89c99a --- /dev/null +++ b/src/styles/blocks/article.scss @@ -0,0 +1,29 @@ +.article { + &__title { + font-family: Poppins, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 24px; + line-height: 140%; + letter-spacing: 0; + margin-bottom: 8px; + } + + &__description { + font-family: Poppins, sans-serif; + font-weight: 400; + font-style: Regular; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + margin-bottom: 16px; + + @include desktop { + width: 70%; + } + } + + &__picturies { + margin-bottom: 16px; + } +} diff --git a/src/styles/blocks/bike.scss b/src/styles/blocks/bike.scss new file mode 100644 index 0000000000..829d9376b4 --- /dev/null +++ b/src/styles/blocks/bike.scss @@ -0,0 +1,13 @@ +@use '../utils/mixins'; + +.bike { + @include grid; + &__model { + margin-bottom: 40px; + grid-column: span 2; + + @include desktop { + grid-column: span 4; + } + } +} diff --git a/src/styles/blocks/burger.scss b/src/styles/blocks/burger.scss new file mode 100644 index 0000000000..4a233afacc --- /dev/null +++ b/src/styles/blocks/burger.scss @@ -0,0 +1,55 @@ +@use '../utils/mixins'; + +.burger { + display: inline-block; + width: 24px; // Wielkość na mobile + height: 24px; + position: relative; + vertical-align: middle; + + @include desktop { + width: 32px; + height: 32px; + } + + @include tablet { + width: 32px; + height: 32px; + } + + &::before, + &::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + transition: opacity 0.3s; + } + + &::before { + background-image: url('/src/images/Icon-Burger-menu.svg'); + opacity: 1; + } + + &::after { + background-image: url('/src/images/Icon-Burger-menu-hover.svg'); + opacity: 0; + } + + &:hover { + &::before { + opacity: 0; + } + &::after { + opacity: 1; + } + } + + &__text { + @include mixins.visually-hidden; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 0000000000..3a0b73860f --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,39 @@ +.button { + display: flex; + justify-content: center; + align-items: center; + + width: 100%; // Pełna szerokość na mobile + height: 56px; + + background-color: white; + color: black; + border: none; + border-radius: 40px; + text-decoration: none; + + font-weight: 700; + font-size: 16px; + transition: + background 0.3s, + box-shadow 0.3s; + + // STYLE DLA DESKTOPU + @include desktop { + width: 324px; // Twoje 324px + padding: 0 48px; // Twoje paddingi + margin: 0 auto; // Centrowanie przycisku w sekcji + } + + &--primary { + font-family: Poppins, sans-serif; + line-height: 27px; + text-align: center; + width: 100%; + } + + &:hover { + background: #fff; + box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.4); // Poprawiony zapis koloru hex z alpha + } +} diff --git a/src/styles/blocks/close.scss b/src/styles/blocks/close.scss new file mode 100644 index 0000000000..c919bec5f0 --- /dev/null +++ b/src/styles/blocks/close.scss @@ -0,0 +1,16 @@ +.close { + &__icon { + width: 16px; + height: 16px; + + @include desktop { + width: 21.33px; + height: 21.33px; + } + + @include tablet { + width: 21.33px; + height: 21.33px; + } + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..3556692d15 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,34 @@ +@use '../utils/mixins'; + +.contact { + @include grid; + &__address { + grid-column: 1 / -1; + + @include desktop { + grid-column: 8 / 13; + } + + @include tablet { + grid-column: 8 / 13; + } + } + + &__form { + grid-column: 1 / -1; + } + + @include desktop { + &__form { + grid-column: 1 / 6; + padding-bottom: 164px; + } + } + + @include tablet { + &__form { + grid-column: 1 / 6; + padding-bottom: 164px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..3dba5d6c50 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,22 @@ +@use '../utils/mixins'; + +.footer { + width: 100%; + height: 200px; + background-image: url(../images/footer-pic.jpg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + @include desktop { + height: 555px; + } + + @include tablet { + height: 480px; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 0000000000..313aa3a98b --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,47 @@ +@use '../utils/mixins'; + +.form { + display: flex; + flex-direction: column; + + &__imput { + border-radius: 40px; + border: none; + background: #f8f8fa; + width: 100%; + height: 48px; + margin-bottom: 16px; + padding-left: 16px; + box-sizing: border-box; + + &::placeholder { + font-family: Poppins, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #7e7e83; + } + } + + &__textarea { + border-radius: 16px; + background: #f8f8fa; + width: 100%; + margin-bottom: 16px; + padding: 16px; + height: 148px; + box-sizing: border-box; + + &::placeholder { + font-family: Poppins, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #7e7e83; + } + } + + &__label { + @include visually-hidden; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..8ceeaefcb5 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,46 @@ +.header { + background-color: rgb(0, 0, 0); + background-image: url(../images/Cover_photo.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: 90%; + min-height: 100vh; + padding: 0 20px; + box-sizing: border-box; + + grid-template-rows: 1fr 1fr; + + @include desktop { + background-position: center; + grid-column: 1 / 13; + padding: 36px 120px 80px; + } + + @include tablet { + background-position: center; + grid-column: 1 / 13; + padding: 36px 72px 80px; + } + + @include grid; + + &__navigation { + align-self: start; + grid-column: 1 / 3; + grid-row: 1 / 2; + + @include desktop { + grid-column: 1 / 13; + } + } + + &__title { + align-self: end; + grid-column: 1 / 3; + grid-row: 2 / 3; + + @include desktop { + grid-column: 1 / 13; + } + } +} diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss new file mode 100644 index 0000000000..53b8155291 --- /dev/null +++ b/src/styles/blocks/links.scss @@ -0,0 +1,23 @@ +.links { + &__list { + list-style: none; + padding: 0; + margin: 0; + } + + &__item { + margin-bottom: 32px; + } + + &__link { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 22px; // Duży rozmiar z projektu + line-height: 1; + text-transform: uppercase; + color: #1d1d1d; + text-decoration: none; + display: inline-block; + letter-spacing: 1px; + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 0000000000..260c6fb484 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,18 @@ +@use '../utils/mixins'; + +.logo { + &__image { + width: 130px; + height: 38px; + + @include desktop { + width: 187px; + height: 56px; + } + + @include tablet { + width: 187px; + height: 56px; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..b2d7c9ee56 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,66 @@ +@use '../utils/mixins'; + +.main { + background-color: #1d1d1d; + font-family: Poppins, sans-serif; + font-weight: 500; + font-size: 23px; + line-height: 140%; + letter-spacing: 0; + color: #fff; + padding: 60px 20px 0; + + @include tablet { + padding: 80px 72px 0; + } + + @include desktop { + padding: 120px 120px 0; + } + + @include grid; + + &__title { + justify-self: flex-start; + padding-bottom: 32px; + grid-column: 1 / 3; + + @include tablet { + grid-column: 1 / 13; + } + + @include desktop { + grid-column: 1 / 7; + } + } + + &__content { + grid-column: 1 / 3; + + @include tablet { + grid-column: 1 / 13; + } + + @include desktop { + grid-column: 7 / 13; + } + } + + &__paragraph { + display: flex; + justify-content: space-between; + } + + &__section { + grid-column: 1 / 3; + + @include tablet { + grid-column: 1 / 13; + } + + @include desktop { + grid-column: 1 / 13; + gap: 24px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..39657a15a9 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,69 @@ +@use '../utils/mixins'; + +.menu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: #c2c2c2; // Twoje tło + z-index: 1000; + padding: 0 24px; // Większy margines od krawędzi ekranu + box-sizing: border-box; + + display: flex; + flex-direction: column; + align-items: flex-start; + + transform: translateX(100%); + transition: transform 0.4s ease-in-out; + + @include desktop { + padding: 32px 120px; + } + + @include tablet { + padding: 32px 72px; + } + + &:target { + transform: translateX(0); + } + + &__navigation { + width: 100%; // Musi być na całą szerokość, żeby rozsunąć logo i X + display: flex; + justify-content: space-between; // Rozsuwa logo i ikonę zamknięcia + align-items: center; + margin-bottom: 80px; + + @include tablet { + padding: 32px 120px; + } + } + + &__links { + margin-bottom: 8px; + } + + &__paragraph { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 16px; + color: #1d1d1d; + margin-bottom: 24px; + text-transform: uppercase; + } + + &__link { + font-family: Poppins, sans-serif; + font-weight: 600; + font-size: 14px; + text-transform: uppercase; + text-decoration: none; + color: #1d1d1d; + padding-bottom: 4px; + border-bottom: 1px solid #1d1d1d; // Podkreślenie Book a test ride + display: inline-block; + } +} diff --git a/src/styles/blocks/model.scss b/src/styles/blocks/model.scss new file mode 100644 index 0000000000..723a0dc9df --- /dev/null +++ b/src/styles/blocks/model.scss @@ -0,0 +1,34 @@ +.model { + &__photo { + display: block; + width: 100%; + height: auto; + margin-bottom: 32px; + } + + &__name { + font-family: Poppins, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 24px; + line-height: 140%; + letter-spacing: 0; + margin-bottom: 8px; + } + + &__price { + font-family: Poppins, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 24px; + line-height: 140%; + letter-spacing: 0; + } + + &__description { + margin-bottom: 16px; + font-size: 16px; + font-weight: 400; + line-height: 140%; + } +} diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss new file mode 100644 index 0000000000..e0a59d2386 --- /dev/null +++ b/src/styles/blocks/navigation.scss @@ -0,0 +1,14 @@ +.navigation { + display: flex; + justify-content: space-between; + align-items: center; + padding: 24px 0 60px; + width: 100%; + box-sizing: border-box; + + &__actions { + display: flex; + gap: 20px; + align-items: center; + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..2ba54d46d8 --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,53 @@ +@use '../utils/mixins'; + +.phone { + position: relative; + display: flex; + align-items: center; + text-decoration: none; + + // Ikona słuchawki + &_icon { + // Poprawiono z &__icon na &_icon (zgodnie z HTML) + width: 18px; + height: 18px; + + @include desktop { + width: 24px; + height: 24px; + } + + @include tablet { + width: 24px; + height: 24px; + } + } + + // Napis z numerem + &__label { + font-family: Poppins, sans-serif; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-align: right; + text-transform: uppercase; + color: #fff; + + position: absolute; + right: 100%; // Ustawia numer na lewo od słuchawki + margin-right: 20px; + white-space: nowrap; + + // Domyślnie ukryty + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease; + } + + // POKAZYWANIE PO NAJECHANIU + &:hover &__label { + opacity: 1; + visibility: visible; + } +} diff --git a/src/styles/blocks/picturies.scss b/src/styles/blocks/picturies.scss new file mode 100644 index 0000000000..7091eebc88 --- /dev/null +++ b/src/styles/blocks/picturies.scss @@ -0,0 +1,54 @@ +@use '../utils/mixins'; + +.picturies { + @include grid; + + @include tablet { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + } + + &__item { + width: 100%; + position: relative; + padding-top: 100%; + + @include desktop { + grid-column: span 6; + padding-top: 320px; + } + + @include tablet { + grid-column: span 6; + padding-top: 320px; + } + + &--small { + @include desktop { + grid-column: span 4; + } + + @include tablet { + grid-column: span 4; + } + } + + &--big { + @include desktop { + grid-column: span 8; + } + + @include tablet { + grid-column: span 8; + } + } + } + + &__image { + top: 0; + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 0000000000..5e96a26010 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,16 @@ +.section { + padding-top: 92px; + + &__title { + margin-bottom: 48px; + } + + &__article { + margin-bottom: 40px; + } + &--bikes { + @include tablet { + padding: 92px 104px 0; + } + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 0000000000..872bdaf596 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,76 @@ +@use '../utils/mixins'; + +.title { + font-family: Poppins, sans-serif; + font-weight: 700; + font-style: Bold; + font-size: 36px; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + vertical-align: middle; + padding-bottom: 88px; + + color: #fff; + + @include desktop { + font-size: 80px; + padding-bottom: 0; + line-height: 100%; + letter-spacing: -1.5px; + } + + @include tablet { + font-size: 64px; + padding-bottom: 0; + line-height: 100%; + letter-spacing: -1.5px; + } + + &--secondary { + font-family: Poppins, sans-serif; + font-weight: 500; + float: left; + font-style: Medium; + font-size: 32px; + line-height: 100%; + letter-spacing: -1.5px; + color: #fff; + + @include desktop { + font-size: 64px; + line-height: 100%; + letter-spacing: -1.5px; + } + + @include tablet { + font-size: 48px; + line-height: 100%; + letter-spacing: -1.5px; + } + } + + &--section { + font-family: Poppins, sans-serif; + font-weight: 500; + font-style: Medium; + font-size: 32px; + padding-bottom: 0; + line-height: 32px; + letter-spacing: -1.5px; + text-align: center; + text-transform: capitalize; + + @include desktop { + font-size: 64px; + line-height: 100%; + letter-spacing: -1.5px; + } + + @include tablet { + font-size: 48px; + line-height: 100%; + letter-spacing: -1.5px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d128..455b713047 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/reset'; +@import './utils/mixins'; +@import './blocks/title'; +@import './blocks/header'; +@import './blocks/main'; +@import './blocks/picturies'; +@import './blocks/button'; +@import './blocks/address'; +@import './blocks/form'; +@import './blocks/footer'; +@import './blocks/navigation'; +@import './blocks/menu'; +@import './blocks/links'; +@import './blocks/section'; +@import './blocks/article'; +@import './blocks/model'; +@import './blocks/bike'; +@import './blocks/contact'; +@import './blocks/burger'; +@import './blocks/phone'; +@import './blocks/logo'; +@import './blocks/close'; 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 deleted file mode 100644 index aeb006ffbb..0000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..5695eda96e --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,33 @@ +@mixin desktop() { + @media (min-width: 1260px) { + @content; + } +} + +@mixin tablet() { + @media (min-width: 744px) and (max-width: 1260px) { + @content; + } +} + +@mixin grid() { + display: grid; + justify-content: center; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + } +} + +@mixin visually-hidden() { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 0000000000..8e7d301bf7 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,135 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +}