Projet_Prog_Web/CSS/menu.css
2020-12-04 13:47:29 +01:00

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