xenForo 2.xx Duyuru Şekillendirici

<div class="block--annonce">
<div class="banner">
    <div class="banner--text">
    <i class="fa fa-info-circle" aria-hidden="true"></i> Annonce</div>
</div>
<div class="content">
<h3>Societyfrenchmodding</h3><p>Est une communauté francophone fondée sur le principe de partage et d'entraides.</p>
<p>Vous avez des questions ? n'hésitez pas a les poser, nous somme là pour vous  répondre.</p>
<p>L'inscription est gratuite, profitez en et rejoignez-nous !
    </p>
  </div>
</div>

.block--annonce {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9em;
  line-height: 1.4em;
  text-align: justify;
  font-weight: 200;
  background-color: white;
}
.block--annonce .banner {
  position: relative;
  overflow: hidden;
  height: 10vmax;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 300;
  color: #ffffff;
}
.block--annonce .banner:before,
.block--annonce .banner:after {
  content: "";
  position: absolute;
  width: 110%;
  height: 10vmax;
}
.block--annonce .banner:before {
  left: -1%;
  background: rgba(0, 114, 255, 0.5);
  background: linear-gradient(to right, rgba(0, 114, 255, 0.5) 15%, rgba(0, 91, 204, 0.5) 100%);
  z-index: 10;
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}
.block--annonce .banner:after {
  right: -1%;
  background: #0052b7;
  background: linear-gradient(to right, #0052b7 15%, #002451 100%);
  -webkit-transform: rotate(1deg);
          transform: rotate(1deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.block--annonce .banner .banner--text {
  position: absolute;
  top: 30%;
  left: 5vmax;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 50;
  text-align: left;
  font-size: 1.5vmax;
  line-height: 2.85714286vmax;
}
.block--annonce .content {
  padding: 2vmax;
}
.block--annonce .fa {
  font-size: 1.2em;
}