Tessisamess

S	M	T	W	T	F	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Information

Hey guys! Two HTML pages for you today: A cast list/character roster with a lot of style on hover! Depending on your personal preference, either one of these codes would be great for a cast list or a character roster, so I'm displaying them as both so you can get an idea of what I mean!

The maxi version would also be wonderful for locations or other similar game information pages, especially if you inverted the width/height dimensions for landscape view cards!

Enjoy, and I hope you all have a great month! ♥

Coding: Maxi

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Title Here</title>
	<link rel="shortcut icon" href="ICOURL" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">

<style>

/*-- COME CLOSER [MAXI] - TESSISAMESS - 2018 --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL */

::selection{background:#ccc;}
::-moz-selection{background:#ccc;}

body{margin:0;padding:0;background:#333 url(https://i.imgur.com/2zzBySA.jpg)center fixed;background-size:cover;font-family:Open Sans,helvetica,arial,sans-serif;font-size:13px;color:#fff;text-align:center;}

a{color:#fff;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{opacity:0.5;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-weight:normal;margin:0;}

/* NAVIGATION */

nav{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;text-align:right;font-size:11px;letter-spacing:1px;padding:10px 25px 0 25px;}
nav a{display:inline-block;margin-left:15px;}

/* HEADER */

header{height:35vh;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
#header-inner h1{font-size:35px;letter-spacing:2px;}
#header-inner h2{font-size:11px;letter-spacing:5px;}

/* WHOLE CONTAINER */

#container{padding:4vw;background:rgba(0,0,0,0.5);}

#container-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto;}
#container-inner h2{width:100%;text-align:center;letter-spacing:2px;}

.card{width:280px;height:350px;margin:2vw;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;-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;}

.card-inner{padding:3vw;position:relative;z-index:200;}
.bg-mask{position:absolute;left:0;right:0;top:0;bottom:0;-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;}

.card h3{font-size:22px;}
.card h4{font-size:11px;letter-spacing:2px;}
.card h3:after{content:'';display:block;height:2px;background:rgba(255,255,255,0.4);width:5%;margin:5px auto;-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-ms-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out;transition-delay:1s;}

.card-info{font-style:italic;padding-top:700px;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}

.j-link{width:50%;margin:20px auto 0 auto;display:block;background:rgba(0,0,0,0.3);padding:3px;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:10px;letter-spacing:2px;font-style:normal;}

.card:hover{background-size:150% auto!important;}
.card:hover .bg-mask{background:rgba(0,0,0,0.5);}
.card:hover .card-info{padding-top:20px;}
.card:hover h3:after{width:40%;}

/* FOOTER */

footer{padding:5vw;font-size:9px;text-transform:uppercase;letter-spacing:2px;font-family:Oswald,arial black,sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
footer a{opacity:0.7;}

</style>

</head>

<body>

<header>
	<div id="header-inner">
		<h1>TITLEHERE</h1>
		<h2>SUBTITLEHERE</h2>
	</div>
</header>

<section class="card" style="background:url(CHARPIC)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3>CHARNAME</h3>
				<h4>CHARSUB</h4>
			</div>
			<div class="card-info">
				BLURBHERE
				<a class="j-link" href="JOURNALURL">View Journal</a>
			</div>
		</div>
	<div class="bg-mask"></div></section>

</div>
</article>

<footer>
	FOOTERINFO<br>

<a id="credit" href="http://tessisamess.insanejournal.com">CODING BY TESSISAMESS</a>
</footer>

</body>
</html>

Coding: Mini

<style>

/*-- COME CLOSER [MINI] - TESSISAMESS - 2018 --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL */

::selection{background:#ccc;}
::-moz-selection{background:#ccc;}

h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-weight:normal;margin:0;}

/* NAVIGATION */

nav{text-transform:uppercase;font-family:Oswald,arial black,sans-serif;text-align:right;font-size:11px;letter-spacing:1px;padding:10px 25px 0 25px;}
nav a{display:inline-block;margin-left:15px;}

/* HEADER */

/* WHOLE CONTAINER */

#container{padding:4vw 0;background:rgba(0,0,0,0.5);}

#container-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:0 auto;max-width:950px;}
#container-inner h2{width:100%;text-align:left;letter-spacing:2px;}

.card{width:110px;height:110px;margin:2vw;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;-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;}

.card-inner{position:relative;z-index:200;}
.bg-mask{position:absolute;left:0;right:0;top:0;bottom:0;-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;}

.card h3{font-size:11px;}
.card h4{font-size:8px;letter-spacing:1px;}
.card h3:after{content:'';display:block;height:2px;background:rgba(255,255,255,0.4);width:10%;margin:5px auto;-webkit-transition:all 0.7s ease-in-out;-moz-transition:all 0.7s ease-in-out;-ms-transition:all 0.7s ease-in-out;-o-transition:all 0.7s ease-in-out;transition:all 0.7s ease-in-out;transition-delay:1s;}

.j-link{width:80%;margin:400px auto 0 auto;display:block;background:rgba(0,0,0,0.3);padding:3px;text-transform:uppercase;font-family:Oswald,arial black,sans-serif;font-size:8px;letter-spacing:1px;font-style:normal;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}

.card:hover{background-size:130% auto!important;}
.card:hover .bg-mask{background:rgba(0,0,0,0.5);}
.card:hover .j-link{margin-top:10px;}
.card:hover h3:after{width:50%;}

/* FOOTER */

footer{padding:5vw;font-size:9px;text-transform:uppercase;letter-spacing:2px;font-family:Oswald,arial black,sans-serif;text-shadow:1px 1px 1px rgba(0,0,0,0.7);}
footer a{opacity:0.7;}

</style>

</head>

<body>

<header>
	<div id="header-inner">
		<h1>TITLEHERE</h1>
		<h2>SUBTITLEHERE</h2>
	</div>
</header>

<section class="card" style="background:url(CHARPIC)center;background-size:100% auto;">
		<div class="card-inner">
			<div class="titles">
				<h3>CHARNAME</h3>
				<h4>CHARSUB</h4>
			</div>
			<a class="j-link" href="JOURNALURL">View Journal</a>
		</div>
	<div class="bg-mask"></div></section>

</div>
</article>

<footer>
	FOOTERINFO<br>

<a id="credit" href="http://tessisamess.insanejournal.com">CODING BY TESSISAMESS</a>
</footer>

</body>
</html>

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and fill in the following!

Title Here - Page title
ICOURL - Page icon

NAVLINK - Top nav link; you can add as many links as desired, or you can use the subtitle for links instead and delete the nav.
TITLEHERE - Header title
SUBTITLEHERE - Header subtitle

CHARPIC - Background image of each card; you do not need set dimensions but using portrait pictures for Maxi and squares for Mini helps avoid funky positioning.
CHARNAME - Character title
CHARSUB - Character subtitle
BLURBHERE - Character blurb (Maxi only)
JOURNALURL - Link to journal

FOOTERINFO - Optional footer text; delete if unneeded, but leave footer link.

Note: To add a title to sections of the cast list just add <h2>Title</h2> before the start of the characters you want to section off.

Editing Guide

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

FONTS

Open Sans - Page text
Oswald - Heading text

IMAGES

https://i.imgur.com/2zzBySA.jpg - Page background

COLORS

255,255,255 Character name border (semi-transparent rgba value)

#fff Page text and links

#ccc Highlight selection color

#333 Page background

0,0,0 Header/footer text shadow, container background, hover background, journal link background (semi-transparent rgba value)

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!

Tags: codes: cast list, codes: character roster, html page

Profile

Title Here

Navigation

March 2025

Links List

Resources

Tags

Layout By

Come Closer: Cast list/roster