SKILLS

by olimann

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<section class="skill text-center"> 
    
    <div class="row intro-skill">
        <div class="large-12">
                <h1 class="titre-style">PRESTATIONS</h1>                
        </div>
	</div>

<div class="row skills-icons">
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4">
  <li><figure>
      <i class="fi-plus"></i>
      <figcaption>identité visuelle</figcaption>
      </figure>
  </li>
  <li>
      <figure>
      <i class="fi-home"></i>
      <figcaption>illustration</figcaption>
      </figure>
   </li>
  <li>
      <figure>
      <i class="fi-calendar"></i>
       <figcaption>web-design</figcaption>   
      </figure>
      </li>
  <li>
      <figure>
      <i class="fi-zoom-in"></i>
      <figcaption>3d</figcaption> 
      </figure>   
  </li>
</ul>
   <a href="#">En savoir plus</a> 
    
</div>
    
    
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100);
*{
    -moz-transition: -moz-transform .3s ease;
    -webkit-transition: -webkit-transform .3s ease;
    -o-transition: -o-transform .3s ease;
    transition: transform .3s ease;
}

body{
    font-family: "Roboto Slab",Arial,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #26272d;
    padding: 0;
}


h1, h2, h3, h4, h5 {
    font-family: "Montserrat",Arial,sans-serif;
    font-weight: 400;
    color: #808289;
    margin: 0;
    
   
}

.row {
    max-width: 1180px;

}



.skill {
   background-color: #26272d;
}

section.skill {
    padding: 80px 20px;
}

h1.titre-style::after {
    background-color: #808289;
    border-radius: 50%;
    content: "";
    display: block;
    height: 15px;
    margin: 15px auto 0;
    width: 15px;
}

/*................................*/
.skill figure{
    margin: 0;
}
.skill figure figcaption{
    margin-top: 30px;
    color: #fff;
    text-transform: none;

}
.skill .skills-icons{


}

.skill ul{
    margin: 0;
    padding: 50px 0;
    cursor: default;
    
}

.skill i{
    height: 150px;
    width: 150px;
    line-height: 150px;
    font-size: 5em;
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #808289;
    display: inline-block;
    
}


.skill i:hover{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);   
    -moz-transform: scale(1.2);
    transform: scale(1.2);
    border: 3px solid #fff;
}


.skill .skills-icons a{
    font-family: "Montserrat",Arial,sans-serif;
    color: #808289;
    text-transform: uppercase;
    display: inline-block;
    border: 3px solid;
    padding: 10px;
}

.skill .skills-icons a:hover{
    color: #fff;   

}