bad habits skin app

[dohtml]

<div class="indigo-container">

<div class="indigo-tabs">
<div id="indigo-app-header">
 <div id="indigo-app-head1">
   <div id="indigo-app-gif1" style="background-image: url(square gif here, will resize to fit)"></div>
 </div>
 <div id="indigo-app-name1">first m. last</div>
</div>
<div id="indigo-app-basics">
 <div class="indigo-app-basic-info">membergroup</div>
 <div class="indigo-app-basic-info">age</div>
 <div class="indigo-app-basic-info">occupation</div>
 <div class="indigo-app-basic-info">sexuality</div>
 <div class="indigo-app-basic-info">positive trait</div>
 <div class="indigo-app-basic-info">negative trait</div>
</div>

<div id="indigo-app-tab-bar"></div>

<div class="indigo-tab">
<input type="radio" id="indigo-tab-1" name="indigo-tab-group-1" checked>
<label for="indigo-tab-1">001.</label>
<div class="indigo-content">
<div id="indigo-app-one">
 <h1>basic information</h1>
 <div id="indigo-app-two">
 <b>full name</b>: first middle last
 <br><b>age</b>: age
 <br><b>birthday</b>: month date
 <br><b>occupation</b>: occupation
 <br><b>hometown</b>: hometown here
 <br><b>gender</b>: here
 <br><b>pronouns</b>: here
 <p><b>parents</b>: <blockquote>first last, ##<br>first last, ##</blockquote>
 <br><b>siblings</b>: <blockquote>first last, ##<br>first last, ##</blockquote>
 <br><b>children</b>: <blockquote>remove if not applicable</blockquote>
   <br><b>pets</b>: <blockquote>remove if not applicable</blockquote>
   <br><b>sexual orientation</b>: here
   <br><b>romantic orientation</b>: here
   <br><b>relationship status</b>: here
 <p><b>mbti type</b>: infp, estj etc.
 <br><b>hogwarts house</b>: here
 <br><b>alignment</b>: here
 <br><b>positive traits</b>:<blockquote>at least five here</blockquote>
 <br><b>negative traits</b>:<blockquote>at least five here</blockquote>
   <br><b>likes</b>:<blockquote>at least five here</blockquote>
 <br><b>dislikes</b>:<blockquote>at least five here</blockquote>


</div>
</div>
</div>
</div>


<div class="indigo-tab">
<input type="radio" id="indigo-tab-2" name="indigo-tab-group-1">
<label for="indigo-tab-2">002.</label>
<div class="indigo-content">
<div id="indigo-app-one">
 <h1>about</h1>
 <div id="indigo-app-two">about your character here
</p>
 </div>
</div>

</div>
</div>


<div class="indigo-tab">
<input type="radio" id="indigo-tab-3" name="indigo-tab-group-1">
<label for="indigo-tab-3">003.</label>
<div class="indigo-content">
<div id="indigo-app-one">
 <h1>relationships</h1>
 <div id="indigo-app-two">
   <h2>platonic</h2>
   <p>words go here. this is a mandatory section</p>
       <h2>antagonistic</h2>
   <p>words go here. this is a mandatory section</p>
   <h2>romantic</h2>
   <p>words go here. this is a mandatory section</p>
   <h2>other</h2>
   <p>words go here. this section is optional</p>

 </div>
</div>

</div>
</div>

<div class="indigo-tab">
<input type="radio" id="indigo-tab-4" name="indigo-tab-group-1">
<label for="indigo-tab-4">004.</label>
<div class="indigo-content">
<div id="indigo-app-one">
 <h1>the player</h1>
 <div id="indigo-app-two">
   <b>alias</b>: alias here
   <br><b>age</b>: age here
   <br><b>pronouns</b>: pronouns here
   <br><b>timezone</b>: timezone here
   <br><b>mature threads?</b>: yes/no
   <br><b>triggers</b>: here
   <br><b>contact details</b>: aim, discord, skype etc
   <br><b>other characters</b>:<blockquote>
     <membergroup>first last</membergroup> - ##
     <br><membergroup>first last</membergroup> - ##
   </blockquote>
 </div>
</div>

</div>
</div>
</div>
</div>

<a href="oliviacodes.tumblr.com"><div style="width: 550px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">oliviacodes</div></a>

<style>
   .indigo-container {
       margin: 10px auto;
       height: auto;
       width: auto;
   }
   .indigo-tabs {
       margin: 0px auto;
       position: relative;
       width: 550px;
       height: 450px;
       border: 1px solid #ccc;
   }
   .indigo-tab {
       float: left;
   }
   .indigo-tab label {
       display: block;
       width: 84px;
       height: 20px;
       background: #fefefe;
       border: 1px solid #B1A3C3;
       margin: 0px 8px 0px 0px;
       position: relative;
       left: 130px;
       top: 422px;
       z-index: 1;
       text-align: left;
       padding-left: 10px;
       font-family: poppins;
       color: #B1A3C3;
       font-weight: 600;
       letter-spacing: 1px;
       font-size: 10px;
       line-height: 21px
   }
   .indigo-tab input[type=radio]:checked ~ label {
       background: #B1A3C3;
       z-index: 2;
       color: #fefefe
   }
   .indigo-tab input[type=radio] {
       display: none;
   }
   .indigo-content {
       position: absolute;
       top: 121px;
       left: 121px;
       background: #e0e0e0;
       height: 293px;
       width: 429px;
       opacity: 0;
       -webkit-transition: 0.6s ease;
       -moz-transition: 0.6s ease;
       -ms-transition: 0.6s ease;
       -o-transition: 0.6s ease;
   }
   .indigo-tab input[type=radio]:checked ~ label ~ .indigo-content {
       z-index: 1;
       opacity: 1;
   }
   #indigo-app-header {
       height: 120px;
       width: 550px;
       position: absolute;
       top: 0;
       left: 0;
       background: url(http://badhabitsrp.b1.jcink.com/uploads/badhabitsrp/confectionary.png);
       border-bottom: 1px solid #ccc
   }
   #indigo-app-head1 {
       height: 120px;
       width: 120px;
       border-right: 1px solid #ccc;
       background: #f0f0f0;
       position: absolute
   }
   #indigo-app-gif1 {
       height: 95px;
       width: 95px;
       -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
       -ms-border-radius: 100%;
       -o-border-radius: 100%;
       position: absolute;
       border: 1px solid #ccc;
       background-size: cover;
       background-position: center;
       left: 11.5px;
       top: 11.5px;
   }
   #indigo-app-name1 {
       height: 120px;
       width: 405px;
       position: absolute;
       right: 0;
       line-height: 115px;
       font-family: playfair display;
       text-transform: lowercase;
       color: #B1A3C3;
       font-size: 40px;
       font-style: italic
   }
   #indigo-app-basics {
       height: 309px;
       position: absolute;
       width: 100px;
       background: url(http://badhabitsrp.b1.jcink.com/uploads/badhabitsrp/confectionary.png);
       bottom: 0;
       border-style: solid;
       border-color: #ccc;
       border-width: 0 1px 0 0;
       padding: 10px
   }
   .indigo-app-basic-info {
       width: 98px;
       display: block;
       background-color: #fefefe;
       color: #B1A3C3;
       border: 1px solid #ccc;
       font-family: poppins;
       text-align: center;
       font-size: 9px;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       line-height: 25px;
       margin-bottom: 7px
   }
   #indigo-app-tab-bar {
       height: 35px;
       width: 429px;
       background: #f0f0f0;
       position: absolute;
       bottom: 0;
       right: 0;
       border-top: 1px solid #ccc
   }
   #indigo-app-one {
       height: 213px;
       width: 349px;
       position: absolute;
       background: #fefefe;
       top: 20px;
       left: 20px;
       border: 20px solid #fefefe
   }
   #indigo-app-one h1 {
       height: 25px;
       border-bottom: 1px solid #ccc;
       font-family: playfair display;
       font-style: italic;
       text-align: left;
       line-height: 0px;
       font-weight: 400;
       color: #B1A3C3;
       font-size: 30px
   }
   #indigo-app-two {
       height: 155px;
       width: 342px;
       font-family: poppins;
       position: absolute;
       bottom: 0;
       background: none;
       overflow: auto;
       text-align: justify;
       padding-right: 7px;
       color: #888;
       font-size: 10px;
       line-height: 14px
   }
   #indigo-app-two::-webkit-scrollbar {
       width: 5px
   }
   #indigo-app-two::-webkit-scrollbar-thumb {
       background-color: #fefefe;
       border: 1px solid #B1A3C3
   }
   #indigo-app-two::-webkit-scrollbar-track {
       background-color: #B1A3C3;
       border-style: solid;
       border-width: 0 2px;
       border-color: #fefefe
   }
   #indigo-app-two b {
       color: #B1A3C3;
       text-transform: uppercase;
   }
   #indigo-app-two blockquote {
       background: #e0e0e0;
       padding: 10px;
       border: 1px solid #ccc;
       margin-left: 20px
   }
   #indigo-app-two h2 {
       font-family: playfair display;
       color: #B1A3C3;
       font-style: italic;
       font-size: 20px;
       font-weight: 400;
       line-height: 0px;
       margin-left: 1px;
       border-bottom: 4px solid #fefefe;
       margin-top: 10px;
       text-align: left
   }
   #indigo-app-two p {
       margin-bottom: 15px
   }
</style>

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
[/dohtml]