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;
|
||||
}
|
||||
}
|
||||
|
||||
28
assets/js/modal.js
Normal file
28
assets/js/modal.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// Get the elements
|
||||
var link = document.getElementById("link");
|
||||
var modal = document.getElementById("modal");
|
||||
var modalContent = document.getElementById("modal-content");
|
||||
var closeButton = document.getElementById("close-button");
|
||||
|
||||
// Open the modal when the link is clicked
|
||||
link.onclick = function(event) {
|
||||
// Prevent the default action of opening the link
|
||||
event.preventDefault();
|
||||
// Get the href attribute of the link
|
||||
var href = this.getAttribute("href");
|
||||
// Set the src attribute of the iframe to the href
|
||||
modalContent.src = href;
|
||||
// Display the modal
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// Close the modal when the user clicks outside the modal on the close button
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal || event.target == closeButton) {
|
||||
// Hide the modal
|
||||
modal.style.display = "none";
|
||||
// Clear the src attribute of the iframe
|
||||
modalContent.src = "";
|
||||
}
|
||||
}
|
||||
|
||||
BIN
data/Recyclerie tohu-bohu.png
Normal file
BIN
data/Recyclerie tohu-bohu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
data/Statuts-tohu-bohu.pdf
Normal file
BIN
data/Statuts-tohu-bohu.pdf
Normal file
Binary file not shown.
BIN
fonts/LuziFer.ttf
Normal file
BIN
fonts/LuziFer.ttf
Normal file
Binary file not shown.
99
index.html
Normal file
99
index.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<title>Recyclerie - Tohu Bohu -</title>
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="./assets/css/timeline.css">
|
||||
<link rel="stylesheet" href="./assets/css/modal.css">
|
||||
<meta name="description" content="La recyclerie tohu-bohu place au cœur de son action participative la gestion d'une recyclerie et l'animation d'ateliers de réparation des objets du quotidien.">
|
||||
<meta name="robots" content="index, nofollow">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="bandeau">
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1><span style="font-family: lato, sans-serif;">Recyclerie</span><br>Tohu-Bohu</h1>
|
||||
<div class="fade">Un lieu de partage</div>
|
||||
<div class="fade">Des trésors se cachent partout</div>
|
||||
<div class="fade">Fait battre les coeurs</div>
|
||||
<div class="fade">Un projet solidaire</div>
|
||||
<div class="fade">Où l'on donne et reçoit</div>
|
||||
<div class="fade">Une seconde chance de retrouver sens</div>
|
||||
<div class="fade">Résonne comme un joyeux bazar</div>
|
||||
<div class="fade">Unisson dans la création</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Une initiative citoyenne<h2><br><br>
|
||||
<p style="text-align: justify;">La recyclerie tohu-bohu est une association collégiale à but non lucratif qui à pour but de contribuer, dans le cadre de l'économie sociale et solidaire, au développement durable et au respect de l'environnement. Elle place au cœur de son action participative la gestion d'une recyclerie et l'animation d'ateliers de réparation des objets du quotidien.</p>
|
||||
<br><br>
|
||||
<p><b>Très bientôt, nous pourrons commencer à collecter tout ce dont vous ne voulez plus, ou presque : petit mobilier, vaisselle, jouets, textile, livres, bibelots, outillage, électroménager...</b></p>
|
||||
<img src="https://tohubohu.ti-nuage.fr/data/Recyclerie tohu-bohu.png" alt="recyclerie tohu-bohu - comment ça marche?" class="image">
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Où en est-on ?</h2>
|
||||
<br><br>
|
||||
<div class="timeline">
|
||||
<div class="boxt left">
|
||||
<div class="content">
|
||||
<p class="timetext" style="color: #99a3a4">Juillet - Août</p>
|
||||
<p class="timetextcontent" style="color: #99a3a4">Inauguration de la boutique : ouverture des portes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxt right">
|
||||
<div class="content">
|
||||
<p class="timetext" style="color: #99a3a4">Juin - Juillet</p>
|
||||
<p class="timetextcontent" style="color: #99a3a4">Réunion publique, organisation et aménagement du local, début de la collecte d'objets</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxt left">
|
||||
<div class="content">
|
||||
<p class="timetext">Avril - Mai - Juin</p>
|
||||
<p class="timetextcontent">Rencontre des élus de différentes communes : recherche de soutiens et d'un local</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxt right">
|
||||
<div class="content">
|
||||
<p class="timetext">Mars</p>
|
||||
<p class="timetextcontent">Constitution de l'association collégiale, dépôt des Statuts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p>Le projet vous intéresse ou vous souhaitez participer :</p>
|
||||
<p>Restez informés, <a href="https://listes.ti-nuage.fr/sympa/subscribe/tohu-bohu" id="link">inscrivez-vous à la newsletter</a></p>
|
||||
<p>Suivez-nous sur Mastodon : <a href="https://bzh.social/@tohubohu" target="_blank">https://bzh.social/@tohubohu</a></p>
|
||||
<div class="modal" id="modal">
|
||||
<iframe src="" class="modal-content" id="modal-content" loading=“eager”></iframe>
|
||||
<div class="close-button" id="close-button">Fermer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="column">Association tohu-bohu<br>Mairie - 11 place aux Chevaux<br>22420 Le Vieux Marché
|
||||
</div>
|
||||
<div class="column"><a href="https://tohubohu.ti-nuage.fr/data/Statuts-tohu-bohu.pdf" target="_blank">Statuts de l'Association</a><br><a href="https://www.helloasso.com/associations/recyclerie-tohu-bohu/adhesions/adhesions" target="_blank">Devenir adhérent.e</a>
|
||||
</div>
|
||||
<div class="column"><a href="mailto:tohu-bohu@ti-nuage.fr" target="_blank">tohu-bohu@ti-nuage.fr</a><br>07.83.85.59.26
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<footer>
|
||||
|
||||
<div class="footer">Fait avec <span style="color: red;">❤</span> • Hébergé par <a href="https://ti-nuage.fr" target="_blank">Ti Nuage</a></div>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<script src="./assets/js/modal.js"></script>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user