upd scripts

.bemlintrc.json

@@ -0,0 +1,16 @@
+{
+  "elementDivider": "__",
+  "modifierDivider": "--",
+  "ignore": [
+    "node_modules",
+    "dist"
+  ],
+  "rules": {
+    "one-block": true,
+    "one-element": true,
+    "element-inside-parent-block": true,
+    "no-double-element": true,
+    "no-neighbour-parent-block": true,
+    "modifiable-class": true
+  }
+}

.eslintignore

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

.github/workflows/test.yml

@@ -11,13 +11,19 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        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 ci
-    - run: npm start & sleep 5 && npm test
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v4
+      with:
+        name: report
+        path: backstop_data

.gitignore

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

.linthtmlrc.json

@@ -38,7 +38,7 @@
   ],
   "tag-name-lowercase": true,
   "tag-name-match": true,
-  "tag-self-close": "never",
+  "tag-self-close": false,
   "tag-close": true,
   "text-ignore-regex": "&",
   "title-no-dup": 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,24 +1,15 @@
 # Miami landing page
-- Implement [the landing page](https://www.figma.com/file/nHz8bflIwJaWP3P99vKTH5/miami_home_new?node-id=0%3A2)
-- Follow this [video guide](https://www.youtube.com/watch?v=sq184jq9DV8&feature=youtu.be) and write your own implementation.
 
-## Instructions
-1. **Fork** the repo.
-2. **Clone** the forked one. (The project link should have your name but not `mate-academy`)
-3. Run `npm install` (or just `npm i`)
-4. Run `npm start`.
-5. Open one more terminal window for the next steps
-6. `git checkout -b develop` - to create new branch and switch on it
-7. Write you code in `src` folder
-8. Run `npm run lint` and fix code style errors.
-9. Run `npm run deploy` to deploy your solution to `gh-pages`
-10. `git add . && git commit -m 'solution'` to save your changes
-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 `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/layout_miami/)
-14. Copy `DEMO LINK` to the PR description
+In this task, you will learn how to implement a landing page. To do that:
 
-> To update you PR repeat steps 7-11
-
---> [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md)
+- 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

@@ -1,51 +1,48 @@
-- make sure all links work
-- comments are usually applicable to the whole project, not only the place where it was left (think about similar issues in your code)
-- did you fully followed the design?
-- make sure there is an empty line at the end of the file ([find out why](https://evanhahn.com/newline-necessary-at-the-end-of-javascript-files/))
-- follow DRY principle
-- write semantic markup
-- elements of type block (e.g. `div`) are already 100% wide, there is no need to write this in styles
-- after you open the tag, you have to add at least one more level of indentation before you close this tag 
+1. Add a favicon
+2. Don’t forget to add a title for the whole web page (it could be the name of your landing)
+3. All Logos on the page should be links to home page
+4. Change text color on hover for phone, email and address
+5. When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device
+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 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
+14. Form shouldn't be submitted if some of the fields are not filled
+15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+16. Add a smooth scroll for the whole page
+17. Fix menu for small screens (if there is not enough space for all the menu items)
+    ```css
+    .menu {
+      /* Move these rules from .menu__content */
+      box-sizing: border-box;
+      height: 100vh;
+      padding: 24px 0;
 
- GOOD example:
-```
-<div>
-  <div>
-    some text
-  </div
-</div>
-```
+      background-color: #0075ff;
 
- BAD example:
-```
-<div>
-<div>
-some text
-</div
-</div>
-```
-- do not add extra files to the PR, use `git add <file_name>` instead of `git add.` or use `.gitignore` file ([gitignore](https://git-scm.com/docs/gitignore))
-- check the [style guide](https://mate-academy.github.io/style-guides/htmlcss.html)
-- `*` selector is used to add styles to EACH element of the file, you don't usually need this and this is too heavy for the big page, 
-that's why this is better to add this style to those elements you really need (the major case when it is used is for `box-sizing` property)
-- we preferably use classes for styling, not tags, ids, attributes or something else
-- do not reset paddings for `body`, it doesn't have them by default
-- check your class names again and make sure they are meaningful and describe the element behavior or its appearance
-- styles for `body` is usually written at the beginning of the file
-- don't increase specificity of selectors ([about selectors specificity](https://www.w3schools.com/css/css_specificity.asp))
-- don't use word `image` in alt ([check here why](https://moz.com/learn/seo/alt-text))
-- hover with transition should work perfectly
-- all interactive elements should have cursor pointer
-- inputs must have `name` attribute
-- check the page on different screen sizes, it should be responsive (including sizes over 1700px)
-- remove commented code and unnecessary comments
-- use either `kebab-case` or `snake_case` for class names
-- if you pushed some new changes, deploy them as well
-- check up this [link](https://docs.google.com/document/d/1iglPsTDmcbDEwCEga20cUFO0eu8IIgXeqy06PLb46jY/edit) to prepare your project for HR review
-- phones should be links like this: `<a href="tel:123-456-7890">123-456-7890</a>`
-- emails should be links like this: `<a href="mailto:someone@yoursite.com">Email Us</a>`
-- use ids for anchoring from your `nav` through site
-- forms should have attributes `method` and `action`
-- phone inputs in forms should have `type="tel"` so the HTML validation works
-- email inputs in forms should have `type="email"` so the HTML validation works
-- form have button with `type="submit"` ([check here why button](https://html.com/attributes/button-type/#Difference_between_ltbutton_typesubmitgt_and_ltinput_typesubmitgt))
+      /* Add this rule to add scroll when there is not enough space */
+      overflow-y: auto;
+
+      ...
+    ```
+18. To disable page scrolling under the menu add the next code
+    ```css
+    .page__body--with-menu {
+      overflow: hidden;
+    }
+    ```
+    ```js
+    window.addEventListener('hashchange', () => {
+      if (window.location.hash === '#menu') {
+        document.body.classList.add('page__body--with-menu');
+      } else {
+        document.body.classList.remove('page__body--with-menu');
+      }
+    });
+    ```
+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>