KoalaVolant
Ven 1 Déc 2023 - 12:58
Les couleurs sont bien sûr modifiables.
Règlement du forum
Informations
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nunc eget justo ultrices posuere id sit amet magna. Suspendisse euismod, leo eget gravida egestas, risus quam egestas lectus, dictum hendrerit diam massa sollicitudin odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ac felis sem. Cras eget nisl quam. Sed nunc tellus, aliquet id pharetra a, blandit at risus. Integer vulputate ex ac enim fermentum, quis facilisis ipsum gravida. Mauris euismod ultricies posuere. Duis ut metus velit.
Informations
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nunc eget justo ultrices posuere id sit amet magna. Suspendisse euismod, leo eget gravida egestas, risus quam egestas lectus, dictum hendrerit diam massa sollicitudin odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ac felis sem. Cras eget nisl quam.
Sed nunc tellus, aliquet id pharetra a, blandit at risus. Integer vulputate ex ac enim fermentum, quis facilisis ipsum gravida. Mauris euismod ultricies posuere. Duis ut metus velit.
HTML
- Code:
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;600;700;800;900&display=swap" rel="stylesheet"> <div class="fichegen-blanc"><!-- Image --><img src="https://images2.imgbox.com/67/d8/0hDaOCPm_o.gif"/>
<!-- Titre principal --><div class="aa-title">Règlement du forum</div>
<!-- Contenu --><div class="aa-content"><!-- Titre gauche --><div class="aa-titre2left">Informations</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nunc eget justo ultrices posuere id sit amet magna. Suspendisse euismod, leo eget gravida egestas, risus quam egestas lectus, dictum hendrerit diam massa sollicitudin odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ac felis sem. Cras eget nisl quam. Sed nunc tellus, aliquet id pharetra a, blandit at risus. Integer vulputate ex ac enim fermentum, quis facilisis ipsum gravida. Mauris euismod ultricies posuere. Duis ut metus velit.
<!-- Titre droite --><div class="aa-titre2right">Informations</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nunc eget justo ultrices posuere id sit amet magna. Suspendisse euismod, leo eget gravida egestas, risus quam egestas lectus, dictum hendrerit diam massa sollicitudin odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ac felis sem. Cras eget nisl quam.
Sed nunc tellus, aliquet id pharetra a, blandit at risus. Integer vulputate ex ac enim fermentum, quis facilisis ipsum gravida. Mauris euismod ultricies posuere. Duis ut metus velit.
<!-- Fin de la fiche -->
</div></div>
CSS
- Code:
:root{
--fichegenb:#99c429; }
.fichegen-blanc, .fichegen-blanc *{ box-sizing:border-box; }
.fichegen-blanc{ margin:0 auto; width:450px; }
.fichegen-blanc br{ display:none; }
.fichegen-blanc img{ object-fit:cover; }
.fichegen-blanc{ background:#fff; padding:10px; border-radius:10px; color:#555; }
.fichegen-blanc > img{ width:100%; height:160px; border-radius:15px; }
.fichegen-blanc .aa-title{ position:relative; background:#fff; padding:10px; border-radius:5px;
top:-20px; left:50%; transform:translateX(-50%); display:inline-block; font-family: 'Poppins', sans-serif;
font-weight:900; text-transform:uppercase;font-size:15px; color:var(--fichegenb); }
.fichegen-blanc .aa-content{ background:#fff; padding:0 15px 15px; }
.fichegen-blanc .aa-content br{ content: " ";
display: inline-block;
line-height:11px !important; }
.fichegen-blanc [class^="aa-titre2"]{ color:#222; font-family: 'Bebas Neue', sans-serif;
font-size:22px; }
.fichegen-blanc [class^="aa-titre2"]:after{ content:' \002022'; margin-left:5px; }
.fichegen-blanc .aa-titre2right{ text-align:right; }
|
|