Bookstore Website Project

This repository contains the code for a Frontend of bookstore website built using HTML, CSS, and Bootstrap. The website is designed to provide users with an intuitive and visually appealing interface to browse books, view details, add items to a shopping cart, and proceed to checkout. Below is an overview of the project's functionality and design elements.

---

Table of Contents

1. Project Overview
2. Pages and Functionality
3. Design Elements
4. Technologies Used
5. How to Run the Project
6. Contributing
7. License

---

Project Overview The bookstore website is a static web application that allows users to:

• Browse featured books and categories.
• View detailed information about each book.
• Add books to a shopping cart.
• Proceed to checkout and fill in payment details.
• Learn more about the bookstore through the "About Us" page.
• Login or sign up for an account.

The website is designed to be responsive, ensuring a seamless experience across devices of all sizes.

---

Pages and Functionality

1. Home Page (index.html)

• Functionality:
  • Displays a header with a fixed navigation bar.
  • Features a hero section with a welcoming message and call-to-action buttons.
  • Shows featured books in a card layout with hover effects.
  • Includes a footer with contact information and social media links.
• Design Elements:
  • Fixed navigation bar with a blue and off-white color scheme.
  • Hero section with a linear-gradient background and glass effect (backdrop filter).
  • Featured books displayed using Bootstrap cards with hover effects.
  • Footer styled using CSS Grid for a clean layout.

---

2. Shopping Cart Page (addtocart.html)

• Functionality:
  • Displays items added to the cart.
  • Allows users to adjust quantities, remove items, or proceed to checkout.
• Design Elements:
  • Flexbox layout for item listings.
  • Styled buttons for actions like "Remove" and "Proceed to Checkout."

---

3. Checkout Page (payment.html)

• Functionality:
  • Displays a payment form for users to fill in their details.
  • Includes radio buttons for selecting payment methods.
  • Redirects users to the home page after submission.
• Design Elements:
  • Bootstrap icons for payment methods.
  • Prominent "Pay Now" button with hover effects.

---

4. Categories Page (categories.html)

• Functionality:
  • Displays all available book categories.
  • Redirects users to sub-pages for each category.
• Design Elements:
  • Category cards with hover effects (transform scale).
  • Back-to-category button for easy navigation.

---

5. Login Page (login.html)

• Functionality:
  • Allows users to log in with a username and password.
  • Redirects users to the home page after login.
  • Includes a link to the sign-up page.
• Design Elements:
  • Glass effect for the login form (backdrop filter).
  • Hover effects for buttons and links.

---

6. Book Detail Page (bookdetail.html)

• Functionality:
  • Displays detailed information about a selected book.
  • Includes options to add the book to the cart.
  • Shows customer reviews and recommended books.
• Design Elements:
  • Flexbox layout for book details.
  • Responsive design with flex-wrap for smaller screens.
  • Gap and min properties for spacing and responsiveness.

---

7. About Us Page (about.html)

• Functionality:
  • Introduces the bookstore, its mission, vision, and values.
  • Displays team member details.
• Design Elements:
  • Two-column layout for mission and vision sections.
  • Responsive grid for the "Meet the Team" section.
  • Core values highlighted in individual cards.

---

Design Elements

• Color Scheme: Blue and off-white combination for a clean and professional look.
• Typography: Poppins font from Google Fonts for a modern and readable design.
• Responsiveness: Bootstrap grid system and CSS Flexbox/Grid for responsive layouts.
• Hover Effects: Transform scale and background transitions for interactive elements.
• Glass Effect: Backdrop filter for a modern, glass-like appearance.

---

Technologies Used

• HTML: For structuring the web pages.
• CSS: For styling and animations.
• Bootstrap: For responsive design and pre-built components.
• Google Fonts: For typography.
• Icons: Bootstrap icons for payment methods and other UI elements.

---

How to Run the Project

1. Clone the repository:

   git clone https://github.com/your-username/book-store-website.git

2. Navigate to the project directory:

   cd book-Store-website

3. Open the index.html file in your browser to view the homepage.

---

Improvements Improvements are welcome! If you'd like to suggest improvement to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes.
4. Push your branch and submit a pull request.

---

License This project is licensed under the MIT License. See the LICENSE(LICENSE) file for details.

---

Thank you for checking out this project! If you have any questions or feedback, feel free to reach out. Happy coding! 🚀