PostCSS and CSSNext

Custom selectors and properties

by nomelnomel

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<div class="poster">
  <h3 style="text-align:center; color: #c73728; font-weight: 900;">Comment ça marche?</h3>
  <div class="poster-line">
    <div class="left-poster-element dashed-bot" id="poster-text-left">
      <span class = "poster-element-name">Demande en ligne</span>
      <p>Voulez-vous faire un voyage avec "Russie Autrement"? Remplissez un formulaire en ligne pour que nous puissions vous contacter.</p>
    </div>
    <div class="poster-number">
      <span class="poster-number-style">01</span>
    </div>
    <div class="right-poster-element">
      <div class="poster-button">
        <a href="#" class="button">Commander tout de suite</a>
      </div>
    </div>
  </div>

  <div class="poster-line">
    <div class="left-poster-element">

      <img class="center" src="http://dl4.joxi.net/drive/2019/01/22/0032/0480/2138592/92/929dbc2327.jpg">

    </div>
    <div class="poster-number">
      <span class="poster-number-style">02</span>
    </div>
    <div class="right-poster-element dashed-bot" id="poster-text-right">

      <span class = "poster-element-name">Devis gratuit et sans engagement</span>
      <p class = "text">Notre responsable vous contactera pour discuter tous les détails et calculer le séjour qui vous convient. Tout est compté selon vos intéréts et vos budgets.</p>
    </div>
  </div>

<div class="poster-line">
    <div class="left-poster-element dashed-bot" id="poster-text-left">
      <span class = "poster-element-name">Dernières modifications et<br>confirmation du programme</span>
      <p>Le programme peut être modifié plusieurs fois. Nos managers sont toujours en contact avec vous. Avant de proceder à l'étape suivante nous confirmons la version finale avec vous.</p>
    </div>
    <div class="poster-number">
      <span class="poster-number-style">03</span>
    </div>
    <div class="right-poster-element">
      <img class="center"...

CSS

.poster{

}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.poster-line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  margin:10px 0;
  padding: 5px 0;
}

.left-poster-element{
  width: 50%;
  border-right: 2px solid red;
}

.right-poster-element{
  width: 50%;
  border-left: 2px solid red;
  position: relative;
  
}

.dashed-bot{
  border-bottom: 4px dashed red; 
}
.poster-number{
position: absolute;
    left: 50%;
    transform: translate(-50%,0); 
    z-index: 100;
}

.poster-number-style {
  font-size: 30px;
  padding: 0 10px 10px;
  z-index: 100;
  background: #fff;
  color: #1e365c;
  font-weight: bold;
}

#poster-text-left{
  text-align:left;
}

#poster-text-left>p{
  margin-right:10px;
}

#poster-text-right{
  text-align:right;
}

#poster-text-right>p{
  margin-left:10px;
}
.poster-button{
  display: grid;
  height:100%;
}

.button {
    text-decoration: none;
    background-color: #EF221B;
    color: #FFFFFF;
    width: auto;
    padding: 20px 20px;
    border-radius: 10px;
    font-family: "Open Sans";
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0px 4px #A6120D;
    margin:auto;
}

p, h3, .poster-number-style {
  font-family: 'Montserrat', sans-serif;
}


.poster-element-name {
  
  color:#de0900;
  font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 6px;
    /* z-index: 200; */
}