Tessisamess

Information

Hey guys! You all seemed super stoked for yesterday's timeline HTML page, so today's entry code is a lighter version of it! It's set up largely the same way; it just doesn't have as many features, but you can use it in a regular journal entry with any account type, so the tradeoff is pretty standard, y'know?

There are two versions below, one for inset images and one for full width images! If you aren't going to be using images in your timeline I recommend using the inset images version. Enjoy! ♥

The Coding (inset images)

<lj-raw><div style="width:800px;margin:0 auto;background: linear-gradient(to bottom,#ddd,#ddd 5px)no-repeat center;background-size:5px 100%;display:flex;flex-wrap:wrap;font-family:helvetica,arial,sans-serif;font-size:14px;color:#222;line-height:150%;text-align:justify;"> <!--- START MARKER ---> <div style="width:100%;margin-bottom:70px;text-align:center;color:#fff;"><div style="background:#000;width:130px;margin:0 auto;padding:4px 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-radius:10px/20px;"> START TITLE </div></div> <!--- LEFT EVENT ---> <div class="event" style="background:#fff;padding:25px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);width:41%;margin-bottom:20px;"> <div style="font-style:italic;letter-spacing:2px;font-size:11px;color:#999;"> Month - Year </div> <div style="font-weight:bold;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:#000;"> Event Title </div> Event Info </div> <div class="marker" style="width:51.4%;margin-left:1.3%;font-size:70px;">&bull;</div> <!--- RIGHT EVENT ---> <div class="marker right" style="width:51.6%;margin-right:1%;font-size:70px;text-align:right;">&bull;</div> <div class="event" style="background:#fff;padding:25px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);width:41%;margin-bottom:20px;"> <div style="font-style:italic;letter-spacing:2px;font-size:11px;color:#999;"> Month - Year </div> <div style="font-weight:bold;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:#000;"> Event Title </div> Event Info </div> <!--- END MARKER ---> <div style="width:100%;margin-top:50px;text-align:center;color:#fff;"><div style="background:#000;width:130px;margin:0 auto;padding:4px 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-radius:10px/20px;"> END TITLE </div></div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:800px;margin-top:25px;font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:7px;text-align:right;">&copy; CODE BY TESSISAMESS</a></lj-raw>

The Coding (full width images)

<lj-raw><div style="width:800px;margin:0 auto;background: linear-gradient(to bottom,#ddd,#ddd 5px)no-repeat center;background-size:5px 100%;display:flex;flex-wrap:wrap;font-family:helvetica,arial,sans-serif;font-size:14px;color:#222;line-height:150%;text-align:justify;"> <!--- START MARKER ---> <div style="width:100%;margin-bottom:70px;text-align:center;color:#fff;"><div style="background:#000;width:130px;margin:0 auto;padding:4px 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-radius:10px/20px;"> START TITLE </div></div> <!--- LEFT EVENT ---> <div class="event" style="background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);width:47.3%;margin-bottom:20px;"> <div style="padding:15px;"> <div style="font-style:italic;letter-spacing:2px;font-size:11px;color:#999;"> Month - Year </div> <div style="font-weight:bold;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:#000;"> Event Title </div> </div> <img src="IMGURL" style="width:100%;"> <div style="padding:25px;"> Event Info </div> </div> <div class="clear" style="width:51.4%;margin-left:1.3%;font-size:70px;">&bull;</div> <!--- RIGHT EVENT ---> <div class="clear right" style="width:51.6%;margin-right:1%;font-size:70px;text-align:right;">&bull;</div> <div class="event" style="background:#fff;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);width:47.3%;margin-bottom:20px;"> <div style="padding:15px;"> <div style="font-style:italic;letter-spacing:2px;font-size:11px;color:#999;"> Month - Year </div> <div style="font-weight:bold;text-transform:uppercase;letter-spacing:1px;font-size:18px;color:#000;"> Event Title </div> </div> <img src="IMGURL" style="width:100%;"> <div style="padding:25px;"> Event Info </div> </div> <!--- END MARKER ---> <div style="width:100%;margin-top:50px;text-align:center;color:#fff;"><div style="background:#000;width:130px;margin:0 auto;padding:4px 0;font-size:10px;letter-spacing:2px;text-transform:uppercase;border-radius:10px/20px;"> END TITLE </div></div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;width:800px;margin-top:25px;font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:2px;font-size:7px;text-align:right;">&copy; CODE BY TESSISAMESS</a></lj-raw>

Editing Guide

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

USING IMAGES

<img src="IMGURL" style="width:100%;margin-bottom:10px;"> - Inset images timeline; can go anywhere inside the event
<img src="IMGURL" style="width:100%;"> - Full width images timeline; must go between the section for date/title and the section for the event info

FONTS

helvetica,arial,sans-serif - Overall font

COLORS

#fff

Event background

#ddd

Center divider

#999

Date color

#222

Overall font color

#000

Event titles; start and end marker background

0,0,0

Box shadow on each event

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!