Exemples de Boutiques en Ligne
/* — Styles Généraux — */
body {
font-family: ‘Inter’, sans-serif;
margin: 0;
background-color: #f8f9fa; /* Fond légèrement gris */
color: #212529;
line-height: 1.6;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
h1, h2, h3 {
font-weight: 700;
}
h1 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 0.5rem;
color: #343a40;
}
h2 {
font-size: 2rem;
margin-top: 3rem;
margin-bottom: 1rem;
border-bottom: 2px solid #007bff; /* Ligne de séparation bleue */
display: inline-block;
padding-bottom: 0.5rem;
}
p {
font-size: 1.1rem;
color: #6c757d;
max-width: 700px;
margin: 0 auto 2rem auto;
}
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #0056b3;
}
img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
img:hover {
transform: scale(1.05); /* Effet de zoom au survol */
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}
/* — Grille pour les exemples — */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Grille responsive */
gap: 2rem;
margin-top: 3rem;
}
.gallery-item {
background-color: #ffffff;
padding: 1.5rem;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-10px); /* Effet de lévitation */
}
.gallery-item h3 {
margin-top: 0;
font-size: 1.3rem;
}
/* — Section « Découverte » — */
.showcase-nav {
margin: 2rem 0;
padding: 1rem;
background-color: #fff;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: inline-block;
}
.showcase-nav a {
margin: 0 1.5rem;
font-weight: 700;
color: #495057;
}
.showcase-nav a:hover {
color: #007bff;
}
section {
padding: 3rem 0;
margin-bottom: 2rem;
border-top: 1px solid #dee2e6;
}
section:first-of-type {
border-top: none;
}
.products-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
/* — Bouton d’action (CTA) — */
.cta-button {
display: inline-block;
margin-top: 1.5rem;
padding: 15px 35px;
background: linear-gradient(45deg, #007bff, #0056b3);
color: #ffffff;
font-weight: 700;
font-size: 1.1rem;
text-decoration: none;
border-radius: 50px;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
color: #fff;
}
/* — Responsive Design pour mobile — */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.container {
padding: 1rem;
}
.showcase-nav a {
margin: 0 0.7rem;
}
}
🛍️ Boutique Épurée Marron et Beige
💼 Site Vitrine Professionnel
🎨 Portfolio Créatif de Boutique
🛒 Découvrez une boutique type
Une expérience de shopping complète, responsive, avec menu, catégories, et service de livraison intégré.
Accueil
Produits
Livraison
Contact
💡 Page d’accueil moderne
Une première impression captivante pour accueillir vos visiteurs.
🧺 Présentation claire des produits
Mettez en valeur vos articles avec des catégories et des visuels attrayants.
🚚 Service de livraison efficace
Proposez une livraison rapide, avec des options locales, internationales et un suivi en temps réel.
