d
Data utworzenia: 2025-01-13 11:05:17
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;
font-family: 'Lato',sans-serif;
height: 101vh;
}
.img1{
position: relative;
height: 100%;
background:url("./parallax2.jpeg");
background-repeat: no-repeat;
background-size: 400%;
background-position: center;
animation: parallax2 3s ease forwards;
animation-delay: 1s;
}
.img2{
height: 100%;
background:url("./parallax1.png") no-repeat center / cover;
animation: parallax1 2s ease forwards;
animation-delay: 1s;
}
h1{
text-align: center;
position: absolute;
top:30%:
left: 50%;
transform: translate(-50%,50%);
text-transform: uppercase;
color: azure;
text-shadow: 0 0 15px black;
letter-spacing: 5px;
font-size: 40px;
animation: fade-in 2s ease forwards;
opacity:0;
animation-delay: 2s;
}
@keyframes parallax2{
0%{
transform: translateY(100px);
opacity:0.3
}
100%{
transform: translate(0);
opacity:1;
}
}
@keyframes parallax1{
0%{
transform: translateY(200px);
opacity:0;
}
100%{
transform: translate(0);
opacity:1;
}
}
@keyframes fade-in{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
Powrót