BOSE

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

.editorconfig

@@ -7,4 +7,4 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-end_of_line = lf
+end_of_line = lf

.eslintignore

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

.eslintrc.js

@@ -1,6 +1,3 @@
 module.exports = {
-  "extends": "@mate-academy/eslint-config",
-  "env": {
-    "browser": true
-  }
+  extends: '@mate-academy/eslint-config',
 };

.github/workflows/test.yml

@@ -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@v4
+      with:
+        name: report
+        path: backstop_data

.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

.gitignore

@@ -1,6 +1,15 @@
+# IDE
 .idea
+.vscode
+
+# Node
 node_modules
+
+# MacOS
 .DS_Store
-yarn.lock
-package-lock.json
+
+# Generated files
+backstop_data
 dist
+.cache
+.parcel-cache

.linthtmlrc.json

@@ -0,0 +1,49 @@
+{
+  "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"
+      }
+    }
+  ]
+}

.stylelintignore

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

.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,17 +1,15 @@
 # Miami landing page
 
-## Task
-
-Follow this [video guide](https://youtu.be/mLVBoH5Dwv0) and write your own implementation.
-
-Author uses `pug`, but not many features. Just ignore it and write simple `HTML`.
-Also, author use `SASS`, you can use it too or `SCSS` as usually.
-
----
-**Read the guideline before start**
-
-[Guideline](https://mate-academy.github.io/layout_task-guideline/)
-
-**Result**
-
-- [UPDATE DEMO LINK](https://<your_account>.github.io/<repo_name>/)
+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

@@ -0,0 +1,48 @@
+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;
+
+      background-color: #0075ff;
+
+      /* 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.