pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

accueil trois possibilitees

Browse Source
This commit is contained in:
hugogogo
2021-03-16 23:13:00 +01:00
parent 53e365a486
commit a34311f4c5
2 changed files with 72 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@@ -11,7 +11,9 @@
</head> </head>
<body> <body>
<main class="index"> <main class="index">
<div class="all_container">
<div class="all_container _1">
<div class="moment_center_wrapper">
<div class="logo_txt"> <div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit"> <img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div> </div>
@@ -33,6 +35,58 @@
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3> <h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
</div> </div>
</div> </div>
</div>
<div class="all_container _2">
<div class="moment_center_wrapper">
<div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div>
<div class="logo_bubbles">
<div class="_ratio">
<div class="circle _2"><div class="_ratio"></div></div>
<div class="circle _3"><div class="_ratio"></div></div>
<div class="circle _1"><div class="_ratio"></div></div>
<div class="circle _blend _2"><div class="_ratio"></div></div>
<div class="circle _blend _3"><div class="_ratio"></div></div>
<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
<div class="circle _4"><div class="_ratio"></div></div>
</div>
</div>
<div class="logo_links">
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
<h3 id="lea"><a href="./fr/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
</div>
</div>
</div>
<div class="all_container _3">
<div class="moment_center_wrapper">
<div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div>
<div class="logo_bubbles">
<div class="_ratio">
<div class="circle _2"><div class="_ratio"></div></div>
<div class="circle _3"><div class="_ratio"></div></div>
<div class="circle _1"><div class="_ratio"></div></div>
<div class="circle _blend _2"><div class="_ratio"></div></div>
<div class="circle _blend _3"><div class="_ratio"></div></div>
<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
<div class="circle _4"><div class="_ratio"></div></div>
</div>
</div>
<div class="logo_links">
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
<h3 id="lea"><a href="./fr/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
</div>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>

27
styles/index.css
View File

@@ -1,21 +1,22 @@
/*------------------------------------------*/ /*------------------------------------------*/
/*ACCUEIL*/ /*ACCUEIL*/
body { body main {
background-color: white;
}
main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: auto; width: auto;
margin: auto; margin: auto;
background-color: white; padding: 0px;
} }
.all_container { .all_container {
width: 550px; width: 550px;
margin: 20px auto; margin: 0px auto 100px auto;
height: 100vh;
}
.moment_center_wrapper {
width: 100%;
margin: auto;
} }
/*------------------------------------------*/ /*------------------------------------------*/
.logo_txt { .logo_txt {
height: auto; height: auto;
@@ -121,15 +122,21 @@ main {
100% {transform: translate( 0%, 0%);} 100% {transform: translate( 0%, 0%);}
} }
.logo_bubbles .circle { .logo_bubbles .circle {
animation-name: position;
animation-name: shape;
animation-name: size;
animation-duration: 4s; animation-duration: 4s;
animation-delay: 0s; animation-delay: 0s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
.all_container._1 .logo_bubbles .circle {
animation-name: shape;
}
.all_container._2 .logo_bubbles .circle {
animation-name: size;
}
.all_container._3 .logo_bubbles .circle {
animation-name: position;
}
.logo_bubbles .circle._1 { .logo_bubbles .circle._1 {
animation-delay: -0.8s; animation-delay: -0.8s;
} }