Skip to content

Instantly share code, notes, and snippets.

@ikkiteru
Created November 13, 2017 23:49
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 ikkiteru/ba7e77b994f2dd33ece4eb6d36c0a0e7 to your computer and use it in GitHub Desktop.
Save ikkiteru/ba7e77b994f2dd33ece4eb6d36c0a0e7 to your computer and use it in GitHub Desktop.
roleplay
---
delightful : layout gallery
all things pastel
"twinkle"
designed and coded
by lisett
---
reminders:
- do not remove the credit
- comment when using
- do not copy, steal or redistribute this code
and claim it as your own
- do not use as base code or use snippets
you may:
- tweak the layout's colors, images, etc.
---
if you have any other questions, please message me through this link:
http://www.asianfanfics.com/profile/view/664800
<div style="width:800px;margin:auto;">
<div style="width:800px;float:left;margin:50px 0px;">
<div style="width:760px;padding:20px;background-color:#F8F8F8;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;"><strong>twinkle :&nbsp; twitter based roleplay</strong>&nbsp;&nbsp;&mdash;&nbsp; hiring admins! lorem ipsum dolor sit amet.</div>
<div style="font-family:calibri;font-size:10px;text-align:right;color:#333;text-transform:lowercase;line-height:10px;margin-top:-10px;">x</div>
</div>
<div style="width:700px;padding:50px;background-color:#F8F8F8;float:left;margin-top:1px;">
<div style="width:300px;float:left;"><img alt="" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;float:left;height:60px;" />
<div style="width:225px;float:left;margin-left:15px;">
<div style="font-family:arial;font-size:22px;color:#333;line-height:20px;"><strong><em>twinkle.</em></strong></div>
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;"><strong>about.&nbsp;</strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes. auto-height. 4 lines recommended.</div>
</div>
</div>
<div style="width:350px;float:left;margin:30px 0px 0px 50px;">
<div style="height:10px;padding:5px;border-bottom:1px solid #DBDEEA;float:right;margin-left:5px;font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">enter for new</div>
<div style="height:10px;padding:5px;border-bottom:1px solid #DBDEEA;float:right;margin-left:5px;font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">straight</div>
<div style="height:10px;padding:5px;border-bottom:1px solid #DBDEEA;float:right;margin-left:5px;font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">non-au</div>
<div style="height:10px;padding:5px;border-bottom:1px solid #DBDEEA;float:right;margin-left:5px;font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;"><a href="http://url" rel="nofollow" style="color:#333333;">twitter base</a></div>
</div>
</div>
<div style="width:800px;float:left;margin-top:1px;"><img alt="3DSeMJw.png" src="https://i.imgur.com/3DSeMJw.png" style="height:300px;width:800px;float:left;" /></div>
<div style="width:700px;padding:30px 50px;background-color:#F8F8F8;float:left;margin-top:1px;">
<div style="width:360px;margin:auto;">
<p><img alt="large.jpg" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;height:60px;" title="admin" /><img alt="large.jpg" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;height:60px;margin-left:15px;" title="admin" /><img alt="large.jpg" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;height:60px;margin-left:15px;" title="admin" /><img alt="large.jpg" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;height:60px;margin-left:15px;" title="admin" /><img alt="large.jpg" src="https://i.imgur.com/304ouQg.png" style="width:60px;border-radius:100%;height:60px;margin-left:15px;" title="admin" /></p>
</div>
</div>
<div style="width:700px;padding:50px;background-color:#F8F8F8;float:left;margin-top:1px;">
<div style="width:300px;float:left;margin-left:25px;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ rules and guidelines.</em></strong></div>
<div style="width:300px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:320px;height:150px;float:left;overflow:auto;">
<div style="width:300px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong>one.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<p><strong>two.</strong> nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p><strong>three.</strong> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p><strong>four.</strong> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p><strong>five.</strong> Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p><strong>six.</strong> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
</div>
</div>
</div>
</div>
</div>
<div style="width:300px;float:left;margin-left:50px;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ how to join.</em></strong></div>
<div style="width:300px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:320px;height:150px;float:left;overflow:auto;">
<div style="width:300px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong>one.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<p><strong>two.</strong> nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p><strong>three.</strong> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p><strong>four.</strong> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p><strong>five.</strong> Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p><strong>six.</strong> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:700px;padding:50px;background-color:#F8F8F8;float:left;margin-top:1px;">
<div style="width:75px;float:left;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ key</em></strong></div>
<div style="width:75px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:95px;height:150px;float:left;overflow:auto;">
<div style="width:75px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong><span style="background-color:#dbdeea;">&nbsp;admin&nbsp;</span></strong><br />
<em>reserved<br />
<s>taken</s></em><br />
<u>text</u></p>
</div>
</div>
</div>
</div>
</div>
<div style="width:250px;float:left;margin-left:20px;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ masterlist</em></strong></div>
<div style="width:250px;float:left;">
<div style="width:115px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:135px;height:150px;float:left;overflow:auto;">
<div style="width:115px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
</div>
</div>
</div>
</div>
<div style="width:115px;height:150px;float:left;margin-top:5px;overflow:hidden;margin-left:20px;">
<div style="width:135px;height:150px;float:left;overflow:auto;">
<div style="width:115px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
<p><strong>group name.</strong> name, name, name, name, name, name, and name.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:150px;float:left;margin-left:30px;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ wishlist</em></strong></div>
<div style="width:150px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:170px;height:150px;float:left;overflow:auto;">
<div style="width:150px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><strong>name wishes for:</strong> name, name, name, name, name, name, and name.</p>
<p><strong>name wishes for:</strong> name, name, name, name, name, name, and name.</p>
<p><strong>name wishes for:</strong> name, name, name, name, name, name, and name.</p>
<p><strong>name wishes for:</strong> name, name, name, name, name, name, and name.</p>
<p><strong>name wishes for:</strong> name, name, name, name, name, name, and name.</p>
</div>
</div>
</div>
</div>
</div>
<div style="width:150px;float:left;margin-left:25px;">
<div style="font-family:arial;font-size:13px;color:#333;line-height:13px;border-bottom:1px solid #DBDEEA;padding:5px;float:left;"><strong><em>+ couplelist</em></strong></div>
<div style="width:150px;height:150px;float:left;margin-top:5px;overflow:hidden;">
<div style="width:170px;height:150px;float:left;overflow:auto;">
<div style="width:150px;float:left;">
<div style="font-family:calibri;font-size:10px;color:#333;text-transform:lowercase;line-height:10px;">
<p><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;margin-right:5px;" /><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;" /></p>
<p><strong>name x name</strong><br />
lorem ipsum dolor st amet, consectetuer adipiscing.</p>
<p>&nbsp;</p>
<p><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;margin-right:5px;" /><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;" /></p>
<p><strong>name x name</strong><br />
lorem ipsum dolor st amet, consectetuer adipiscing.</p>
<p>&nbsp;</p>
<p><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;margin-right:5px;" /><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;" /></p>
<p><strong>name x name</strong><br />
lorem ipsum dolor st amet, consectetuer adipiscing.</p>
<p>&nbsp;</p>
<p><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;margin-right:5px;" /><img alt="304ouQg.png" src="https://i.imgur.com/304ouQg.png" style="height:50px;width:50px;" /></p>
<p><strong>name x name</strong><br />
lorem ipsum dolor st amet, consectetuer adipiscing.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;float:left;margin-top:10px;">
<div style="font-family:calibri;font-size:8px;color:#999;text-align:center;letter-spacing:1px;text-transform:uppercase;"><a href="https://www.asianfanfics.com/story/view/912018/delightful-layout-gallery-roleplay-layouts-gallery-layout" style="color:#999;">Delightful 2017 : Layout coded by lisett</a></div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment