<html>
<head>
<title>test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="timeline-parcours">
<div class="container-info">
<div class="timeline-section-tl">
<div class="parcours-box parc1">
<div class="infobox date1">
<h3>Titre titre 1</h3>
<p class="subt-infobox">ceci est un test</p>
<p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
</div>
<div class="fleche-bloc"></div>
</div>
</div>
<div class="timeline-section-tl">
<div class="parcours-box parc2">
<div class="infobox date1">
<h3>Titre titre 2</h3>
<p class="subt-infobox">ceci est un test</p>
<p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
</div>
<div class="fleche-bloc"></div>
</div>
</div>
<div class="timeline-section-tl">
<div class="parcours-box parc3">
<div class="infobox date1">
<h3>Titre titre 3</h3>
<p class="subt-infobox">ceci est un test</p>
<p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
</div>
<div class="fleche-bloc"></div>
</div>
</div>
<div class="timeline-section-tl">
<div class="parcours-box parc4">
<div class="infobox date1">
<h3>Titre titre 4</h3>
<p class="subt-infobox">ceci est un test</p>
<p class="infobox-text">ceci est un court texte d'information par rapport à un évènement</p>
</div>
<div class="fleche-bloc"></div>
</div>
</div>
</div>
<div class="container-time-line">
<div class="time-line-parcours">
<div class="timeline-indicator">
<p class="indicator-val"></p>
</div>
</div>
</div>
<div class="container-bulle">
<div class="timeline-section-tl">
<div class="tl-round round1"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round2"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round3"></div>
</div>
<div class="timeline-section-tl">
<div class="tl-round round4"></div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script>
function reste_a_faire()
{
return true;
}
if(reste_a_faire())
console.log('rien n\'est fait');
</script>
</body>
</html>body {
font-family:sans-serif;
margin:0;
padding:0;
width:100%;
background:url(https://i.imgur.com/EOjzXGI.jpg);
background-size:cover;
}
html {
width:100%;
}
/* ****** */
.timeline-parcours {
width:960px;
height:auto;
min-height:10px;
margin:100px auto;
}
.container-info {
width:960px;
margin:0 auto;
height:auto;
min-height:187px;
}
.timeline-section-tl {
width:236px;
height:auto;
min-height:10px;
display:inline-block;
}
.infobox {
width:226px;
height:auto;
min-height:10px;
background-color:white;
padding:5px;
border-radius:10px;
display:inline-block;
margin:0px 1px;
}
.fleche-bloc {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #ffffff transparent transparent transparent;
margin:auto;
}
.parcours-box {
opacity:0;
z-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.container-time-line {
width:960px;
margin:auto;
}
.time-line-parcours {
width:730px;
height:10px;
background-color:#432828;
margin:auto;
}
.timeline-indicator {
width:0px;
height:10px;
background-color:rgb(120, 131, 208);
-webkit-transition: all 100ms ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.tl-round {
width:20px;
height:20px;
border-radius:50%;
background-color:rgb(85, 69, 69);
margin:auto;
-webkit-transition: all 100ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.container-bulle {
margin-top:-15px;
}
/* animation classe */
.anim-phase-1 {
width:240px;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.anim-phase-2 {
width:475px;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.anim-phase-3 {
width:720px;
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}
.parcours-active {
opacity:1;
z-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}$( document ).ready(function() {
$(".parcours-box").removeClass("parcours-active");
$(".round1").on("click",function(){
$(".tl-round").css("background-color","rgb(85, 69, 69)");
$(".round1").css("background-color","white");
$(".parcours-active").removeClass("parcours-active");
$(".parc1").addClass("parcours-active");
$(".timeline-indicator").css("width","0");
})
$(".round2").on("click",function(){
$(".tl-round").css("background-color","rgb(85, 69, 69)");
$(".round1").css("background-color","white");
$(".round2").css("background-color","white");
$(".parcours-active").removeClass("parcours-active");
$(".parc2").addClass("parcours-active");
$(".timeline-indicator").css("width","240");
})
$(".round3").on("click",function(){
$(".tl-round").css("background-color","rgb(85, 69, 69)");
$(".round1").css("background-color","white");
$(".round2").css("background-color","white");
$(".round3").css("background-color","white");
$(".parcours-active").removeClass("parcours-active");
$(".parc3").addClass("parcours-active");
$(".timeline-indicator").css("width","480");
})
$(".round4").on("click",function(){
$(".tl-round").css("background-color","rgb(85, 69, 69)");
$(".round1").css("background-color","white");
$(".round2").css("background-color","white");
$(".round3").css("background-color","white");
$(".round4").css("background-color","white");
$(".parcours-active").removeClass("parcours-active");
$(".parc4").addClass("parcours-active");
$(".timeline-indicator").css("width","720");
})
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.