Cree Code

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Montserrat|Oswald|PT+Sans|Pacifico|Poppins|Ubuntu|Poiret+One|Leckerli+One|Satisfy|Cookie|Rancho');

body
{overflow-x:hidden;
background-image:
radial-gradient(#fff 30%, #92E6FE , #3376BA, #142B5F, #101227);
background-position: bottom right;
background-repeat: repeat;
background-attachment: fixed;
background-color: ;
overflow:hidden;}
::-webkit-scrollbar-thumb:vertical {background-color:#EBD0D5; height:3px; }
::-webkit-scrollbar { height:3px; width:1px; background-color:transparent; }

::selection {
color: #fff;
background: #121212;}

a {
color: #EBD0D5;
text-decoration:underline;
text-transform:regular;
font-family: 'Pacifico', cursive;
font-size:15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

a:hover {color: #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

b {
 color: #fdef44;
 text-decoration: none;
text-transform: uppercase;
 font-family: 'Rancho';
 text-transform:regular;
 font-style:italic;
 font-size:10.5px;
 letter-spacing:2;}

h1 {
  margin-top:1px;
  line-height:25px;
  text-align:center;
  color:#3376BA;
  font-family: 'Satisfy';
  font-size:20px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px dotted #101227;}

h2 {
  padding:5px;
  margin-top:1px;
  margin-bottom:5px;
  color:#3376BA;
  background:transparent;
  border-bottom:1px solid #fff;
  font-size:25px;
  font-family: 'Cookie';
  text-transform:none;
  letter-spacing:1px;
  text-align:right;
  font-weight:900;}

*{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}

#bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

 #credit {
    overflow:hidden;
    position:fixed;
    text-align:justify;
    bottom:0px;
    right:0px;
    height:60px;
    width:60px;
    padding:0px;
    opacity: .8;
    background-image: url('https://i.imgur.com/MH0XSqe.png');
    background-position:top center;
    background-attachment: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

#container {
   position:absolute;
   top:50%;
   margin-top:-300px;
   left:50%;
   margin-left:-300px;
   height:600px;
   width:610px;
   background:#142B5F;
   background-image:url('');
   background-repeat:repeat;
   background-size:100%;}

.mainimg {
   position:absolute;
   width:260px;
   height:576px;
   z-index:10;
   top:10px;
   right:10px;
   background-color: transparent;
   background-image: url('https://i.pinimg.com/564x/a3/45/fb/a345fb50ac03a888d40c61852efe918a.jpg');
   background-position:-100px -10px;
   background-attachment: absolute;
   background-repeat: no-repeat;}

#sidebar1 {
    width:300px;
    left:calc(50% - 650px);
    position:fixed;
    top: 50%;
    transform: translateY(-50%);}

#desc {
   padding:5;
   margin-bottom:10px;
   background:#142B5F;
border: 1px solid #142B5F;
   font-size:10px;
   line-height:10px;
   color: #fff;
   text-transform:none;
   font-family:"Poiret One";}

#title {
   font-weight: bold;
   text-transform:uppercase;
   font-size:25px;
   font-family: "Leckerli One";
   background: url(https://media.giphy.com/media/czZJCwnFP81Tq/giphy.gif) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size:cover;
   background-position:center;
   margin-bottom:0px;
   margin-top:0px;
text-align: center;
   line-height:45px;}

.icon {
   height:130px;
   width:297px;
   z-index:10;
   margin-left:0px;
   border:1px solid #142B5F;
   background-color: transparent;
   background-image: url('https://i.pinimg.com/564x/50/62/c7/5062c7d2922e38ef141a138ef0936ff8.jpg');
   background-position:center right;
   background-attachment: absolute;
   background-repeat: no-repeat;}

#sidebar2 {
    width:250px;}

#links {
   position:fixed;
   text-transform:uppercase;
   font-size:20px;
   top:50%;
   width:250px;
   transform:translateY(-50%);
   left:calc(50% + 315px);
   line-height:45px;}

.link {
   color:#1f1413;
   text-decoration:none;
   font-weight:800;
   font-size:20px;
   text-transform:uppercase;
   font-family:'Oswald', sans-serif;
   transition:all 0.6s ease;}

.link:hover {
   padding-left:20px;}

#boxbg {
   background-color:#fff;
   position: absolute;
   width:300px;
   height:555px;
   left:10px;
   top:10px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:1;}

#box {
   background-color:#142B5F;
   text-transform: regular;
   text-align: left;
   color: #f2f2f2;
   font-size:12px;
   font-family: 'Poiret One';
   position: absolute;
   width:275px;
   height:530px;
   left:12px;
   top:11px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:1;
   z-index:10;}

#history {
   background-color:#142b5f;
   text-transform: regular;
   text-align: left;
   color: #f2f2f2;
   font-size:12px;
   font-family: 'Poiret One';
   position: absolute;
   width:275px;
   height:530px;
   left:12px;
   top:11px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

#abilities {
   background-color:#142b5f;
   text-transform: regular;
   text-align: left;
   color: #f2f2f2;
   font-size:12px;
   font-family: 'Poiret One';
   position: absolute;
   width:275px;
   height:530px;
   left:12px;
   top:11px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

#relationships {
   background-color:#142b5f;
   text-transform: regular;
   text-align: left;
   color: #f2f2f2;
   font-size:12px;
   font-family: 'Poiret One';
   position: absolute;
   width:275px;
   height:530px;
   left:12px;
   top:11px;
   line-height:12px;
   padding:10px;
   margin:1px;
   overflow:auto;
   opacity:0;}

.rel {
    width:250px;
    height:150px;
    margin:20px;
    margin-top:1px;
    margin-bottom:10px;
    float:left;
    margin-left:1px;
    background:#fff;}

.rel img {
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    border:10px solid #fff;
    box-shadow:1px 1px 10px #142b5f;
    margin-top:17px;
    right:10px;}

.wrds {
    position:absolute;
    padding:5;
    margin-left:10px;
    margin-top:8px;
    width:120px;
    height:120px;
    text-transform:none;
    color:#f2f2f2;
    background-color:#142b5f;
    font-size:10px;
    font-weight:900;
    font-family:'Poiret One';}

#blanket1:target #history{
opacity:1;
z-index:100;}

#blanket1:target #box{
opacity:0;
z-index:1;}

#blanket2:target #abilities{
opacity:1;
z-index:100;}

#blanket2:target #box{
opacity:0;
z-index:1;}

#blanket3:target #relationships{
opacity:1;
z-index:100;}

#blanket3:target #box{
opacity:0;
z-index:1;}
</style>

<div id="bitch" oncontextmenu="return false;">
<div id="blanket"><div id="blanket1"><div id="blanket2"><div id="blanket3"><div id="blanket4">
<a href= "https://roleplay.chat/profile.php?user=UFO" target="_blank"><div id= "credit"></div></a>

<div id="sidebar1">
<div id="title">Crescelia Valentine.</div>
<div id="desc">
OOC can go here. <br>
The more you space it out, the larger the box gets!<br>
Kinda magical, am I right? <br>
Try not to go overboard, but at the same time? Don't let it be underwhelming. <br>
La la la la la la la.<br>MOON PRISM POWER, MAAAAAAKE-UP!<br>
*Insert Sailor Moon transformation music here.*
<br>oH NO iT'S thE nEgAveRsE!! DArk KinGDoM aTTaCC.<br>
Wait, wrong universe. Oops.  But this many lines is a nice minimum, don't you think?
</div>
<div class="icon"></div>
</div>

<div id="sidebar2">
<div id="links">
<a href="#blanket1"><div class="link"><img src="https://ui-ex.com/images/moon-transparent-5.png" height="50" title="History"></div></a>
<a href="#blanket2"><div class="link"><img src="https://ui-ex.com/images/moon-transparent-5.png" height="50" title="Abilities/Attacks"></div></a>
<a href="#blanket3"><div class="link"><img src="https://ui-ex.com/images/moon-transparent-5.png" height="50" title="Relationships"></div></a>
<a href="#"><div class="link"><img src="https://ui-ex.com/images/moon-transparent-5.png" height="50" title="Reset"></div></a>
</div>
</div>

<div id= "container">
<div class="mainimg"></div>
<div id="boxbg">
<div id= "box">
<h1>Spotlight, Moonlight.</h1>
<font style=float:left><b>BIRTH NAME: </b> </font> <font style=float:right>Claira Jocelyn Valentine.</font><br>
<font style=float:left><b>FORMERLY:</b> </font> <font style=float:right>Claira Jocelyn McMillen.</font><br>
<font style=float:left><b>NICKNAME(S):</b> </font> <font style=float:right>Clair.</font><br>
<font style=float:left><b>AGE:</b> </font> <font style=float:right>Twenty-Two.</font><br>
<B>ZODIAC:</B> <font style=float:right>Gemini.</font><br>
<B>P.O.B.:</B> <font style=float:right>Virginia Beach, Virginia.</font><br>
<B>RESIDENCE:</B> <font style=float:right>Chattanooga, Tennessee.</font><br>
<B>GENDER:</B> <font style=float:right>Female.</font><br>
<B>SPECIES:</B> <font style=float:right>Demi-Titan.</font><br>
<B>LINEAGE:</B> <font style=float:right>Helios & Saorise McMillen.</font><br>
<B>RACE:</B> <font style=float:right>Caucasian.</font><br>
<B>ETHNICITY:</b> <font style=float:right>Greek & Irish-American.</font><br>
<B>CITIZENSHIP:</B> <font style=float:right>U.S.A.</font><br>
<B>ORIENTATION:</B> <font style=float:right>Demisexual.</font><br>
<B>MARITAL:</B> <font style=float:right>Uninterested; Single.</font><br>
<B>ALIGNMENT:</b> <font style=float:right>Lawful Evil.</font><br>
<B>AFFILIATION:</B> <font style=float:right>Primordials, Titans.</font><br>
<B>COLOR:</b> <font style=float:right>Ginger.</font><br>
<B>EYE COLOR:</b> <font style=float:right>Blue-Grey.</font><br>
<B>SKIN TONE:</B> <font style=float:right>Snowy.</font><br>
<B>COMPLEXION:</b> <font style=float:right>Freckled.</font><br>
<B>HEIGHT:</b> <font style=float:right>5’6”.</font><br>
<B>WEIGHT:</B> <font style=float:right>126 lbs.</font><br>
<B>BLOOD TYPE:</B> <font style=float:right>AB-.</font><br>
<B>SCENT:</B> <font style=float:right>Clean Linen; Shea Butter.</font><br>
<B>HANDEDNESS:</B> <font style=float:right>Ambidextrous (favors left).</font><br>
<B>FACE CLAIM:</B> <font style=float:right>Rose Leslie.</font><br>

<h2>Family Tree.</h2>
<B>Father:</B> <font style=float:right>Helios.</font><br>
<B>Mother:</B> <font style=float:right>Saorise McMillen.</font><br>
<B>Step-Father:</B> <font style=float:right>Josiah Valentine.</font><br>
<B>Step-Sister:</B> <font style=float:right>Crescelia "Cree" Valentine.</font><br>
<B>Cousin(s):</B> <font style=float:right>Cree Valentine; Aaravi Lal.</font><br>

<h2>Island Information.</h2>
<center><font color=lightyellow>"<I>My father said, 'let there be light!' and the Greeks praised him for it. Until they realized somebody was going to have to put in work to keep it shining. How quickly praise turns into bitterness, and bitterness subjugation...</I>"</font>
<br>
<font style=float:left><b>Designation:</b> </font> <font style=float:right>Demi-Titan.</font><br>
<font style=float:left><b>Pantheon:</b> </font> <font style=float:right>Greek Titanomachy.</font><br>
<font style=float:left><b>Deity:</b> </font> <font style=float:right>Helios.</font><br>
<font style=float:left><b>Title(s):</b> </font> <font style=float:right>None Yet.</font><br>
<font style=float:left><b>Role:</b> </font> <font style=float:right>Spy.</font><br>
<font style=float:left><b>Cabin Number:</b> </font> <font style=float:right>Seven [7].</font><br>
<font style=float:left><b>Armament:</b> </font> <font style=float:right>Whip.</font><br>
<font style=float:left><b>Quests Completed:</b> </font> <font style=float:right>0.</font><br>
<font style=float:left><b>Magical Artifacts:</b> </font> <font style=float:right>0.</font>
</div>

<div id="history">
<h1>Nigga, why you trippin'? Get Ya Mood Right.</h1>

</div>

<div id="abilities">
<h1>Shawty Looks Good in the Moonlight.</h1>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
<h2>Inventory.</h2>
<li><b>ability name</b> words go here.</li>
<li><b>ability name</b> words go here.</li>
</div>

<div id="relationships">
<h1>All these Pussy Niggas So Bad Mind.</h1>
<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://data.whicdn.com/images/114063893/superthumb.jpg?t=1398984571"></a>
<div class="wrds">
<div class="t">
<li><b>Name;</b> Usagi Tsukino.</li>
<li><b>Age;</b> Twenty.</li>
<li><b>Location;</b> words words</li>
<li><b>history</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>

<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/3a6054a7e3f2788041a7038db4064990/tumblr_inline_p7he89qg401rm43mm_540.png"></a>
<div class="wrds">
<div class="t">
<li><b>Name;</b> Ami Mizuno.</li>
<li><b>Age;</b> 20.</li>
<li><b>Location;</b> words words</li>
<li><b>History;</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>

<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://pbs.twimg.com/media/DkooD0PW0AA4J7F.jpg"></a>
<div class="wrds">
<div class="t">
<li><b>Name;</b> Rei Hino.</li>
<li><b>Age</b> words words</li>
<li><b>Location;</b> words words</li>
<li><b>History;</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>

<div class="rel">
<a target="_blank" href="URLHERE"><img src="https://66.media.tumblr.com/2d087e8b6b8cb4b2439578ec78722398/tumblr_inline_p7iykpHscm1qk8x8b_250.png"></a>
<div class="wrds">
<div class="t">
<li><b>Name;</b> Minako Aino.</li>
<li><b>Age;</b> 20.</li>
<li><b>Location;</b> words words</li>
<li><b>History;</b> words words</li>
or you can just put a blurb about them here.
</div>
</div>
</div>
</div>

</div>
</div>