Meta Description" name="description" />
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produit</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
max-width: 420px;
margin: auto;
background: #fff;
min-height: 100vh;
}
.header {
padding: 15px;
text-align: center;
font-weight: bold;
letter-spacing: 2px;
}
.product-image {
width: 100%;
}
.content {
padding: 20px;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.price {
font-size: 20px;
margin-bottom: 20px;
}
.quantity {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.qty-btn {
width: 35px;
height: 35px;
border: none;
background: #eee;
font-size: 18px;
cursor: pointer;
}
.cart-btn {
width: 100%;
padding: 15px;
border-radius: 30px;
border: 1px solid #000;
background: white;
margin-bottom: 10px;
cursor: pointer;
}
.buy-btn {
width: 100%;
padding: 15px;
background: black;
color: white;
border: none;
font-weight: bold;
cursor: pointer;
}
.description {
margin-top: 20px;
color: #555;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="header">WITHMOD</div>
<img src="https://via.placeholder.com/400" class="product-image" />
<div class="content">
<div class="title">G-SHOCK COMMANDO</div>
<div class="price">Dh 219.00 MAD</div>
<div class="quantity">
<button class="qty-btn" onclick="changeQty(-1)">-</button>
<span id="qty">1</span>
<button class="qty-btn" onclick="changeQty(1)">+</button>
</div>
<button class="cart-btn">Ajouter au panier</button>
<button class="buy-btn">Acheter maintenant</button>
<div class="description">
Une montre qui vous suit dans tous vos déplacements, dans les grands espaces ou la jungle urbaine.
</div>
</div>
</div>
<script>
let qty = 1;
function changeQty(val) {
qty += val;
if (qty < 1) qty = 1;
document.getElementById("qty").innerText = qty;
}
</script>
</body>
</html>2
2
2KB
2KB
132.0ms
192.0ms
215.0ms