Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- **//CSS CODE BELOW//**
- ::-webkit-scrollbar-thumb:vertical {background-color:#333;height:15px; }
- ::-webkit-scrollbar { height:15px;width:5px; background-color:#transparent; }
- body {
- background-color: #3B3B3B;
- background-repeat: repeat;
- background-position: center;}
- @font-face {
- font-family: Agency;
- src: url(https://dl.dropbox.com/s/l991xbiemd19pkb/agency-fb_%5Ballfont.net%5D.ttf);
- }
- @font-face {
- font-family: Althea;
- src: url(https://dl.dropbox.com/s/jljkowjsf1w84fd/Althea-Regular.ttf);
- }
- #MainPic {
- background-image:url(http://i.picpar.com/NDdd.png);
- background-size: 100% 100%;
- position: absolute;
- left: 300px;
- top: 200px;
- height: 350px;
- width: 220px;
- z-index: 30;
- transition: 1s ease-in-out;;
- -moz-transition: 1s ease-in-out;;
- -webkit-transition: 1s ease-in-out;
- }
- #MainPic:hover {
- background-image:url(http://i.picpar.com/LEdd.png);
- width: 645px;
- transition: 1s ease-in-out;
- -moz-transition: 1s ease-in-out;;
- -webkit-transition: 1s ease-in-out;
- }
- #SecondPic {
- position: absolute;
- border-radius: 100%;
- height: 70px;
- width: 70px;
- border: 5px solid #3B3B3B;
- left: 520px;
- top: 210px;
- z-index: 4;
- }
- #ThirdPic {
- position: absolute;
- border-radius: 100%;
- height: 70px;
- width: 70px;
- border: 5px solid #3B3B3B;
- left: 865px;
- top: 210px;
- z-index: 4;
- }
- h3 {
- position: absolute;
- left:605px;
- top: 200px;
- font-size: 24px;
- border-top: 1px solid grey;
- border-bottom: 1px solid grey;
- width: 250px;
- z-index: 4;
- text-align: center;
- font-style: italic;
- font-weight: normal;
- color: grey;
- }
- .back1 {
- z-index: 2;
- position: absolute;
- border: 1px solid #9BCFCE;
- background: black;
- width: 650px;
- height: 355px;
- left: 295px;
- top: 197px;
- }
- /* Tabs*/
- .tabs {
- position: relative;
- float: none;
- left: 0px;
- }
- .tab label {
- top: 300px;
- left: 520px;
- float: left;
- height: 11px;
- margin-left: 5px;
- background: #262626;
- border: 1px solid white;
- width: 67px;
- padding: 5px;
- position: relative;
- font-family: Althea;
- text-align: center;
- color: #B4B3B3;
- font-size: 15px;
- z-index: 20;
- line-height: .6;
- -webkit-transition: all .5s linear;
- cursor: url(https://i.imgur.com/SAa1psh.gif), progress !important;
- }
- .tab label:hover {
- background: #B4B3B3;
- color: black;
- -webkit-transition: all .5s linear;
- }
- .tab [type=radio] {
- display: none;
- }
- .content {
- position: absolute;
- top: 328px;
- left: 525px;
- width: 395px;
- height: 200px;
- background: #DFE9E6;
- border: 3px solid #DFE9E6;
- outline: 1px solid #9BCFCE;
- padding: 8px;
- color: #0A3235;
- font-family: tahoma;
- font-size: 13px;
- overflow: auto;
- z-index: 3;
- }
- .Paras {
- margin-top: 25px;
- }
- [type=radio]:checked~label {
- -webkit-transition: all .5s linear;
- }
- [type=radio]:checked~label~.content {
- z-index: 30;
- }
- /* Titles*/
- h1 {
- position: absolute;
- text-align: center;
- font-family: Agency;
- letter-spacing: 1;
- padding:5px;
- z-index: 1;
- color: white;
- top: -10px;
- width: 385px;
- background: black;
- font-size: 15px;
- }
- /* hr */
- hr {
- height: 1px;
- border: none;
- background: #9BCFCE;
- width: 90%;
- }
- /* Selection*/
- ::selection {
- background: #9BCFCE;
- color: #fff;
- }
- /* Table*/
- table,
- th,
- td {
- padding: 5px;
- }
- td:nth-child(odd) {
- color: red;
- text-align: left;
- font-family: courier new;
- font-size: 13px;
- }
- td:nth-child(even) {
- color: #0A3235;
- text-align: right;
- font-family: tahoma;
- font-size: 12px;
- }
- #Ness {
- position: absolute;
- height: 80px;
- width: 80px;
- border: 2px solid green;
- left: 0px;
- }
- #NessBox {
- position: absolute;
- width:300px;
- border-bottom: 1px solid black;
- left: 90px;
- top: 15px;
- }
- h4 {
- text-decoration: underline;
- font-size: 16px;
- letter-spacing: 1;
- font-family: Agency;
- color: #817F7F;
- }
- #Yan {
- position: absolute;
- height: 80px;
- width: 80px;
- border: 2px solid green;
- left: 0px;
- top: 130px;
- }
- #YanBox {
- position: absolute;
- width:300px;
- border-bottom: 1px solid black;
- left: 90px;
- top: 110px;
- }
- #Hero {
- position: absolute;
- height: 80px;
- width: 80px;
- border: 2px solid green;
- left: 0px;
- top: 230px;
- }
- #HeroBox {
- position: absolute;
- width:300px;
- border-bottom: 1px solid black;
- left: 90px;
- top: 210px;
- }
- ==========================================================
- **HTML CODE BELOW//**
- <div id="MainPic"> </div>
- <img id="SecondPic" src="https://pbs.twimg.com/profile_images/1084552076796088325/O6Y2eX6m_400x400.jpg"></img>
- <img id="ThirdPic" src="http://orig02.deviantart.net/cd70/f/2016/152/6/3/63c043b565ffe2625ba339a6a16b4c74-da4nwem.gif"></img>
- <h3>"Since When Were You <br> The One In Control?”</h3>
- <div class="back1">
- <p> </p>
- </div>
- <div class="tabs">
- <div class="tab">
- <div class="tab"><input id="tab-5" name="tab-group-2" type="radio" /> <label for="tab-5">OOC</label>
- <div class="content">
- <h1>OOC</h1>
- <p class="Paras">
- <li>NOT CANON</li>
- <li>This is my Chara's AU i made, it belongs to me</li>
- <li>Im not my char, she may be a dick, but typist is very friendly</li>
- <li>I believe i am decent at T1 fighting, however it is not required to be that refined unless stated otherwise by one of the rp's involved parties</li>
- <li>IC Relationships Only, not OOC</li>
- <li>Smut And Story are both acceptable</li>
- <li>warning - if our chars havent interacted before really and you randomly start up a post that is smut or leading to it, it will not be considered Canon in rooms unless specified otherwise. If our chars have interacted before, or smut happens after a few rp's it will be Canon, unless specified otherwise</li>
- <li>Likewise if you are intending smut, please do not just start with it, have some plot before at least</li>
- <li>IRL > RP</li>
- <li>IC > OOC</li>
- <li>Feel free to approach IC or OOC, but do not spam if i dont respond to your post, i have a life too and may have gotten pulled aside</li>
- <li>Typist is on mobile, so if we are rp'ing and RPC says im offline and i didnt say anything, chances are i either got pulled away for a couple minutes, or the more likely case that my screen just locked or am tabbed, so still continue unless told otherwise when that happens</li>
- </p>
- </div>
- </div>
- <div class="tab"><input id="tab-4" name="tab-group-2" type="radio" /> <label for="tab-4">Associates</label>
- <div class="content">
- <h1>Associates</h1>
- <p class="Paras">
- <img id="Ness" src="https://i.chzbgr.com/full/8343646720/hF6205259/"></img>
- <div id="NessBox"><h4><a href=https://roleplay.chat/profile.php?user=Ness">Ness</a></h4>
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
- <img id="Yan" src="https://orig00.deviantart.net/1619/f/2015/355/2/a/yandere_chan_by_famyuchii-d9kvr3a.png"></img>
- <div id="YanBox"><h4><a href="https://roleplay.chat/profile.php?user=Yan%20Chan"Ness">Yan Chan</a></h4>
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
- <img id="Hero" src="https://i.ytimg.com/vi/FNcTNGmrRnc/hqdefault.jpg"></img>
- <div id="HeroBox"><h4><a href="https://roleplay.chat/profile.php?user=Hero%20of%20Stars">Hero Stars</a></h4>
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
- </p>
- </div>
- </div>
- <div class="tab"><input id="tab-3" name="tab-group-2" type="radio" /> <label for="tab-3">History</label>
- <div class="content">
- <h1><span>Personal History</span></h1>
- <p class="Paras">
- History Here
- </p>
- </div>
- </div>
- <div class="tab"><input id="tab-2" name="tab-group-2" type="radio" /> <label for="tab-2">Abilities</label>
- <div class="content">
- <h1><span>Abilities</span></h1>
- <p class="Paras">
- <li>'Scary Face'</li>
- <li>Extreme Reflexes / Speed</li>
- <li>Increased Durability / Healing</li>
- <li>Extreme Strength</li>
- <li>Weapon Expertise</li>
- <li><a target="_blank" href="https://thumbs.gfycat.com/EvergreenShabbyAustraliancattledog-size_restricted.gif"> Hyper Goners </a> </li>
- <li>Chaos Blasters </li>
- <li>Chaos Sabers</li>
- <li>Shocker Breaker</li>
- <li>Star Blazing</li>
- <li>Varying Soul Energy Magic</li>
- <li>Hatred Flames</li>
- <li>Hate Orbs</li>
- <li>Reality Manipulation</li>
- <li>Hyperdeath Form</li>
- Newly Gained Abilities
- <li> Electricity Manipulation {gained from defeating a being known as Exdeath} </li>
- </p>
- </div>
- </div>
- <div class="tab"><input id="tab-1" checked="checked" name="tab-group-2" type="radio" /> <label for="tab-1">Stats</label></div>
- <div class="content">
- <h1>Stats</h1>
- <p class="Paras">
- <table border="0" cellspacing="0" width="395" height="203">
- <tbody>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Stat</td>
- <td>Here</td>
- </tr>
- </tbody>
- </table>
- </p>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement