layout_landing-page

.eslintignore

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

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@mate-academy/eslint-config', 'plugin:cypress/recommended'],
+  extends: '@mate-academy/eslint-config',
 };

.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

@@ -9,10 +9,7 @@ node_modules
 .DS_Store
 
 # Generated files
+backstop_data
 dist
 .cache
 .parcel-cache
-raw_reports
-cypress/screenshots
-cypress/videos
-reports

.stylelintignore

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

README.md

@@ -1,21 +1,16 @@
 # Landing page
 
-> ❗❗ You will complete this task in the topic **Landing**.
-> Now just choose a design and do the parts from the videos
+My Bike is a landing page for a company specializing in selling bicycles and accessories. The website provides information on the company’s product benefits and showcases key features of the bikes and related products. It is designed for convenient viewing on both desktop and mobile devices.
 
-Choose a design for your landing page:
-- [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)
+Technologies Used:
+- HTML for structuring content.
+- SCSS for creating responsive styles and utilizing variables and mixins, which makes the code more maintainable.
+- JavaScript for interactive elements on the page.
+- BEM (Block Element Modifier) for organizing CSS classes to enhance readability and maintainability.
+- Grid Layout and Flexbox for creating a responsive grid and element positioning.
 
-Follow the videos in this and next lessons to implement the page block by block
-- Here is [the design from the video](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0) (❗❗ DO NOT implement this design ❗❗ choose one of the options above ❗❗ ☝️)
-- Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson
-- **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- When done check yourself using the [CHECKLIST](./checklist.md) when finished;
-- Deploy and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_landing-page/)
+Preview Link
+- https://taniafedortsi.github.io/layout_landing-page/
 
-# Tips & Hints
-- Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`.
-- If some points from the checklist are not relevant to your design, just skip it.
+Figma Design Link
+- https://www.figma.com/design/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0-1&node-type=canvas&t=FSWdTg36W3wekEwy-0