Develop

.eslintignore

@@ -1,2 +1,2 @@
-/backstop_data
 /dist
+/node_modules

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -20,10 +20,10 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
-    - run: npm start & sleep 5 && npm test
+    - run: npm test
     - name: Upload HTML report(backstop data)
       if: ${{ always() }}
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: report
         path: backstop_data

.gitignore

@@ -1,14 +1,15 @@
-# IDE
 .idea
 .vscode
-
-# Node
+build
+dist
 node_modules
-
-# MacOS
 .DS_Store
 
-# Generated files
-backstop_data
-dist
-.cache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+raw_reports
+reports
+cypress/screenshots
+cypress/videos

.linthtmlrc.json

@@ -1,3 +1,49 @@
 {
-  "extends": "@mate-academy/linthtml-config"
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "style"
+  ],
+  "attr-name-ignore-regex": "viewBox",
+  "attr-no-dup": true,
+  "attr-quote-style": "double",
+  "attr-req-value": true,
+  "class-no-dup": true,
+  "doctype-first": true,
+  "doctype-html5": true,
+  "fig-req-figcaption": true,
+  "head-req-title": true,
+  "html-req-lang": true,
+  "id-class-style": false,
+  "id-no-dup": true,
+  "img-req-src": true,
+  "img-req-alt": "allownull",
+  "indent-width": 2,
+  "indent-style": "spaces",
+  "indent-width-cont": true,
+  "input-radio-req-name": true,
+  "spec-char-escape": true,
+  "tag-bans": [
+    "b",
+    "i",
+    "u",
+    "center",
+    "style",
+    "marquee",
+    "font",
+    "s"
+  ],
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": false,
+  "tag-close": true,
+  "text-ignore-regex": "&",
+  "title-no-dup": true,
+  "line-end-style": "lf",
+  "attr-new-line": 2,
+  "attr-name-style": "dash",
+  "attr-no-unsafe-char": true
 }

.prettierignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+**/*.test.js

.prettierrc

@@ -0,0 +1,20 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "html",
+        "insertPragma": false,
+        "endOfLine": "auto",
+        "singleAttributePerLine": true,
+        "htmlWhitespaceSensitivity": "ignore"
+      }
+    }
+  ]
+}

.stylelintrc.js

@@ -1,8 +1,5 @@
 module.exports = {
-  extends: [
-    "stylelint-config-recommended-scss",
-    "@mate-academy/stylelint-config"
-  ],
+  extends: "@mate-academy/stylelint-config",
   plugins: [
     "stylelint-scss"
   ],

README.md

@@ -1,12 +1,15 @@
 # Miami landing page
 
-You have several designs that are very similar to Miami. Choose the most interesting for you. Don't be afraid of another markup. We developed landing pages that in coding will be almost the same as Miami. You still able to chose Miami. 
-
-- [the BOSE landing page](https://www.figma.com/file/OMjQNb3hg1LKMV4OwyQ3Ao/BOSE?node-id=0%3A1)
-- [the MYBIKE landing page](https://www.figma.com/file/Ic3SlZjkATYaS7uTifZAIk/BIKE?node-id=0%3A1)
-- [the MET landing page](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET?node-id=0%3A1)  
-- [the Miami landing page](https://www.figma.com/file/nHz8bflIwJaWP3P99vKTH5/miami_home_new?node-id=16033%3A3)
-
-Implement selected landing page following the lesson videos.
-
---> [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md)
+In this task, you will learn how to implement a landing page. To do that:
+
+- choose a landing page design from the list below;
+  - [BOSE landing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0)
+  - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
+  - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
+  - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
+  - [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://<your_account>.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;

checklist.md

@@ -6,8 +6,8 @@
 6. Same when you click on logo. There shouldn't be any error.
 7. When clicking on any location / address - prevent errors and make it to open location in Google Maps
 8. Pictures in Gallery should increase on hover
-9. Location-related addresses / links / images should open google maps in a new tab `target="_blank"`
-10. Apply :hover effect for images on page (testimonials / gallery, other sections).
+9. Location-related addresses / links should open google maps in a new tab `target="_blank"`
+10. Apply `:hover` effect for images on page (testimonials / gallery, other sections).
 11. Make sure everything looks neat on mobile and without horizontal scrolling
 12. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling)
 13. Placeholders in the forms suggest what to enter; apply validation of the form fields (`required`, `email / tel etc.`), then it is clear in what format to enter the data
@@ -29,7 +29,7 @@
 
       ...
     ```
-15. To disable page scrolling under the menu add the next code
+18. To disable page scrolling under the menu add the next code
     ```css
     .page__body--with-menu {
       overflow: hidden;
@@ -44,5 +44,5 @@
       }
     });
     ```
-16. Remember to reset default margins for headings (h1, h2, h3, etc.).
+19. Remember to reset default margins for headings (h1, h2, h3, etc.).
 * Only for Miami: Make sure that ```<h1>``` is positioned exactly 80px from the bottom of the header.

index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <title>Miami</title>
+    <link
+      rel="stylesheet"
+      href="src/styles/main.scss"
+    />
+    <script
+      src="src/scripts/main.js"
+      defer
+    ></script>
+  </head>
+  <body>
+    <h1>Miami</h1>
+  </body>
+</html>