Skip to content

Instantly share code, notes, and snippets.

@rose-quartz

rose-quartz/CLEAR LIST Secret

Last active February 12, 2017 10:57
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/d690b8ec830e7a865f323e9d64f615a0 to your computer and use it in GitHub Desktop.
Save rose-quartz/d690b8ec830e7a865f323e9d64f615a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CLEAR LIST
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:400px;margin:auto;">
<div style="width:400px;box-sizing:border-box;padding:20px;background-color:#E5E5E5;float:left;">
<div style="width:360px;box-sizing:border-box;float:left;margin:0px 0px 0px 0px;font-family:arial;font-size:15px;letter-spacing:0.5px;"><span style="color:#222222;"><em>room title (list type)</em></span><br><div style="padding:5px;background-color:#90C1C7;float:left;font-size:10px;line-height:10px;letter-spacing:1px;margin:5px 0px 5px 0px;"><span style="color:#fff;">+ subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper. keep it to one line only.</span></div>
<div style="float:left;margin:5px 0px 0px 0px;font-family:arial;font-size:10px;letter-spacing:0.5px;text-align:justify;text-transform:lowercase;line-height:10px;color:#222;width:360px;overflow:hidden;">
<div style="width:380px;overflow:auto;">
<div style="width:360px;">
01. Lorem ipsum dolor sit amet, consectetur adipiscing<br>02. elit. Vestibulum ullamcorper<br>03. lorem quis ante molestie mollis. Vestibulum sit amet mauris commodo, interdum felis lacinia, tincidunt sem. Quisque at ante id enim placerat aliquet rhoncus sit amet dolor.<br>04. Integer in neque viverra, elementum ipsum eu, congue ante. <br>05. Sed dolor est, accumsan ut fringilla non, dignissim et massa. Ut nec cursus quam. <br>06. Pellentesque massa nunc, pharetra eu laoreet ultrices, venenatis quis enim.</div></div></div>
</div>
</div>
<div style="width:400px;line-height:10px;"><center><a href="http://www.roleplayrepublic.com/roleplay/view_desc/19628/rose-quartz-a-layout-gallery-new-layouts-yt-twt-gently-layout-layouts-gallery" style="font-family:arial;font-size:10px;letter-spacing:0.5px;text-decoration:none;color:#222;">designed and coded by rose-quartz</span></center></div>
</div>
</body>
</html>
Raw
CLEAR MAIN
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:689px;margin:auto;">
<div style="width:689px;background-color:#E5E5E5;padding:20px 0px 20px 0px;float:left;text-transform:lowercase;">
<div style="width:649px;float:left;margin:0px 0px 0px 20px;font-family:arial;font-size:15px;letter-spacing:0.5px;"><span style="color:#222222;"><em>roleplay title</em></span><br><div style="padding:5px;background-color:#90C1C7;float:left;font-size:10px;line-height:10px;letter-spacing:1px;margin:5px 0px 5px 0px;"><span style="color:#fff;">+ subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper. keep it to one line only.</span></div>
</div>
<div style="width:649px;float:left;margin:5px 0px 0px 20px;font-family:arial;">
<div style="width:420px;height:270px;border:1px dotted #000000;float:left;">
<img src="http://i.imgur.com/eyOmdET.png" style="width:400px;height:250px;float:left;margin:10px 0px 0px 10px;"/></div>
<div style="width:209px;height:270px;background-color:none;border:1px dotted transparent;float:left;margin:0px 0px 0px 10px;">
<div style="height:130px;width:213px;background-color:none;float:left;font-size:15px;border-bottom:1px dotted #222;letter-spacing:1px;color:#222;"><div style="width:213px;line-height:130px;"><em><center>+ 00 males</center></em></div></div>
<div style="height:130px;width:213px;background-color:none;float:left;margin:10px 0px 0px 0px;font-size:15px;"><div style="width:213px;line-height:130px;letter-spacing:1px;color:#222"><em><center>+ 00 females</center></em></div></div>
</div>
<div style="width:200px;height:250px;background-color:none;float:left;margin:10px 0px 0px 0px;">
<div style="width:200px;float:left;"><center>
<div style="padding:5px;background-color:#90C1C7;font-size:10px;line-height:10px;letter-spacing:1px;"><span style="color:#fff;">+ about the roleplay</span></div></center></div>
<div style="float:left;margin:5px 0px 0px 0px;font-family:arial;font-size:10px;letter-spacing:0.5px;text-align:justify;text-transform:lowercase;line-height:10px;color:#222;height:225px;width:200px;overflow:hidden;">
<div style="width:220px;height:225px;overflow:auto;">
<div style="width:200px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper lorem quis ante molestie mollis. Vestibulum sit amet mauris commodo, interdum felis lacinia, tincidunt sem. Quisque at ante id enim placerat aliquet rhoncus sit amet dolor. Integer in neque viverra, elementum ipsum eu, congue ante. Sed dolor est, accumsan ut fringilla non, dignissim et massa. Ut nec cursus quam. Pellentesque massa nunc, pharetra eu laoreet ultrices, venenatis quis enim. <br><Br>Duis tincidunt egestas lectus a pharetra. Maecenas maximus hendrerit semper. Etiam eget arcu nec eros vehicula malesuada at in velit. Vivamus vel nisi dolor. Sed aliquam, ex hendrerit vulputate congue, erat ligula elementum mi, eget fringilla tortor tellus ut enim.
<br><br>
Integer quis fringilla dui, ac consequat risus. Aenean tempus erat sit amet tincidunt dignissim. Praesent volutpat elit a lobortis cursus. Mauris eget neque nec velit venenatis bibendum. Fusce finibus tincidunt cursus. Integer fringilla mollis congue. Nulla et dictum nunc. Duis elementum id justo et tincidunt. Sed sit amet pulvinar lacus. Vestibulum finibus nec dolor lobortis finibus. Sed at lobortis arcu, eget efficitur justo. Vestibulum nec turpis purus. Duis rutrum ultrices iaculis. Curabitur at nisi neque. Sed euismod, massa sed finibus tempor, arcu sapien mollis dolor, rhoncus fringilla nulla nulla sed magna.</div></div></div>
</div>
<div style="width:435px;height:248px;border:1px dotted #000000;float:left;margin:10px 0px 0px 10px;">
<div style="float:left;margin:10px 0px 0px 10px;">
<img src="http://i.imgur.com/7xkNbMf.png" style="width:415px;height:229px;"/></div></div>
<div style="width:649px;float:left;">
<div style="width:320px;height:300px;background-color:none;float:left;margin:10px 0px 0px 0px;">
<div style="width:155px;height:inherit;background-color:none;float:left;">
<div style="width:155px;height:100px;background-color:none;"><div style="width:155px;height:100px;float:left;">
<img src="http://i.imgur.com/vfvRnwo.png" style="width:155px;height:100px;"></div>
<div style="width:155px;height:100px;background-color:none;float:left;margin:-100px 0px 0px 0px;overflow:hidden;">
<div style="width:175px;height:100px;overflow:auto;float:left;">
<div style="width:155px;">
<div style="float:left;height:80px;width:inherit;"></div>
<div style="width:inherit;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;padding:5px 0px 5px 0px;line-height:10px;float:left;"><center>admin 1 name<br><br>+ fact 1<br>+ fact 2<br>+ fact 3</center></div></div></div>
</div>
</div>
<div style="width:155px;height:100px;background-color:none;"><img src="http://i.imgur.com/vfvRnwo.png" style="width:155px;height:100px;"></div>
<div style="width:155px;height:100px;background-color:none;float:left;margin:-100px 0px 0px 0px;overflow:hidden;">
<div style="width:175px;height:100px;overflow:auto;float:left;">
<div style="width:155px;">
<div style="float:left;height:80px;width:inherit;"></div>
<div style="width:inherit;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;padding:5px 0px 5px 0px;line-height:10px;float:left;"><center>admin 2 name<br><br>+ fact 1<br>+ fact 2<br>+ fact 3</center></div></div></div>
</div>
<div style="width:155px;height:100px;background-color:none;"><img src="http://i.imgur.com/vfvRnwo.png" style="width:155px;height:100px;"></div>
<div style="width:155px;height:100px;background-color:none;float:left;margin:-100px 0px 0px 0px;overflow:hidden;">
<div style="width:175px;height:100px;overflow:auto;float:left;">
<div style="width:155px;">
<div style="float:left;height:80px;width:inherit;"></div>
<div style="width:inherit;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;padding:5px 0px 5px 0px;line-height:10px;float:left;"><center>admin 3 name<br><br>+ fact 1<br>+ fact 2<br>+ fact 3</center></div></div></div>
</div>
</div>
<div style="width:155px;height:inherit;background-color:none;float:left;margin:0px 0px 0px 5px;">
<div style="width:145px;height:90px;background-color:none;overflow:hidden;font-size:10px;letter-spacing:0.5px;line-height:10px;text-align:justify;margin:5px 0px 5px 5px;">
message from the admin. keep it under 9 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum magna sed auctor. Quisque rhoncus tellus nec sem porta porta. Sed eros nisi, consequat a
</div>
<div style="width:145px;height:90px;background-color:none;overflow:hidden;font-size:10px;letter-spacing:0.5px;line-height:10px;text-align:justify;margin:10px 0px 5px 5px;">
message from the admin. keep it under 9 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum magna sed auctor. Quisque rhoncus tellus nec sem porta porta. Sed eros nisi, consequat a</div>
<div style="width:145px;height:90px;background-color:none;overflow:hidden;font-size:10px;letter-spacing:0.5px;line-height:10px;text-align:justify;margin:10px 0px 5px 5px;">
message from the admin. keep it under 9 lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum magna sed auctor. Quisque rhoncus tellus nec sem porta porta. Sed eros nisi, consequat a</div>
</div>
</div>
<div style="width:200px;float:left;margin:0px 0px 0px 5px;">
<div style="width:198px;height:148px;background-color:none;float:left;margin:10px 0px 0px 0px;border:1px dotted #222;">
<img src="http://i.imgur.com/nj6R8m9.png" style="width:178px;height:128px;float:left;margin:10px 0px 0px 10px;">
</div>
<div style="width:200px;height:140px;background-color:#90C1C7;float:left;margin:10px 0px 0px 0px;font-size:10px;letter-spacing:1px;color:#fff;"><div style="height:30px;;display:inline-blocks;padding:5px;line-height:10px;margin:50px 0px;"><center><em>insert<br>three-line<br>quote here</em></center></div></div>
</div>
<div style="width:109px;height:300px;background-color:none;float:left;margin:10px 0px 0px 9px;">
<div style="padding:5px;background-color:#90C1C7;font-size:10px;line-height:10px;letter-spacing:1px;"><center><span style="color:#fff;">+ rules & app</span></center></div>
<div style="width:inherit;height:275px;float:left;margin:5px 0px 0px 0px;text-align:justify;overflow:hidden;font-size:10px;letter-spacing:0.5px;line-height:10px;">
<div style="width:129px;height:275px;overflow:auto;">
<div style="width:109px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum magna sed auctor. Quisque rhoncus tellus nec sem porta porta. Sed eros nisi, consequat a magna eu, consequat elementum eros. Sed eget risus vitae leo pretium blandit. Ut nec diam auctor elit vulputate porttitor a a nibh. Phasellus vel accumsan tortor. Nam euismod tortor libero, vel dignissim quam vulputate ultricies. Fusce fermentum accumsan sodales.
<br><br>
Ut aliquet, dolor sed fringilla condimentum, elit diam pharetra odio, sed mollis elit nisl ut eros. Suspendisse sit amet orci facilisis, lobortis libero vitae, maximus purus. Donec nec lectus nunc. Vivamus eget lacinia metus. Ut vel tortor vitae sapien gravida tempus. Integer ut magna sapien. Maecenas consectetur purus ut felis volutpat, non imperdiet diam commodo. Ut molestie rutrum congue.</div></div>
</div>
</div></div>
<div style="width:649px;height:230px;background-color:none;float:left;margin:10px 0px 0px 0px;">
<div style="width:158.5px;height:230px;background-color:none;float:left;">
<div style="width:inherit;height:158.5px;background-color:none;"><img src="http://i.imgur.com/DMYDh9Y.png" style="height:158.5px;width:158.5px;float:left;"></div>
<div style="width:inherit;height:20px;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;text-align:center;line-height:20px;">newest member</div>
<div style="width:inherit;height:46.5px;background-color:none;font-size:10px;letter-spacing:0.5px;text-align:justify;line-height:10px;float:left;margin:5px 0px 0px 0px;">Keep to four lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum.</div>
</div>
<div style="width:158.5px;height:230px;background-color:none;float:left;margin:0px 0px 0px 5px;"><div style="width:158.5px;height:230px;background-color:none;float:left;">
<div style="width:inherit;height:158.5px;background-color:none;"><img src="http://i.imgur.com/DMYDh9Y.png" style="height:158.5px;width:158.5px;float:left;"></div>
<div style="width:inherit;height:20px;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;text-align:center;line-height:20px;">featured female</div>
<div style="width:inherit;height:46.5px;background-color:none;font-size:10px;letter-spacing:0.5px;text-align:justify;line-height:10px;float:left;margin:5px 0px 0px 0px;">Keep to four lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum.</div>
</div></div>
<div style="width:158.5px;height:230px;background-color:none;float:left;margin:0px 0px 0px 5px;"><div style="width:158.5px;height:230px;background-color:none;float:left;">
<div style="width:inherit;height:158.5px;background-color:none;"><img src="http://i.imgur.com/DMYDh9Y.png" style="height:158.5px;width:158.5px;float:left;"></div>
<div style="width:inherit;height:20px;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;text-align:center;line-height:20px;">featured male</div>
<div style="width:inherit;height:46.5px;background-color:none;font-size:10px;letter-spacing:0.5px;text-align:justify;line-height:10px;float:left;margin:5px 0px 0px 0px;">Keep to four lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum.</div>
</div></div>
<div style="width:158.5px;height:230px;background-color:none;float:left;margin:0px 0px 0px 5px;"><div style="width:158.5px;height:230px;background-color:none;float:left;">
<div style="width:inherit;height:158.5px;background-color:none;"><img src="http://i.imgur.com/DMYDh9Y.png" style="height:158.5px;width:158.5px;float:left;"></div>
<div style="width:inherit;height:20px;background-color:#90C1C7;color:#fff;font-size:10px;letter-spacing:1px;text-align:center;line-height:20px;">member of the week</div>
<div style="width:inherit;height:46.5px;background-color:none;font-size:10px;letter-spacing:0.5px;text-align:justify;line-height:10px;float:left;margin:5px 0px 0px 0px;">Keep to four lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at viverra lacus. Ut volutpat dictum.</div>
</div></div>
</div>
</div>
</div>
<div style="width:689px;line-height:10px;"><center><a href="http://www.roleplayrepublic.com/roleplay/view_desc/19628/rose-quartz-a-layout-gallery-new-layouts-yt-twt-gently-layout-layouts-gallery" style="font-family:arial;font-size:10px;letter-spacing:0.5px;text-decoration:none;color:#222;">designed and coded by rose-quartz</span></center></div>
</div>
</body>
</html>
Raw
CLEAR ROOM
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:400px;margin:auto;">
<div style="width:400px;box-sizing:border-box;padding:20px;background-color:#E5E5E5;float:left;">
<div style="width:360px;box-sizing:border-box;float:left;margin:0px 0px 0px 0px;font-family:arial;font-size:15px;letter-spacing:0.5px;"><span style="color:#222222;"><em>room title (regular type)</em></span><br><div style="padding:5px;background-color:#90C1C7;float:left;font-size:10px;line-height:10px;letter-spacing:1px;margin:5px 0px 5px 0px;"><span style="color:#fff;">+ subtitle lorem ipsum dolor sit amet, consectetur adipiscingelit.</span></div>
<img src="http://i.imgur.com/eyOmdET.png" style="width:360px;border:1px dotted #000000;box-sizing:border-box;padding:10px;">
</div>
</div>
<div style="width:400px;line-height:10px;"><center><a href="http://www.roleplayrepublic.com/roleplay/view_desc/19628/rose-quartz-a-layout-gallery-new-layouts-yt-twt-gently-layout-layouts-gallery" style="font-family:arial;font-size:10px;letter-spacing:0.5px;text-decoration:none;color:#222;">designed and coded by rose-quartz</span></center></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment