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
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>I'll enhance your InfoShop website with category navigation, product pages, and a shopping cart system while keeping the code simple and attractive.
index.html
shop.html
cart.html
styles.css
script.js
I've created a complete e-commerce website with the following features:
Home Page (index.html)
Shop Page (shop.html)
Cart Page (cart.html)
JavaScript Functionality (script.js)
Responsive Design (styles.css)
Browse Products:
Add to Cart:
Manage Cart:
Checkout:
The website uses localStorage to remember your cart items even if you close the browser.