Skip to content

Instantly share code, notes, and snippets.

@funruby
Last active February 12, 2017 03:38
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 funruby/68058f84ad645ee2adfb0e1b815e3b97 to your computer and use it in GitHub Desktop.
Save funruby/68058f84ad645ee2adfb0e1b815e3b97 to your computer and use it in GitHub Desktop.
01 - Foreword
<div style="width:750px;float:left;margin:auto;margin-bottom:20px;margin-left:100px;overflow:hidden;"><img alt="background" src="http://i.imgur.com/Q38kbmp.jpg?1" style="width:750px;float:left;height:950px;" />
<div style="width:750px;height:950px;float:left;margin-top:-950px;">
<div style="width:750px;float:left;">
<div style="margin:50px;margin-right:0px;margin-left:65px;margin-top:60px;height:70px;background-color:#1F1F1F;float:left;width:555px;">
<div style="margin-top:30px;float:left;margin-left:60px;margin-right:50px;">
<div style="font-family:futura;font-size:10px;color:#FFFFFF;float:left;text-transform:uppercase;letter-spacing:1px;">home</div>
<div style="border-bottom:2px solid #CCFF00;float:left;margin-left:50px;">
<div style="font-family:futura;font-size:10px;margin-left:-4px;margin-right:-4px;color:#FFFFFF;float:left;text-transform:uppercase;letter-spacing:1px;"><a href="#"><span style="color:#FFFFFF;">request</span></a></div>
</div>
<div style="border-bottom:2px solid #CCFF00;float:left;margin-left:50px;">
<div style="font-family:futura;font-size:10px;margin-left:-4px;margin-right:-4px;color:#FFFFFF;float:left;text-transform:uppercase;letter-spacing:1px;"><a href="#"><span style="color:#FFFFFF;">F.a.Q</span></a></div>
</div>
<div style="border-bottom:2px solid #CCFF00;float:left;margin-left:50px;">
<div style="font-family:futura;font-size:10px;margin-left:-4px;margin-right:-4px;color:#FFFFFF;float:left;text-transform:uppercase;letter-spacing:1px;"><a href="#"><span style="color:#FFFFFF;">archived</span></a></div>
</div>
<div style="border-bottom:2px solid #CCFF00;float:left;margin-left:50px;">
<div style="font-family:futura;font-size:10px;margin-left:-4px;margin-right:-4px;color:#FFFFFF;float:left;text-transform:uppercase;letter-spacing:1px;"><a href="#"><span style="color:#FFFFFF;">contact us</span></a></div>
</div>
</div>
</div>
<div style="height:70px;width:70px;margin-left:5px;margin-top:60px;float:left;background-color:#1F1F1F;">
<div class="tooltip" style="height:70px;width:70px;float:left;overflow:auto;margin-top:0px;border-bottom:none;" title="MIDNIGHT CITY - M83">&nbsp;</div>
<div style="height:34px;width:25px;float:left;overflow:hidden;margin-left:22px;margin-top:-52px;">
<div style="height:59px;width:65px;float:left;margin:-17px 0px 0px -19px;"><iframe height="166" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/19087066&amp;color=1F1F1F&amp;&amp;hide_related=true&amp;show_artwork=false" style="border-radius:100%;" width="100%"></iframe></div>
</div>
</div>
</div>
<div style="width:650px;float:left;margin-left:50px;margin-right:50px;margin-top:60px;height:220px;">
<div style="height:23px;background-color:#CCFF00;padding-left:30px;padding-right:3px;float:right;font-family:'avenir next condensed', futura, 'century gothic', calibri;font-size:110px;color:#242424;text-align:right;text-transform:uppercase;letter-spacing:1px;line-height:80%;">avenirs<br />
<span style="height:23px;background-color:#CCFF00;padding-left:30px;padding-right:3px;float:right;">wave</span></div>
</div>
<div style="width:750px;float:left;margin-top:-10px;">
<div style="width:390px;float:left;margin-left:50px;">
<div style="width:298px;background-color:#1F1F1F;padding-top:26px;padding-bottom:26px;padding-right:26px;padding-left:26px;">
<div style="font-family:futura;font-size:17px;color:#CCFF00;text-transform:uppercase;line-height:90%;text-align:left;"><span style="color:#FFFFFF;">about</span>us</div>
</div>
<div style="width:300px;height:62px;background-color:transparent;margin-top:2px;padding:20px;border:5px solid #1F1F1F;">
<div style="width:290px;height:62px;float:left;margin-top:1px;overflow:hidden;">
<div style="width:330px;float:left;height:60px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:12px;color:#1f1f1f;text-align:justify;margin-right:30px;letter-spacing:.3px;line-height:115%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
</div>
<div style="width:298px;margin-top:10px;background-color:#1F1F1F;padding-top:26px;padding-bottom:26px;padding-right:26px;padding-left:26px;">
<div style="font-family:futura;font-size:17px;color:#CCFF00;text-transform:uppercase;line-height:90%;text-align:left;"><span style="color:#FFFFFF;">basic</span>guidelines</div>
</div>
<div style="width:300px;height:62px;background-color:transparent;margin-top:2px;padding:20px;border:5px solid #1F1F1F;">
<div style="width:290px;height:62px;float:left;margin-top:1px;overflow:hidden;">
<div style="width:330px;float:left;height:60px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:12px;color:#1f1f1f;text-align:justify;margin-right:30px;letter-spacing:.3px;line-height:115%;"><em><span style="color:#CCFF00;"><u>001.</u></span></em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. <em><span style="color:#CCFF00;"><u>002.</u></span></em>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. <em><span style="color:#CCFF00;"><u>003.</u></span></em>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
</div>
</div>
</div>
<div style="width:350px;float:left;">
<div style="width:180px;margin-top:10px;float:left;background-color:#1F1F1F;height:81px;">
<div style="width:180px;float:left;">
<div style="font-family:futura;font-size:17px;color:#CCFF00;text-transform:uppercase;line-height:90%;float:left;margin-left:26px;margin-top:32px;"><span style="color:#FFFFFF;">the</span>partners&nbsp;<span style="font-size:22px;"><span style="color:#FFFFFF;">&raquo;</span></span></div>
</div>
</div>
<div style="width:169px;margin-left:10px;height:91px;overflow:hidden;">
<div style="width:168px;float:left;overflow:auto;height:111px;">
<div style="width:693px;float:left;margin-top:11px;">
<div style="width:81px;height:81px;float:left;margin-left:168px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.1</span></a></div>
</div>
</div>
</div>
<div style="width:81px;height:81px;float:left;margin-left:7px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.2</span></a></div>
</div>
</div>
</div>
<div style="width:81px;height:81px;float:left;margin-left:7px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.3</span></a></div>
</div>
</div>
</div>
<div style="width:81px;height:81px;float:left;margin-left:7px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.4</span></a></div>
</div>
</div>
</div>
<div style="width:81px;height:81px;float:left;margin-left:7px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.5</span></a></div>
</div>
</div>
</div>
<div style="width:81px;height:81px;float:left;margin-left:7px;"><img alt="affliate one" src="http://i.imgur.com/H0ZTasA.jpg?2" style="width:67px;height:67px;border:7px solid #CCFF00;float:left;" />
<div style="width:81px;height:81px;float:left;margin-top:-81px;">
<div style="margin-top:35px;">
<div style="font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:2px;"><a href="#"><span style="color:#FFFFFF;">no.6</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:240px;float:left;margin-left:0px;margin-right:50px;">
<div style="width:188px;height:215px;background-color:#1F1F1F;padding-top:26px;padding-bottom:26px;padding-right:26px;padding-left:26px;">
<div style="font-family:futura;font-size:17px;color:#CCFF00;text-transform:uppercase;line-height:90%;text-align:left;"><span style="color:#FFFFFF;">process</span>request</div>
<div style="width:188px;height:194px;float:left;margin-top:13px;overflow:hidden;">
<div style="width:218px;height:192px;float:left;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
<div style="font-family:futura;font-size:9px;color:#FFFFFF;float:left;letter-spacing:1px;line-height:140%;text-transform:uppercase;margin-right:10px;margin-top:6px;">requester &bull; designer<br />
<span style="font-size:13px;letter-spacing:.4px;"><span style="color:#CCFF00;margin-left:15px;">&bull;&bull;&bull;</span>&bull;&bull;</span></div>
</div>
</div>
</div>
<div style="width:188px;margin-top:16px;background-color:#1F1F1F;padding-top:26px;padding-bottom:26px;padding-right:26px;padding-left:26px;">
<div style="font-family:futura;font-size:17px;color:#CCFF00;text-transform:uppercase;line-height:90%;text-align:left;"><span style="color:#FFFFFF;">our</span>staff</div>
</div>
</div>
<div style="width:240px;margin-top:4px;height:106px;float:left;overflow:hidden;">
<div style="width:270px;float:left;margin-top:1px;height:104px;overflow:auto;">
<div style="width:212px;padding:8px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">01</span>vivian</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">founder + coder</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
<div style="width:212px;padding:8px;margin-top:4px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">02</span>selena</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">head designer</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
<div style="width:212px;padding:8px;margin-top:4px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">03</span>alan</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">intern</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
<div style="width:212px;padding:8px;margin-top:4px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">04</span>holli</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">designer</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
<div style="width:212px;padding:8px;margin-top:4px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">05</span>jacob</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">social coordinator</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
<div style="width:212px;padding:8px;margin-top:4px;height:76px;border:6px solid #1F1F1F;background-color:#1f1f1f;float:left;">
<div style="width:80px;height:76px;float:left;margin:0px;">
<div style="margin-top:33px;">
<div style="font-family:futura;font-size:10px;color:#CCFF00;text-transform:uppercase;letter-spacing:1.4px;line-height:100%;text-align:center;"><span style="color:#FFFFFF;">06</span>max</div>
</div>
</div>
<div style="width:118px;height:76px;float:left;margin-left:10px;overflow:hidden;">
<div style="width:152px;float:left;height:74px;margin-top:1px;overflow:auto;">
<div style="font-family:futura;font-size:8px;margin-right:34px;color:rgb(255,255,255);float:left;letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;text-align:justify;"><em><span style="color:#CCFF00;">intern</span></em><br />
hello! write a short message here. don&#39;t worry, it doesn&#39;t have to be nearly as short as you may think; the box has overflow.</div>
<div style="font-family:futura;text-align:right;font-size:8px;margin-right:34px;color:rgb(255,255,255);letter-spacing:1px;margin-top:4px;margin-bottom:4px;line-height:140%;text-transform:uppercase;"><em><span style="color:#CCFF00;">AVAILABLE</span></em></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="font-family:futura, calibri;font-size:11px;color:#1f1f1f;text-align:center;line-height:200%;text-transform:uppercase;letter-spacing:1.4px;"><strong>syncratic designs &copy; 2017</strong></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment