Skip to content

Instantly share code, notes, and snippets.

@rose-quartz
Created February 19, 2017 02:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rose-quartz/fc088f1b8b5e841671ed38ae08115e4a to your computer and use it in GitHub Desktop.
Save rose-quartz/fc088f1b8b5e841671ed38ae08115e4a to your computer and use it in GitHub Desktop.
<div style="width:400px;margin:auto;">
<div style="width:400px;background-color:#D0DBD8;padding:15px 0px;float:left;">
<div style="width:50px;height:50px;float:left;margin:0px 0px 0px 85px"><img src="https://68.media.tumblr.com/6e9ecc01ba3c94237e43a806f01aa88a/tumblr_ol8872hqmj1vh6vkco5_250.png" style="float:left;height:50px;width:50px;border-radius:25%;"></div>
<div style="width:50px;height:50px;float:left;margin:0px 0px 0px 10px"><img src="https://68.media.tumblr.com/18aa8ee0a761bfd7c48f98c5b9bb5669/tumblr_ol8872hqmj1vh6vkco4_250.png" style="float:left;height:50px;width:50px;border-radius:25%;"></div>
<div style="width:50px;height:50px;float:left;margin:0px 0px 0px 10px;"><img src="https://68.media.tumblr.com/090a79a13619ebecc5d425d869916678/tumblr_ol8872hqmj1vh6vkco1_250.png" style="float:left;height:50px;width:50px;border-radius:25%;"></div>
<div style="width:50px;height:50px;float:left;margin:0px 0px 0px 10px"><img src="https://68.media.tumblr.com/34e528f593ed73ab9fa01c1edc8a51fe/tumblr_ol8872hqmj1vh6vkco3_250.png" style="float:left;height:50px;width:50px;border-radius:25%;"></div>
<div style="width:230px;background-color:none;float:left;margin:10px 0px 0px 85px;font-family:calibri;font-size:8px;letter-spacing:0.5px;line-height:10px;text-transform:uppercase;color:#923C5A;">
<div style="width:150px;height:12px;float:left;border:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">name</div>
<div style="width:80px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;border-top:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">information</div>
<div style="width:150px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;border-left:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">age</div>
<div style="width:80px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">information</div>
<div style="width:150px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;border-left:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">group</div>
<div style="width:80px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">information</div>
<div style="width:150px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;border-left:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">orientation</div>
<div style="width:80px;height:12px;float:left;border-bottom:1px solid #923C5A;border-right:1px solid #923C5A;box-sizing:border-box;padding:0px 0px 0px 5px;">information</div>
<div style="width:inherit;text-align:justify;float:left;margin:5px 0px 0px 0px;height:300px;overflow:hidden;">
<div style="width:250px;height:300px;overflow:auto;">
<div style="width:230px;">
<div style="background-color:#923C5A;color:#fff;width:65px;text-align:center;border-radius:3px;margin:0px 0px 2px 0px;">BACKGROUND</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo, lectus nec sagittis elementum, lectus mauris venenatis orci, vel pulvinar magna purus id lectus. Nullam ac dolor libero. Suspendisse lobortis porttitor risus vitae elementum. Nam commodo porttitor dolor vel placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mattis, nisi commodo finibus fringilla, augue sapien commodo ipsum, a aliquet nisi arcu ut neque. Maecenas non magna velit. Fusce nulla eros, varius vel ullamcorper ut, aliquam et risus.
<div style="background-color:#923C5A;color:#fff;width:60px;text-align:center;border-radius:3px;margin:5px 0px 2px 0px;">personality</div>
Etiam et ultrices erat. Aenean a erat velit. Vivamus ullamcorper nunc ut tempor fermentum. Nullam et elementum justo, in vulputate sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id sapien vel metus varius euismod ut sed magna. Morbi mattis sodales feugiat. Proin condimentum augue id tincidunt tincidunt. Duis facilisis mauris at commodo porta.
<div style="background-color:#923C5A;color:#fff;width:35px;text-align:center;border-radius:3px;margin:5px 0px 2px 0px;">plots</div>
<div style="width:230px;float:left;margin:0px 0px 0px 0px;"><strong>PLOT NAME</strong> - availability - genre - m or f</div>
<div style="width:2px;background-color:#923B5A;float:left;margin:2px 0px 0px 2px;">
<DIV STYLE="WIDTH:220px;background-color:none;float:left;margin:0px 0px 0px 5px;">Etiam et ultrices erat. Aenean a erat velit. Vivamus ullamcorper nunc ut tempor fermentum. Nullam et elementum justo, in vulputate sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id sapien vel metus varius euismod ut sed magna. Morbi mattis sodales feugiat. Proin condimentum augue id tincidunt tincidunt. Duis facilisis mauris at commodo porta.</DIV></div>
<div style="width:230px;float:left;margin:3px 0px 0px 0px;"><strong>PLOT NAME</strong> - availability - genre - m or f</div>
<div style="width:2px;background-color:#923B5A;float:left;margin:2px 0px 0px 2px;">
<DIV STYLE="WIDTH:220px;background-color:none;float:left;margin:0px 0px 0px 5px;">Etiam et ultrices erat. Aenean a erat velit. Vivamus ullamcorper nunc ut tempor fermentum. Nullam et elementum justo, in vulputate sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id sapien vel metus varius euismod ut sed magna. Morbi mattis sodales feugiat. Proin condimentum augue id tincidunt tincidunt. Duis facilisis mauris at commodo porta.</DIV></div>
<div style="width:230px;float:left;margin:3px 0px 0px 0px;"><strong>PLOT NAME</strong> - availability - genre - m or f</div>
<div style="width:2px;background-color:#923B5A;float:left;margin:2px 0px 0px 2px;">
<DIV STYLE="WIDTH:220px;background-color:none;float:left;margin:0px 0px 0px 5px;">Etiam et ultrices erat. Aenean a erat velit. Vivamus ullamcorper nunc ut tempor fermentum. Nullam et elementum justo, in vulputate sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id sapien vel metus varius euismod ut sed magna. Morbi mattis sodales feugiat. Proin condimentum augue id tincidunt tincidunt. Duis facilisis mauris at commodo porta.</DIV></div>
<div style="width:230px;float:left;"><div style="background-color:#923C5A;color:#fff;width:60px;text-align:center;border-radius:3px;margin:5px 0px 2px 0px;">ooc corner</div>
Etiam et ultrices erat. Aenean a erat velit. Vivamus ullamcorper nunc ut tempor fermentum. Nullam et elementum justo, in vulputate sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id sapien vel metus varius euismod ut sed magna. </div>
</div>
</div>
</div>
</div>
</div>
<div style="width:400px;text-align:right;font-family:calibri;font-size:8px;letter-spacing:0.5px;line-height:15px;text-transform:uppercase;color:#923C5A;"><a href="http://www.roleplayrepublic.com/roleplay/view_desc/20134/" style="text-decoration:none;color:#923C5A;">rose-quartz at <strong>#codingproject</strong></a></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment