27th: mix tape

[yanyan]

I am really bad at naming these things, okay. A code inspired by 8tracks.

Characters

Sakura Kinomoto Cardcaptor Sakura

Saruhiko Fushimi K Project

Scheherazade Magi: The Labyrinth of Magic

username username

game game

info

Shinobu Oshino Monogatari Series

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales dui justo, vitae placerat diam fermentum ac. Nullam cursus arcu non mauris hendrerit fringilla. Nam non risus enim. In quis venenatis nulla. Phasellus non libero sapien. Mauris fermentum placerat purus, id mollis neque ornare in. Praesent at risus dapibus, accumsan lectus id, volutpat dui. Nam mauris libero, congue sed sagittis.

MAIN CODE <raw-code><center> <div style="width: 540px; font-family: calibri, sans-serif; color: #454545; text-align: left;"> <!--HEADER START--> <div style="height: 218px; width: 518px; background: url(518px BY 218px IMAGE HERE); padding: 20px; text-align: left;"> <div style="width: 158px; background: rgba(0,0,0,0.8); font: bold 35px calibri, sans-serif; color: #ffffff; padding: 5px; border-radius: 5px;">Text here</div> </div> <!--HEADER END--> <!--START--> <a href="LINK" style="text-decoration: none;"><div style="background: #ffffff; width: 100%; height: 35px; padding: 9px; font-size: 25px; color: #454545; text-shadow: #cccccc 1px 1px 0px;"><b>Character</b> Canon <img src="ICON URL HERE" style="height: 100%; float: right;"></div></a> <!--END--> <!--START--> <a href="LINK" style="text-decoration: none;"><div style="background: #ffffff; width: 100%; height: 35px; padding: 9px; font-size: 25px; color: #454545; text-shadow: #cccccc 1px 1px 0px;"><b>Character</b> Canon <img src="ICON URL HERE" style="height: 100%; float: right;"></div></a> <!--END--> <div style="background: #ffffff; width: 100%; border-top: 1px solid #efefef; padding: 9px; font-size: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales dui justo, vitae placerat diam fermentum ac. Nullam cursus arcu non mauris hendrerit fringilla. Nam non risus enim. In quis venenatis nulla. Phasellus non libero sapien. Mauris fermentum placerat purus, id mollis neque ornare in. Praesent at risus dapibus, accumsan lectus id, volutpat dui. Nam mauris libero, congue sed sagittis.</div> </div> <br/> <small>code by <user name=cawaii></small></center></raw-code>

TO ADD MORE (BLACK) <!--START--> <a href="LINK" style="text-decoration: none;"><div style="background: #ffffff; width: 100%; height: 35px; padding: 9px; font-size: 25px; color: #454545; text-shadow: #cccccc 1px 1px 0px;"><b>Character</b> Canon <img src="ICON URL HERE" style="height: 100%; float: right;"></div></a> <!--END-->

INACTIVE (GRAY) <!--START--> <a href="LINK" style="text-decoration: none;"><div style="background: #ffffff; width: 100%; height: 35px; padding: 9px; font-size: 25px; text-shadow: #efefef 1px 1px 0px; color: #cccccc;"><b>Character</b> Canon <img src="ICON URL HERE" style="height: 100%; opacity: 0.5; float: right;"></div></a> <!--END-->

DETAILED <!--START--> <div style="background: #ffffff; width: 100%; height: 35px; padding: 9px; font-size: 25px; text-shadow: #cccccc 1px 1px 0px;"><b>Character</b> Canon <img src="ICON URL HERE" style="height: 100%; float: right;"></div> <!--LINKS--> <div style="background: #ffffff; width: 100%; height: 14px; padding: 6px 9px; font-size: 12px;"> <div style="width: 30%; height: 100%; float: left;"><b>username</b> <a href="LINK" style="text-decoration: none;"><span style="color: #454545;">username</span></a></div> <div style="width: 50%; height: 100%; float: left;"><b>game</b> <a href="LINK" style="text-decoration: none;"><span style="color: #454545;">game</span></a></div> <div style="width: 20%; height: 100%; text-align: right; float: left;"><a href="LINK" style="text-decoration: none;"><span style="color: #454545;">info</span></a></div> </div> <!--END-->

NOTES
1. If you don't want a header, remove the code in between the HEADER START and HEADER END comments.
2. Main code only comes with a header and two items in the list.
3. Header image should be 518px by 218px.
4. You will have to adjust the width of the black box in the header manually.
5. Edit as you see fit! Let me know if you run into any trouble.

Comments

[blizzardseason]

This was pretty much exactly what I was looking for, thanks! Looks great too.