add task solution

README.md

@@ -1,24 +1,57 @@
-# Landing Page
+# MYBIKE Landing Page
 
-> ❗❗ You will complete this task in the **Landing** topic.
-> Now just choose a design and do the parts from the videos.
-> Note: in the first task of this topic you will find 4 examples of landing pages. Choose **only one** of them and create your page.
+## Project Description
 
-Choose a design for your landing page:
+MYBIKE is a sleek and modern website designed to showcase a range of bikes, their features, and to provide users with a means to contact the company. The site features a responsive design with multiple sections including an introduction, bike comparison, detailed features, and a contact form.
 
-- [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
 
-Follow the videos in this and next lessons to implement the page block by block:
+- **HTML5**: For creating the structure of the page.
+- **CSS3**: For styling the elements.
+- **SASS**: For advanced CSS preprocessing and maintainable stylesheets.
+- **JavaScript**: For interactive elements and functionality.
+- **Grid and Flexbox**: For responsive and flexible layout design.
 
-- 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/).
+## Live Preview
 
-# 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.
+You can preview the website [here](https://vladislav-tsybuliak1.github.io/layout_landing-page/).
+
+## Design Mockup
+
+You can find the design mockup [here](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1).
+
+## Sections of the Website
+
+1. **Header**: Contains the logo, navigation icons, and a prominent title.
+2. **Menu**: A side menu for navigation, including links to different sections.
+3. **About Us**: Introduction to the company's philosophy and approach.
+4. **Compare Bikes**: A section showcasing different bike models with images, descriptions, and prices.
+5. **Details**: Detailed features of the bikes with images and descriptions.
+6. **Contact Us**: A contact form for users to send messages, including company contact information.
+
+## Additional Instructions for Running
+
+To run the project locally, follow these steps:
+
+1. **Clone the Repository**:
+    ```sh
+    git clone https://github.com/vladislav-tsybuliak1/layout_landing-page.git
+    cd layout_landing-page
+    ```
+
+2. **Install Dependencies**:
+    If you use a package manager like npm, you can install dependencies as follows:
+    ```sh
+    npm install
+    ```
+
+3. **Run the Project in a Browser**:
+    Note: SASS files compile automatically to CSS. Run this:
+    ```sh
+    npm start
+    ```
+
+By following these instructions, you should be able to run and view the MYBIKE website on your local machine. Enjoy!
+
+## Contact
+For any inquiries, please contact [[email protected]](mailto:[email protected]).