<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 ----------> <div id="navbar-example"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#attributes" role="tab">Compétences</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#schools" role="tab">Formations et Certifications</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#experience" role="tab">Expériences</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#interestAndlanguage" role="tab">Langues et Centres d'intérêt</a> </li> </ul> <!-- Tab panes {Fade} --> <div class="tab-content"> <div class="tab-pane fade in active" id="attributes" name="attributes" role="tabpanel"> <!-- Services section --> <section id="sectionComp"> <div class="container-fluid"> <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-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-solution"> <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 --> </div> <div class="tab-pane fade" id="schools" name="schools" role="tabpanel"> <div class="bs-callout bs-callout-danger"> <h5>Formations</h5> </div> <dl class="row"> <dt class="col-sm-3">2009-2012</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">2008-2009</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">2006-2008</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> </dl> <div class="bs-callout bs-callout-danger"> <h5>Certifications</h5> </div> <dl class="row"> <dt class="col-sm-3">2018-2018</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">2016-2017</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> </dl> </div> <div class="tab-pane fade" id="experience" name="experience" role="tabpanel"> <div class="bs-callout bs-callout-danger"> <div class="d-flex justify-content-between"> <div class="flex-fill"> <h5>De Juin 2030-Aujourd’hui : Poste chez Société</h5> </div> <div class="flex-fill"> <h5>Ma Boite </h5> </div> </div> </div> <dl class="row"> <dd class="col-sm-9"> Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.<br/> Donec id elit non mi porta gravida at eget metus.<br/> <ul> <li>premier</li> <li>deuxieme</li> </ul> <span class="envTech">Environnements Techniques :</span>Tech1, Tech2 </dd> </dl> </div> <div class="tab-pane fade" id="interestAndlanguage" name="interestAndlanguage" role="tabpanel"> <div class="bs-callout bs-callout-danger"> <h5>Langues</h5> </div> <dl class="row mt-3"> <dt class="col-sm">Langue1</dt> </dl> <dl class="row"> <dt class="col-sm-3">Langue2</dt> </dl> <div class="bs-callout bs-callout-danger"> <h5>Centres d'intérêt</h5> </div> <dl class="row mt-3"> <dt class="col-sm">Centres1, Centres2</dt> </dl> </div> </div> </div>

/* Global Styles */ @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'; *, *: before, *:after { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } body { width: 100%; height: 100%; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; position:relative; } html { width: 100%; height: 100%; } a:hover{ text-decoration:none; } /*page styling*/ .bs-callout { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #eee; border-image: none; border-radius: 3px; border-style: solid; border-width: 1px 1px 1px 5px; /*margin-bottom: 5px;*/ padding: 5px; } .bs-right-panel{ padding: 10px; width:100%; float:none; text-align:center; /*margin:0 auto;*/ } .bs-right-panel img{ width:100%; margin:0; padding:0; } .bs-callout:last-child { margin-bottom: 0px; } .bs-callout h4, .bs-callout h5 { margin-bottom: 1px; } .bs-callout-danger { border-left-color: #d9534f; } .envTech, .bs-callout-danger h4, .bs-callout-danger h5{ color: #d9534f; } .header-title { color: #fff; } .title-thin { font-weight: 300; } .service-item { margin-bottom: 30px; } .envTech { font-weight: 600; } section{ padding: 60px 0; } section .section-title{ text-align:center; color:#007b5e; margin-bottom:50px; text-transform:uppercase; } #sectionComp{ background:#ffffff; } #sectionComp .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); } #sectionComp .card .card-block{ padding-left: 50px; position: relative; } #sectionComp .card .card-block a{ color: #007b5e !important; font-weight:700; text-decoration:none; } #sectionComp .card .card-block a i{ display:none; } #sectionComp .card:hover .card-block a i{ display:inline-block; font-weight:700; } #sectionComp .card .card-block:before{ font-family: FontAwesome; position: absolute; font-size: 39px; color: #d9534f; left: 0; -webkit-transition: -webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out; } #sectionComp .card .block-methods:before{ content: "\f0ae"; } #sectionComp .card .block-tools:before{ content: "\f085"; } #sectionComp .card .block-frameworks:before{ content: "\f20e"; } #sectionComp .card .block-solution:before{ content: "\f209"; } #sectionComp .card .block-lang:before{ content: "\f1ab"; } #sectionComp .card .block-database:before{ content: "\f1c0"; } #sectionComp .card .block-system:before{ content: "\f108"; } #sectionComp .card .block-version:before{ content: "\f27d"; } #sectionComp .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; }

$(document).ready(function() { $("[rel='tooltip']").tooltip(); });