Il existe deux versions de cette fiche, vous trouverez les deux dans ce sujet. L'une est avec un trait, l'autre sans.
Le code CSS est le même.



HTML

Code:

<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Oswald&display=swap" rel="stylesheet">
<div class="dawn-gen"><span class="titre titre-1"><h1>Et voici un titre tu peux le faire aussi complexe que tu veux</h1><h2>Et un sous titre pacque c'est sexy</h2></span><!-- DEBUT CONTENT GENERAL -->
<!-- Exemple de bloc --><div><img class="img-2" src="https://i.pinimg.com/564x/0e/59/76/0e59764dac0273dbea976db940e24093.jpg">Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!

<h3>Test parce que voilà</h3>

Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!</div><!-- Fin de l'exemple de bloc -->
<!-- Coupure des deux --> <span class="entredeux"></span>
<!-- Nouveau bloc --><div>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!

Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!</div><!-- Fin du nouveau bloc --><!-- FIN DE LA FICHE -->
<span class="titre titre-2"></div></div>

CSS

Code:

:root{
  --main-color:#3A7258;
  --second-color:#fff;
    --four-color:#E08A54;
}


/* Fiche générale par KoalaVolant */

.dawn-gen{
  width:500px;
  margin:0 auto;
color:#222;
}

.dawn-gen *{
  box-sizing:border-box;
}

.dawn-gen .img-1{
  width:400px;
  height:200px;
  object-fit:cover;
  margin:0 auto;
  display:block;
  z-index:7; position:relative;
  border:5px solid var(--second-color);
}

.dawn-gen .dn{
  display:none;
}

.dawn-gen .titre{
  background-color:var(--main-color);
  padding:15px;
  text-align:center;
  display:block;
  margin-top:-25px;
  z-index:13; position:relative;
}

.dawn-gen .titre-1{
  -webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
  margin-bottom:-25px;
}

.dawn-gen .titre-2{
  -webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
  clear:both;
}

.dawn-gen h1{
  font-size:25px;
    line-height:28px;
  font-weight:700;
  font-family: 'Oswald', sans-serif;
  color:var(--second-color);
  text-transform:uppercase;
}

.dawn-gen h2{
  margin-top:-15px;
  font-size:18px;
  line-height:20px;
  font-weight:400;
  font-family: 'Frank Ruhl Libre', serif;
  color:var(--four-color);
}

.dawn-gen h3{
    color: var(--main-color);
    font-family: Oswald, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 19px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 2px solid;
    padding-bottom: 4px;
    margin: 10px;
}

.dawn-gen .img-2, .dawn-gen .img-3{
  width:100px; height:100px;
  object-fit:cover;
  border:var(--main-color) 4px solid;
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.dawn-gen .img-2{
  float:left;
  margin-right:10px;
}

.dawn-gen div p{
  float:right;
}

.dawn-gen div{
  background-color:var(--second-color);
  padding:20px;
  color:(--four-color);
  font-size:12px;
  line-height:15px;
  text-align:justify;
  z-index:5; position:relative;
}

.dawn-gen .entredeux{
    background-color: var(--main-color);
    display: block;
    width: 115px;
    height: 64px;
    position: relative;
    z-index: 1;
    margin-top: -35px;
    margin-left: 10vw;
    margin-bottom: -35px;
  -moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}


Ajouter une coupure entre chaque

Pour ajouter un bloc il suffit d'ajouter un :

Code:

<div>blablabla</div>

Après le "DEBUT DE LA FICHE GEN" et avant "FIN DE LA FICHE"

Et une fois un bloc ajouté, il faut ajouter :

Code:

 <span class="entredeux"></span>

C'est ce qui permet de faire la séparation entre les deux.

Code:

<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Oswald&display=swap" rel="stylesheet"><div class="dawn-gen"><img src="https://i.pinimg.com/564x/58/8e/a3/588ea3a19b752b8ccbadbf27c8cca27d.jpg" class="img-1 dn"><span style="margin-top:0px;" class="titre titre-1"><h1>Titre qu'il faut bien mettre</h1><h2>"Bienvenue" ici, mais faites attention à vous</h2></span>
<div><img class="img-2" src="https://media0.giphy.com/media/81xwEHX23zhvy/giphy.gif">Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!

<h3>Test parce que voilà</h3>

Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii
</div>
<span class="titre titre-2"></div></div>