accordeon foundation5

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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.accordion.min.js"></script>
<header>
</header>

<section class="about">  
   <div class="row titre-gen text-center">
    <div class="large-12 columns"> 
    <h1 class="titre-style">Qui suis-je ?</h1>
    </div>  
</div>    
    
    
    <div class="row">
            <div class="large-8 large-centered columns">
                 <p>
                   Je suis graphiste indépendant, à Nantes, depuis 2007. A ce titre, je conçois, crée, imagine toutes sortes d’éléments graphiques. Du web au print en passant par les projets d'identité visuelle, mes compétences multiples me permettent de façonner votre image, et de vous aider dans votre démarche de communication. Le statut de freelance m'apporte la réactivité et la souplesse nécessaires à la bonne conduite de vos missions.  
                 </p>   
       
         <p>
            Oui, indépendant. Certains préfèrent le terme de freelance. Cela veut dire que je suis à mon compte et que je réalise des missions ponctuelles soit pour des agences de communication, soit pour des clients en direct. Tout se fait « à distance », par mail, téléphone, etc. 
         </p>
                
          <p>Vous désirez me parler de votre projet ? Cliquez ici</p>
                
        </div> 
        </div>        
</section>


<section class="citation text-center">  
   <div class="row">
    <div class="large-8 large-centered columns"> 
    <p >Créatif et polyvalent, je met mon talent à votre disposition pour transformer vos idées en image.</p>
    </div>  
</div>    
</section>

<!--  -->

<section class="service...

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);

*{
   margin: 0;
   padding: 0;
}
body{
    background-color: #efefef;
    font-family: "Roboto Slab",Arial,sans-serif;
    color: #26272d;
}
.row {
    max-width: 1180px;
    width: 100%;
}
h1, h2, h3, h4, h5 {
    font-family: "Montserrat",Arial,sans-serif;
    color: #26272d;


}
h1 {
    font-weight: 700;
    font-size: 1.75em;
    margin: 0 0 15px;
    line-height: 1;
    text-transform: uppercase;
 
}
p {
    font-weight: normal;

 
}

header {
    height: 10px;
    background-color: red;
        
}

/*PAGE SERVICE*/

section.service {
    padding: 100px 0;
}

section.about {
    padding: 100px 0;
}


.row.titre-gen {
    margin-bottom: 60px;
}

h1.titre-style {
    font-size: 2.8em;
    letter-spacing: -0.03em;
    margin: 0;
}


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



section.service i {
    background: #26272d;
    border-radius: 50%;
    color: white;
    display: inline-block;
    font-size: 5em;
    height: 140px;
    line-height: 140px;
    width: 140px;
}
section.service h3 {
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 700;
    
}

section.service i, section.service h3  {
    margin: 0 0 20px;
}
section.service p {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    
}

section .info-service span::after {
    background-color: #26272d;
    border-radius: 50%;
    content: "";
    display: block;
    height: 10px;
    margin: 15px auto;
    width: 10px;
}

section.service ul {
    margin: 0;    
}

section.service ul li {
    font-size: 1rem;
    display: block;
    font-weight: 300;
    
}

section.citation {
    background: #26272d;
    color: #fff;
    padding: 50px 0;
    position: relative;
}

section.citation::after...