<!
DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Professionnelle - Exemple</title>
<style>
/* Styles généraux */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
/* En-tête */
header {
background-color: #232f3e;
color: white;
padding: 15px 0;
text-align: center;
}
header h1 {
font-size: 2rem;
margin: 0;
}
header a {
color: white;
text-decoration: none;
font-weight: bold;
margin-top: 10px;
display: inline-block;
}
/* Navigation */
nav {
background-color: #131921;
padding: 10px 0;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 16px;
}
nav a:hover {
text-decoration: underline;
}
/* Section produits */
.product-section {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 20px;
}
.product-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 15px;
width: 200px;
text-align: center;
padding: 15px;
}
.product-card img {
width: 100%;
height: auto;
border-radius: 8px;
}
.product-card h3 {
font-size: 18px;
color: #232f3e;
margin: 10px 0;
}
.product-card p {
color: #555;
font-size: 14px;
}
.btn {
background-color: #ff9900;
border: none;
padding: 10px;
width: 100%;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
.btn:hover {
background-color: #e68900;
}
/* Footer */
footer {
background-color: #131921;
color: white;
padding: 20px;
text-align: center;
}
footer a {
color: #ff9900;
text-decoration: none;
margin: 0 10px;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- En-tête -->
<header>
<h1>Exemple de Page Professionnelle</h1>
<a href="#">Retour à l'accueil</a>
</header>
<!-- Navigation -->
<nav>
<a href="#">Accueil</a>
<a href="#">Produits</a>
<a href="#">Promotions</a>
<a href="#">Panier</a>
<a href="#">Connexion</a>
</nav>
<!-- Section Produits -->
<div class="product-section">
<div class="product-card">
<img src="[Link] alt="Produit 1">
<h3>Produit 1</h3>
<p>Une description rapide du produit, son prix, et ses caractéristiques
principales.</p>
<button class="btn">Ajouter au panier</button>
</div>
<div class="product-card">
<img src="[Link] alt="Produit 2">
<h3>Produit 2</h3>
<p>Une description rapide du produit, son prix, et ses caractéristiques
principales.</p>
<button class="btn">Ajouter au panier</button>
</div>
<div class="product-card">
<img src="[Link] alt="Produit 3">
<h3>Produit 3</h3>
<p>Une description rapide du produit, son prix, et ses caractéristiques
principales.</p>
<button class="btn">Ajouter au panier</button>
</div>
</div>
<!-- Footer -->
<footer>
<p>© 2025 Exemple de Site - Tous droits réservés</p>
<p>
<a href="#">Politique de confidentialité</a> |
<a href="#">Conditions d'utilisation</a>
</p>
</footer>
</body>
</html>
