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-25 17:31:45 +01:00
parent d192733e65
commit bcdacd90a1
1 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
digitalselves.css
View File

@ -3,22 +3,21 @@ font-family: 'Combine';
src: url('Combine.otf') format('opentype'); src: url('Combine.otf') format('opentype');
font-weight: normal; font-weight: normal;
} }
@font-face { @font-face {
font-family: 'Sinistre'; font-family: 'Sinistre';
src: url('Sinistre-S†Caroline.otf') format('opentype'); src: url('Sinistre-S†Caroline.otf') format('opentype');
font-weight: normal; font-weight: normal;
} }
:root { :root {
--color-blue: #0000FF; --color-blue: #0000FF;
--color-gray: #edecec; --color-gray: #edecec;
--color-pink: #f8a8ff; --color-pink: #f8a8ff;
--color-yel: #FDFFF0; --color-yel: #FDFFF0;
--color-aqua: #7FFFD4; --color-aqua: #7FFFD4;
--color-black: #000;
--special-font: 'Sinistre'; --special-font: 'Sinistre';
font-size: 16pt;
} }
html { html {
box-sizing: border-box; box-sizing: border-box;
height: 100% height: 100%
@ -28,13 +27,13 @@ html {
-moz-box-sizing: inherit; -moz-box-sizing: inherit;
box-sizing: inherit; box-sizing: inherit;
} }
body{ body{
margin:0px; margin:0px;
/*animation: bodymove 60s infinite;
-webkit-animation: bodymove 60s infinite; */
} }
.move {
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-blue));
background-size: 100% 100%;} background-size: 100% 100%;}
@ -56,20 +55,48 @@ body{
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-blue) 100%);}
} }
marquee{ marquee{
color: var(--color-pink); color: var(--color-pink);
font-family: var(--special-font); font-family: var(--special-font);
} }
#stage01{ #stage01{
width: 100%; position: absolute;
height: 100vh; z-index: 3;
margin: 10% 25%;
font-family: var(--special-font);
}
#stage01 input{
box-shadow: 1px 1px 8px 2px var(--color-pink);
border-radius: 100%;
padding: 0rem 0.5rem;
width: 150px;
height: 150px;
background-color: var(--color-black);
color: var(--color-pink);
border: 0px;
font-size: 1.6rem;
font-family: var(--special-font);
margin: 0rem 2rem;
}
#stage01 #result {
color: var(--color-pink);
}
#stage01 button {
font-size: 0.8rem;
border: 0px;
color: var(--color-pink);
font-family: var(--special-font);
box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
border-radius: 100%;
}
#stage01 button:hover{
background-color: var(--color-pink);
color: var(--color-black);
} }
#stage02{ #stage02{
color: var(--color-blue); color: var(--color-blue);
font-size: 14vmax; font-size: 14.6vmax;
line-height: 18vmax; line-height: 18.6vmax;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
@ -77,38 +104,58 @@ marquee{
font-weight: bold; font-weight: bold;
word-spacing: 1vw; word-spacing: 1vw;
filter: opacity(0.9); filter: opacity(0.9);
text-shadow: 2px 2px 2px var(--color-pink); text-shadow: 0.1rem 0.1rem 0.1rem var(--color-pink);
} }
#stage03{ #stage03{
filter: opacity(0.8); display: initial;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
top: 0; top: 0;
right: 0; right: 0;
margin: 2vmax; margin: 2.2vmax;
width: 130vmin; width: 125vmin;
height: 90vmin; height: 95vmin;
border: 0px; border: 0rem;
box-shadow: 1px 1px 8px 2px var(--color-pink); box-shadow: 0.1rem 0.1rem 0.4rem 0.1rem var(--color-pink);
border-radius: 0 50% 50% 50%; border-radius: 0 50% 50% 50%;
filter: grayscale(1); filter: grayscale(1);
opacity: 0.8;
} }
span { span {
box-shadow: 1px 1px 8px 2px 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;
} }
span.oval:nth-of-type(1n) {
span#oval { width: 10%;
width: 50%;
height: 80%; height: 80%;
border-radius: 100% / 50%; border-radius: 100% / 50%;
} }
span.oval:nth-of-type(2n) {
span#dia { width: 50%;
width: 90%; height: 50%;
height: 90%; border-radius: 80% / 80%;
transform: rotate(45deg); right: 0;
} }
span.oval:nth-of-type(3n) {
width: 2.5%;
height: 2.5%;
border-radius: 100%;
background-color: var(--color-pink);
margin:10vh 0vh 0vh 45vw;
}
span.oval:nth-of-type(4n) {
width: 90%;
height: 20%;
border-radius: 50% / 50%;
margin-top: 40vh;
right: 0;
}
span.oval:nth-of-type(5n) {
width: 35%;
height: 35%;
border-radius: 60% 10% / 80% 40%;
bottom: 0;
left: 0;
}