killthecake | [27] Heeeere We Are, BOoooorn to be KIIIIIINGS

Skip to Main Content

Entry tags:

[27] Heeeere We Are, BOoooorn to be KIIIIIINGS

live preview here!

Code:

<br /><br />
<center> <div style="height: 300px;width: 600px;overflow:hidden;line-height:15px;">

<a name="1"></a> <div style="height: 300px;">

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;margin-left: 50px"></div>

<a href="#2"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="2"></a> <div style="height: 300px;">

<a href="#1"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#3"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="3"></a> <div style="height: 300px;">

<a href="#2"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#4"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="4"></a> <div style="height: 300px;">

<a href="#3"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#5"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="5"></a> <div style="height: 300px;">

<a href="#4"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#6"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="6"></a> <div style="height: 300px;">

<a href="#5"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#7"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="7"></a> <div style="height: 300px;">

<a href="#6"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#8"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="8"></a> <div style="height: 300px;">

<a href="#7"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#9"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="9"></a> <div style="height: 300px;">

<a href="#8"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#10"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/forward.png">
</div></a>

</div>

<a name="10"></a> <div style="height: 300px;">

<a href="#9"><div style="float: left;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/back.png">
</div></a>

<div style="display:inline-block;width: 300px; height: 300px;background: url(IMG);background-position:center;background-size: cover;border-radius: 50%;">

<div style="width: 300px;height: 300px;background: rgba(255,255,255,0.3);border-radius: 50%;">
<div style="padding-top: 80px;font-family:tahoma;font-variant:small-caps;font-weight:bold;font-size: 25px;text-shadow: 1px 1px 1px #000;color:rgba(255,255,255,0.9);">

<a href="URL" style="text-decoration:none;color:rgba(255,255,255,0.9);line-height: 23px;">TITLE</a>

<div style="width: 85%;height: 2px;background:rgba(255,255,255,0.7);margin: 10px 0;"></div>

<font style="font-size: 15px;font-weight:normal;font-variant:none;font-family:helvetica;font-style:italic;">
"Lyric<br />
Lyric"
</font>
</div>
</div>
</div>

<a href="#1"><div style="float: right;margin-top: 120px;">
<img src="https://img.icons8.com/ios-glyphs/50/000000/double-right.png">
</div></a>

</div>

</div>

<br />

<a href="SPOTIFY_URL" style="text-decoration:none;color: #888;font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 17px;"><img src="https://i.imgur.com/KWVRnSS.png" style="width: 20px;"> Listen on Spotify <img src="https://i.imgur.com/KWVRnSS.png" style="width: 20px;"></a>

<br /><br />

<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #333;font-family:helvetica;font-variant:small-caps;font-weight:bold;font-size: 10px;">by killthecake</a>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ It's easy to write a little too much text for this code in the circle thing. Usually, it'll skip down automatically, but if you write the exact amount that it won't, break your own line with <br />.

❖ If you want to add more or take out some songs, you'll have to work with the numbers. I made this little guide on Imgur to show you where everything goes. If you have more questions or hit a snag, leave me a message.

❖ In the code, I ask you to leave that last song code as the LAST one. That's because the "forward" icon is different and it loops back around to the start. Feel free to play with it if you want. Obviously, if you add/remove songs, you'll have to adjust the first two numbers, anyway.

Ctrl+F & Replace:
❖ IMG - image url on every page
❖ URL - url link to a song
❖ SPOTIFY_URL - url link to the spotify playlist, if there is one. if not, you can remove that whole thing.

❖ TITLE - song title/artist
❖ Lyric - self-explanatory

#000 text shadows
#333 credit link text
#888 spotify link text

rgba(255,255,255,0.3) transparent background for each song
rgba(255,255,255,0.7) dividers
rgba(255,255,255,0.9) text

Flat | Top-Level Comments Only

Oooh, snagging this for future use! :D Thank you for sharing!

You're welcome! ♥

Flat | Top-Level Comments Only