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

Update 'digitalselves.css'

master
JoanaChicau 3 years ago
parent
11c877d3bd
commit
867cb03214
1 changed files with 29 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      digitalselves.css

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;
}

Write Preview
Loading…
Cancel
Save