Skip to content

A simple and responsive dessert shop webpage built with HTML, CSS, and JavaScript. Browse desserts, view prices, and simulate adding items to a shopping cart with a clean, modern design.

Notifications You must be signed in to change notification settings

abdelhaymallouli/cart-shopping

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Dessert Shop - Your Shop

Home Page

This project is a simple dessert shop webpage that displays various dessert products and allows users to add items to the cart. The website is built using HTML, CSS, and JavaScript. It features multiple dessert products with descriptions, prices, and an option to add items to the shopping cart.

Features

  • Responsive Layout: The webpage is optimized for different screen sizes using a flexible layout.
  • Add to Cart: Each product has an "Add to Cart" button to simulate adding items to a shopping cart.
  • Beautiful Design: The webpage uses custom fonts and images to give a stylish presentation of desserts.

Technologies Used

  • HTML5: For creating the structure of the webpage.
  • CSS3: For styling the page, including layout, fonts, and product presentation.
  • JavaScript (ES6): For adding interactivity, such as handling the "Add to Cart" functionality.
  • Google Fonts: The project uses custom fonts from Google Fonts for a unique and clean look.
  • Font Awesome: Icons are used for a visually appealing "Add to Cart" button.

File Structure

  • index.html - The main HTML structure of the webpage.
  • style.css - Stylesheet for the webpage's layout and design.
  • myscripts.js - JavaScript file that handles the interactivity, including adding products to the cart.
  • assets/ - Folder that contains images of the desserts and icons for the cart functionality.

Setup and Installation

To run this project locally:

  1. Clone this repository:
    git clone https://github.com/abdelhaymallouli/cart-shopping
  2. Navigate to the project directory:
    cd your-shop
  3. Open the index.html file in your browser to view the webpage.

Usage

  • Viewing Products: The website features a selection of dessert products. Each product is displayed with an image, name, description, and price.
  • Adding to Cart: Click on the "Add to Cart" button next to any product to simulate adding the product to the cart.
  • Cart Display: The selected products are shown in the cart section, which can be expanded for further functionality.

Screenshots

Below is a sample of how the products are displayed on the webpage:

Products Page

Future Enhancements

  • Implement a real shopping cart system where users can see the added products, update quantities, and check out.
  • Add filtering functionality to categorize desserts based on type or price.
  • Improve the responsiveness for mobile devices.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

About

A simple and responsive dessert shop webpage built with HTML, CSS, and JavaScript. Browse desserts, view prices, and simulate adding items to a shopping cart with a clean, modern design.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published