diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..49751e2 --- /dev/null +++ b/index2.html @@ -0,0 +1,38 @@ + + + + + + kosmopolit + + + + + + + +
+
+ logo kosmopolit +
+
+
+
+
+
+
+
+ logo kosmopolit line +
+
+
+
+

KOSMOPOLIT

+

LITTERall

+

Lettres d'Europe et d'Ailleurs

+

Actualités

+
+
+ + + diff --git a/styles/index.css b/styles/index.css index dae14f0..ac84e0f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -93,8 +93,10 @@ body main { /*------------------------------------------*/ /*THE ANIMATION*/ @keyframes rotation { - from {transform: rotate(0deg); transform-origin: 50% 51%;} - to {transform: rotate(360deg); transform-origin: 50% 50%;} + 0% {transform: rotate(0deg); transform-origin: 49% 50%;} + 50% {transform: rotate(360deg); transform-origin: 49% 50%;} + 50.1% {transform: rotate(360deg); transform-origin: 51% 50%;} + 100% {transform: rotate(0deg); transform-origin: 51% 50%;} } .logo_bubbles .circle { animation-name: rotation; @@ -104,7 +106,7 @@ body main { animation-direction: normal; } .logo_bubbles .circle._1 { - animation-duration: 1s; + animation-duration: 2s; animation-delay: 0s; animation-direction: reverse; } @@ -114,7 +116,7 @@ body main { animation-direction: reverse; } .logo_bubbles .circle._3 { - animation-duration: 1.5s; + animation-duration: 1s; animation-delay: 0.3s; } .logo_bubbles .circle._4 { diff --git a/styles/index2.css b/styles/index2.css new file mode 100644 index 0000000..ac84e0f --- /dev/null +++ b/styles/index2.css @@ -0,0 +1,156 @@ + +/*------------------------------------------*/ +/*ACCUEIL*/ +body main { + display: flex; + flex-direction: column; + height: 100vh; + margin: auto; + padding: 0px; +} +.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; + width: 100%; +} +.logo_bubbles > ._ratio { + padding-top: 70%; +} +.circle > ._ratio { + padding-top: 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 rotation { + 0% {transform: rotate(0deg); transform-origin: 49% 50%;} + 50% {transform: rotate(360deg); transform-origin: 49% 50%;} + 50.1% {transform: rotate(360deg); transform-origin: 51% 50%;} + 100% {transform: rotate(0deg); transform-origin: 51% 50%;} +} +.logo_bubbles .circle { + animation-name: rotation; + animation-delay: 0s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: normal; +} +.logo_bubbles .circle._1 { + animation-duration: 2s; + animation-delay: 0s; + animation-direction: reverse; +} +.logo_bubbles .circle._2 { + animation-duration: 2s; + animation-delay: 0.7s; + animation-direction: reverse; +} +.logo_bubbles .circle._3 { + animation-duration: 1s; + animation-delay: 0.3s; +} +.logo_bubbles .circle._4 { + animation-duration: 1s; + animation-delay: 0.5s; + animation-direction: reverse; +} + + + + + +/*------------------------------------------*/ +/*LINKS*/ +.logo_links > * { + margin: auto; + padding: 0px; +} +.logo_links > :first-child { + margin-left: 0px; +} +.logo_links > :last-child { + margin-right: 0px; +} +.logo_links #kosmopolit a { + color: var(--color-purple); +} +.logo_links #litterall a { + color: var(--color-green); +} +.logo_links #lea a { + color: var(--color-water); +} +.logo_links #actualites a { + color: hsl(59, 100%, 40%); +} +