This is a group project to create a clone of the Boat e-commerce website. The project focuses on using local storage to save data and making the website responsive using media queries and Flex Properties .
The project aims to recreate the core functionalities of the Boat e-commerce website. It includes the following pages:
- Home Page: Displays the main landing page with a navigation bar.
- Product Details Page: Shows detailed information about a specific product.
- Product Page: Lists all available products for browsing.
- Cart Page: Displays the selected products and enables users to manage their cart.
- Footer: Provides additional information and links at the bottom of each page.
- Login / Signup Page: Allows users to create an account or log in to an existing account.
- Payment Page: Allows users to complete the checkout process.
- All pages with nav bar and footer.
The project utilizes the following technologies:
- HTML5: Markup language for creating the website structure.
- CSS: Styling language for designing the website layout and appearance.
- JavaScript: Programming language for implementing interactive features and functionality.
- Local Storage: Used to store and retrieve data locally on the user's device.
- Media Queries: Employed to make the website responsive and adaptable to different screen sizes.
The project has been deployed using Netlify. You can access the live website by visiting the following link: Boat E-commerce Clone.
To run the project locally, follow these steps:
- Clone the project repository:
git clone <repository_url> - Open the project directory:
cd boat-ecommerce-clone - Launch the website: Open the
index.htmlfile in a web browser.
The project structure is organized as follows:
-
Index.html: Entry point of the website, contains the home page.
-
Nav.html: to navigate all the pages with search functionality -
productDetails[number of product].html: Page displaying the detailed information of a product.
-
product.html: Page listing all available products.
-
payment.html: Page for completing the checkout process.
-
cart.html: Page displaying the user's shopping cart.
-
footer.html: HTML snippet for the footer section included on every page.
-
login.htmlandsignup.html: Pages for user authentication.
-
css/: Directory containing CSS stylesheets . -
js/: Directory containing JavaScript files. -
images/: Directory storing project images.
We welcome contributions to improve the project! If you would like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name - Make your changes and commit them:
git commit -m 'Add some feature' - Push to the branch:
git push origin feature/your-feature-name - Open a pull request in the original repository.
This project is licensed under the MIT License.