FumeNodes/linktree
1
0
Fork 0
mirror of https://github.com/johnggli/linktree.git synced 2026-08-17 06:56:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add profile quote with animation

Browse Source
This commit is contained in:
john-emerson14
2020-03-21 16:01:43 -03:00
parent 8909705495
commit 081aebf4c6
2 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -13,7 +13,9 @@
<body> <body>
<img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture"> <img id="profilePicture" src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
<p id="userName">@JohnEmerson1406</p> <div id="userName">
@JohnEmerson1406
</div>
<div id="links"> <div id="links">
<a class="link" href="https://github.com/JohnEmerson1406" target="_blank"><i <a class="link" href="https://github.com/JohnEmerson1406" target="_blank"><i
@@ -30,6 +32,10 @@
class="fa fa-play-circle">&nbsp;</i>MyAnimeList</a> class="fa fa-play-circle">&nbsp;</i>MyAnimeList</a>
</div> </div>
<div id="profileQuote">
#SejaFeliz❤
</div>
</body> </body>
</html> </html>

27
style.css
View File

@@ -56,3 +56,30 @@ body {
background-color: var(--bgColor); background-color: var(--bgColor);
color: var(--accentColor); color: var(--accentColor);
} }
#profileQuote {
color: #bbb;
font-size: 1rem;
display: block;
font-family: var(--font);
width: 100%;
text-align: center;
/* animation */
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}