HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cartes de Produits</title>
<style>
/* Styles globaux */
body {
font-family: Arial, sans-serif;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.container {
width: 100%;
max-width: 1000px;
margin: 20px auto;
}
/* Style des cartes de produits */
.product-card {
background-color: white;
color: #2a1a5e; /* Darkviolet */
border-radius: 10px;
overflow: hidden;
margin: 20px;
position: relative;
cursor: pointer;
transition: transform 0.3s;
}
.product-card:hover {
transform: scale(1.05);
}
.product-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-content {
padding: 15px;
}
.product-name {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
.product-price {
font-size: 16px;
color: #2a1a5e;
}
.product-discount {
position: absolute;
top: 10px;
right: 10px;
background-color: #e60000;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}
.add-to-cart {
display: flex;
align-items: center;
background-color: #2a1a5e;
color: white;
padding: 10px;
border: none;
width: 100%;
justify-content: center;
font-size: 16px;
cursor: pointer;
border-radius: 0 0 10px 10px;
transition: background-color 0.3s;
}
.add-to-cart:hover {
background-color: #e60000;
}
.cart-icon {
margin-right: 10px;
}
/* Filtres avec pagination */
.filters {
overflow-x: auto;
white-space: nowrap;
margin-bottom: 20px;
padding: 10px 0;
display: flex;
justify-content: flex-start;
gap: 10px;
}
.filter-btn {
background-color: rgb(34, 3, 46);
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.filter-btn:hover {
background-color: #2a1a5e;
color: white;
}
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.pagination-btn {
background-color: #2a1a5e;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
.pagination-btn:hover {
background-color: #e60000;
}
.pagination-btn:disabled {
background-color: #7f7f7f;
cursor: not-allowed;
}
/* Flèches de navigation */
.arrow-btn {
background-color: transparent;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
.arrow-btn:hover {
color: #e60000;
}
.arrow-container {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="container">
<!-- Filtres -->
<div class="filters">
<button class="filter-btn">Filtre 1</button>
<button class="filter-btn">Filtre 2</button>
<button class="filter-btn">Filtre 3</button>
<button class="filter-btn">Filtre 4</button>
</div>
<!-- Cartes de produits -->
<div class="product-container" style="display: flex; justify-content: space-between; flex-wrap: wrap;">
<div class="product-card">
<img class="product-img" src="https://fiarakodia.s3.amazonaws.com/uploads/picture/url/95542/medium_with_watermark_yamaha-mt-haute-matsiatra-ambalavao-7848.jpg" alt="Produit 1">
<div class="product-content">
<div class="product-name">Produit 1</div>
<div class="product-price">€29.99</div>
</div>
<span class="product-discount">-20%</span>
<button class="add-to-cart"><i class="cart-icon fas fa-shopping-cart"></i> Ajouter au panier</button>
</div>
<div class="product-card">
<img class="product-img" src="https://rizwancameracentre.pk/wp-content/uploads/2022/08/1540474212000_IMG_423557.jpg" alt="Produit 2">
<div class="product-content">
<div class="product-name">Produit 2</div>
<div class="product-price">€49.99</div>
</div>
<span class="product-discount">-15%</span>
<button class="add-to-cart"><i class="cart-icon fas fa-shopping-cart"></i> Ajouter au panier</button>
</div>
<div class="product-card">
<img class="product-img" src="https://www.billuphotos.com/wp-content/uploads/2024/09/im12.jpg" alt="Produit 3">
<div class="product-content">
<div class="product-name">Produit 3</div>
<div class="product-price">€19.99</div>
</div>
<span class="product-discount">-30%</span>
<button class="add-to-cart"><i class="cart-icon fas fa-shopping-cart"></i> Ajouter au panier</button>
</div>
<div class="product-card">
<img class="product-img" src="https://w7.pngwing.com/pngs/77/153/png-transparent-samsung-galaxy-screen-protector-laptop-high-tech-computer-monitor-technology-products-gadget-electronics-mobile-phone.png" alt="Produit 4">
<div class="product-content">
<div class="product-name">Produit 4</div>
<div class="product-price">€39.99</div>
</div>
<span class="product-discount">-10%</span>
<button class="add-to-cart"><i class="cart-icon fas fa-shopping-cart"></i> Ajouter au panier</button>
</div>
</div>
<!-- Pagination -->
<div class="pagination">
<button class="pagination-btn" disabled>1</button>
<button class="pagination-btn">2</button>
<button class="pagination-btn">3</button>
<button class="pagination-btn">4</button>
</div>
</div>
<!-- Flèches de navigation pour les filtres -->
<div class="arrow-container">
<button class="arrow-btn"><i class="fas fa-arrow-left"></i></button>
<button class="arrow-btn"><i class="fas fa-arrow-right"></i></button>
</div>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
