<style> 
 
/*-------------------------------------------------------------- 
# PRESENTATION 
--------------------------------------------------------------*/ 
.deco { 
  text-align: center; 
  width: 180px; 
  margin: 5px auto; 
} 
 
.degrade { 
  background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.7) 30%, 
      rgba(255, 255, 255, 0.7) 70%, 
      transparent 100%); 
  text-align: center; 
  padding: 1px 0; 
  text-transform: uppercase; 
  color: var(--main-text-color); 
  margin: 0 20px; 
} 
 
.crea { 
  background: #d6cdbb; 
  background-image: url("<?php echo get_template_directory_uri(); ?>/css/img/uploads/3.jpg"); 
} 
 
.surmes { 
  background: #846955; 
  background-image: url("<?php echo get_template_directory_uri(); ?>/css/img/uploads/8.jpg"); 
} 
 
.brod { 
  background: #fff; 
  background-image: url("<?php echo get_template_directory_uri(); ?>/css/img/uploads/7.jpg"); 
} 
 
.crea, 
.brod, 
.surmes { 
  color: white; 
  background-repeat: no-repeat; 
  background-position: center top; 
  background-size: 100%; 
  transition: background 1s ease-in-out; 
  font-size: 0.8em; 
} 
 
.crea:hover, 
.surmes:hover, 
.brod:hover { 
  background-size: 130%; 
  background-position: center top; 
} 
 
.opacit { 
  background-color: rgba(0, 0, 0, 0.7); 
  border-top: solid 10px rgba(255, 255, 255, 0.4); 
  border-bottom: solid 10px rgba(255, 255, 255, 0.4); 
  padding: 20px; 
  text-align: center; 
  height: 200px; 
  margin: 30px 0; 
} 
 
.borderop { 
  border-top: solid 10px var(--color-8); 
  border-bottom: solid 10px var(--color-8); 
} 
 
.obscur { 
  color: white; 
} 
 
 
</style> 
 
<section class="section"> 
 <div class="columns is-gapless borderop shadow"> 
      <div class="column is-4 background-color-black crea "> 
        <a href="#">  
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decotop.svg" alt="" /></div><!-- décoration en haut--> 
          <h2 class="degrade is-size-5"> 
            sur-mesure 
          </h2> 
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decobot.svg" alt="" /></div><!-- décoration en bat--> 
          <div class="opacit"> 
            <h3 class="is-size-5 color-white"> 
              Création<br>de Vêtements</h3> 
            <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/deco.svg" alt="" /></div><!-- décoration--> 
            <p class="obscur"> 
              Création de vêtement sur mesure. retouche en habillement : Robe de mariée, Robe de soirée. Bruno met en oeuvre tout son savoir faire et ses 30 ans d'expériences pour vous habiller. 
            </p> 
          </div> 
        </a> 
      </div> 
 
 
      <div class="column is-4 background-color-black surmes "> 
        <a href="#"> 
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decotop.svg" alt="" /></div><!-- décoration en haut--> 
          <h2 class="degrade is-size-5"> 
            Décoration d'intérieur 
          </h2> 
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decobot.svg" alt="" /></div><!-- décoration en bat--> 
          <div class="opacit"> 
            <h3 class="is-size-5 color-white"> 
              Création et Sur-mesure<br>en Ameublement</h3> 
            <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/deco.svg" alt="" /></div><!-- décoration--> 
            <p class="obscur"> 
              Vente de tissu d'ameublement et conseil en décoration d'intérieur : rideaux, voilage, coussins... Véronique se déplace à domicile en emportant des tissus pour trouver la combinaison idéale et rendre harmonieux vos intérieurs 
            </p> 
          </div> 
        </a> 
      </div> 
      <div class="column is-4 background-color-black brod "> 
        <a href="#"> 
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decotop.svg" alt="" /></div><!-- décoration en haut--> 
          <h2 class="degrade is-size-5"> 
            Broderie 
          </h2> 
          <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/decobot.svg" alt="" /></div><!-- décoration en bat--> 
          <div class="opacit"> 
            <h3 class="is-size-5 color-white"> 
              Broderie<br>Industrielle</h3> 
            <div class="deco"><img src="<?php echo get_template_directory_uri(); ?>/css/img/deco/deco.svg" alt="" /></div><!-- décoration--> 
            <p class="obscur"> 
              Broderie industrielle pour les entreprises, association sportives, collectivités et particuliers., vente de textile de marquage. Quentin vous permettra de marquer durablement et qualitativement vos supports à l'unité ou en séries. 
            </p> 
          </div> 
        </a> 
      </div> 
    </div> 
  </section>