JoanaChicau/digital_selves
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 'digitalselves.css'

Browse Source
This commit is contained in:
JoanaChicau 2022-03-30 23:05:59 +02:00
parent 11c877d3bd
commit 867cb03214
1 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
digitalselves.css
View File

@ -13,8 +13,8 @@ font-weight: normal;
--color-gray: #edecec; --color-gray: #edecec;
--color-pink: #f8a8ff; --color-pink: #f8a8ff;
--color-yel: #FDFFF0; --color-yel: #FDFFF0;
--color-aqua: #7FFFD4; --color-aqua: #758fce;
--color-black: #000; --color-darkblue: #00000d;
--special-font: 'Sinistre'; --special-font: 'Sinistre';
font-size: 16pt; font-size: 16pt;
} }
@ -29,35 +29,37 @@ html {
} }
body{ body{
margin:0px; margin:0px;
background-color: var(--color-darkblue) !important;
} }
.move { .move {
animation: bodymove 120s infinite; animation: bodymove 120s infinite;
-webkit-animation: bodymove 120s infinite; -webkit-animation: bodymove 120s infinite;
} }
@keyframes bodymove { @keyframes bodymove {
0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue)); 0% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-aqua));
background-size: 100% 100%;} background-size: 100% 100%;}
20% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%); 20% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 100%);
background-size: 10% 10%; } background-size: 10% 10%; }
30% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%); 30% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%);
background-size: 10% 100%;} background-size: 10% 100%;}
35% { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink)); 35% { background: radial-gradient(ellipse at top, var(--color-darkblue), var(--color-aqua) 40%, var(--color-pink));
background-size: 10% 100%;} background-size: 10% 100%;}
45% { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel) 100%);} 45% { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-aqua) 10%, var(--color-yel) 100%);}
65% { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%); 65% { background: radial-gradient(ellipse at center, var(--color-darkblue), var(--color-darkblue) 10%, var(--color-darkblue) 100%);
background-size: 10% 999%; background-size: 10% 999%;
background-position: left;} background-position: left;}
70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%); 70% { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-darkblue) 10%, #f8a8ff 100%);
background-size: 10% 999%;} background-size: 10% 999%;}
85% { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%); 85% { background: linear-gradient(var(--color-pink), var(--color-darkblue) 10%, var(--color-pink) 100%);
background-size: 10% 10%;} background-size: 10% 10%;}
90% { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%); 90% { background: linear-gradient(var(--color-darkblue) 50%, var(--color-pink) 10% 10%);
background-size: 100% 1%;} background-size: 100% 1%;}
100% { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);} 100% { background: linear-gradient(var(--color-pink) 10%, var(--color-darkblue) 100%);}
} }
marquee{ marquee{
color: var(--color-pink); color: var(--color-pink);
font-family: var(--special-font); font-family: var(--special-font);
margin: 2rem 0rem;
} }
#stage01{ #stage01{
position: absolute; position: absolute;
@ -71,7 +73,7 @@ marquee{
padding: 0rem 0.5rem; padding: 0rem 0.5rem;
width: 150px; width: 150px;
height: 150px; height: 150px;
background-color: var(--color-black); background-color: var(--color-darkblue);
color: var(--color-pink); color: var(--color-pink);
border: 0px; border: 0px;
font-size: 1.6rem; font-size: 1.6rem;
@ -91,7 +93,7 @@ marquee{
} }
#stage01 button:hover{ #stage01 button:hover{
background-color: var(--color-pink); background-color: var(--color-pink);
color: var(--color-black); color: var(--color-darkblue);
} }
#stage02{ #stage02{
color: var(--color-blue); color: var(--color-blue);
@ -107,7 +109,7 @@ marquee{
text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink); text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
} }
#stage03{ #stage03{
display: initial; display: none;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
top: 0; top: 0;
@ -121,7 +123,7 @@ marquee{
filter: grayscale(1); filter: grayscale(1);
opacity: 0.8; opacity: 0.8;
} }
span { span.oval {
box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink); box-shadow: 0.1rem 0.1rem 1rem 0.1rem var(--color-pink);
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -153,9 +155,19 @@ span.oval:nth-of-type(4n) {
} }
span.oval:nth-of-type(5n) { span.oval:nth-of-type(5n) {
width: 35%; width: 35%;
height: 35%; height: 20%;
border-radius: 60% 10% / 80% 40%; border-radius: 60% 10% / 80% 40%;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
span.oval:nth-of-type(6n) {
width: 0.5%;
height: 55%;
border-radius: 20% 80% / 80% 40%;
bottom: 0;
right: 0;
background-color: transparent;
margin: 5vh;
}