125 líneas
Sin EOL
2,6 KiB
CSS
125 líneas
Sin EOL
2,6 KiB
CSS
body{
|
|
background-color: black;
|
|
height:95vh;
|
|
color:white;
|
|
display:flex;
|
|
flex-direction:column;
|
|
justify-content:center;
|
|
align-items: center;
|
|
font-family:'Special Elite',cursive;
|
|
}
|
|
|
|
header{
|
|
flex:1;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
#headerTxt{
|
|
|
|
font-size:4.5vw;
|
|
font-weight: bold;
|
|
color:#a30909;
|
|
}
|
|
|
|
.glow{
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
text-shadow: 0 0 10px #494949, 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949;
|
|
}
|
|
|
|
to {
|
|
text-shadow: 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949, 0 0 50px #494949, 0 0 60px #494949, 0 0 70px #494949, 0 0 80px #494949, 0 0 90px #494949;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
main{
|
|
flex:5;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items: center;
|
|
}
|
|
|
|
main section article {
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content:center;
|
|
align-items: center;
|
|
}
|
|
|
|
main section article span{
|
|
width:16vw;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items: center;
|
|
}
|
|
|
|
main section article span span {
|
|
opacity:0;
|
|
animation: fade-text 1s forwards;
|
|
font-size:3vw;
|
|
margin-right:-0.2vw;
|
|
}
|
|
|
|
#B{animation-delay:0.3s}
|
|
#i{animation-delay:0.6s}
|
|
#e1{animation-delay:0.9s}
|
|
#n1{animation-delay:1.2s}
|
|
#v{animation-delay:1.5s}
|
|
#e2{animation-delay:1.8s}
|
|
#n2{animation-delay:2.1s}
|
|
#u{animation-delay:2.4s}
|
|
#e3{animation-delay:2.7s}
|
|
|
|
@keyframes fade-text {
|
|
0% {opacity :0}
|
|
100% {opacity:1}
|
|
}
|
|
|
|
#introTxt{
|
|
opacity:0;
|
|
font-size:2vw;
|
|
animation:fade-text 1s forwards;
|
|
animation-delay:3.5s;
|
|
}
|
|
|
|
#pseudoTxt{
|
|
opacity:0;
|
|
font-size:2vw;
|
|
animation:fade-text 1s forwards;
|
|
animation-delay:5s;
|
|
}
|
|
|
|
#pseudoInput{
|
|
opacity:0;
|
|
font-family:'Special Elite',cursive;
|
|
font-size:1.8vw;
|
|
border-radius:1vw;
|
|
padding:0.3vw 1vw 0vw 0.5vw;
|
|
animation:fade-text 1s forwards;
|
|
animation-delay:5s;
|
|
|
|
}
|
|
|
|
#pseudoInput:focus{
|
|
outline:none;
|
|
font-family:'Special Elite',cursive;
|
|
font-size:1.8vw;
|
|
border-radius:1vw;
|
|
padding:0.3vw 1vw 0vw 0.5vw;
|
|
}
|
|
|
|
footer{
|
|
flex:1;
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content:flex-end;
|
|
align-items: center;
|
|
} |