ajout de animations logo
This commit is contained in:
hugogogo
BIN
docs/accueil/logo_ecritures.png
Normal file
BIN
docs/accueil/logo_ecritures.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
docs/accueil/logo_ecritures_mid.png
Normal file
BIN
docs/accueil/logo_ecritures_mid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/accueil/logo_line.png
Normal file
BIN
docs/accueil/logo_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/autres/kosmopolit_fond.xcf
Normal file
BIN
docs/autres/kosmopolit_fond.xcf
Normal file
Binary file not shown.
@@ -1 +0,0 @@
|
||||
,simplonco,simplonco-Latitude-E6320,15.03.2021 21:48,file:///home/simplonco/.config/libreoffice/4;
|
||||
@@ -1 +0,0 @@
|
||||
,simplonco,simplonco-Latitude-E6320,14.03.2021 23:11,file:///home/simplonco/.config/libreoffice/4;
|
||||
65
index.html
65
index.html
@@ -7,62 +7,33 @@
|
||||
<meta name="description" content="description du site web">
|
||||
<meta name="keywords" content="truc, bidule, chouette">
|
||||
<link href="./styles/style.css" type="text/css" rel="stylesheet">
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
}
|
||||
#all_container {
|
||||
width: 550px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
#for_txt {
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#for_img {
|
||||
}
|
||||
#for_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
#for_links > * {
|
||||
margin: auto;
|
||||
}
|
||||
#for_links > :first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
#for_links > :last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
#for_links #kosmopolit a {
|
||||
color: #ee1998;
|
||||
}
|
||||
#for_links #litterall a {
|
||||
color: #8fce3c;
|
||||
}
|
||||
#for_links #lea a {
|
||||
color: #0c9cb5;
|
||||
}
|
||||
</style>
|
||||
<link href="./styles/index.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<main class="index">
|
||||
<div id="all_container">
|
||||
<div id="for_txt">
|
||||
<img src="./docs/kosmopolit_logo.png" alt="logo kosmopolit">
|
||||
<div class="all_container">
|
||||
<div class="logo_txt">
|
||||
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
|
||||
</div>
|
||||
<div id="for_img">
|
||||
<img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit">
|
||||
<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 id="for_links">
|
||||
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT l'association</a></h3>
|
||||
<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>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
183
styles/index.css
183
styles/index.css
@@ -1,18 +1,175 @@
|
||||
|
||||
/*------------------------------------------*/
|
||||
/*IMAGE*/
|
||||
body main.index {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
/*ACCUEIL*/
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
body main.index img {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
object-fit: contain;
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
background-color: white;
|
||||
}
|
||||
.all_container {
|
||||
width: 550px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
/*------------------------------------------*/
|
||||
.logo_txt {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*------------------------------------------*/
|
||||
/*all the ratios of the following elements*/
|
||||
._ratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.logo_bubbles > ._ratio {
|
||||
padding-top: 70%;
|
||||
}
|
||||
.circle > ._ratio {
|
||||
padding-top: 100%;
|
||||
}
|
||||
/*the wrapper box*/
|
||||
.logo_bubbles {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
/*commmon settings*/
|
||||
.logo_bubbles .circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*sie position and color for each circles*/
|
||||
.logo_bubbles .circle._1 {
|
||||
top: 13.4%;
|
||||
left: 2.2%;
|
||||
width: 51.6%;
|
||||
background-color: #ee1998;
|
||||
}
|
||||
.logo_bubbles .circle._2 {
|
||||
top: 18.8%;
|
||||
left: 27.6%;
|
||||
width: 51.6%;
|
||||
background-color: #8fce3c;
|
||||
}
|
||||
.logo_bubbles .circle._3 {
|
||||
top: 5.9%;
|
||||
left: 66.1%;
|
||||
width: 30.5%;
|
||||
background-color: #0c9cb5;
|
||||
}
|
||||
.logo_bubbles .circle._4 {
|
||||
top: 36%;
|
||||
left: 59%;
|
||||
width: 10.9%;
|
||||
background-color: #e3e00a;
|
||||
}
|
||||
/*mix-blend-mode*/
|
||||
.logo_bubbles .circle._blend._2 {
|
||||
mix-blend-mode: luminosity;
|
||||
}
|
||||
.logo_bubbles .circle._blend._3 {
|
||||
mix-blend-mode: color;
|
||||
}
|
||||
/*the line*/
|
||||
.logo_bubbles .logo_line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
/*THE ANIMATION*/
|
||||
@keyframes shape {
|
||||
0% {transform: scale(1.00, 1.00);}
|
||||
20% {transform: scale(1.01, 0.98);}
|
||||
30% {transform: scale(0.98, 1.01);}
|
||||
40% {transform: scale(1.02, 0.99);}
|
||||
50% {transform: scale(1.00, 1.02);}
|
||||
60% {transform: scale(0.98, 1.01);}
|
||||
70% {transform: scale(1.01, 0.98);}
|
||||
80% {transform: scale(0.99, 1.00);}
|
||||
90% {transform: scale(0.98, 1.02);}
|
||||
100% {transform: scale(1.00, 0.98);}
|
||||
}
|
||||
@keyframes size {
|
||||
0% {transform: scale(1.00, 1.00);}
|
||||
20% {transform: scale(0.98, 0.98);}
|
||||
30% {transform: scale(1.01, 1.01);}
|
||||
40% {transform: scale(0.99, 0.99);}
|
||||
50% {transform: scale(1.02, 1.02);}
|
||||
60% {transform: scale(1.01, 1.01);}
|
||||
70% {transform: scale(0.98, 0.98);}
|
||||
80% {transform: scale(1.00, 1.00);}
|
||||
90% {transform: scale(1.02, 1.02);}
|
||||
100% {transform: scale(0.98, 0.98);}
|
||||
}
|
||||
@keyframes position {
|
||||
0% {transform: translate( 0%, 0%);}
|
||||
20% {transform: translate( 2%, -2%);}
|
||||
30% {transform: translate(-2%, 0%);}
|
||||
40% {transform: translate( 2%, -2%);}
|
||||
50% {transform: translate( 0%, 2%);}
|
||||
60% {transform: translate( 2%, -2%);}
|
||||
70% {transform: translate( 0%, 0%);}
|
||||
80% {transform: translate(-2%, -2%);}
|
||||
90% {transform: translate( 2%, -2%);}
|
||||
100% {transform: translate( 0%, 0%);}
|
||||
}
|
||||
.logo_bubbles .circle {
|
||||
animation-name: position;
|
||||
animation-name: shape;
|
||||
animation-name: size;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 0s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
.logo_bubbles .circle._1 {
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.logo_bubbles .circle._2 {
|
||||
animation-delay: -1.3s;
|
||||
}
|
||||
.logo_bubbles .circle._3 {
|
||||
animation-delay: -2.7s;
|
||||
}
|
||||
.logo_bubbles .circle._4 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------*/
|
||||
.logo_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
.logo_links > * {
|
||||
margin: auto;
|
||||
}
|
||||
.logo_links > :first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.logo_links > :last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.logo_links #kosmopolit a {
|
||||
color: #ee1998;
|
||||
}
|
||||
.logo_links #litterall a {
|
||||
color: #8fce3c;
|
||||
}
|
||||
.logo_links #lea a {
|
||||
color: #0c9cb5;
|
||||
}
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ small {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
/*specials settings*/
|
||||
p, p *, h1, h1 *, h2, h2 * {
|
||||
p, p *, h1, h1 *, h2, h2 *, h3, h3 * {
|
||||
display: inline;
|
||||
}
|
||||
li *, li p, p b, p em, p i, p a, p span {
|
||||
|
||||
Reference in New Issue
Block a user