Tessisamess

Information

Hey guys! I don't think I've ever seen anything like this put up before, though I could just be looking in the wrong places haha. This info hub is all about your ships, pairings, OTPs—whatever you like to call them! All modules after the header are easily rearranged, duplicated, or deleted for ease of customization. Let me know if you like the idea of this and I'll make more in the future with different types of setups and information included! Enjoy! ♥

The Coding

<lj-raw><div style="width:800px;margin:70px auto 5px auto;background:#fff;border:1px solid rgba(0,0,0,0.1);border-top:5px solid #89004F;font-family:century gothic,helvetica,arial,sans-serif;font-size:13px;color:#222;border-radius:40px 40px 0 0;"> <!---HEADER---> <div style="padding:20px;border-bottom:1px solid rgba(0,0,0,0.1);text-align:center;font-size:23px;"> <!---ICONS---> <div style="margin:-70px 0 15px 0;"> <img src="ICON1" style="height:100px;border-radius:100%;background:#fff;padding:5px;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);margin-right:-20px;"> <img src="ICON2" style="height:100px;border-radius:100%;background:#fff;padding:5px;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px 0 rgba(0,0,0,0.1);"> </div> <!---TITLES---> NAME1 <b style="color:#89004F;">&</b> NAME2 <div style="font-size:10px;letter-spacing:5px;"> SUBTITLE </div> </div> <!---QUOTE---> <q style="padding:30px;border-bottom:1px solid rgba(0,0,0,0.1);display:block;text-align:center;font-size:18px;color:#89004F;letter-spacing:1px;"> QUOTE1 </q> <!---PLAYLIST---> <div style="border-bottom:1px solid rgba(0,0,0,0.1);display:flex;"> <div style="border-right:1px solid rgba(0,0,0,0.1);width:350px;"> <div style="background:rgba(0,0,0,0.1) url(MIX_BG)center;background-size:cover;border:20px solid #fff;height:310px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;color:#fff;letter-spacing:2px;text-shadow:1px 1px 1px rgba(0,0,0,0.3);"> ❤️<br>MIX_TITLE </div> </div> <div style="padding:10px 20px 20px 20px;width:429px;height:328px;overflow:auto;"> <a href="SONG_URL" style="text-decoration:none;color:#222;display:flex;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1);"> <b style="width:50%;">Song</b> Artist </a> <a href="PLAYLIST_URL" style="text-decoration:none;text-align:center;display:block;margin:20px 30% 0 30%;background:#89004F;padding:10px;border-radius:20px;font-size:15px;color:#fff;"> FULL PLAYLIST </a> </div> </div> <!---QUOTE---> <q style="padding:30px;border-bottom:1px solid rgba(0,0,0,0.1);display:block;text-align:center;font-size:18px;color:#89004F;letter-spacing:1px;"> QUOTE2 </q> <!---GALLERY---> <div style="padding:20px;-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;-webkit-column-width:auto;-moz-column-width:auto;column-width:auto;"> <img src="GALLERY_IMG" style="display:block;width:100%;margin-bottom:20px;"> <img src="GALLERY_IMG" style="display:block;width:100%;margin-bottom:20px;"> <img src="GALLERY_IMG" style="display:block;width:100%;margin-bottom:20px;"> </div> </div><center style="font-family:century gothic,helvetica,arial,sans-serif;font-size:8px;letter-spacing:3px;"><a href="http://tessisamess.insanejournal.com/" style="color:#bbb;text-decoration:none;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

ICON1 and ICON2 - Header icons
NAME1 and NAME2 - Header names
SUBTITLE - Header subtitle

QUOTE1 and QUOTE2 - Each quote line section

MIX_BG and MIX_TITLE - Playlist cover
SONG_URL, Song, and Artist - Track info; copy/paste as needed
PLAYLIST_URL - Playlist link

GALLERY_IMG - Aesthetics gallery images; copy/paste as needed

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

century gothic,helvetica,arial,sans-serif - Overall font

COLORS

#fff

Container background, playlist link text

#89004F

Top border, title accent color, quote text, playlist link background

rgba(0,0,0,0.1)

All borders

#222

Overall text

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!