Guest Welcome guest!


UNBOUND

Here on Unbound, our plot follows four different timelines, set throughout the canonical history of the Dragon Age. The events following Trespasser, the time of the Inquisition, the rise of the Champion of Kirkwall and the quest of the Warden against the Fifth Blight.

And So is the Golden City blackened
With each step you take in my Hall.
Marvel at perfection, for it is fleeting.
You have brought Sin to Heaven
And doom upon all the world.

-Threnodies 8.13


 
Reply
New Topic
New Poll

 bellwether code
as played by milk

1" posts

group

Charades
CODE
[dohtml] <style>
.milkb { background-image: url('http://www.designbolts.com/wp-content/uploads/2013/02/Texture-Tasty-Grey-Seamless-Pattern-For-Website-Background.jpg'); background-repeat: repeat-y; width: 517px; height: 402px; padding: 10px; }

.milkhead { background-color: white; width: 130px; height: 15px; padding: 20px; border-right: 1px solid #eee; border-bottom: 1px solid #eee;  }
.milkheads { background-color: white; width: 300px; height: 15px; padding: 20px; border-bottom: 1px solid #eee; margin-left: -4px; }
.milkcircle { width: 30px; height: 30px; border-radius: 100%; margin-top: -7px; margin-left: -5px; opacity: .7; }
.milkname { font-family: abel; color: #818181; font-size: 7px; text-transform: uppercase; position: relative; top: -1px; left: 5px; letter-spacing: 1px; }

.milkside { background-color: white; width: 130px; height: 300px; padding: 20px; border-right: 1px solid #eee; margin-top: -9px; left: -150px; position: relative; left: -124px; top: 3px; }
.milkcontent { background-color: #f9f9f9; width: 300px; height: 300px; padding: 20px; margin-left: -4px; margin-top: -6px; }
.milkplot { background-color: white; width: 100%; height: 100%; }
.milktext { height: 70%; font-family: source sans pro; color: #818181; font-size: 12px; padding: 20px; margin-top: -30px; line-height: 150%; text-align: justify; overflow: auto; }
.milktext b { font-family: source sans pro; font-size: 9px; text-transform: uppercase; font-weight: 900; letter-spacing: 1px;  }
.milktext i {  font-family: source sans pro; font-size: 9px; text-transform: uppercase; font-weight: 900; letter-spacing: 1px; }

.milktext::-webkit-scrollbar { width: 11px; height: 11px; background-color: #f9f9f9;}
.milktext::-webkit-scrollbar-thumb { background-color: transparent; }
.milktext::-webkit-scrollbar,
.milktext::-webkit-scrollbar-thumb { border: 5px solid #fff;}

.milkinfo { font-family: abel; color: #818181; font-size: 7px; text-transform: uppercase;  letter-spacing: 1px; margin-top: 2px; }
.milkstats { width: 82px; height: 8px; border: 1px solid #eee; font-family: abel; font-size: 6px; padding: 6px; color: transparent; line-height: 150%; }

.milkheader { width: 100%; padding: 3px; font-family: abel; font-size: 7px; color: white; text-transform: uppercase; letter-spacing: 1px; opacity: .7; text-align: center; display: inline-block; }
.milkheady { margin-left: 5px; width: 80px; height: 1px; opacity: .5; }

.milkdivider { width: 203%; opacity: .3; height: 1px; }

.milkoutput { width: 125px; font-family: abel; color: #ccc; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0px; text-align: left; }
.milkinput { width: 125px; font-family: abel; color: #818181; font-size: 7px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; text-align: right; }

.milkdiamond { transform: rotate(45deg); display: inline-block; overflow: hidden; width: 45px; margin-left: 28px; margin-top: 20px; border: 7px solid #f9f9f9; }
.milkdiamond img { max-width: 100%; vertical-align: bottom; transform: rotate(-45deg) scale(1.4); }
title { background-color: white; padding: 10px; }

.bwcorners { border-radius: 0px; border: 1px solid #eee; padding: 20px; width: 200px; margin-left: -20px; }
.bwnames { display: inline-block; padding: 8px; height: 5px; background-color: #fff; font-family: abel; text-transform: uppercase; letter-spacing: 2px; font-size: 7px; position: relative; top: -35px; left: 15px; color: #818181; }
.bwtext { width: 100%; padding: 5px; font-weight: 200; text-transform: lowercase; margin-top: -32px; margin-left: 0px; margin-bottom: -15px; text-align: justify; line-height: 130%; }
.bwspace { height: 15px; }

#bw_mage .milkdivider, #bw_mage .milkcircle, #bw_mage .milkheader, #bw_mage .milkheady { background-color: #a8c2d6; }
#bw_mage .milktext::-webkit-scrollbar-thumb { background-color: #d7e2eb; }
#bw_mage .tab [type=radio]:checked ~ label { border-bottom: 1px solid #d7e2eb; }
#bw_mage .milkstats { color: #d7e2eb; }
#bw_mage .milktext b, #bw_mage .milktext i, #bw_mage .milkoutput { color: #a8c2d6; }

#bw_rogue .milkdivider, #bw_rogue .milkcircle, #bw_rogue .milkheader, #bw_rogue .milkheady { background-color: #B9A4BE; }
#bw_rogue .milktext::-webkit-scrollbar-thumb { background-color: #b59cbb; }
#bw_rogue .tab [type=radio]:checked ~ label { border-bottom: 1px solid #e3d2e7; }
#bw_rogue .milkstats { color: #e3d2e7; }
#bw_rogue .milktext b, #bw_rogue .milktext i, #bw_rogue .milkoutput { color: #b59cbb; }

#bw_warrior .milkdivider, #bw_warrior .milkcircle, #bw_warrior .milkheader, #bw_warrior .milkheady { background-color: #d37a7a; }
#bw_warrior .milktext::-webkit-scrollbar-thumb { background-color: #f7d8d8; }
#bw_warrior .tab [type=radio]:checked ~ label { border-bottom: 1px solid #f7d8d8; }
#bw_warrior .milkstats { color: #f7d8d8; }
#bw_warrior .milktext b, #bw_warrior .milktext i, #bw_warrior .milkoutput { color: #d37a7a; }

#bw_civilian .milkdivider, #bw_civilian .milkcircle, #bw_civilian .milkheader, #bw_civilian .milkheady { background-color: #E9B88D; }
#bw_civilian .milktext::-webkit-scrollbar-thumb { background-color: #FDE5CF; }
#bw_civilian .tab [type=radio]:checked ~ label { border-bottom: 1px solid #FDE5CF; }
#bw_civilian .milkstats { color: #FDE5CF; }
#bw_civilian .milktext b, #bw_civilian .milktext i, #bw_civilian .milkoutput { color: #E9B88D; }

.tabs { position: relative; clear: both; margin: 35px 0 25px; background: white; }
.tab { float: left; }
.tab label { background: #fff; padding: 10px; margin-left: -1px; position: relative; left: 110px; top: -207px; -webkit-transition: background-color .17s linear; }
.tab [type=radio] { display: none; }
.content {  width: 300px; height: 300px; margin-left: -128px; position: absolute; top: -182px; left: 0; background-color: #f9f9f9; right: 0; bottom: 0; padding: 20px; -webkit-transition: opacity .6s linear; opacity: 0; }
[type=radio]:checked ~ label { border-bottom: 1px solid transparent; z-index: 2; }
[type=radio]:checked ~ label ~ .content { z-index: 1; opacity: 1; }
</style>

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500|Source+Sans+Pro:300,400,600,700,900" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Actor" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<div id="bw_mage">

<center>
<div class="milkb">

<table><tr><td>
<div class="milkhead">

<table><tr><td>

<div class="milkcircle">
<span class="lnr lnr-alarm" style="color: #fff; font-size: 13px; position: relative; left: 9px; top: 8px;"></span>
</div> </td>

<td> <div class="milkname"> tarot card
</div> </td> </tr></table>




</td>

<td>

<div class="milkheads">


</div>

</td></tr> </table>


<table><tr><td>
<div class="milkside">

<table><tr><td> <div style="margin-top: -10px;">

<span class="lnr lnr-chart-bars" style="color: #818181; font-size: 10px;"></span>
<td>
<div class="milkinfo" style="margin-top: -7px;"> character stats lvl. 1</div> </td></tr> </table>

<table><tr><td>

<div class="milkinfo"> com </div> </td>

<td><div class="milkstats">████  </div>
</td></tr>


<tr><td><div class="milkinfo"> con </div> </td>

<td><div class="milkstats">████  </div>
</td></tr>


<tr><td><div class="milkinfo"> cun </div> </td>

<td><div class="milkstats">████ </div>
</td></tr>


<tr><td><div class="milkinfo"> dex </div> </td>

<td><div class="milkstats">████ </div>
</td></tr>


<tr><td><div class="milkinfo"> mag </div> </td>

<td><div class="milkstats">████ </div>
</td></tr>


<tr><td><div class="milkinfo"> per </div> </td>

<td><div class="milkstats">████ </div>
</td></tr>


<tr><td><div class="milkinfo"> str </div> </td>

<td><div class="milkstats"> ████</div>
</td></tr>


<tr><td><div class="milkinfo"> will </div> </td>

<td><div class="milkstats">████  </div>
</td></tr></table>


<div class="milkdiamond">


<img src="http://via.placeholder.com/110x110">

</div>




</div> </td>

<td>

<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1"> <span class="lnr lnr-user" style="color: #818181; font-size: 10px;"></span></label>
     
<div class="content"> <div class="milkplot">

<center>
<div style="padding: 20px; position: relative; top: -10px;">

<table><tr><td>
<div class="milkheady"></div> </td>
<td><div class="milkheader">
basic info </div> </td>
<td><div class="milkheady"></div></td></tr></table> </div> </center>

<div class="milktext">


<table><tr><td>

<div class="milkoutput"> full name: </div> </td>

<td><div class="milkinput"> rick sanchez </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> age: </div> </td>

<td><div class="milkinput"> r u old as balls  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> race: </div> </td>

<td><div class="milkinput"> here </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>



<tr><td><div class="milkoutput"> class: </div> </td>

<td><div class="milkinput"> r u a filthy mage tho</div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>



<tr><td><div class="milkoutput"> specialization(s): </div> </td>

<td><div class="milkinput"> here </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> gender: </div> </td>

<td><div class="milkinput"> here </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> sexual orientation: </div> </td>

<td><div class="milkinput"> here </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> romantic orientation: </div> </td>

<td><div class="milkinput">  here </div>
</td></tr>


<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> myers-briggs type: </div> </td>

<td><div class="milkinput">  optional tbh </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> height: </div> </td>

<td><div class="milkinput">  tol or smol </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>



<tr><td><div class="milkoutput"> weight: </div> </td>

<td><div class="milkinput">  s'not rude ok </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> hometown: </div> </td>

<td><div class="milkinput">  where u from </div></td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> occuptation: </div> </td>

<td><div class="milkinput">  ur job</div>
</td></tr>


<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> relationship status: </div> </td>

<td><div class="milkinput">  u single?  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> partner: </div> </td>

<td><div class="milkinput">  here</div>
</td></tr>



<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td><div class="milkoutput"> next level: </div> </td>

<td><div class="milkinput">  0/1000 exp</div>
</td></tr></table>

     
</div> </div> </div> </div>  
 
 
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">       <label for="tab-2"> <span class="lnr lnr-heart" style="color: #818181; font-size: 10px;"></span> </label>
     
<div class="content"> <div class="milkplot">

<center>
<div style="padding: 20px; position: relative; top: -10px;">

<table><tr><td>
<div class="milkheady"></div> </td>
<td><div class="milkheader">
bw relationships </div></td>
<td><div class="milkheady"></div></td></tr></table> </div> </center>

<div class="milktext">

<i>tarot</i> <br>
bee tee dubs, the div ids are bw_mage, bw_rogue, bw_warrior, and bw_civilian <p>



</div> </div>  </div>   </div>
 
 
 
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">       <label for="tab-3"> <span class="lnr lnr-map-marker" style="color: #818181; font-size: 10px;"></span> </label>
   
<div class="content"> <div class="milkplot">

<center>
<div style="padding: 20px; position: relative; top: -10px;">

<table><tr><td>
<div class="milkheady"></div> </td>
<td><div class="milkheader">
current quest
</div></td>
<td><div class="milkheady"></div></td></tr></table> </div> </center>


<div class="milktext">


<table><tr><td>

<div class="milkoutput"> quest name: </div> </td>

<td><div class="milkinput"> n/a  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td>

<div class="milkoutput"> location: </div> </td>

<td><div class="milkinput"> n/a  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td>

<div class="milkoutput"> squadmate 1: </div> </td>

<td><div class="milkinput"> n/a  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td>

<div class="milkoutput"> squadmate 2: </div> </td>

<td><div class="milkinput"> n/a  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr>


<tr><td>

<div class="milkoutput"> squadmate 3: </div> </td>

<td><div class="milkinput"> n/a  </div>
</td></tr>

<tr><td> <div class="milkdivider"></div></td></tr></table>

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


</div>
</td></tr> </table>


</div> </center> </div>
[/dohtml]
Jul 11 2017, 07:29 PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Reply
New Topic
New Poll