first commit
This commit is contained in:
nounix
51
assets/css/bootstrap.min.part.css
vendored
Normal file
51
assets/css/bootstrap.min.part.css
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
|
||||
a{background-color:transparent}a:active,a:hover{outline:0}
|
||||
b,strong{font-weight:700}
|
||||
h1{margin:.67em 0;font-size:2em}
|
||||
svg:not(:root){overflow:hidden}
|
||||
hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
|
||||
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
|
||||
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}
|
||||
hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}
|
||||
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
|
||||
.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
|
||||
.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}
|
||||
.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}
|
||||
p{margin:0 0 10px}
|
||||
.text-center{text-align:center}
|
||||
ol,ul{margin-top:0;margin-bottom:10px}
|
||||
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
|
||||
.container{width:750px}
|
||||
.container{width:970px}
|
||||
.container{width:1170px}
|
||||
.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
|
||||
.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}
|
||||
.col-sm-6{width:50%}
|
||||
.col-sm-4{width:33.33333333%}
|
||||
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}
|
||||
.col-md-4{width:33.33333333%}
|
||||
.col-md-offset-2{margin-left:16.66666667%}
|
||||
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}
|
||||
.col-lg-3{width:25%}
|
||||
.col-lg-offset-3{margin-left:25%}
|
||||
.collapse{display:none}
|
||||
.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}
|
||||
.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}
|
||||
.navbar{border-radius:4px}
|
||||
.navbar-header{float:left}
|
||||
.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
|
||||
.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}
|
||||
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}
|
||||
.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}
|
||||
.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}
|
||||
.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}
|
||||
.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}
|
||||
.navbar-toggle{display:none}
|
||||
.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}
|
||||
.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}
|
||||
.navbar-right{float:right!important;margin-right:-15px}
|
||||
.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}
|
||||
.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}
|
||||
.navbar-default .navbar-toggle{border-color:#ddd}
|
||||
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}
|
||||
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}
|
||||
55
assets/css/modal.css
Normal file
55
assets/css/modal.css
Normal file
@@ -0,0 +1,55 @@
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 10;
|
||||
max-height: 100%;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30%;
|
||||
height: 70%;
|
||||
max-height: 100%;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
background-color: #6d4c41;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background-color: grey;
|
||||
box-shadow: 0 8px 16px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
|
||||
.close-button {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
302
assets/css/style.css
Normal file
302
assets/css/style.css
Normal file
@@ -0,0 +1,302 @@
|
||||
@font-face {
|
||||
font-family: "LuziFer", lato;
|
||||
src: url("https://tohubohu.ti-nuage.fr/fonts/LuziFer.ttf") format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fade {
|
||||
position: absolute;
|
||||
font-family: sans-serif;
|
||||
font-size: 1vw;
|
||||
font-style: italic;
|
||||
color: #B56308;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
animation-name: textFader;
|
||||
animation-duration: 20s;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.fade:first-of-type { animation-delay: 0.5s}
|
||||
.fade:nth-of-type(2) {
|
||||
animation-delay: calc(20s / 8 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(3) {
|
||||
animation-delay: calc(20s / 8 * 2 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(4) {
|
||||
animation-delay: calc(20s / 8 * 3 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(5) {
|
||||
animation-delay: calc(20s / 8 * 4 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(6) {
|
||||
animation-delay: calc(20s / 8 * 5 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(7) {
|
||||
animation-delay: calc(20s / 8 * 6 + 0.5s);
|
||||
}
|
||||
.fade:nth-of-type(8) {
|
||||
animation-delay: calc(20s / 8 * 7 + 0.5s);
|
||||
}
|
||||
@keyframes textFader {
|
||||
0% {
|
||||
opacity: 0;
|
||||
} /* fade-in */
|
||||
1.25% {
|
||||
opacity: 1;
|
||||
} /* show */
|
||||
11.25% {
|
||||
opacity: 1;
|
||||
} /* fade-out */
|
||||
12.5% {
|
||||
opacity: 0;
|
||||
} /* waiting for the finish animation of other blocks */
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
unicode-bidi: isolate;
|
||||
margin-block-start: 0.5em;
|
||||
margin-block-end: 0.5em;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
overflow: hidden;
|
||||
border-style: inset;
|
||||
border-width: 1px;
|
||||
width: 10%;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
h1 {
|
||||
font-family: "LuziFer";
|
||||
color: #B56308;
|
||||
line-height: 1.5;
|
||||
font-weight: bold;
|
||||
font-size: 4vw;
|
||||
/* margin-top: 30%; */
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.fade {
|
||||
font-size: 2vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 6vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.fade {
|
||||
font-size: 2vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.fade {
|
||||
font-size: 1vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
font-size: 3.25rem;
|
||||
color: #B56308;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: sans-serif;
|
||||
font-weight: normal;
|
||||
color: #B56308;
|
||||
font-size: 1.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
.timetext {
|
||||
color: #B56308
|
||||
font-family: sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.timetextcontent {
|
||||
color: #B56308
|
||||
font-family: sans-serif;
|
||||
font-size: 1.65rem;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
/* .body1 {
|
||||
font-family: montserrat400;
|
||||
color: #B56308;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
text-align-last: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
*/
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #B56308;
|
||||
}
|
||||
|
||||
span:first-of-type {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: min(800px, calc(100% - 40px));
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin-top: 5vw;
|
||||
}
|
||||
|
||||
#bandeau {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
z-index :10;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 33%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.fade {
|
||||
font-size: 3vw;
|
||||
}
|
||||
h1 {
|
||||
font-size: 8vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* colonnes */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: #37474F;
|
||||
font-size: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.row a {
|
||||
color: white;
|
||||
}
|
||||
.column {
|
||||
flex: 33.33%;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
.footer {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Arrow */
|
||||
}
|
||||
a.arrow {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
border-bottom: 0;
|
||||
display: inline-block;
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
animation: bounce 3s infinite;
|
||||
}
|
||||
|
||||
|
||||
a.arrow .label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.arrow:before {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 512 512'%3E%3Cpath d='M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z' fill='%23B56308' /%3E%3C/svg%3E");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } }
|
||||
|
||||
|
||||
183
assets/css/timeline.css
Normal file
183
assets/css/timeline.css
Normal file
@@ -0,0 +1,183 @@
|
||||
/* La timeline verticale */
|
||||
.timeline {
|
||||
font-family: montserrat400;
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
/* La timeline verticale (la règle) */
|
||||
.timeline::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
background-color: #B56308;
|
||||
top: 25px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
/* background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 50%, #B56308 50%, #B56308 100%); */
|
||||
background-image: linear-gradient(to bottom, #ccd1d1 0%, #ccd1d1 25%, #B56308 25%, #B56308 100%);
|
||||
|
||||
|
||||
}
|
||||
/* Le cercle du 1er point */
|
||||
.timeline > .boxt:nth-child(1)::after {
|
||||
background: #ccd1d1;
|
||||
}
|
||||
/* 1ere fleche de gauche */
|
||||
.left:nth-child(1)::before {
|
||||
border-color: transparent transparent transparent #ccd1d1;
|
||||
}
|
||||
/* Le cercle du 2ème point */
|
||||
.timeline > .boxt:nth-child(2)::after {
|
||||
background: #ccd1d1;
|
||||
}
|
||||
/* 1ere fleche de droite
|
||||
.right:nth-child(2)::before {
|
||||
border-color: transparent #ccd1d1 transparent transparent;
|
||||
}
|
||||
*/
|
||||
/* Le cercle plus grand autour du 3ème point */
|
||||
.timeline > .boxt:nth-child(2)::after {
|
||||
position: absolute;
|
||||
background: #B56308;
|
||||
border-color: #B56308;
|
||||
border: 0 solid #B56308;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius :20%;
|
||||
}
|
||||
|
||||
/* Le conteneur autour du contenu */
|
||||
.boxt {
|
||||
padding: 10px 40px;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/* Les cercles sur la timeline */
|
||||
.boxt::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
right: -17px;
|
||||
background-color :#B56308;
|
||||
border :4px solid white;
|
||||
top :15px;
|
||||
border-radius :50%;
|
||||
z-index :1;
|
||||
}
|
||||
|
||||
/* Placez le conteneur à gauche */
|
||||
.left {
|
||||
left :0; }
|
||||
|
||||
/* Placez le conteneur à droite */
|
||||
.right {
|
||||
left :50%; }
|
||||
|
||||
/* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */
|
||||
.left::before {
|
||||
content :" ";
|
||||
height :0;
|
||||
position :absolute;
|
||||
top :22px;
|
||||
width :0;
|
||||
z-index :1;
|
||||
right :30px;
|
||||
border :medium solid white;
|
||||
border-width :10px 0 10px 10px;
|
||||
border-color :transparent transparent transparent #B56308;
|
||||
}
|
||||
|
||||
/* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */
|
||||
.right::before {
|
||||
content :" ";
|
||||
height :0;
|
||||
position :absolute;
|
||||
top :22px;
|
||||
width :0;
|
||||
z-index :1;
|
||||
left :30px;
|
||||
border :medium solid white;
|
||||
border-width :10px 10px 10px 0;
|
||||
border-color :transparent #B56308 transparent transparent;
|
||||
}
|
||||
|
||||
/* Corrigez le cercle pour les conteneurs du côté droit */
|
||||
.right::after {
|
||||
left:-16px;
|
||||
}
|
||||
|
||||
/* Le contenu réel */
|
||||
.content {
|
||||
padding :20px
|
||||
30px;
|
||||
background-color :white;
|
||||
position :relative;
|
||||
border-radius :6px;
|
||||
box-shadow: -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.1);
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Augmentez l'échelle du contenu au survol */
|
||||
.content:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
/* Pour les écrans de moins de 600px de large */
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
/* La timeline verticale */
|
||||
.timeline::after {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
/* Le conteneur autour du contenu */
|
||||
.boxt {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
/* Les cercles sur la timeline */
|
||||
.boxt::after {
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
/* correction pour la fleche du 1er boxt */
|
||||
.left:nth-child(1)::before {
|
||||
border: 10px solid #ccd1d1;
|
||||
border-color: transparent transparent transparent #ccd1d1;
|
||||
transform: rotate(180deg);
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
/* Placez le conteneur à gauche */
|
||||
.left {
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
/* Placez le conteneur à droite */
|
||||
.right {
|
||||
left: 0%;
|
||||
}
|
||||
|
||||
/* Ajoutez des flèches au conteneur gauche (pointant vers la droite) */
|
||||
.left::before {
|
||||
left: 60px;
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-color: transparent #B56308 transparent transparent;
|
||||
}
|
||||
|
||||
/* Ajoutez des flèches au conteneur droit (pointant vers la gauche) */
|
||||
.right::before {
|
||||
left: 60px;
|
||||
border-width: 10px 10px 10px 0;
|
||||
border-color: transparent #B56308 transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user