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

ajout de animations logo

Browse Source
This commit is contained in:
hugogogo
2021-03-16 22:55:28 +01:00
parent 578238376a
commit 53e365a486
9 changed files with 189 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/accueil/logo_ecritures.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/accueil/logo_ecritures_mid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/accueil/logo_line.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/autres/kosmopolit_fond.xcf Normal file
View File

Binary file not shown.

1
docs/litterall/revue_26/.~lock.Onglet LITTERall 26.odt#
View File

@@ -1 +0,0 @@
,simplonco,simplonco-Latitude-E6320,15.03.2021 21:48,file:///home/simplonco/.config/libreoffice/4;

1
docs/litterall/revue_27/.~lock.Onglet LITTERall 27.odt#
View File

@@ -1 +0,0 @@
,simplonco,simplonco-Latitude-E6320,14.03.2021 23:11,file:///home/simplonco/.config/libreoffice/4;

65
index.html
View File

@@ -7,62 +7,33 @@
<meta name="description" content="description du site web"> <meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette"> <meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<style> <link href="./styles/index.css" type="text/css" rel="stylesheet">
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>
</head> </head>
<body> <body>
<main class="index"> <main class="index">
<div id="all_container"> <div class="all_container">
<div id="for_txt"> <div class="logo_txt">
<img src="./docs/kosmopolit_logo.png" alt="logo kosmopolit"> <img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div> </div>
<div id="for_img"> <div class="logo_bubbles">
<img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"> <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>
<div id="for_links"> <div class="logo_links">
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT l'association</a></h3> <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="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="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>
</main> </main>
</body> </body>
</html> </html>

183
styles/index.css
View File

@@ -1,18 +1,175 @@
/*------------------------------------------*/ /*------------------------------------------*/
/*IMAGE*/ /*ACCUEIL*/
body main.index { body {
position: relative; background-color: white;
height: 100vh;
width: 100vw;
padding: 0px;
margin: 0px;
} }
body main.index img { main {
margin: 0px; display: flex;
padding: 0px; flex-direction: column;
max-width: 100vw; width: auto;
max-height: 100vh; margin: auto;
object-fit: contain; 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;
} }

2
styles/text.css
View File

@@ -60,7 +60,7 @@ small {
line-height: 1.2em; line-height: 1.2em;
} }
/*specials settings*/ /*specials settings*/
p, p *, h1, h1 *, h2, h2 * { p, p *, h1, h1 *, h2, h2 *, h3, h3 * {
display: inline; display: inline;
} }
li *, li p, p b, p em, p i, p a, p span { li *, li p, p b, p em, p i, p a, p span {