Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Be Proud of Who You Are!
h1 #PrideMonth❤
body{
overflow: hidden;
}
h1 {
font-family: 'Bowlby One SC', cursive;
font-size: 10vw;
width: 100vw;
margin-top: calc(50vh - 10vw);
text-align: center;
background: linear-gradient(
60deg,
hsl(0, 75%, 50%) 10%,
hsl(20, 75%, 50%) 10%,
hsl(20, 75%, 50%) 25%,
hsl(50, 75%, 50%) 25%,
hsl(50, 75%, 50%) 40%,
hsl(130, 75%, 50%) 40%,
hsl(130, 75%, 50%) 55%,
hsl(200, 75%, 50%) 55%,
hsl(200, 75%, 50%) 70%,
hsl(260, 75%, 50%) 70%,
hsl(260, 75%, 50%) 85%,
hsl(0, 75%, 50%) 85%
);
text-shadow: 0.5px -0.6vw #fff4;
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: 10s BeProud linear infinite,
3s Always ease alternate infinite;
}
@keyframes BeProud {
100% { background-position: 100vw 0px; }
}
@keyframes Always {
100% { transform: scale(1.1);}
}
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.