diff --git a/index.html b/index.html index 214b4a7..cc7ae0a 100644 --- a/index.html +++ b/index.html @@ -11,82 +11,26 @@
- -
-
-
- logo kosmopolit -
-
-
-
-
-
-
-
- logo kosmopolit line -
-
-
-
-

KOSMOPOLIT

-

LITTERall

-

Lettres d'Europe et d'Ailleurs

-

évènements

+
+ logo kosmopolit +
+
+
+
+
+
+
+
+ logo kosmopolit line +
+
+

KOSMOPOLIT

+

LITTERall

+

Lettres d'Europe et d'Ailleurs

+

actualités

- -
-
-
- logo kosmopolit -
-
-
-
-
-
-
-
- logo kosmopolit line -
-
-
-
-

KOSMOPOLIT

-

LITTERall

-

Lettres d'Europe et d'Ailleurs

-

évènements

-
-
-
- -
-
-
- logo kosmopolit -
-
-
-
-
-
-
-
- logo kosmopolit line -
-
-
-
-

KOSMOPOLIT

-

LITTERall

-

Lettres d'Europe et d'Ailleurs

-

évènements

-
-
-
-
diff --git a/styles/index.css b/styles/index.css index 46cb017..2df1b8b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -5,25 +5,33 @@ body main { display: flex; flex-direction: column; width: auto; + height: 100vh; margin: auto; padding: 0px; } -.all_container { - width: 550px; - margin: 0px auto 100px auto; - height: 100vh; -} -.moment_center_wrapper { - width: 100%; - margin: auto; -} -/*------------------------------------------*/ .logo_txt { height: auto; width: 100%; + margin: auto; +} +.logo_bubbles { + position: relative; + height: auto; + width: 100%; + margin: auto; +} +.logo_links { + display: flex; + flex-direction: row; + width: 100%; + margin: auto auto 50px auto; } + + + /*------------------------------------------*/ +/*THE DRAWING*/ /*all the ratios of the following elements*/ ._ratio { position: relative; @@ -35,11 +43,6 @@ body main { .circle > ._ratio { padding-top: 100%; } -/*the wrapper box*/ -.logo_bubbles { - position: relative; - width: 100%; -} /*commmon settings*/ .logo_bubbles .circle { position: absolute; @@ -84,58 +87,50 @@ body main { 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( 1%, -1%);} - 30% {transform: translate(-1%, 0%);} - 40% {transform: translate( 1%, -1%);} - 50% {transform: translate( 0%, 1%);} - 60% {transform: translate( 1%, -1%);} - 70% {transform: translate( 0%, 0%);} - 80% {transform: translate(-1%, -1%);} - 90% {transform: translate( 1%, -1%);} - 100% {transform: translate( 0%, 0%);} + 0% {transform: translate( 0%, 0%);} + 5% {transform: translate( 0.5%, -0.5%);} + 10% {transform: translate( 1%, 0%);} + 15% {transform: translate( 0.5%, -0.5%);} + 20% {transform: translate( 0%, -1%);} + 25% {transform: translate(-0.5%, -0.5%);} + 30% {transform: translate( -1%, 0%);} + 35% {transform: translate(-0.5%, -0.5%);} + 40% {transform: translate( 0%, -1%);} + 45% {transform: translate(-0.5%, -0.5%);} + 50% {transform: translate( -1%, 0%);} + 55% {transform: translate(-0.5%, 0.5%);} + 60% {transform: translate( 0%, 1%);} + 65% {transform: translate( 0.5%, 0.5%);} + 70% {transform: translate( 1%, 1%);} + 75% {transform: translate( 0.5%, 0.5%);} + 80% {transform: translate( 1%, 0%);} + 85% {transform: translate( 0.5%, -0.5%);} + 90% {transform: translate( 0%, -1%);} + 95% {transform: translate(-0.5%, -0.5%);} + 100% {transform: translate( -1%, 0%);} +} +@keyframes rotation { + from {transform: rotate(0deg); transform-origin: 50% 50.5%;} + to {transform: rotate(360deg); transform-origin: 50.5% 50%;} } .logo_bubbles .circle { + animation-name: position; animation-duration: 8s; animation-delay: 0s; animation-timing-function: linear; animation-iteration-count: infinite; 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; + + animation-name: rotation; + animation-duration: 1s; + animation-direction: normal; } .logo_bubbles .circle._1 { animation-delay: -0.8s; @@ -154,15 +149,11 @@ body main { - /*------------------------------------------*/ -.logo_links { - display: flex; - flex-direction: row; - padding: 10px; -} +/*LINKS*/ .logo_links > * { margin: auto; + padding: 0px; } .logo_links > :first-child { margin-left: 0px; @@ -171,12 +162,15 @@ body main { margin-right: 0px; } .logo_links #kosmopolit a { - color: #ee1998; + color: var(--color-purple); } .logo_links #litterall a { - color: #8fce3c; + color: var(--color-green); } .logo_links #lea a { - color: #0c9cb5; + color: var(--color-water); +} +.logo_links #actualites a { + color: hsl(59, 100%, 40%); }