divs | last.fm

When was the last time I actually coded something not for my personal use? It's been a hot minute... Anyways, this is a code to recreate the artist profile pages on last.fm, such as Glass Animals, who is currently my favorite band and also my example. I figured this could make a good navigational code or something! I just wanted to code, really.

Glass Animals

ON TOUR

electronic · trip-hop · indie · british

SCROBBLES	LISTENERS
4.4M	338.2K

Oxfordshire quartet Glass Animals are Dave Bayley, Drew MacFarlane, Edmund Irwin-Singer and Joe Seaward. They grew up together from the age of thirteen and started working together when Dave showed Drew some tracks. They self-released a 5 track demo in 2012 which form the basis of the 'Leaflings EP', released via Kaya Kaya Records. It included 'Cocoa Hooves', 'Golden Antlers' and 'Exxus', later included on the 'Black…

code by divs

The code itself should be pretty intuitive since it's simple. I also commented up the editable areas, but if you have any questions, I can try and answer them! Credit is appreciated, since it helps other people that like the code come back and find it for themselves!

<raw-code><div align="center"><div style="width:555px;padding:10px;font:10px Verdana;text-align:justify;color:#555555;"><table style="width:100%;margin-top:-22px;margin-left:-28px;"><tbody><tr><td>

<img src="IMG" style="border-radius:100px;">

</td></tr></tbody></table><table style="width:80%;margin-top:-155px;margin-left:100px;"><tbody><tr><td>

<div style="font:30px Century Gothic;padding-left:45px;line-height:30px!important;letter-spacing:-3px;color:#fff;text-align:justify; background-color: #000;">CHARACTER NAME</div>

<br /><div style="width:100%;padding-left:45px;"><table style="width:92%;margin-left:-10px; margin-top:-12px;color:#fff;font:11px Century Gothic;text-transform:uppercase; background-color: #000;"><tbody><tr><td></td><td style="width:65px">

<div style="background-color:#ff0000;padding:2px; border-radius: 5px;"><div align="center"><a href="#JOURNAL" style="color:#fff">JOURNAL</a></div></div></td><td style="width:500px"><a href="#LINK" style="color:#5cb4ff">link</a> <b>·</b>  <a href="#LINK" style="color:#5cb4ff">link</a> <b>·</b>  <a href="#LINK" style="color:#5cb4ff">link</a> <b>·</b>  <a href="#LINK" style="color:#5cb4ff">link</a>

</tr></tbody></table></div><br><div style="margin-top:-25px;padding:5px;padding-left:45px;overflow:hidden;">

<table style="color:#000;font:12px Arial Black;text-transform:uppercase;"><tbody><tr><td style="font:11px Century Gothic;text-transform:uppercase; color:#555555">SCROBBLES</td><td style="font:11px Century Gothic;text-transform:uppercase; color:#555555">LISTENERS</td>
<tr><td>4.4M</td><td>338.2K</td></tbody></table>

<div style="margin-top:-10px;">

A general text area. You can put whatever you want here, and if it overflows, it doesn't look terrible. Shorter blurbs are more symmetrical, though.

<br></br><div align="right"><div style="font:11px Century Gothic; color:#B0B0B0 ">code by <a href="http://divs.dreamwidth.org/profile" style="color:#B0B0B0 ">divs</a></div></div>
</div></div></td></tr></tbody></tbody></table></div></div>