Cette fiche au titre penché à servi pour un projet qui n'a jamais vu le jour. Aussi, son code est donc pour vous. Hormis les sous titres qui sont spéciaux, ce code n'a rien de "bonus", sinon aussi les images que vous y mettrez qui peuvent être redimensionné.
Bien sûr les couleurs sont modifiables.

HTML

Code:

<link href="https://fonts.googleapis.com/css?family=Damion|Text+Me+One" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet"><div class="code-diff"><img class="img-diff" src="https://i.pinimg.com/originals/0c/07/81/0c0781d108928941dbdea16f72c85842.gif"><h1>Titre</h1><div class="contenu-diff"><h2>Sous titre </h2>
Nullam eleifend sem a molestie laoreet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lacus felis, porttitor in orci et, commodo imperdiet ligula. Quisque vitae ultricies enim. Duis convallis hendrerit ligula et blandit. Integer tempor vitae est nec lacinia. Proin pharetra rhoncus mi sit amet vestibulum. Pellentesque mollis dolor ligula, eu egestas lacus euismod eu.

<img class="imgpurple" src="https://i.pinimg.com/originals/f1/89/aa/f189aa00bdd902451d3fe492185839bf.gif">

Aenean eget sodales nibh. Morbi suscipit maximus sapien. In hac habitasse platea dictumst. Mauris iaculis tempus elit, id porta nisi congue ac. Aliquam non ex est. Nam tempor neque vel urna euismod, feugiat dapibus sapien viverra. Vestibulum malesuada nulla vel augue accumsan, ac molestie enim pretium. Pellentesque volutpat euismod eros eget lobortis. Nullam euismod, ex a sodales tincidunt, dui nulla rhoncus diam, bibendum pharetra tellus felis at neque. Aliquam erat volutpat. Cras eu quam mauris. Integer nec condimentum dui, et pharetra risus. Sed sit amet turpis in leo sollicitudin pretium in sed quam. Quisque mattis in mauris euismod suscipit.
</div>
<koala>KoalaVolant</koala></div>

A savoir que pour mettre un image redimensionnée, il faudra lui mettre la classe "imgpurple", comme ceci :

Code:

<img src="lienimage" class="imgpurple">

CSS

Code:

/* Code général par KoalaVolant */

.code-diff{
  width:450px;
  margin:0 auto;
  text-align:justify;
  font-family:Verdana;
}

.code-diff, .code-diff *{
  box-sizing:border-box;
}


.code-diff .img-diff{
  width:350px;
  height:170px;
  display:block;
  margin:0 auto;
  object-fit:cover;
  padding:4px;
  position:relative;
  z-index:80;
border:#BFBCD9 1px solid;
}

.code-diff koala{
  text-align:center;
  font-weight:normal;
  color:#C0C0C0;
  letter-spacing:5px;
  font-family:Century Gothic;
  font-size:9px;
  display:block;
  margin-top:-15px;
}

  .code-diff .contenu-diff{
    border:#7C71A9 1px solid;
  border-top-width:7px;
    border-bottom-width:7px;
    background-color:#fff;
    padding:25px;
    width:100%;
    font-size:12px;
  position:relative;
  z-index:5;
    line-height:14px;
  padding-top:165px;
  margin-top:-165px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  }

.code-diff .imgpurple{ width:80%; max-width:80%; min-width:80%; display:block; padding:5px; margin:0 auto; border:#BFBCD9 1px solid; object-fit:cover; }

.code-diff h2{
  font-family: 'Text Me One', sans-serif;
  font-size:20px; line-height:22px;
  margin:0; padding:5px;
  text-align:center;
  letter-spacing:3px;
  color:#4B437F;
  text-transform:uppercase;
}
  
  .code-diff h1{
    background-color:#504280;
    color:#fff;
    padding:2px;
  font-weight:normal;
  text-align:center;
  width:410px;
  margin:0 auto;
  position:relative;
  top: -25px;
  z-index:85;
    font-size:35px;
    line-height:37px;
    -moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
    font-family: 'Damion', cursive;
  }
  
  .code-diff em, .code-diff i{
    color:#7B71A6;
  }