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

wip mixed old and new, works on new to create a better iframe structure

Browse Source
This commit is contained in:
Hugo LAMY
2022-03-29 12:54:48 +02:00
parent 3d938681a0
commit 17d320215d
47 changed files with 229 additions and 1253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
new/styles/index.css
View File

@@ -7,143 +7,24 @@ body main {
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;
flex-direction: column;
margin: auto;
font-size: 3em;
text-align: center;
}
/*------------------------------------------*/
/*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 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%);}
}
.logo_bubbles .circle {
animation-name: position;
animation-duration: 8s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.logo_bubbles .circle._1 {
animation-delay: -0.8s;
animation-direction: reverse;
}
.logo_bubbles .circle._2 {
animation-delay: -2.7s;
}
.logo_bubbles .circle._3 {
animation-delay: -1.3s;
animation-direction: reverse;
}
.logo_bubbles .circle._4 {
animation-delay: 0s;
}
/*------------------------------------------*/
/*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);
}