Skip to content

Instantly share code, notes, and snippets.

@taepeach
Last active December 23, 2018 11:15
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 taepeach/33d99dec43cd01c1219ea064b1647a89 to your computer and use it in GitHub Desktop.
Save taepeach/33d99dec43cd01c1219ea064b1647a89 to your computer and use it in GitHub Desktop.
Hopeworld
<div style="width:1014px;float:left;margin:50px 0px 50px -16px;font-family:calibri;font-size:9px;letter-spacing:1px;color:#ccc;line-height:10px;text-align:justify;text-transform:uppercase;">
<div style="width:900px;float:left;padding:100px 57px;background:#111;border-top:10px solid #402525;border-bottom:10px solid #402525;">
<div style="width:900px;height:518px;float:left;background:#fff;"><img alt="" src="https://i.imgur.com/rurqlaG.png" style="height:518px;width:900px;" /></div>
<div style="width:550px;height:55px;float:left;margin:-560px 0px 0px 300px;font-family:'times new roman';font-size:70px;line-height:60px;text-align:center;letter-spacing:0px;color:#ccc;"><strong><em><strong>hopeworld</strong>.</em></strong></div>
<div style="width:900px;height:518px;float:left;margin-top:-518px;opacity:.9;">
<div style="width:260px;float:left;margin:340px 50px;">
<div style="width:220px;float:left;height:75px;padding:20px 0px;background:#111;">
<div style="width:220px;height:45px;font-family:'times new roman';font-size:40px;line-height:45px;text-align:center;letter-spacing:5px;color:#ccc;">open</div>
<div style="width:170px;float:left;height:10px;margin:5px 25px 0px 25px;padding:5px 0px;text-align:center;border-top:1px dotted #ccc;border-bottom:1px dotted #ccc;">shop by username</div>
</div>
<div style="width:108px;float:left;padding:5px 0px;margin:4px 4px 0px 0px;background:#402525;text-align:center;">portfolio</div>
<div style="width:108px;float:left;padding:5px 0px;margin:4px 0px 0px 0px;background:#402525;text-align:center;">request</div>
</div>
</div>
<div style="width:806px;height:auto;padding:30px 47px;float:left;background:#222;">
<div style="width:170px;height:243px;padding:15px;float:left;background:#1a1a1a;">
<div style="width:170px;height:auto;float:left;padding:15px 0px;background:#402525;margin-bottom:10px;">
<div style="width:170px;height:auto;float:left;font-size:40px;letter-spacing:-5px;color:#ccc;line-height:45px;text-align:center;">&nbsp;常に願う</div>
<div style="width:170px;height:auto;float:left;text-align:center;">est. march 2018</div>
</div>
<div style="width:170px;float:left;font-size:10px;padding:5px 0px;border-top:1px dotted rgb(204,204,204);border-bottom:1px dotted rgb(204,204,204);text-align:center;"><strong>about us</strong></div>
<div style="width:170px;float:left;">
<div style="width:170px;height:110px;float:left;margin-top:10px;background:#1a1a1a;overflow:hidden;">
<div style="width:187px;height:110px;float:left;overflow:auto;">
<div style="width:170px;float:left;">box is scrollable. press enter for a new line. lorem ipsum lorem ipsum.</div>
<div style="width:170px;float:left;">&nbsp;</div>
<div style="width:170px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
<div style="width:355px;float:left;margin:0px 15px;">
<div style="width:325px;height:243px;padding:15px;float:left;background:#1a1a1a;">
<div style="width:125px;padding:0px 5px;float:left;border-left:1px solid #402525;border-right:1px solid #402525;">
<div style="width:125px;height:21px;float:left;background:#402525;font-size:10px;line-height:21px;text-align:center;"><strong>rules</strong></div>
</div>
<div style="width:185px;height:1px;background:#402525;float:left;margin:9px 0px;">&nbsp;</div>
<div style="width:305px;height:210px;padding:10px;float:left;">
<div style="width:305px;height:210px;float:left;overflow:hidden;">
<div style="width:322px;height:210px;float:left;overflow:auto;">
<div style="width:305px;float:left;margin-bottom:3px;"><strong>▬ 1. rule name</strong></div>
<div style="width:305px;float:left;">box is scrollable. press enter for a new line.</div>
<div style="width:305px;float:left;">&nbsp;</div>
<div style="width:305px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div style="width:305px;float:left;">&nbsp;</div>
<div style="width:305px;float:left;margin-bottom:3px;"><strong>▬ 2. rule name</strong></div>
<div style="width:305px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div style="width:305px;float:left;">&nbsp;</div>
<div style="width:305px;float:left;margin-bottom:3px;"><strong>▬ 3. rule name</strong></div>
<div style="width:305px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div style="width:305px;float:left;">&nbsp;</div>
<div style="width:305px;float:left;margin-bottom:3px;"><strong>▬ 4. rule name</strong></div>
<div style="width:305px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:220px;float:left;">
<div style="width:220px;float:left;"><img alt="" src="https://i.imgur.com/eGsn4wP.png" style="width:220px;height:126px;" /></div>
<div style="width:190px;height:110px;padding:15px;background:#1a1a1a;float:left;margin-top:5px;">
<div style="width:125px;padding:0px 5px;float:left;border-left:1px solid #402525;border-right:1px solid #402525;">
<div style="width:125px;height:21px;float:left;background:#402525;font-size:10px;line-height:21px;text-align:center;"><strong>updates</strong></div>
</div>
<div style="width:50px;height:1px;background:#402525;float:left;margin:9px 0px;">&nbsp;</div>
<div style="width:170px;height:75px;padding:10px;float:left;">
<div style="width:170px;height:75px;float:left;overflow:hidden;">
<div style="width:187px;height:75px;float:left;overflow:auto;">
<div style="width:170px;float:left;margin-bottom:3px;"><strong>▬ 1. dd/mm/yyyy</strong></div>
<div style="width:170px;float:left;">box is scrollable. press enter for a new line.</div>
<div style="width:170px;float:left;">&nbsp;</div>
<div style="width:170px;float:left;margin-bottom:3px;"><strong>▬ 2. dd/mm/yyyy</strong></div>
<div style="width:170px;float:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:806px;height:auto;float:left;background:#222;margin-top:15px;">
<div style="width:500px;height:338px;float:left;padding:15px;background:#1a1a1a;">
<div style="width:170px;padding:0px 5px;float:left;border-left:1px solid #402525;border-right:1px solid #402525;">
<div style="width:170px;height:21px;float:left;background:#402525;font-size:10px;line-height:21px;text-align:center;"><strong>samples &amp; previews</strong></div>
</div>
<div style="width:315px;height:1px;background:#402525;float:left;margin:9px 0px;">&nbsp;</div>
<div style="width:500px;height:308px;padding:10px 0px;float:left;">
<div style="width:500px;height:308px;float:left;overflow:hidden;">
<div style="width:517px;height:308px;float:left;overflow:auto;">
<div style="width:500px;height:308px;float:left;"><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width:118px;height:157px;margin:3px;" /></div>
</div>
</div>
</div>
</div>
<div style="width:260px;float:left;margin-left:15px;">
<div style="width:230px;height:180px;padding:15px;background:#1a1a1a;float:left;">
<div style="width:125px;padding:0px 5px;float:left;border-left:1px solid #402525;border-right:1px solid #402525;">
<div style="width:125px;height:21px;float:left;background:#402525;font-size:10px;line-height:21px;text-align:center;"><strong>request list</strong></div>
</div>
<div style="width:90px;height:1px;background:#402525;float:left;margin:9px 0px;">&nbsp;</div>
<div style="width:220px;height:150px;padding:10px 5px 0px 5px;float:left;">
<div style="width:220px;height:150px;float:left;overflow:hidden;">
<div style="width:237px;height:150px;float:left;overflow:auto;">
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">1 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">2 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">3 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">4 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">5 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">6 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">7 // username // story title</div>
<div style="width:210px;float:left;padding:4px;border:1px solid #402525;margin:3px 0px;">8 // username // story title</div>
</div>
</div>
</div>
</div>
<div style="width:230px;height:110px;padding:15px;background:#1a1a1a;float:left;margin-top:15px;">
<div style="width:125px;padding:0px 5px;float:left;border-left:1px solid #402525;border-right:1px solid #402525;">
<div style="width:125px;height:21px;float:left;background:#402525;font-size:10px;line-height:21px;text-align:center;">blacklist</div>
</div>
<div style="width:90px;height:1px;background:#402525;float:left;margin:9px 0px;">&nbsp;</div>
<div style="width:220px;height:80px;padding:10px 5px 0px 5px;float:left;">
<div style="width:220px;height:80px;float:left;overflow:hidden;">
<div style="width:237px;height:80px;float:left;overflow:auto;">
<div style="width:220px;float:left;margin-bottom:3px;">1 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">2 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">3 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">4 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">5 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">6 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">7 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">8 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">9 // username // reason</div>
<div style="width:220px;float:left;margin-bottom:3px;">10 // username // reason</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:776px;height:auto;float:left;padding:15px;margin-top:15px;background:#1a1a1a;">
<div style="width:140px;height:25px;float:left;background:#402525;font-family:calibri;font-size:10px;line-height:25px;text-align:center;letter-spacing:1px;color:#ccc;">affiliates</div>
<div style="width:586px;margin-left:15px;float:left;background:#1a1a1a;">
<div style="width:586px;font-family:calibri;">affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate&nbsp; |&nbsp; affiliate</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:1015px;float:left;margin-top:10px;font-size:6px;letter-spacing:2px;color:#aaa;text-align:center;"><a href="https://www.asianfanfics.com/story/view/1325741/"><span style="color:#aaa;"><span style="padding-bottom:4px;border-bottom:1px dotted #aaa;">coded by ambrozia | iridescent layouts 2018.</span></span></a></div>
</div>
<div style="width:1014px;float:left;margin:20px 0px 100px -16px;font-family:calibri;font-size:9px;line-height:10px;letter-spacing:1px;color:#ccc;text-align:justify;text-transform:uppercase;">
<div style="width:900px;float:left;padding:50px 57px;background:#111;border-top:10px solid #402525;border-bottom:10px solid #402525;">
<div style="width:900px;height:auto;float:left;margin-top:50px;">
<div style="width:900px;height:60px;float:left;font-family:'times new roman';font-size:60px;line-height:60px;text-align:center;letter-spacing:6px;color:#ccc;"><strong><em>hopeworld.</em></strong></div>
<div style="width:900px;height:auto;padding:30px 0px;float:left;background:#222;">
<div style="width:300px;margin:0px 20px 0px 110px;float:left;">
<div style="width:300px;padding:10px;background:#402525;float:left;">
<div style="width:300px;float:left;padding:10px 0px;">
<div style="width:300px;float:left;font-family:'times new roman';font-size:35px;line-height:35px;letter-spacing:1px;color:#ccc;text-transform:uppercase;text-align:center;">story</div>
<div style="width:300px;float:left;font-family:'times new roman';font-size:35px;line-height:35px;letter-spacing:1px;color:#ccc;text-transform:uppercase;text-align:center;">title</div>
</div>
<div style="width:200px;height:20px;margin:0px 50px;float:left;text-align:center;">requested by username</div>
</div>
<div style="width:270px;padding:25px;margin:10px 0px;float:left;background:#1a1a1a;">
<div style="width:270px;float:left;margin-bottom:3px;"><strong>designer notes:</strong></div>
<div style="width:270px;float:left;">box automatically adjusts, but does not scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
<br />
press shift+enter for a new line.</div>
<div style="width:270px;float:left;">&nbsp;</div>
<div style="width:270px;float:left;"><strong>reminders:</strong><br />
// 1.<br />
// 2.<br />
//&nbsp;3.<br />
// 4.</div>
<div style="width:270px;padding:0px 20px;margin-top:10px;float:left;">
<div style="width:100px;margin:2px;padding:5px 8px;background:#402525;float:left;text-align:center;"><span style="color:#ccc;"><strong>poster</strong></span></div>
<div style="width:100px;margin:2px;padding:5px 8px;background:#402525;float:left;text-align:center;"><span style="color:#ccc;"><strong>background</strong></span></div>
<div style="width:100px;margin:2px;padding:5px 8px;background:#402525;float:left;text-align:center;"><strong>link</strong></div>
<div style="width:100px;margin:2px;padding:5px 8px;background:#402525;float:left;text-align:center;"><span style="color:#ccc;"><strong>credit</strong></span></div>
</div>
<div style="width:270px;height:86px;margin-top:20px;float:left;text-align:center;"><img alt="" src="https://i.imgur.com/eGsn4wP.png" style="width: 150px; height: 86px;" /></div>
</div>
</div>
<div style="width:340px;height:453px;float:left;margin-left:20px;"><img alt="" src="https://i.imgur.com/EuOjr3U.png?1" style="width: 340px; height: 453px;" /></div>
</div>
</div>
</div>
<div style="width:1015px;float:left;margin-top:10px;font-size:6px;letter-spacing:2px;color:#aaa;text-align:center;"><a href="https://www.asianfanfics.com/story/view/1325741/"><span style="color:#aaa;"><span style="padding-bottom:4px;border-bottom:1px dotted #aaa;">coded by ambrozia | iridescent layouts 2018.</span></span></a></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment