tesscodes | Layout Pack: Fury Road

Information

Hey guys! This month rather than an HTML page post, I've decided to make a layout that includes five in-entry codes that work seamlessly with the layout! Fury Road is an S1 Generator layout with disabled entries on the Recent page, and templates for a bio, playlist, gallery, contact, and relationships. Enjoy! ♥

Layout Coding

FRIENDS_OPT_ITEMS=>20

FRIENDS_WEBSITE<=

<header>
			<span id="titles">
				<h1>MAINTITLE</h1>
				<h2>SUBTITLE</h2>
			</span>
		</header>

<nav>
			<a href="http://journalname.insanejournal.com/">HOME</a>
			<a href="http://journalname.insanejournal.com/profile">PROFILE</a>
			<a href="http://journalname.insanejournal.com/friends">FRIENDS</a>
			<a href="EXTRAURL1">EXTRA1</a>
			<a href="EXTRAURL2">EXTRA2</a>
		</nav>

</article>

<a id="credit" href="http://tessisamess.insanejournal.com/">Layout by <span>Tessisamess</span></a>

<div> </div>
<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<header>
			<span id="titles">
				<h1>MAINTITLE</h1>
				<h2>SUBTITLE</h2>
			</span>
		</header>

</article>

<a id="credit" href="http://tessisamess.insanejournal.com/">Layout by <span>Tessisamess</span></a>

<div> </div>
<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=

<title>Page Title</title>
	<link rel="shortcut icon" href="http://i.imgur.com/YXulNKF.png" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald" rel="stylesheet">
	<meta name="viewport" content="device-width, initial-scale=1.0">
	<meta charset="UTF-8">

<style>
<!--

/*--- FURY ROAD - TESSISAMESS - 2018 ---*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--darkest: #000; /* things */
	--darker: #666; /* date and footer nav */
	--dark: #777; /* info block text */
	--medium: #999; /* page text */
	--lightest: #fff; /* things */
	--accent: #AA1B05; /* things */

--bg-color: #151515;
	--bg-img: url(http://i.imgur.com/8ZhZOf6.jpg)center fixed no-repeat;

--main-font: Roboto Condensed,helvetica,arial,sans-serif;
	--headings: Oswald,arial black,gadget,sans-serif;
	--title-font: Oswald,arial black,gadget,sans-serif;

--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important;
}

/* GENERAL */

::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar{width:5px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--darker);}

::selection{background:var(--accent);color:var(--lightest);}
::-moz-selection{background:var(--accent);color:var(--lightest);}

body{background:var(--bg-color) var(--bg-img);background-size:cover;margin:310px 0 50px 0;padding:0;line-height:1.35;}
body,table,tr,td{text-align:justify;font-family:var(--main-font);font-size:16px;color:var(--medium);}

a:link, a:active, a:visited{color:var(--accent);text-decoration:none;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
a:hover{color:var(--lightest);text-decoration:none;}

h1,h2,h3,h4{padding:0;margin:0;color:var(--accent);margin:0;font-family:var(--headings);text-transform:uppercase;letter-spacing:2px;}

hr{border:none;height:1px;margin:0;padding:0;background:var(--darker);}
blockquote{background:var(--accent);font-family:var(--headings);font-size:14px;text-transform:uppercase;color:var(--darkest);padding:30px;margin:20px 50px;}
ul{list-style:square;margin:0;}
summary{cursor:pointer;}
summary:focus{outline:none;}

.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}

/* HEADER */

#header{visibility:visible;width:850px;position:absolute;top:50px;left:50%;margin-left:-425px;}

header{background:var(--accent);height:200px;display:flex;flex-wrap:wrap;align-items:center;text-align:center;text-transform:uppercase;}

#titles{width:100%;line-height:0;margin:0 20px;}
#titles h1{font-family:var(--title-font);font-size:99px;color:var(--darkest);letter-spacing:10px;margin-left:10px;border-bottom:3px solid rgba(0,0,0,0.2);}
#titles h2{font-family:var(--main-font);font-size:10px;color:var(--lightest);letter-spacing:18px;margin-left:18px;}

nav{display:flex;text-align:center;font-family:var(--headings);text-transform:uppercase;letter-spacing:2px;font-size:16px;background:var(--darkest);padding:1px 0 0 0;}
nav a{width:100%;height:47.5px;line-height:47.5px;}
nav a:hover{background:var(--accent);color:var(--lightest);letter-spacing:4px;}

/* HOME PAGE */

#main{visibility:visible;width:850px;position:absolute;top:50px;left:50%;margin-left:-425px;}

section{margin:30px 0;background:var(--darkest);text-align:center;color:var(--dark);letter-spacing:1px;}
.inner{display:flex;align-items:center;justify-content:center;background:var(--darkest);padding:20px;height:260px;overflow:hidden;}
.inner h3{font-size:24px;}
.inner a{display:block;width:60%;padding:5px 0;font-family:var(--headings);text-transform:uppercase;font-size:17px;border:2px solid var(--accent);margin:10px auto 0 auto;letter-spacing:2px;}
.inner a:hover{letter-spacing:4px;background:var(--accent);color:var(--lightest);}
.right{padding-left:60%;}
.left{padding-right:60%;}

footer{margin:30px 0 50px 0;text-align:center;font-family:var(--headings);color:var(--lightest);text-transform:uppercase;letter-spacing:3px;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
footer b{color:var(--accent);}

/* CREDIT */

#credit{visibility:visible;display:block;position:fixed;bottom:20px;left:20px;text-align:center;font-family:var(--headings);text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--lightest);}
#credit span{display:block;color:var(--accent);letter-spacing:1.5px;}
#credit:hover{bottom:30px;color:var(--accent);}
#credit:hover span{color:var(--lightest);}

/* ENTRIES */

table{width:850px;margin:0 auto;}
.entrybox{visibility:visible;margin-bottom:30px;background:var(--darkest);padding:55px;position:relative;}
.entrybox table{line-height:1.6;}
.entrybox img{max-width:100%;}

.contact{color:#fff;}
.bio, .playlist, .ships{padding:0!important;}

/* ENTRY SUBJECT */

td.caption{padding:0 0 10px 0;line-height:1;text-align:left;color:var(--accent);font-size:29px;font-family:var(--headings);text-transform:uppercase;}

/* DATE */

.date{color:var(--darker);font-size:14px;}
.entrybox td.index{text-align:right;color:transparent;font-size:0;}

/* COMMENT FOOTER */

.comments{font-family:var(--headings);font-size:15px;text-align:right;letter-spacing:2px;text-transform:uppercase;padding:20px 0 0 0;}
.comments a{border:2px solid var(--accent);padding:2px 6px 4px 6px;display:inline-block;margin-left:10px;}
.comments a:hover{letter-spacing:4px;background:var(--accent);color:#var(--darkest);}

/* USERPICS */

.entrybox table table table td{position:absolute;top:0;right:-110px;text-align:center;padding:0;}
.entrybox a.index img{width:80px;height:80px;margin-bottom:10px;border:10px solid var(--darkest);}
.entrybox a.index font{color:var(--accent)!important;font-size:11px;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}

/* PAGE NAVIGATION */

.meta, table table .index{font-family:var(--headings);color:var(--darker);font-size:0;text-transform:uppercase;line-height:1.2;text-align:center;}
table table table{float:right;width:100%;}
table table table .meta a{font-size:22px;margin:0 10px;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
table table table td.meta{padding:0;}

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

/* FOR MOBILE */

@media screen and (max-width:849px){
	#header, #main{width:90vw;margin-left:-45vw;}
	section{font-size:13px;}
	.right{padding-left:50%;}
	.left{padding-right:50%;}
	.inner h3{font-size:20px;}
	.inner a{font-size:12px;}
	table{width:90vw;}
}

@media screen and (max-width:750px){
	#titles h1{font-size:50px;letter-spacing:5px;margin-left:5px;}
	#titles h2{letter-spacing:3px;margin-left:3px;}
}

/*--- DISABLED & HIDDEN ELEMENTS - DO NOT EDIT ---*/

/* ORIGINAL TOP HEADER */ .shadowed{visibility:hidden;position:absolute;top:0;left:0;right:0;height:0;background:transparent;}
/* TOP HEADER CONTENTS */ .shadowed img, tr.caption, .index3, table table table table .meta {display:none;}
/* ALL ORIGINAL TABLE STYLING */ table,tr,td{border:none;background:transparent;padding:0;}
/* INNER-ENTRY */ table table{width:100%;margin:0;}
/* HIDES USERPIC INFO BRACKETS */ .entrybox table table table td[align=center]{color:transparent;text-align:center;font-size:0;}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">

<a href="%%urlread%%">%%messagecount%% COMMENTS</a>
	<a href="%%urlpost%%">ADD COMMENT</a>

</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>10

LASTN_DATE_FORMAT=><span class="date">%%mm%%.%%dd%%.%%yy%%</span>

CALENDAR_WEBSITE<=

<header>
			<span id="titles">
				<h1>MAINTITLE</h1>
				<h2>SUBTITLE</h2>
			</span>
		</header>

</article>

<a id="credit" href="http://tessisamess.insanejournal.com/">Layout by <span>Tessisamess</span></a>

<div> </div>
<=CALENDAR_WEBSITE

FRIENDS_DATE_FORMAT=><span class="date">%%mm%%.%%dd%%.%%yy%%</span>

LASTN_WEBSITE<=

<header>
			<span id="titles">
				<h1>MAINTITLE</h1>
				<h2>SUBTITLE</h2>
			</span>
		</header>

<section class="right" style="background:#222 url(IMG1)center left;background-size:auto 100%;">
			<span class="inner"><span>
				<h3>TITLE1</h3>
				Blurb1
				<a href="INFOURL1">Infolink1</a>
			</span></span>
		</section>

<section class="left" style="background:#222 url(IMG2)center right;background-size:auto 100%;">
			<span class="inner"><span>
				<h3>TITLE2</h3>
				Blurb2
				<a href="INFOURL2">Infolink2</a>
			</span></span>
		</section>

<section class="right" style="background:#222 url(IMG3)center left;background-size:auto 100%;">
			<span class="inner"><span>
				<h3>TITLE3</h3>
				Blurb3
				<a href="INFOURL3">Infolink3</a>
			</span></span>
		</section>

<footer>
			<b>NAME</b> Yourname
			<b>AGE</b> 00
			<b>TIMEZONE</b> ABC
			<b>FANDOM</b> Fandom
			<b>PB</b> PB Name
		</footer>

</article>

<a id="credit" href="http://tessisamess.insanejournal.com/">Layout by <span>Tessisamess</span></a><noembed>

<div> </div>
<=LASTN_WEBSITE

Installation Guide

♡ Make sure you have a website in your profile page.
♡ Go to Basics and choose S1 for your style system, then save.
♡ Go to Look and Feel, choose Generator for all page views, then save.
♡ Go to Custom Options and paste the layout code, then save. Make sure you've done a replace all on the following with your information:

PAGETITLE for your journal title
JOURNALNAME to complete your URL and activate links
http://i.imgur.com/YXulNKF.png for your tab favicon

MAINTITLE for your thing
SUBTITLE for your thing

EXTRAURL1 and EXTRA1 for your first free link
EXTRAURL2 and EXTRA2 for your second free link
*You can add/remove links in this area without the code warping!

IMG1 through IMG3 for your block images
TITLE1 through TITLE3 for your block titles
Blurb1 through Blurb3 for your block blurbs
INFOURL1 through INFOURL3 for your block link URLs
Infolink1 through Infolink3 for your block link titles
*You can add/remove these blocks as needed! Each block has either class="left" or class="right" and these denote which side the CONTENT sits in the block.

Matching Entry Codes

Fury Road comes with five in-entry codes that match the layout and are coded to be used seamlessly without a cut so that you can link to day pages for your character information. Please note that with the base layout itself, the three information blocks on Recent can be repeated as many times as desired, so if you want to use all five of these and have special blocks to link to all of them, you totally can!

Biography Coding

Preview on the layout's day page here! (comments disabled and entry linked in the title)

<lj-raw><div class="bio" style="margin:0 auto;max-width:750px;background:#000;font-family:Roboto Condensed,helvetica,arial,sans-serif;font-size:16px;color:#999;line-height:1.6;padding:50px;">

<div style="width:100%;">
			Namehere
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">NAME</div>

00
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">AGE</div>

Genderhere
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">GENDER</div>

Sexualityhere
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">SEXUALITY</div>

Answer
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">TITLE</div>

Answer
			<div style="border-top:1px solid rgba(255,255,255,0.2);font-size:10px;text-align:right;">TITLE</div>
		</div>

</div><br>

<div style="line-height:0;text-align:center;margin:40px 0;">
		<h4 style="color:#AA1B05;font-size:40px;margin:0;border-bottom:3px solid rgba(255,255,255,0.2);">PERSONALITY</h4>
		<h5 style="font-size:10px;margin:0;letter-spacing:8px;padding-left:8px;color:#fff;">SUBTITLE</h5>
	</div>

Personalityinfo<br><br>

<div style="line-height:0;text-align:center;margin:40px 0;">
		<h4 style="color:#AA1B05;font-size:40px;margin:0;border-bottom:3px solid rgba(255,255,255,0.2);">APPEARANCE</h4>
		<h5 style="font-size:10px;margin:0;letter-spacing:8px;padding-left:8px;color:#fff;">SUBTITLE</h5>
	</div>

Appearanceinfo<br><br>

<div style="line-height:0;text-align:center;margin:40px 0;">
		<h4 style="color:#AA1B05;font-size:40px;margin:0;border-bottom:3px solid rgba(255,255,255,0.2);">ABILITIES & SKILLS</h4>
		<h5 style="font-size:10px;margin:0;letter-spacing:8px;padding-left:8px;color:#fff;">SUBTITLE</h5>
	</div>

<b style="font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#fff;">Skilltitle</b>
	<div style="padding:0 0 0 20px;margin:20px 20px 0 20px;border-left:5px solid #AA1B05;">
		Info
	</div><br><br>

<div style="line-height:0;text-align:center;margin:40px 0;">
		<h4 style="color:#AA1B05;font-size:40px;margin:0;border-bottom:3px solid rgba(255,255,255,0.2);">HISTORY</h4>
		<h5 style="font-size:10px;margin:0;letter-spacing:8px;padding-left:8px;color:#fff;">SUBTITLE</h5>
	</div>

Historyinfo

</div></lj-raw>

Contact Coding

Preview on the layout's day page here!

Playlist Coding

Preview on the layout's day page here! (comments disabled and entry linked in the title)

<lj-raw><div class="playlist" style="margin:0 auto;max-width:750px;background:#000;font-family:Roboto Condensed,helvetica,arial,sans-serif;font-size:11px;color:#999;line-height:1.6;text-transform:uppercase;letter-spacing:2px;padding:50px;">

<div style="background:#666 url(IMGURL)center;background-size:cover;line-height:0!important;text-align:center;margin-right:15px;float:left;"><div style="background:rgba(0,0,0,0.6);height:275px;width:275px;display:flex;align-items:center;justify-content:center;"><span style="width:95%;">

<h4 style="color:#AA1B05;font-size:40px;margin:0;border-bottom:3px solid rgba(255,255,255,0.2);">TITLE</h4>
		<h5 style="color:#fff;font-size:10px;margin:0;letter-spacing:4px;">SUBTITLE</h5>

</span></div></div>

<div style="height:275px;overflow:auto;">

<a href="SONGURL" style="display:block;text-decoration:none;color:#999;border-bottom:1px solid rgba(255,255,255,0.2);padding:7px;">
			Songtitle
			<span style="float:right;">Artist</span>
		</a>

</div>

</div></lj-raw>

CR Chart Coding

Preview on the layout's day page here! (comments disabled and entry linked in the title)

Aesthetics Coding

Preview on the layout's day page here! (comments disabled and entry linked in the title)

Entry Codes Editing Guide

FONTS

Roboto Condensed,helvetica,arial,sans-serif - Overall text

COLORS

#fff Subtitles

#999 Overall text

#AA1B05 Accent color (image borders and title headers, etc.)

#000 Container backgrounds

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!