Skip to content

Instantly share code, notes, and snippets.

@rose-quartz
Created December 31, 2016 11:01
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/eff53033467a4b68beb10f27aee676f1 to your computer and use it in GitHub Desktop.
Save rose-quartz/eff53033467a4b68beb10f27aee676f1 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:600px;margin:auto;">
<div style="width:600px;height:450px;background-color:#D8D3D0;">
<div style="width:550px;height:400px;background-color:none;float:left;margin:25px 0px 0px 25px;overflow:hidden;">
<div style="width:550px;height:420px;overflow:auto;">
<div style="height:400px;width:770px;">
<div style="width:200px;height:400px;background-color:#fff;float:left;overflow:hidden;"><img src="http://i.imgur.com/7FeSQsb.jpg" style="width:200px;height:400px;"></div>
<div style="width:330px;height:400px;background-color:#363130;float:left;margin:0px 0px 0px 20px;">
<div style="width:310px;height:380px;background-color:none;float:left;margin:10px 0px 0px 10px;">
<div style="width:310px;height:380px;overflow:hidden;">
<div style="width:330px;height:380px;overflow:auto;">
<div style="width:310px;height:380px;background-color:none;float:left;text-align:center;"><div style="float:left;width:310px;height:20px;background-color:none;margin:180px 0px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:#fff;"><strong>name of roleplay</strong></span></div></div>
<div style="width:310px;background-color:none;float:left;padding:10px 0px 0px 0px;color:#fff;font-family:calibri;font-size:10px;letter-spacing:0.5px;line-height:11px;text-align:justify;">
<div style="width:310px;height:1px;background-color:#fff;float:left;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>about the roleplay</strong></span></div>
<div style="width:310px;float:left;margin:0px 0px 10px 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia. Vivamus risus justo, tincidunt non malesuada nec, molestie faucibus mauris. Aliquam sodales iaculis ex, quis volutpat elit vulputate eu. Nullam et viverra massa.
</div>
<div style="width:310px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>rules</strong></span></div>
<div style="width:310px;float:left;margin:0px 0px 10px 0px">
001. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>002. Pellentesque aliquam lectus at porta accumsan. <br>003. Vestibulum ultrices cursus nisi a fringilla. <br>004. Cras convallis nisi est, imperdiet maximus urna pretium non. <br>005. Cras euismod dolor vel sollicitudin lacinia. <br>006. Vivamus risus justo, tincidunt non malesuada nec, molestie faucibus mauris. <br>007. Aliquam sodales iaculis ex, quis volutpat elit vulputate eu. <br>008. Nullam et viverra massa.
</div>
<div style="width:310px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>application</strong></span></div>
<div style="width:310px;float:left;margin:0px 0px 10px 0px">
Name:<br>Age:<br>Orientation:<br>Position:<br>Other:<br>Other:<br>Password:
</div>
<div style="width:310px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>positions</strong></span></div>
<div style="width:310px;float:left;margin:0px 0px 10px 0px">
Position (open / taken) : Insert description of position here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia.
<br><br>
Position (open / taken) : Insert description of position here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia.
<br><br>Position (open / taken) : Insert description of position here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia.
<br><br>Position (open / taken) : Insert description of position here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia.
<br><br>
</div>
<div style="width:310px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>other information</strong></span></div>
<div style="width:310px;float:left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia. Vivamus risus justo, tincidunt non malesuada nec, molestie faucibus mauris. Aliquam sodales iaculis ex, quis volutpat elit vulputate eu. Nullam et viverra massa.
<div style="width:310px;background-color:#A29D9A;float:left;margin:5px 0px;">
<div style="width:290px;float:left;margin:10px 10px">Insert subsection or extra information here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. </div></div>
<br><br>
Vestibulum vel turpis eget purus hendrerit elementum. In sodales diam quis enim efficitur rhoncus. Suspendisse commodo ut sapien eu tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque porta congue massa, in vehicula metus tristique eget. Donec semper velit vitae tincidunt varius.
<br><br>Phasellus eu lacus non justo pretium maximus in mattis leo. Sed pulvinar venenatis turpis, at faucibus risus bibendum sit amet. Mauris vitae nibh quam. Aenean ligula leo, faucibus at condimentum in, sodales a nibh. Mauris id mauris varius mauris sodales ultrices. Nullam fermentum elementum odio ac posuere. Nam rutrum nibh quis massa mollis, quis elementum purus sagittis.
<div style="width:310px;background-color:#A29D9A;float:left;margin:5px 0px 0px 0px;">
<div style="width:290px;float:left;margin:10px 10px">Insert subsection or extra information here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. </div></div>
</div>
</div></div></div>
</div>
</div>
<div style="width:200px;height:400px;background-color:#363130;float:left;margin:0px 0px 0px 20px;">
<div style="width:180px;height:380px;background-color:none;float:left;margin:10px;font-family:calibri;color:#fff;font-size:10px;letter-spacing:0.5px;line-height:11px;text-align:justify;overflow:hidden;">
<div style="width:200px;height:380px;overflow:auto;">
<div style="width:180px;float:left;">
<div style="width:180px;height:1px;background-color:#fff;float:left;margin:5px 0px 0px 0px;"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>the admins</strong></span></div>
<div style="width:180px;float:left;">
<div style="width:45px;height:45px;background-color:#A29D9A;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#D8D3D0;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#A29D9A;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#D8D3D0;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#D8D3D0;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#A29D9A;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#D8D3D0;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:45px;height:45px;background-color:#A29D9A;float:left;"><img src="" style="width:45px;height:45px;"></div>
<div style="width:180px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>events</strong></span></div>
<div style="width:180px;float:left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia. Vivamus risus justo, tincidunt non malesuada nec, molestie faucibus mauris. Aliquam sodales iaculis ex, quis volutpat elit vulputate eu. Nullam et viverra massa.
<div style="width:180px;background-color:#A29D9A;float:left;margin:5px 0px;">
<div style="width:160px;float:left;margin:10px 10px">Insert subsection or extra information here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. </div></div>
<div style="width:180px;height:1px;background-color:#fff;float:left;margin:10px 0px 0px 0px"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>statistics</strong></span></div>
<div style="width:180px;float:left;">Number of males : 00<br>Number of females : 00<br>Number of members : 00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span style="color:#363130;font-family:calibri;text-transform:uppercase;font-size:9px;letter-spacing:0.5px;">coded by rose-quartz</span>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:500px;margin:auto;">
<div style="width:500px;height:450px;background-color:#D8D3D0;">
<div style="width:550px;height:400px;background-color:none;float:left;margin:25px 0px 0px 25px;overflow:hidden;">
<div style="width:550px;height:420px;overflow:auto;">
<div style="height:400px;width:550px;">
<div style="width:200px;height:400px;background-color:#fff;float:left;overflow:hidden;"><img src="http://i.imgur.com/7FeSQsb.jpg" style="width:200px;height:400px;"></div>
<div style="width:230px;height:400px;background-color:#363130;float:left;margin:0px 0px 0px 20px;">
<div style="width:210px;height:380px;background-color:none;float:left;margin:10px 0px 0px 10px;">
<div style="width:210px;height:380px;overflow:hidden;">
<div style="width:210px;height:380px;overflow:auto;">
<div style="width:210px;background-color:none;float:left;padding:10px 0px 0px 0px;color:#fff;font-family:calibri;font-size:10px;letter-spacing:0.5px;line-height:11px;text-align:justify;">
<div style="width:210px;height:1px;background-color:#fff;float:left;margin:5px 0px 0px 0px"></div>
<div style="height:20px;background-color:#363130;float:left;margin:-10px 0px 0px 0px;padding:0px 5px 0px 0px;line-height:20px;"><span style="font-family:helvetica neue; text-transform:uppercase;"><strong>room name</strong></span></div>
<div style="width:210px;float:left;margin:0px 0px 10px 0px;">
Room description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam lectus at porta accumsan. Vestibulum ultrices cursus nisi a fringilla. Cras convallis nisi est, imperdiet maximus urna pretium non. Cras euismod dolor vel sollicitudin lacinia. Vivamus risus justo, tincidunt non malesuada nec, molestie faucibus mauris. Aliquam sodales iaculis ex, quis volutpat elit vulputate eu. Nullam et viverra massa.
<br><br>
<span style="font-family:helvetica neue; text-transform:uppercase;"><strong>List option.</strong></span><br>Nullam et viverra massa.
<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.<br>Nullam et viverra massa.
</div>
</div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<span style="color:#363130;font-family:calibri;text-transform:uppercase;font-size:9px;letter-spacing:0.5px;">coded by rose-quartz</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment