Mon Site - CREATIVE PAGE

Retrouvez ci-dessous le code complet de votre thème. Cliquez sur le bouton "Copier" pour le récupérer instantanément !

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Modèle Simple - Structure de Blog avec Colonne</title> <style> body { background-color: #0f172a; color: #e2e8f0; font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 20px; } .blog-principal { width: 1300px; margin: 0 auto; text-align: center; } .blog-zone-banniere { width: 1300px; height: 250px; margin-bottom: 25px; border: 4px solid #00f2fe; border-radius: 8px; background: #1e293b; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .blog-img-banniere { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .blog-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; } .blog-nav-haut { margin-bottom: 25px; text-align: center; } .blog-nav-haut a { display: inline-block; padding: 8px 20px; background: #00f2fe; color: #0f172a; font-family: Arial, sans-serif; font-size: 15px; font-weight: bold; text-decoration: none; border-radius: 4px; margin: 0 8px; box-shadow: 0 4px 10px rgba(0, 242, 254, 0.2); } .blog-architecture-corps { display: flex; gap: 25px; text-align: left; width: 1300px; margin-bottom: 30px; } .blog-page-centrale { width: 950px; background: #1e293b; border: 3px solid #38bdf8; border-radius: 12px; padding: 35px; box-sizing: border-box; text-align: center; } .blog-titre-article { 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; text-align: center; } .blog-texte-article { font-family: 'Segoe UI', Arial, sans-serif; color: #cbd5e1; font-size: 17px; line-height: 1.8; margin: 0; text-align: center; } .blog-colonne-droite { width: 325px; background: #1e293b; border: 3px solid #38bdf8; border-radius: 12px; padding: 25px 20px; box-sizing: border-box; } .blog-titre-categorie { color: #00f2fe; font-size: 18px; font-weight: bold; text-align: center; margin-top: 0; margin-bottom: 20px; padding: 10px; background: rgba(15, 23, 42, 0.3); border: 4px double #00f2fe; border-radius: 3px; letter-spacing: 1px; } .blog-liste-liens { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; } .blog-lien-cadre { display: block; background: rgba(15, 23, 42, 0.4); border: 1px solid #38bdf8; border-radius: 6px; padding: 10px 14px; color: #ffffff; font-size: 15px; font-weight: 500; text-decoration: none; text-align: center; transition: all 0.2s; } .blog-lien-cadre:hover { border-color: #00f2fe; background: rgba(0, 242, 254, 0.05); color: #00f2fe; } .blog-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; } .blog-texte-bas { color: #ffffff; font-size: 22px; font-weight: bold; text-align: center; } </style> </head> <body> <div class="blog-principal"> <div class="blog-zone-banniere"> <img src="https://aht.li" alt="Bannière" class="blog-img-banniere"> <div class="blog-titre-banniere">MON BLOG CRÉATIF</div> </div> <div class="blog-nav-haut"> <a href="Accueil.html">✦ Accueil</a> </div> <div class="blog-architecture-corps"> <div class="blog-page-centrale"> <h2 class="blog-titre-article">✦ Titre de votre Premier Article ✦</h2> <p class="blog-texte-article">Bienvenue sur votre structure de blog ! Effacez ce texte pour rédiger votre premier article.</p> </div> <div class="blog-colonne-droite"> <h3 class="blog-titre-categorie">Mes Articles</h3> <div class="blog-liste-liens"> <a href="#" class="blog-lien-cadre">✦ Article Récent #1</a> </div> <h3 class="blog-titre-categorie">Aide & Liens</h3> <div class="blog-liste-liens"> <a href="#" class="blog-lien-cadre">✦ Me Contacter</a> </div> </div> </div> <div class="blog-banniere-bas"> <span class="blog-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 utilise une couleur unie : background-color: #0f172a; au début de la balise <style>. Pour mettre une image de fond à la place, remplacez cette ligne par :

background-image: url('VOTRE_LIEN_IMAGE'); background-attachment: fixed; background-size: cover;

2. Image "Locale" vs Image "Hébergée"

3. Comment faire les prochains articles ?

Effacez simplement le texte d'exemple de l'article pour le premier. Pour les suivants, dupliquez les lignes de code du titre d'article (<h2 class="blog-titre-article">) et du paragraphe (<p class="blog-texte-article">).

✦ Guide du Modèle Simple (Aqua) ✦

1. Remplacer la couleur de fond par une image URL

2. Image "Locale" vs Image "Hébergée"

3. Comment faire les prochains articles ?

4. Organiser ses articles : Une seule page ou plusieurs ?