[dohtml]<center>
<div class="lietome">Mirror Mirror, On The Wall</div>
<div class="mirrormirror">
<div class="iwannasee"><img src="http://placehold.it/230x346" class="ifonlywishes"></div>
<div class="showmewhat"></div>
<div class="ouatcontainer">
<div class="ouattabs">
<div class="ouattab">
<input type="radio" id="ouattab-1" name="ouattab-group-1" checked>
<label for="ouattab-1"> <! Tab One !> </label>
<div class="ouatcontent">
<div class="andallmydreams">Basic Info</div>
<div class="whosthefairest">
<div class="onthewall">Character Name</div>
<div class="couldcometrue">
First M. Last
</div>
<br>
<div class="onthewall">Character Age</div>
<div class="couldcometrue">
Age Letters
</div>
<br>
<div class="onthewall">Character Origin</div>
<div class="couldcometrue">
Fairytale of origin.
</div>
<br>
<div class="onthewall">Face Claim</div>
<div class="couldcometrue">
Name of claim.
</div>
</div>
</div>
</div>
<div class="ouattab">
<input type="radio" id="ouattab-2" name="ouattab-group-1">
<label for="ouattab-2"> <! Tab Two !> </label>
<div class="ouatcontent">
<div class="andallmydreams">Personality & Appearance</div>
<div class="whosthefairest">
<div class="onthewall">Personality</div>
<div class="couldcometrue">
Text here
</div>
<br>
<div class="onthewall">Appearance</div>
<div class="couldcometrue">
Text here
</div>
<br>
</div>
</div>
</div>
<div class="ouattab">
<input type="radio" id="ouattab-3" name="ouattab-group-1">
<label for="ouattab-3"> <! Tab Three !> </label>
<div class="ouatcontent">
<div class="andallmydreams">History & Powers</div>
<div class="whosthefairest">
<div class="couldcometrue">
Text here
</div>
<br>
<div class="onthewall">Powers</div>
<div class="couldcometrue">
Text here
</div>
</div>
</div>
</div>
<div class="ouattab">
<input type="radio" id="ouattab-4" name="ouattab-group-1">
<label for="ouattab-4"> <! Tab Four !> </label>
<div class="ouatcontent">
<div class="andallmydreams">The Writer</div>
<div class="whosthefairest">
<div class="onthewall">Name</div>
<div class="couldcometrue">
Alias
</div>
<br>
<div class="onthewall">Pronouns</div>
<div class="couldcometrue">
He/She/They/Etc
</div>
<br>
<div class="onthewall">Timezone</div>
<div class="couldcometrue">
answer
</div>
<br>
<div class="onthewall">Characters I Play</div>
<div class="couldcometrue">
• Character 1
<br>• Character 2
<br>• Character 3
<br>• Character 4
<br>• Character 5
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="couldbedreams">Who's the fairest of them all?</div>
<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
<div style="font-size: 10px; text-align: center;">made by <a href="http://cttw.jcink.net/index.php?showuser=2236">Little One</a> of <a href="http://cttw.jcink.net/index.php?">CAUTION</a></div>
</center>
<style>
.ouatcontainer {
margin: 10px auto;
height: auto;
width: auto;
position: relative;
}
.ouattabs {
margin: 0px auto;
position: relative;
width: 300px;
height: 300px;
}
.ouattab {
float: left; /* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */
}
/* position your tab labels in ouat - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */
.ouattab label {
display: block; /* this lets you fix the label dimensions */
width: 30px;
height: 30px;
background: url(http://i.imgur.com/x1gPFZL.jpg);
border: 1px solid #9e75b2;
margin: 0px;
position: relative;
left: -100px;
top: 458px;
z-index: 1;
margin-left: 19.4px;
border-radius: 30px;
}
.ouattab input[type=radio]:checked ~ label {
background: #000;
z-index: 2;
border-radius: 30px;
border: 1px #000 solid;
}
.ouattab input[type=radio] {
display: none; /* DON'T EDIT */
}
/* if you want tab transitions they go ouat */
.ouatcontent {
position: absolute;
top: 0px;
bottom: -190px;
left: 160px;
right: -125px;
background: url(http://i.imgur.com/x1gPFZL.jpg);
padding: 10px;
border: 1px solid #000;
overflow: hidden;
}
/* if you want tab transitions they also go ouat */
.ouattab input[type=radio]:checked ~ label ~ .ouatcontent {
z-index: 1;
}
.mirrormirror {
width: 550px;
height: 510px;
position: relative;
padding-top: 10px;
}
.lietome {
height: 60px;
background: #9e75b2;
width: 550px;
color: #fff;
line-height: 60px;
font-size: 40px;
font-family: dancing script;
}
.showmewhat {
background: url(http://i.imgur.com/FBCJfR6.png);
width: 273px;
height: 446px;
position: absolute;
top: 20px;
left: 0px;
}
.iwannasee {
height: 346px;
width: 230px;
position: absolute;
top: 70px;
left: 22px;
}
.ifonlywishes {
border-radius: 300px;
}
.couldbedreams {
height: 60px;
background: #9e75b2;
width: 550px;
color: #fff;
line-height: 60px;
font-size: 40px;
font-family: dancing script;
}
.andallmydreams {
height: 50px;
width: 263px;
font-family: dancing script;
background: #9e75b2;
margin-left: -10px;
margin-top: 20px;
color: #fff;
line-height: 50px;
font-size: 24px;
margin-bottom: 10px;
}
.couldcometrue {
text-align: justify;
padding: 5px 20px;
font-family: calibri;
font-size: 12px;
line-height: 14px;
color: #000;
}
.onthewall {
font-family: impact;
text-align: left;
font-size: 18px;
line-height: 18px;
color: #585858;
}
.whosthefairest {
width: 243px;
height: 388px;
position: absolute;
top: 80px;
left: 0px;
padding: 10px;
overflow: auto;
}
</style>[/dohtml]
CODE |
[dohtml]<center> <div class="lietome">Mirror Mirror, On The Wall</div> <div class="mirrormirror">
<div class="iwannasee"><img src="http://placehold.it/230x346" class="ifonlywishes"></div> <div class="showmewhat"></div>
<div class="ouatcontainer">
<div class="ouattabs">
<div class="ouattab"> <input type="radio" id="ouattab-1" name="ouattab-group-1" checked> <label for="ouattab-1"> <! Tab One !> </label> <div class="ouatcontent">
<div class="andallmydreams">Basic Info</div> <div class="whosthefairest"> <div class="onthewall">Character Name</div> <div class="couldcometrue">
First M. Last
</div> <br>
<div class="onthewall">Character Age</div> <div class="couldcometrue">
Age Letters
</div> <br>
<div class="onthewall">Character Origin</div> <div class="couldcometrue">
Fairytale of origin.
</div> <br>
<div class="onthewall">Face Claim</div> <div class="couldcometrue">
Name of claim.
</div>
</div> </div> </div>
<div class="ouattab"> <input type="radio" id="ouattab-2" name="ouattab-group-1"> <label for="ouattab-2"> <! Tab Two !> </label> <div class="ouatcontent">
<div class="andallmydreams">Personality & Appearance</div>
<div class="whosthefairest"> <div class="onthewall">Personality</div> <div class="couldcometrue">
Text here
</div> <br>
<div class="onthewall">Appearance</div> <div class="couldcometrue">
Text here
</div> <br>
</div> </div> </div>
<div class="ouattab"> <input type="radio" id="ouattab-3" name="ouattab-group-1"> <label for="ouattab-3"> <! Tab Three !> </label> <div class="ouatcontent">
<div class="andallmydreams">History & Powers</div> <div class="whosthefairest"> <div class="couldcometrue">
Text here </div>
<br>
<div class="onthewall">Powers</div> <div class="couldcometrue">
Text here
</div> </div> </div> </div>
<div class="ouattab"> <input type="radio" id="ouattab-4" name="ouattab-group-1"> <label for="ouattab-4"> <! Tab Four !> </label> <div class="ouatcontent">
<div class="andallmydreams">The Writer</div> <div class="whosthefairest"> <div class="onthewall">Name</div> <div class="couldcometrue">
Alias
</div> <br>
<div class="onthewall">Pronouns</div> <div class="couldcometrue">
He/She/They/Etc
</div> <br>
<div class="onthewall">Timezone</div> <div class="couldcometrue">
answer
</div> <br>
<div class="onthewall">Characters I Play</div> <div class="couldcometrue">
• Character 1 <br>• Character 2 <br>• Character 3 <br>• Character 4 <br>• Character 5
</div>
</div> </div> </div>
</div> </div> </div> <div class="couldbedreams">Who's the fairest of them all?</div> <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'> <div style="font-size: 10px; text-align: center;">made by <a href="http://cttw.jcink.net/index.php?showuser=2236">Little One</a> of <a href="http://cttw.jcink.net/index.php?">CAUTION</a></div> </center>
<style> .ouatcontainer { margin: 10px auto; height: auto; width: auto; position: relative; }
.ouattabs { margin: 0px auto; position: relative; width: 300px; height: 300px; }
.ouattab { float: left; /* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */ }
/* position your tab labels in ouat - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */ .ouattab label { display: block; /* this lets you fix the label dimensions */ width: 30px; height: 30px; background: url(http://i.imgur.com/x1gPFZL.jpg); border: 1px solid #9e75b2; margin: 0px; position: relative; left: -100px; top: 458px; z-index: 1; margin-left: 19.4px; border-radius: 30px; }
.ouattab input[type=radio]:checked ~ label { background: #000; z-index: 2; border-radius: 30px; border: 1px #000 solid; }
.ouattab input[type=radio] { display: none; /* DON'T EDIT */ }
/* if you want tab transitions they go ouat */ .ouatcontent { position: absolute; top: 0px; bottom: -190px; left: 160px; right: -125px; background: url(http://i.imgur.com/x1gPFZL.jpg); padding: 10px; border: 1px solid #000; overflow: hidden; }
/* if you want tab transitions they also go ouat */ .ouattab input[type=radio]:checked ~ label ~ .ouatcontent { z-index: 1; }
.mirrormirror { width: 550px; height: 510px; position: relative; padding-top: 10px; } .lietome { height: 60px; background: #9e75b2; width: 550px; color: #fff; line-height: 60px; font-size: 40px; font-family: dancing script; } .showmewhat { background: url(http://i.imgur.com/FBCJfR6.png); width: 273px; height: 446px; position: absolute; top: 20px; left: 0px; } .iwannasee { height: 346px; width: 230px; position: absolute; top: 70px; left: 22px; } .ifonlywishes { border-radius: 300px; } .couldbedreams { height: 60px; background: #9e75b2; width: 550px; color: #fff; line-height: 60px; font-size: 40px; font-family: dancing script; } .andallmydreams { height: 50px; width: 263px; font-family: dancing script; background: #9e75b2; margin-left: -10px; margin-top: 20px; color: #fff; line-height: 50px; font-size: 24px; margin-bottom: 10px; } .couldcometrue { text-align: justify; padding: 5px 20px; font-family: calibri; font-size: 12px; line-height: 14px; color: #000; } .onthewall { font-family: impact; text-align: left; font-size: 18px; line-height: 18px; color: #585858; } .whosthefairest { width: 243px; height: 388px; position: absolute; top: 80px; left: 0px; padding: 10px; overflow: auto; } </style>[/dohtml]
|