ALT#00 Basic Layout Split

ALT#00BNC: Basic Layout Split

CSS

/* Last Update: 04/03/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#111 url('BACKGROUND URL HERE') fixed;
background-size:cover;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
#profile, #mugshot {
background:#000 url('');
border:1px solid #888;
color:#888;
}
h2, h3 {
border-bottom:1px solid #888;
}

/* CSS MEAT */
#mugshot, #profile {
position:fixed;
left:50%;
height:44%;
margin:5px 0;
border-radius:5px;
text-align:center;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#mugshot {
top:1%;
}
#profile {
bottom:1%;
padding:16px;
width:530px;
max-width:90%;
overflow-y:auto;
}
h2, h3 {
margin:4% 5% 2.5% 5%;
}
#profile img {
min-width:50%;
max-width:85%;
}
#credit {
text-decoration:none;
padding:0 4px;
background-color:#800;
color:#ddd;
border-radius:5px;
}

HTML

<img src="IMAGE URL HERE" alt="" id="mugshot"/>

<div id="profile">
<h2>Stats</h2>
<p>
<b>Name:</b> Stat here
<br/><b>Species:</b> Stat here
<br/><b>Age:</b> Stat here
<br/><b>Hair:</b> Stat here
<br/><b>Eyes:</b> Stat here
<br/><b>Height:</b> Stat here
<br/><b>Weight:</b> Stat here
<br/><b>Build:</b> Stat here
<br/><b>Orientation:</b> Stat here
</p>

<h2>About</h2>
<p>
Stuff goes here.
</p>

<h2>OOC</h2>
<li>Old RPC layout available from <a href="http://wix.cera-nore.com/" target="_blank" id="credit" title="CC#00">Mirza</a>
<li>Another bullet</li>
</div>

Roleplay Layouts by Cera Nore

ALT#00BNC: Basic Layout Split

CSS

HTML

Alternates

Basic Layout

Basic Layout Buttons