Retrouvez ci-dessous le code complet de votre thème principal avec menu de navigation. Cliquez sur le bouton "Copier le code" pour le récupérer instantanément !
📁 Modele Principal
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Site Principal</title>
<style>
body {
background-color: #0f172a;
color: #e2e8f0;
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 20px;
}
.site-principal {
width: 1300px;
margin: 0 auto;
text-align: center;
}
.site-zone-banniere {
width: 1300px;
height: 250px;
margin-bottom: 15px;
border: 4px solid #00f2fe;
border-radius: 8px;
background: #1e293b;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.site-img-banniere {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.site-titre-banniere {
position: relative;
z-index: 2;
color: #ffffff;
font-size: 40px;
font-weight: bold;
letter-spacing: 2px;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
background: rgba(15, 23, 42, 0.5);
padding: 10px 30px;
border-radius: 6px;
}
/* 🔗 STYLE DE LA NAVBAR DE LIENS CHIC ET CENTRÉE */
.site-navbar {
width: 1300px;
background: #1e293b;
border: 4px double #00f2fe; /* Belle bordure double aqua */
border-radius: 6px;
padding: 12px 0;
margin-bottom: 25px;
text-align: center;
box-sizing: border-box;
}
.site-navbar a {
display: inline-block;
padding: 6px 22px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 1px solid transparent;
border-radius: 4px;
margin: 0 10px;
transition: all 0.2s;
}
.site-navbar a:hover {
border-color: #00f2fe;
color: #00f2fe;
background: rgba(0, 242, 254, 0.05);
}
/* 📝 ZONE DE LA PAGE CENTRALE */
.site-page-centrale {
width: 1300px;
background: #1e293b;
border: 3px solid #38bdf8;
border-radius: 12px;
padding: 40px;
box-sizing: border-box;
text-align: center;
margin-bottom: 30px;
}
.site-titre-principal {
font-family: 'Segoe UI', Arial, sans-serif;
color: #00f2fe;
font-size: 32px;
margin-top: 0;
margin-bottom: 25px;
padding: 5px;
background: rgba(15, 23, 42, 0.2);
border: 4px double #00f2fe;
border-radius: 3px;
display: inline-block;
}
.site-texte-principal {
font-family: 'Segoe UI', Arial, sans-serif;
color: #cbd5e1;
font-size: 17px;
line-height: 1.8;
margin: 0;
}
.site-banniere-bas {
width: 1300px;
height: 120px;
margin: 0 auto;
border: 8px solid #00f2fe;
border-radius: 10px;
background: #1e293b;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.site-texte-bas {
color: #ffffff;
font-size: 22px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="site-principal">
<div class="site-zone-banniere">
<img src="https://aht.li" alt="Bannière du Site" class="site-img-banniere">
<div class="site-titre-banniere">ACCUEIL PRINCIPAL</div>
</div>
<nav class="site-navbar">
<a href="principale.html">🏠 Accueil</a>
<a href="simple.html">✦ Mon Blog</a>
<a href="boutique.html">🛍️ Boutique</a>
<a href="#">✉️ Contact</a>
</nav>
<div class="site-page-centrale">
<h2 class="site-titre-principal">✦ Bienvenue sur ma Structure Principale ✦</h2>
<p class="site-texte-principal">
Ceci est la page d'accueil de votre site complet. Grâce à la barre de menu située juste au-dessus, vos visiteurs peuvent naviguer très facilement entre toutes les pages que vous avez créées. Vous pouvez effacer ce texte d'exemple dans votre éditeur pour écrire votre propre mot de bienvenue.
</div>
<div class="site-banniere-bas">
<span class="site-texte-bas">Merci de votre visite ✦</span>
</div>
</div>
</body>
</html>
1. Remplacer la couleur de fond par une image URL
Par défaut, le code applique une couleur unie sombre : background-color: #0f172a; au début de la balise <style>. Pour installer un arrière-plan illustré, remplacez cette ligne par :
Locale : L'image est enregistrée sur votre ordinateur. À éviter sur un hébergement gratuit (Free) car cela sature très rapidement l'espace disque restreint mis à votre disposition.
Hébergée (Conseillé) : Vous déposez vos images (bannières, décors) sur un hébergeur externe gratuit (Servimg, Casimages) pour obtenir un lien URL en https://. Votre site reste ultra léger et rapide à charger !
3. Comment fonctionne la barre de navigation (Navbar) ?
La barre de menu horizontale (<nav class="site-navbar">) regroupe tous vos liens importants pour connecter vos fichiers entre eux. Pour que vos membres cliquent et changent de page, il vous suffit de remplacer le nom des fichiers dans les attributs href="".
Par exemple, pour relier votre blog simple et votre boutique, les liens sont déjà pré-configurés vers simple.html et boutique.html. Si vous créez une page de contact nommée contact.html, changez la ligne du dernier lien par : <a href="contact.html">✉️ Contact</a>.
4. Créer de nouvelles pages à partir de ce modèle
Pour construire une nouvelle section de votre site (comme une page de présentation ou de contact) :
Dupliquez votre fichier principale.html complet et renommez-le (ex: presentation.html).
Ouvrez ce nouveau fichier et modifiez uniquement le titre (<h2 class="site-titre-principal">) et le texte de la zone centrale. Votre menu du haut restera ainsi identique sur tout votre site !
💡 Astuce de CREATIVE PAGE : Pour modifier vos titres de menu ou ajouter vos liens plus facilement sans toucher au code complexe, n'oubliez pas que vous pouvez rebasculer en mode direct visuel à tout moment en ré-cliquant sur le bouton HTML de CREATIVE PAGE !