Skip to content

Instantly share code, notes, and snippets.

@ikkiteru
Created October 14, 2017 22:26
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/ac1fbc5b829184353863531f56c9fd4f to your computer and use it in GitHub Desktop.
Save ikkiteru/ac1fbc5b829184353863531f56c9fd4f to your computer and use it in GitHub Desktop.
---
delightful : layout gallery
all things pastel
"roses et reines"
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:1014px;margin:auto;">
<div style="width:1014px;background-color:#F8F8F8;margin-left:-16px;float:left;padding:50px 0px;">
<div style="width:900px;margin:auto;">
<div style="width:900px;height:500px;float:left;">
<div style="width:600px;height:500px;float:left;"><img alt="DoTy0yP.png" src="https://i.imgur.com/DoTy0yP.png" style="float:left;" /></div>
<div style="width:900px;height:500px;float:left;overflow:hidden;margin-top:-500px;">
<div style="width:920px;height:500px;float:left;overflow:auto;">
<div style="width:900px;float:left;">
<div style="width:600px;float:left;">
<div style="width:600px;height:500px;float:left;background-color:#F8F8F8;opacity:.8;margin-top:500px;">&nbsp;</div>
<div style="width:560px;height:460px;float:left;margin-top:-500px;opacity:.99;padding:20px;">
<div style="width:70px;height:460px;float:left;margin-right:30px;">
<div style="width:70px;float:left;margin-top:100px;margin-bottom:30px;">
<div style="width:52px;height:10px;padding:5px 8px;border:1px solid #333;float:left;font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;margin-top:5px;text-align:left;"><strong>Open</strong></div>
<div style="width:52px;height:10px;padding:5px 8px;border:1px solid #333;float:left;font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;margin-top:5px;text-align:left;"><a href="http://url" rel="nofollow" style="color:#333333;"><strong>Base</strong></a></div>
</div>
<div style="width:70px;height:230px;float:left;overflow:hidden;">
<div style="width:90px;height:230px;float:left;overflow:auto;">
<div style="width:70px;float:left;"><img alt="" src="https://i.imgur.com/7xjrsaW.jpg?1" style="float:left;height:60px;width:60px;padding:4px;border:1px solid rgb(51,51,51);" title="admin" /><img alt="tumblr_olipxaELJp1w16jjko5_400.png" src="https://68.media.tumblr.com/0ef7766fb7ddaff30c8bf1e7df950d5f/tumblr_olipxaELJp1w16jjko5_400.png" style="float:left;height:60px;width:60px;margin-top:10px;padding:4px;border:1px solid rgb(51,51,51);" title="admin" /><img alt="tumblr_oghh94MpHF1trinsho1_1280.jpg" src="https://68.media.tumblr.com/5510cb65cd76002226de48a285f1b07f/tumblr_oghh94MpHF1trinsho1_1280.jpg" style="float:left;height:60px;width:60px;margin-top:10px;padding:4px;border:1px solid rgb(51,51,51);" title="admin" /><img alt="" src="https://i.imgur.com/7xjrsaW.jpg?1" style="float:left;height:60px;width:60px;padding:4px;border:1px solid rgb(51,51,51);margin-top:10px;" title="admin" /><img alt="tumblr_olipxaELJp1w16jjko5_400.png" src="https://68.media.tumblr.com/0ef7766fb7ddaff30c8bf1e7df950d5f/tumblr_olipxaELJp1w16jjko5_400.png" style="float:left;height:60px;width:60px;margin-top:10px;padding:4px;border:1px solid rgb(51,51,51);" title="admin" /></div>
</div>
</div>
<div style="width:52px;height:10px;padding:5px 8px;border:1px solid #333;float:left;font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;margin-top:5px;text-align:center;"><strong>Admins</strong></div>
</div>
<div style="width:400px;float:left;">
<div style="width:400px;float:left;margin-bottom:20px;">
<div style="width:400px;height:20px;float:left;">
<div style="width:60px;height:9px;float:left;padding:5px;border-bottom:1px solid #333;margin-right:5px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:center;"><strong>Update</strong></div>
</div>
<div style="width:315px;height:9px;float:left;padding:5px;border-bottom:1px solid #333;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;"><strong>Oct 14 : Lorem ipsum dolor sit amet, consectetuer</strong></div>
</div>
</div>
<div style="width:400px;height:20px;float:left;margin-top:5px;">
<div style="width:60px;height:9px;float:left;padding:5px;border-bottom:1px solid #333;margin-right:5px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:center;"><strong>Event</strong></div>
</div>
<div style="width:315px;height:9px;float:left;padding:5px;border-bottom:1px solid #333;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;"><strong>Oct 2 &mdash; Oct 28&nbsp;: Lorem ipsum dolor sit amet, consectetuer</strong></div>
</div>
</div>
</div>
<div style="width:400px;height:80px;float:left;background-color:#333;"><img alt="Fc2Autr.png?1" src="https://i.imgur.com/Fc2Autr.png?1" style="width:400px;height:80px;float:left;" /></div>
<div style="width:400px;float:left;margin-top:20px;">
<div style="width:400px;height:150px;float:left;">
<div style="width:80px;float:left;margin-right:20px;">
<div style="width:70px;padding:5px;border-bottom:1px solid #333;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;"><strong>Masterlist:</strong></div>
</div>
<div style="width:70px;padding:5px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;"><strong><s>Taken</s></strong><br />
<strong><em>Reserved</em></strong><br />
<u><strong>Admin</strong></u></div>
</div>
</div>
<div style="width:140px;height:150px;float:left;margin-right:20px;overflow:hidden;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Males ♂</div>
<div style="width:160px;height:125px;float:left;overflow:auto;margin-top:5px;">
<div style="width:140px;float:left;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
</div>
</div>
</div>
</div>
<div style="width:140px;height:150px;float:left;overflow:hidden;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Females ♀</div>
<div style="width:160px;height:125px;float:left;overflow:auto;margin-top:5px;">
<div style="width:140px;float:left;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Group:</span> Name, Name, Name, Name, and Name.</strong></p>
</div>
</div>
</div>
</div>
</div>
<div style="width:400px;float:left;margin-top:20px;">
<div style="width:120px;height:130px;float:left;overflow:hidden;margin-right:20px;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Couple list</div>
<div style="width:140px;height:105px;float:left;overflow:auto;margin-top:5px;">
<div style="width:120px;float:left;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:center;">
<p>&nbsp;</p>
<p style="text-align:center;"><img alt="user-icon.png?height=200&amp;width=200" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="height:40px;width:40px;margin-right:5px;" /><img alt="" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="width:40px;height:40px;" /></p>
<p><strong>Name x Name<br />
Couple name</strong></p>
<p>&nbsp;</p>
<p style="text-align:center;"><img alt="user-icon.png?height=200&amp;width=200" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="height:40px;width:40px;margin-right:5px;" /><img alt="" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="width:40px;height:40px;" /></p>
<p><strong>Name x Name<br />
Couple name</strong></p>
<p>&nbsp;</p>
<p style="text-align:center;"><img alt="user-icon.png?height=200&amp;width=200" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="height:40px;width:40px;margin-right:5px;" /><img alt="" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="width:40px;height:40px;" /></p>
<p><strong>Name x Name<br />
Couple name</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align:center;"><img alt="user-icon.png?height=200&amp;width=200" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="height:40px;width:40px;margin-right:5px;" /><img alt="" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="width:40px;height:40px;" /></p>
<p><strong>Name x Name<br />
Couple name</strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align:center;"><img alt="user-icon.png?height=200&amp;width=200" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="height:40px;width:40px;margin-right:5px;" /><img alt="" src="https://sites.google.com/a/windermereprep.com/canvas/_/rsrc/1486400406169/home/unknown-user/user-icon.png?height=200&amp;width=200" style="width:40px;height:40px;" /></p>
<p><strong>Name x Name<br />
Couple name</strong></p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
<div style="width:140px;height:130px;float:left;overflow:hidden;margin-right:20px;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Wishlist</div>
<div style="width:160px;height:105px;float:left;overflow:auto;margin-top:5px;">
<div style="width:140px;float:left;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Admin:</span>&nbsp;Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Admin:</span> Name, Name, Name, Name, Name, Name, Name, and Name.</strong></p>
<p><strong><span style="background-color:#333333;padding:0px 4px;color:#EEE;">Admin:</span> Name, Name, Name, Name, and Name.</strong></p>
</div>
</div>
</div>
</div>
<div style="width:100px;float:left;">
<div style="width:90px;height:9px;padding:5px;border-bottom:1px solid #333;margin-bottom:5px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:9px;letter-spacing:1px;text-transform:uppercase;text-align:left;"><strong>Featured Members</strong></div>
</div>
<div style="width:100px;height:50px;float:left;"><img alt="PHO3rsK.png" src="https://i.imgur.com/PHO3rsK.png" style="width:100px;height:50px;" title="name" /></div>
<div style="width:100px;height:50px;float:left;margin-top:3px;"><img alt="vfzfWUX.png" src="https://i.imgur.com/vfzfWUX.png" style="width:100px;height:50px;" title="name" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:350px;float:left;margin-left:-50px;opacity:.99;">
<div style="width:350px;height:500px;float:left;">
<div style="font-family:'times new roman';font-size:70px;color:#333;text-transform:uppercase;text-align:left;line-height:60px;margin-top:80px;"><b><i>Roses</i><br />
Et reines</b><br />
<strong>&mdash;</strong></div>
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;margin-right:200px;">
<div style="font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">a twitter based roleplay</div>
</div>
<div style="height:10px;padding:5px 8px;background-color:#333;float:left;margin-top:2px;">
<div style="font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">Scroll down</div>
</div>
</div>
<div style="width:350px;height:500px;float:left;overflow:hidden;">
<div style="width:370px;height:500px;float:left;overflow:auto;">
<div style="width:350px;padding:50px 0px;float:left;">
<div style="width:350px;float:left;">
<div style="width:70px;float:left;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">About us</div>
</div>
<div style="width:260px;float:left;margin-left:20px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><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, nascetur ridiculus mus.</strong></p>
</div>
</div>
</div>
<div style="width:350px;float:left;margin-top:40px;">
<div style="width:70px;float:left;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Rules &amp;</div>
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;margin-top:2px;">Guidelines</div>
</div>
<div style="width:260px;float:left;margin-left:20px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><em>1.&nbsp;</em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</strong></p>
<p><strong><em>2.&nbsp;</em>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</strong></p>
<p><strong><em>3.&nbsp;</em>pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</strong></p>
<p><strong><em>4.&nbsp;</em>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</strong></p>
<p><strong><em>5.&nbsp;</em>Cras dapibus. Vivamus elementum semper nisi.</strong></p>
</div>
</div>
</div>
<div style="width:350px;float:left;margin-top:40px;">
<div style="width:70px;float:left;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">How to</div>
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;margin-top:2px;">Join</div>
</div>
<div style="width:260px;float:left;margin-left:20px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><em>1.&nbsp;</em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</strong></p>
<p><strong><em>2.&nbsp;</em>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.</strong></p>
<p><strong><em>3.&nbsp;</em>pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</strong></p>
</div>
</div>
</div>
<div style="width:350px;float:left;margin-top:40px;">
<div style="width:70px;float:left;">
<div style="height:10px;padding:5px 8px;background-color:#333;float:right;font-family:calibri;font-size:8px;color:#EEE;line-height:10px;letter-spacing:1px;text-transform:uppercase;">Events</div>
</div>
<div style="width:260px;float:left;margin-left:20px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:10px;letter-spacing:1px;text-transform:uppercase;text-align:left;">
<p><strong><em>Oct 2&nbsp;&mdash; oct 28:&nbsp;</em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</strong></p>
<p><strong>oct 30 &mdash; Nov 1: Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:68px;float:left;margin:-480px 0px 0px 20px;border:1px solid #333;opacity:.99;">
<div style="width:58px;background-color:#333;float:left;padding:10px 5px;">
<div style="font-family:'times new roman';font-size:30px;color:#EEE;text-align:center;line-height:30px;"><strong>42</strong></div>
</div>
<div style="width:58px;float:left;padding:5px;">
<div style="font-family:calibri;font-size:8px;color:#333;line-height:8px;letter-spacing:1px;text-transform:uppercase;text-align:center;"><strong>Population</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;float:left;margin-top:10px;">
<div style="font-family:calibri;font-size:8px;color:#CCC;text-align:center;letter-spacing:2px;text-transform:uppercase;"><a href="https://www.asianfanfics.com/story/view/912018/delightful-layout-gallery-roleplay-layouts-gallery-layout" style="color:#ccc;">Delightful 2017 : Layout coded by lisett</a></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment