<div class="container">
<h1>Hello world!</h1>
<p>Find me on twitter <a href="https://twitter.com/jordienr">@jordienr</a>🤠</p>
</div>
:root {
--main-gradient: linear-gradient(-66deg, #15162a,#000,#291a33,#000,#381a2c,#000,#121e42);
}
body, h1, a {
font-family: sans-serif;
margin: 0;
color: white;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100vw;
height: 100vh;
background: var(--main-gradient);
background-size: 400%;
animation: gradient 8s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 00% 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.