CSS


#profile-container {

}

body {
  background: url(https://i.imgur.com/keu8GnP.jpg); background-position: center; background-size: 100%; background-repeat: no-repeat;
}


/* FONTS */

@font-face{
  font-family: slanted;
  src: url('https://dl.dropboxusercontent.com/s/jirbe811c6wj8z9/Gobold%20Blocky%20Regular.otf');}

@font-face{
  font-family: mavenB;
  src: url('https://dl.dropboxusercontent.com/s/v0fwqhtwl8ok4ab/MavenPro-Bold.ttf');}






/* PROFILE */

#contain{
  position: relative;
  top: 30px;
  margin-left: auto;
  margin-right: auto;
  height: 390px;
  width: 700px;
  border: 0px solid #aaa;
  display: block;}

.main{
  position: absolute;
  top: 5px;
  left: 5px;
  height: 376px;
  width: 688px;
  border: 1px solid #000;
  background-color: #9DA2A3;
  box-shadow: 0 12px 11px -6px rgba(0, 0, 0, 0.9);}

.image{
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  z-index: 9999;
  border: 1px solid #333;
  height: 366px;
  width: 678px;
  background-image: url('https://i.imgur.com/UUCmbgc.jpg?1');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;}

.info{
  position: absolute;
  opacity: 0;
  display: block;
  top: 0px;
  left: 0px;
  height: 346px;
  width: 658px;
  background-color: #D4D4D4;
  border: 10px solid #D4D4D4;
  outline: 1px solid #8C8E91;
  overflow: auto;
  cursor: url('https://dl.dropboxusercontent.com/s/l7rtl3eflq3dutj/01BLK.png'), progress !important;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;}

.image:hover .info{
  opacity: 1;}

.textarea{
  position: absolute;
  top: 1px;
  left: 1px;
  height: 345px;
  width: 656px;
  background-color: #F0F0F0;
  overflow: hidden;}

.title{
  position: absolute;
  display: block;
  height: 46px;
  top: 11px;
  left: 15px;
  font-family: 'slanted';
  font-size: 49.9px;
  letter-spacing: -3px;
  color: #292D33;}

.text{
  position: absolute;
  z-index: 9999;
  top: 80px;
  left: 15px;
  height: 230px;
  width: 390px;
  background-color: #fff;
  border: 10px solid #fff;
  overflow: auto;}

p{
  margin: 1px 0 2px 3px;
  font-family: 'tahoma';
  text-align: justify;
  padding-right: 9px;
  font-size: 11px;
  color: #000;
  line-height: 12px;}






/* TABLE STATS */

.statstable{
  position: absolute;
  top: 15px;
  left: 441px;
  padding-top: 4px;
  padding-bottom: 4px;
  height: 252px;
  width: 200px;}

table.left{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 245px;
  border-collapse: collapse;
  background-color: #fff;}

table, th{
  border: none;}

tr.fill{
  background-color: #F0F0F0;}

span.first{
  font-family: 'mavenB';
  color: #000;
  font-size: 10px;
  text-transform: uppercase;
  padding-left: 2px;}

span.second{
  font-family: 'tahoma';
  color: #999;
  font-size: 11px;
  padding-right: 2px;}






/* GALLERY */

.gallery{
  position: absolute;
  top: 268px;
  left: 434px;}

.gallery img{
  position: relative;
  z-index: 99;
  height: 45px;
  width: 45px;
  margin: 7px 8px 0 6px;
  border: 5px solid #5F6469;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;}

.gallery img:hover{
  border: 5px solid #2C343D;}






/* LINKS */

a,
a:link,
a:visited{
  color: #999;
  text-decoration: none;
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;}

a:hover{
  color: #000;
  cursor: url('https://dl.dropboxusercontent.com/s/6ecqfgauva7whe2/cur_red.png'), progress !important;}






/* SCROLLBAR */

::-webkit-scrollbar{
  progress;
  width: 1px;}

::-webkit-scrollbar-thumb:vertical{
  background-color: #2C343D;
  border-top: 4px solid #fff;
  border-bottom: 4px solid #fff;}

::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-button:start:decrement:hover,
::-webkit-scrollbar-button:end:increment:hover{
  background-color: #666;}





/* CREDIT */

.credit{
  z-index: 0;
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border-color: #fff;
  border-style: dotted;
  border-width: 2px;
  background: #000;
  text-align: center;
  -webkit-transition: all 1s ease;}

.credit p{
  font-size: 10px;
  display: inline-block;
  margin: 2px 0 0 7px;}

.credit:hover{
  background: #fff;
  border-color: #000;}





SOURCE CODE

<div id="contain">
<div class="main">&nbsp;</div>
<div class="image">
<div class="info">
<div class="textarea">
<div class="title">Village of Gheist<span style="color: #292d33;">_/</span></div>
<div class="text">
<p style="text-align: center;">(Make sure to read it all! The rules will be on the bottom.)</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">History</p>
<p style="text-align: left;">The ambience has pulled people, creatures, and a manner of other beings from their worlds into it's own.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">The ambience was nfected by a parasite, of which comes in many forms. Beasts, venom, insects, rot. It spreads like wildfire. No longer able to sustain itself on it's own it began looking. Searching. for suitable beings to counter this&nbsp;parasite that would&nbsp;eventually&nbsp;lead to it's demise without help.</p>
<p style="text-align: left;">It needs life to sustain itself. It needs&nbsp;beings&nbsp;to fight for their own life. . and it's own. It needs you.</p>
<p style="text-align: center;">It&nbsp;chose&nbsp;<em>you.</em></p>
<p style="text-align: center;">&nbsp;</p>
<p>You have a purpose here, wether&nbsp;you want it or not. Everyone has a role. A part to play. To sustain.</p>
<p>&nbsp;</p>
<p>______________________________________________________________</p>
<p>&nbsp;</p>
<p style="text-align: center;"><em>Your&nbsp;</em>start.</p>
<p style="text-align: center;"><span style="text-decoration: underline;">What happens when you are chosen.</span></p>
<p style="text-align: left;">When you are chosen by the ambience, your body will begin to feel warm, feverish. You will feel it's essence envelop your body, and you will slowly lose consciousness. .</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">When you awaken, you will will be in a sick state, with someone tending to you. They will ask you questions. . your name. Where you were from. You will be registered in the papers, and given a small one-room housing, and a supply of the bare neccesities. Anything you had on your person when transferred, will be kept with you, or transferred to your home.&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">Since you have been chosen, you have been marked.</p>
<p style="text-align: left;">The marks come in many shapes, sizes, colors, and patterns, and can appear anywhere on the body.</p>
<p style="text-align: left;">(What the mark is and where, is entirely up to you.)</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">What do you do now? You live. You seek others or find your own way. Work. Sustain yourself. Becase when you sustain yourself, and cultivate. .yousustain the Gheist.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">______________________________________________________________</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: center;"><span style="text-decoration: underline;">NPC LIST</span></p>
<p style="text-align: left;">This is where I will&nbsp;list NPC's that are in rule of whatever townpeice I create for the Village of Gheist. It is to give everyone an idea of what their name is, a short description of what they are like, and a link to a picture. This way, anyone is in 'the know'. And can easily RP without having to ask a billion questions to moderators. This will also give you an idea of what is inside the town of gheist.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span>(For now, the only NPC's will be the caretakers, given that Gheist is a town, there are a LOT of places, and I simply can't make an NPC for ALL of them. Only the seemingly important NPC's that require prominent use at the beginning/throughout the RP will be listed here.&nbsp;</span></p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">1: The caretaker's.</p>
<p style="text-align: left;"><a href="https://i.pinimg.com/564x/cc/1e/2e/cc1e2e64033b1d82de8ad1b15d830e22.jpg" target="_blank">Nark</a>, <a href="https://mfiles.alphacoders.com/620/620437.jpg" target="_blank">Mimi</a>,&nbsp;<a href="https://i.pinimg.com/originals/02/6e/ac/026eac0614814a3cbab21fa9b5206e38.jpg" target="_blank">Nanu</a> and&nbsp;<a href="https://i.pinimg.com/736x/75/b8/eb/75b8eb590d422e07c5cb8322e69eb8fc.jpg" target="_blank">Minu</a></p>
<p style="text-align: left;">Are the four caretakers that tend to the new arrivals. they are the ones that ask questions and make sure&nbsp;newcomers are given what they need&nbsp;in their new life.&nbsp;</p>
<p style="text-align: left;">Each have pink hair, and varying gentle personalities that suits the role of Caretaker.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: center;"><span style="text-decoration: underline;">PLAYER OCCUPATIONS</span></p>
<p style="text-align: left;">From what I said above, making an NPC for each occupation would be very taxing. . that is why, if you want your character to have a certain role, I want you to tell me, and we will discuss it!</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">Any character that stays active will be on this WIX list, telling what they do, and what their place of work is.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: left;">______________________________________________________________</p>
<p style="text-align: left;">_____________________________<span style="text-decoration: underline;">Rules</span>_____________________________</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">Profile</span></p>
<p style="text-align: left;">You MUST have a profile. NOTHING BLANK. If you don't have a picture, describe what your character looks like in your description.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">Children Characters.</span></p>
<p style="text-align: left;">No children characters.</p>
<p style="text-align: left;">An exception is if the RPier in question that wants to emphasize that their character is a mother, and will controll BOTH the parent, and child. However, the usage of said child should be limited.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">You must be 18+ Entering this room is at your own risk of seeing. .the ADULTING STUFF.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">No Godmodding.</span></p>
<p style="text-align: left;">This includes characters that manipulate, or jump through time in any way, shape, or form, god-like figures that can manipulate massive stuff like space, the earth, or whatever.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">Now, if you want a character that HAS those abilities in the room, they will simply "Lose" their ability to manipulate those things upon entering the Gheist.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">RP fights</span>&nbsp;</p>
<p style="text-align: left;">Are alright, and so is&nbsp; death. ONLY if both parties understand, and have discussed it beforehand. I don't want two people arguing because:</p>
<p style="text-align: left;">'You did this, but I did that!' 'No, u!'</p>
<p style="text-align: left;">Discuss it. Then do it.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">Auto-hitting</span>&nbsp;</p>
<p style="text-align: left;">Is a big no-no. Sure, it's okay in tiny spats&nbsp;if it was intended by both parties. Otherwise. . no.&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">Smut.</span></p>
<p style="text-align: left;">Well. . Kinky is okay. Being naked, or touching on another char, getting all lewd, is okay. minor smex; stickin the roddo in the hoocha is&nbsp;a-okay. But if your gonna go honka-donkin for a good hour or two, take it to PM.</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;"><span style="text-decoration: underline;">Have fun!</span></p>
<p style="text-align: left;">I created this room because I was tired of the same tavern, lounge, and bar rooms. Sure, they are close-knit and it's easy to clock the entire group of people in the same place to communicate. .but there is literally anything else you can do in a txt based RP. ANYTHING. :P</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: center;"><span style="text-decoration: underline;">Don't be afraid to ask!</span></p>
<p style="text-align: left;">And please! If you have ANY questions, feel free to ask Lavi Laventhe!</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">Or, if you perhaps have any suggestions to the rules, or any pieces of information that I might be able to add here for everyone to better understand what this RP is, and to transition smoothly, please do so!&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">(Btw, if anyone knows how to get rid of the random black box behind the profile, I would amazingly appreciate it. ;v;/ )</p>
</div>
<div class="statstable">
<table class="left" border="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: left;"><span style="color: #000000; font-family: mavenB;"><span style="font-size: 10px; text-transform: uppercase;">Owner</span></span></td>
<td style="text-align: right;"><span style="color: #999999; font-family: tahoma;">Lavi Laventhe</span></td>
</tr>
<tr class="fill">
<td style="text-align: left;"><span style="color: #000000; font-family: mavenB;"><span style="font-size: 10px; text-transform: uppercase;">Admin#2</span></span></td>
<td style="text-align: right;"><span style="color: #999999; font-family: tahoma;">N/A</span></td>
</tr>
<tr>
<td style="text-align: left;"><span style="color: #000000; font-family: mavenB;"><span style="font-size: 10px; text-transform: uppercase;">Moderator</span></span></td>
<td style="text-align: right;">N/A</td>
</tr>
<tr class="fill">
<td style="text-align: left;"><span style="color: #000000; font-family: mavenB;"><span style="font-size: 10px; text-transform: uppercase;">Moderator</span></span></td>
<td style="text-align: right;"><span style="color: #999999; font-family: tahoma;">N/A</span></td>
</tr>
<tr>
<td style="text-align: left;"><span style="color: #000000; font-family: mavenB;"><span style="font-size: 10px; text-transform: uppercase;">Moderator</span></span></td>
<td style="text-align: right;"><span style="color: #999999; font-family: tahoma;">N/A</span></td>
</tr>
<tr class="fill">
<td style="text-align: left;">Stats</td>
<td style="text-align: right;"><span style="color: #999999; font-family: tahoma;">N/A</span></td>
</tr>
<tr>
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr class="fill">
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr>
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr class="fill">
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr>
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr class="fill">
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
<tr>
<td style="text-align: left;"><span class="first">stats:</span></td>
<td style="text-align: right;"><span class="second">Text here</span></td>
</tr>
</tbody>
</table>
</div>
<div class="gallery"><img src="https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg" alt="" /> <img src="https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg" alt="" /> <img src="https://www.sparklabs.com/forum/styles/comboot/theme/images/default_avatar.jpg" alt="" /></div>
</div>
</div>
</div>
</div>
<div class="credit">
<p><a href="https://rphprofilecodes.tumblr.com/" target="_blank">&spades;</a></p>
</div>