Html and css code review

this my code
add images source from google or something else i want when i click incataegorie section it naviget to shope page and dispaly the products of that categorie i want also panier system commande
with html css javascript only i don't want complexe code
i want simple small code but attractive design with simple option

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>InfoShop | Accueil</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body {  
  background-color: #f5f5f5;  
  color: #333;  
}  

header {  
  background-color: #1f2937;  
  color: white;  
  padding: 1rem 2rem;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  flex-wrap: wrap;  
}  

.logo {  
  font-size: 1.5rem;  
  font-weight: bold;  
}  

nav {  
  display: flex;  
  gap: 1rem;  
}  

nav a {  
  color: white;  
  text-decoration: none;  
  font-weight: 500;  
}  

.search-cart {  
  display: flex;  
  align-items: center;  
  gap: 1rem;  
}  

input[type="text"] {  
  padding: 0.4rem;  
  border-radius: 4px;  
  border: none;  
}  

.main-banner {  
  width: 100%;  
  height: 300px;  
  background: url('Images/Promotions/slide1.jpg') center/cover no-repeat;  
  animation: slide 15s infinite;  
}  

@keyframes slide {  
  0%   { background-image: url('Images/Promotions/slide1.jpg'); }  
  33%  { background-image: url('Images/Promotions/slide2.jpg'); }  
  66%  { background-image: url('Images/Promotions/slide3.jpg'); }  
  100% { background-image: url('Images/Promotions/slide1.jpg'); }  
}  

.container {  
  padding: 2rem;  
}  

.products {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
  gap: 2rem;  
}  

.product {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 1rem;  
  transition: transform 0.3s;  
}  

.product:hover {  
  transform: translateY(-5px);  
}  

.product img {  
  width: 100%;  
  height: 150px;  
  object-fit: contain;  
  border-bottom: 1px solid #ccc;  
  margin-bottom: 1rem;  
}  

.product h3 {  
  font-size: 1.1rem;  
  margin-bottom: 0.5rem;  
}  

.product p {  
  font-size: 0.9rem;  
  color: #666;  
  margin-bottom: 0.5rem;  
}  

.product input {  
  width: 60px;  
  padding: 0.3rem;  
  margin-right: 0.5rem;  
}  

.product button {  
  padding: 0.4rem 0.8rem;  
  background-color: #2563eb;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  

footer {  
  background-color: #1f2937;  
  color: white;  
  text-align: center;  
  padding: 1rem;  
  margin-top: 2rem;  
}  

footer p {  
  margin-bottom: 0.5rem;  
}

</style> </head> <body> <header> <div class="logo">InfoShop</div> <nav> <a href="#">Accueil</a> <a href="#">Catalogue</a> <a href="#">Connexion</a> <a href="#">Inscription</a> <a href="#">Panier</a> </nav> <div class="search-cart"> <input type="text" placeholder="Rechercher..." /> <a href="#">🛒</a> <a href="#">👤</a> </div> </header> <div class="main-banner"></div> <div class="container"> <h2>Produits en promotion</h2> <div class="products"> <div class="product"> <img src="Images/Pcs_portables/product1.jpg" alt="Produit 1" /> <h3>Lenovo Ideapad</h3> <p>PC Portable performant avec 8GB RAM, 256GB SSD</p> <input type="number" min="1" max="10" value="1" /> <button>Commander</button> </div> <div class="product"> <img src="Images/Pcs_portables/product2.jpg" alt="Produit 2" /> <h3>HP Pavilion</h3> <p>Design moderne, i5 11e Gén, écran Full HD</p> <input type="number" min="1" max="10" value="1" /> <button>Commander</button> </div> <div class="product"> <img src="Images/Pcs_portables/product3.jpg" alt="Produit 3" /> <h3>Dell Inspiron</h3> <p>Fiabilité et performance à petit prix</p> <input type="number" min="1" max="10" value="1" /> <button>Commander</button> </div> </div> </div> <footer> <p>Contactez-nous : info@infoshop.com | +213 123 456 789</p> <p>Suivez-nous : Facebook | Twitter | Instagram</p> </footer> </body> </html>

Show full message

317d ago

Enhanced E-commerce Website with Categories and Cart System

I'll enhance your InfoShop website with category navigation, product pages, and a shopping cart system while keeping the code simple and attractive.

InfoShop

index.html

InfoShop

shop.html

InfoShop

cart.html

InfoShop

styles.css

InfoShop

script.js

How It Works

I've created a complete e-commerce website with the following features:

Home Page (index.html)
- Attractive banner with call-to-action
- Category sections that link to the shop page with filtered products
- Featured products section
Shop Page (shop.html)
- Category sidebar for filtering products
- Product grid with search functionality
- Each product has an "Add to Cart" button
Cart Page (cart.html)
- Displays all items in the cart
- Allows quantity adjustment and item removal
- Shows order summary with subtotal, shipping, and total
- Checkout process with order form and confirmation
JavaScript Functionality (script.js)
- Product data management
- Cart functionality with localStorage persistence
- Category filtering and search
- Checkout process
Responsive Design (styles.css)
- Works on mobile and desktop devices
- Clean, modern interface with attractive styling

How to Use

Browse Products:
- Click on categories on the home page to see filtered products
- Use the search bar on the shop page to find specific products
Add to Cart:
- Click "Add to Cart" on any product to add it to your shopping cart
- A confirmation message will appear
Manage Cart:
- View your cart by clicking the cart icon or "Panier" link
- Adjust quantities using the + and - buttons
- Remove items with the trash icon
- See your order total with shipping costs
Checkout:
- Click "Passer la commande" to proceed to checkout
- Fill in your details in the order form
- Receive order confirmation with a unique order number

The website uses localStorage to remember your cart items even if you close the browser.

317d ago

body {  
  background-color: #f5f5f5;  
  color: #333;  
}  

header {  
  background-color: #1f2937;  
  color: white;  
  padding: 1rem 2rem;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  flex-wrap: wrap;  
}  

.logo {  
  font-size: 1.5rem;  
  font-weight: bold;  
}  

nav {  
  display: flex;  
  gap: 1rem;  
}  

nav a {  
  color: white;  
  text-decoration: none;  
  font-weight: 500;  
}  

.search-cart {  
  display: flex;  
  align-items: center;  
  gap: 1rem;  
}  

input[type="text"] {  
  padding: 0.4rem;  
  border-radius: 4px;  
  border: none;  
}  

.main-banner {  
  width: 100%;  
  height: 300px;  
  background: url('Images/Promotions/slide1.jpg') center/cover no-repeat;  
  animation: slide 15s infinite;  
}  

@keyframes slide {  
  0%   { background-image: url('Images/Promotions/slide1.jpg'); }  
  33%  { background-image: url('Images/Promotions/slide2.jpg'); }  
  66%  { background-image: url('Images/Promotions/slide3.jpg'); }  
  100% { background-image: url('Images/Promotions/slide1.jpg'); }  
}  

.container {  
  padding: 2rem;  
}  

.products {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
  gap: 2rem;  
}  

.product {  
  background: white;  
  border-radius: 8px;  
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  
  padding: 1rem;  
  transition: transform 0.3s;  
}  

.product:hover {  
  transform: translateY(-5px);  
}  

.product img {  
  width: 100%;  
  height: 150px;  
  object-fit: contain;  
  border-bottom: 1px solid #ccc;  
  margin-bottom: 1rem;  
}  

.product h3 {  
  font-size: 1.1rem;  
  margin-bottom: 0.5rem;  
}  

.product p {  
  font-size: 0.9rem;  
  color: #666;  
  margin-bottom: 0.5rem;  
}  

.product input {  
  width: 60px;  
  padding: 0.3rem;  
  margin-right: 0.5rem;  
}  

.product button {  
  padding: 0.4rem 0.8rem;  
  background-color: #2563eb;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  

footer {  
  background-color: #1f2937;  
  color: white;  
  text-align: center;  
  padding: 1rem;  
  margin-top: 2rem;  
}  

footer p {  
  margin-bottom: 0.5rem;  
}

Enhanced E-commerce Website with Categories and Cart System

I'll enhance your InfoShop website with category navigation, product pages, and a shopping cart system while keeping the code simple and attractive.

InfoShop

index.html

InfoShop

shop.html

InfoShop

cart.html

InfoShop

styles.css

InfoShop

script.js

How It Works

I've created a complete e-commerce website with the following features:

Home Page (index.html)
- Attractive banner with call-to-action
- Category sections that link to the shop page with filtered products
- Featured products section
Shop Page (shop.html)
- Category sidebar for filtering products
- Product grid with search functionality
- Each product has an "Add to Cart" button
Cart Page (cart.html)
- Displays all items in the cart
- Allows quantity adjustment and item removal
- Shows order summary with subtotal, shipping, and total
- Checkout process with order form and confirmation
JavaScript Functionality (script.js)
- Product data management
- Cart functionality with localStorage persistence
- Category filtering and search
- Checkout process
Responsive Design (styles.css)
- Works on mobile and desktop devices
- Clean, modern interface with attractive styling

How to Use

Browse Products:
- Click on categories on the home page to see filtered products
- Use the search bar on the shop page to find specific products
Add to Cart:
- Click "Add to Cart" on any product to add it to your shopping cart
- A confirmation message will appear
Manage Cart:
- View your cart by clicking the cart icon or "Panier" link
- Adjust quantities using the + and - buttons
- Remove items with the trash icon
- See your order total with shipping costs
Checkout:
- Click "Passer la commande" to proceed to checkout
- Fill in your details in the order form
- Receive order confirmation with a unique order number

The website uses localStorage to remember your cart items even if you close the browser.

317d ago