<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Services section --> <section id="what-we-do"> <div class="container-fluid"> <div class="row mt-5"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-methods"> <h3 class="card-title">Méthodes</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-tools"> <h3 class="card-title">Outils</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-frameworks"> <h3 class="card-title">Frameworks</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-4"> <h3 class="card-title">Solutions</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-lang"> <h3 class="card-title">Languages</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-database"> <h3 class="card-title">Base de données</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-version"> <h3 class="card-title">Gestion de versions</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4"> <div class="card"> <div class="card-block block-system"> <h3 class="card-title">Systèmes d'exploitation</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> </div> </section> <!-- /Services section -->

/********************** /***** Services ******* /*********************/ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section{ padding: 60px 0; } section .section-title{ text-align:center; color:#007b5e; margin-bottom:50px; text-transform:uppercase; } #what-we-do{ background:#ffffff; } #what-we-do .card{ padding: 1rem!important; border: none; margin-bottom:1rem; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); } #what-we-do .card .card-block{ padding-left: 50px; position: relative; } #what-we-do .card .card-block a{ color: #007b5e !important; font-weight:700; text-decoration:none; } #what-we-do .card .card-block a i{ display:none; } #what-we-do .card:hover .card-block a i{ display:inline-block; font-weight:700; } #what-we-do .card .card-block:before{ font-family: FontAwesome; position: absolute; font-size: 39px; color: #007b5e; left: 0; -webkit-transition: -webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out; } #what-we-do .card .block-methods:before{ content: "\f0ae"; } #what-we-do .card .block-tools:before{ content: "\f085"; } #what-we-do .card .block-frameworks:before{ content: "\f20e"; } #what-we-do .card .block-4:before{ content: "\f209"; } #what-we-do .card .block-lang:before{ content: "\f1ab"; } #what-we-do .card .block-database:before{ content: "\f1c0"; } #what-we-do .card .block-system:before{ content: "\f108"; } #what-we-do .card:hover .card-block:before{ -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; }