Skip to content

Instantly share code, notes, and snippets.

@wdsrocha

wdsrocha/index.html

Created July 5, 2020 02:31
Show Gist options
  • Save wdsrocha/d3273e5519fb7ea601b4f010917e5ffa to your computer and use it in GitHub Desktop.
Save wdsrocha/d3273e5519fb7ea601b4f010917e5ffa to your computer and use it in GitHub Desktop.
Download ZIP
Expand wdsrocha into wesley da silva rocha with fancy effect.
Raw
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>
<div class="expander">
<span>w</span><span>esley&nbsp;</span>
<span>d</span><span>a&nbsp;</span>
<span>s</span><span>ilva&nbsp;</span>
<span>rocha</span>
</div>
</h1>
</body>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700');
body
{
display: flex;
justify-content: left;
align-items: center;
align-content: flex-start;
min-height: 100vh;
background: #fff;
font-family: 'Poppins', sans-serif;
}
.expander
{
display: inline-flex;
color: black;
text-decoration: underline #00f;
}
.expander span:nth-child(even)
{
overflow: hidden;
transition: ease-in-out 0.5s;
color: #bbb;
letter-spacing: -1em;
}
.expander:hover span:nth-child(even)
{
letter-spacing: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment