Develop Miami (MYBIKE)

.eslintignore

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

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

README.md

@@ -3,13 +3,9 @@
 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;
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://botqqku.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,19 +1,19 @@
-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
+1. Add a favicon [x]
+2. Don’t forget to add a title for the whole web page (it could be the name of your landing) [x]
+3. All Logos on the page should be links to home page [x]
+4. Change text color on hover for phone, email and address [x]
+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 [x]
+6. Same when you click on logo. There shouldn't be any error. [x]
+7. When clicking on any location / address - prevent errors and make it to open location in Google Maps [x]
+8. Pictures in Gallery should increase on hover [x]
+9. Location-related addresses / links should open google maps in a new tab `target="_blank"` [x]
+10. Apply `:hover` effect for images on page (testimonials / gallery, other sections). [x]
+11. Make sure everything looks neat on mobile and without horizontal scrolling [x]
+12. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) [x]
+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 [x]
+14. Form shouldn't be submitted if some of the fields are not filled [x]
+15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) [x]
+16. Add a smooth scroll for the whole page [x]
 17. Fix menu for small screens (if there is not enough space for all the menu items)
     ```css
     .menu {
@@ -43,6 +43,6 @@
         document.body.classList.remove('page__body--with-menu');
       }
     });
-    ```
+    ``` [x]
 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.
+* Only for Miami: Make sure that ```<h1>``` is positioned exactly 80px from the bottom of the header. [x]