Skip to content

Instantly share code, notes, and snippets.

@funruby

funruby/01 - Homepage

Created January 1, 2016 17:51
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/050aa9c84bb5dfa38924 to your computer and use it in GitHub Desktop.
Save funruby/050aa9c84bb5dfa38924 to your computer and use it in GitHub Desktop.
Download ZIP
[T] Saturation
Raw
01 - Homepage
<div style="width:900px;float:left;margin:auto;margin-bottom:20px;">
<div style="width:900px;height:80px;background-color:#000;float:left;margin:0px;">
<div style="width:900px;margin-top:33px;">
<div style="width:100px;float:left;margin-left:100px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:150px;float:left;margin-left:10px;margin-top:-6px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;text-transform:uppercase;line-height:120%;"><strong>Graphic shop</strong></div>
<div style="border-top:1.5px solid #FFFFFF;float:left;width:140px;margin-left:5px;margin-right:5px;">
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:center;line-height:120%;text-transform:uppercase;letter-spacing:.7px;">established dec 2012</div>
</div>
</div>
</div>
</div>
<div style="width:350px;float:left;margin:0px;"><img alt="" src="http://cfile8.uf.tistory.com/image/165D14345033D7541FD703" style="width:350px;float:left;margin:-3px;padding:3px;height:525px;" />
<div style="width:350px;height:200px;float:left;margin:0px;background-color:#000;">
<div style="width:350px;margin-top:120px;">
<div style="font-family:'arial narrow';font-size:44px;color:#10D2E8;text-align:right;margin-right:25px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#E82610;text-align:right;margin-right:19px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-44px;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#FFFFFF;text-align:right;margin-right:22px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-43px;">saturation</div>
</div>
</div>
</div>
<div style="width:550px;float:left;margin:0px;height:725px;background-color:#F7F7F7;">
<div style="width:550px;float:left;margin-top:60px;margin-left:25px;">
<div style="width:350px;float:left;">
<div style="font-family:helvetica;font-size:40px;letter-spacing:.3px;color:#000;text-align:left;margin-top:10px;line-height:100%;margin-left:20px;">about us</div>
</div>
<div style="width:300px;height:90px;float:left;margin-top:5px;margin-left:20px;overflow:auto;">
<div style="font-family:calibri, 'lucida grande';font-size:11px;color:#888888;text-align:justify;line-height:103%;margin-right:7px;">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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad. 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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora.</div>
</div>
<div style="width:350px;float:left;">
<div style="font-family:helvetica;font-size:40px;letter-spacing:.3px;color:#000;text-align:left;margin-top:10px;line-height:100%;margin-left:20px;">regulations</div>
</div>
<div style="width:300px;height:90px;float:left;margin-top:5px;margin-left:20px;overflow:auto;">
<div style="font-family:calibri, 'lucida grande';font-size:11px;color:#888888;text-align:justify;line-height:103%;margin-right:7px;">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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad. 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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora.</div>
</div>
<div style="width:170px;float:left;margin-left:10px;margin-top:-200px;height:300px;background-color:#FFFFFF;overflow:auto;">
<div style="font-family:helvetica;font-size:30px;letter-spacing:.3px;color:rgb(0,0,0);margin-top:10px;line-height:100%;margin-left:5px;">examples</div>
<img alt="" src="http://i.imgur.com/j9v5wQL.png" style="width:150px;float:left;margin-left:10px;margin-top:5px;" /><img alt="" src="http://i.imgur.com/j9v5wQL.png" style="width:150px;float:left;margin-left:10px;margin-top:5px;" /><img alt="" src="http://i.imgur.com/j9v5wQL.png" style="width:150px;float:left;margin-left:10px;margin-top:5px;" /><img alt="" src="http://i.imgur.com/j9v5wQL.png" style="width:150px;float:left;margin-left:10px;margin-top:5px;" /></div>
</div>
<div style="width:520px;float:left;margin-top:20px;margin-left:15px;height:140px;">
<div style="width:140px;float:left;">
<div style="width:53px;height:140px;float:left;margin:0px;">
<div style="font-family:'arial narrow';font-size:45px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>01</strong></div>
<div style="font-family:calibri, arial;font-size:12px;color:#000;text-align:center;line-height:100%;text-transform:uppercase;">sept</div>
</div>
<div style="width:85px;float:left;margin:0px;margin-left:2px;height:140px;">
<div style="font-family:calibri, 'lucida grande';font-size:10.5px;color:#888888;text-align:justify;line-height:103%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante mauris. don&#39;t go over this please!</div>
</div>
</div>
<div style="width:140px;float:left;margin-left:15px;">
<div style="width:53px;height:140px;float:left;margin:0px;">
<div style="font-family:'arial narrow';font-size:45px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>15</strong></div>
<div style="font-family:calibri, arial;font-size:12px;color:#000;text-align:center;line-height:100%;text-transform:uppercase;">jul</div>
</div>
<div style="width:85px;float:left;margin:0px;margin-left:2px;height:140px;">
<div style="font-family:calibri, 'lucida grande';font-size:10.5px;color:#888888;text-align:justify;line-height:103%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante mauris. don&#39;t go over this please!</div>
</div>
</div>
<div style="width:205px;float:left;margin-left:20px;height:130px;background-color:#10D2E8;">banner ( 205 by 130 )</div>
</div>
<div style="width:520px;float:left;margin-top:20px;margin-left:15px;height:140px;"><img alt="" src="http://i.imgur.com/IJVHFtG.png" style="width:520px;height:140px;float:left;margin:-3px;padding:3px;" />
<div style="width:520px;float:left;margin-top:-140px;height:140px;">
<div style="width:400px;float:left;height:140px;margin-left:60px;">
<div style="width:400px;">
<div style="width:180px;float:left;margin:0px;height:140px;background-color:#000;">
<div style="font-family:courier;font-size:14px;color:#FFFFFF;text-align:center;margin-top:7px;line-height:100%;">BATCH 1</div>
<div style="width:180px;height:105px;float:left;overflow:auto;">
<div style="width:150px;float:left;margin-left:15px;margin-top:10px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>01</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>02</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>03</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>04</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>05</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
</div>
</div>
<div style="width:180px;float:left;margin-left:40px;height:140px;background-color:#000;">
<div style="font-family:courier;font-size:14px;color:#FFFFFF;text-align:center;margin-top:7px;line-height:100%;">BATCH 2</div>
<div style="width:180px;height:105px;float:left;overflow:auto;">
<div style="width:150px;float:left;margin-left:15px;margin-top:10px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>01</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>02</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>03</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>04</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
<div style="width:150px;float:left;margin-left:15px;margin-top:15px;height:20px;">
<div style="width:30px;float:left;margin:0px;margin-right:4px;">
<div style="font-family:'arial narrow';font-size:30px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:.4px;"><strong>05</strong></div>
</div>
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:left;line-height:100%;text-transform:uppercase;letter-spacing:.6px;"><strong>username</strong> | designer</div>
<div style="font-size:11px;color:#FFFFFF;letter-spacing:1.3px;line-height:110%;margin-left:20px;"><span style="color:#10D2E8;">■</span> <span style="color:#10D2E8;">■</span> ■ ■ ■</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:900px;float:left;margin:0px;background-color:#10D2E8;height:50px;">
<div style="font-family:'lucida grande';font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:19.5px;text-transform:uppercase;"><a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-layouts-gallery-layout" rel="nofollow"><span style="color:#FFFFFF;">coded &amp; designed by holistic from syncratic designs.</span></a></div>
</div>
</div>
Raw
02 - Staff Portfolio
<div style="width:900px;float:left;margin:auto;margin-bottom:20px;">
<div style="width:900px;height:80px;background-color:#000;float:left;margin:0px;">
<div style="width:900px;margin-top:33px;">
<div style="width:100px;float:left;margin-left:100px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:150px;float:left;margin-left:10px;margin-top:-6px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;text-transform:uppercase;line-height:120%;"><strong>Graphic shop</strong></div>
<div style="border-top:1.5px solid #FFFFFF;float:left;width:140px;margin-left:5px;margin-right:5px;">
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:center;line-height:120%;text-transform:uppercase;letter-spacing:.7px;">established dec 2012</div>
</div>
</div>
</div>
</div>
<div style="width:350px;float:left;margin:0px;"><img alt="" src="http://cfile8.uf.tistory.com/image/165D14345033D7541FD703" style="width:350px;float:left;margin:-3px;padding:3px;height:525px;" />
<div style="width:350px;height:200px;float:left;margin:0px;background-color:#000;">
<div style="width:350px;margin-top:120px;">
<div style="font-family:'arial narrow';font-size:44px;color:#10D2E8;text-align:right;margin-right:25px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#E82610;text-align:right;margin-right:19px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-44px;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#FFFFFF;text-align:right;margin-right:22px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-43px;">saturation</div>
</div>
</div>
</div>
<div style="width:550px;float:left;margin:0px;height:725px;background-color:#F7F7F7;">
<div style="width:500px;float:left;margin-left:25px;margin-top:40px;">
<div style="font-family:helvetica;font-size:40px;letter-spacing:.3px;color:#000;text-align:left;margin-top:10px;line-height:100%;margin-left:20px;">prized employees</div>
<div style="width:500px;float:left;margin-top:20px;height:560px;overflow:auto;">
<div style="width:500px;float:left;">
<div style="width:200px;float:left;margin:0px;">
<div style="font-family:helvetica;font-size:30px;letter-spacing:.2px;color:#000;text-align:right;line-height:100%;">name</div>
<div style="width:190px;height:220px;margin-left:10px;float:left;background-color:#10D2E8;margin-top:2px;">examples</div>
</div>
<div style="width:290px;float:left;margin-top:14px;margin-left:10px;">
<div style="font-family:'helvetica neue';font-size:11px;color:#000;text-align:left;line-height:110%;text-transform:uppercase;letter-spacing:1px;margin-left:-3px;">the reviewer</div>
<div style="font-family:arial;font-size:12px;margin-top:20px;color:#000;text-align:justify;line-height:100%;text-transform:uppercase;"><strong>Status | Experience | Specialties</strong></div>
<div style="font-family:arial;font-size:12px;margin-top:8px;color:#000;text-align:justify;line-height:110%;margin-right:15px;">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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam.</div>
</div>
</div>
<div style="width:500px;float:left;margin-top:20px;">
<div style="width:200px;float:left;margin:0px;">
<div style="font-family:helvetica;font-size:30px;letter-spacing:.2px;color:#000;text-align:right;line-height:100%;">name</div>
<div style="width:190px;height:220px;margin-left:10px;float:left;background-color:#10D2E8;margin-top:2px;">examples</div>
</div>
<div style="width:290px;float:left;margin-top:14px;margin-left:10px;">
<div style="font-family:'helvetica neue';font-size:11px;color:#000;text-align:left;line-height:110%;text-transform:uppercase;letter-spacing:1px;margin-left:-3px;">the reviewer</div>
<div style="font-family:arial;font-size:12px;margin-top:20px;color:#000;text-align:justify;line-height:100%;text-transform:uppercase;"><strong>Status | Experience | Specialties</strong></div>
<div style="font-family:arial;font-size:12px;margin-top:8px;color:#000;text-align:justify;line-height:110%;margin-right:15px;">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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam.</div>
</div>
</div>
<div style="width:500px;float:left;margin-top:20px;">
<div style="width:200px;float:left;margin:0px;">
<div style="font-family:helvetica;font-size:30px;letter-spacing:.2px;color:#000;text-align:right;line-height:100%;">name</div>
<div style="width:190px;height:220px;margin-left:10px;float:left;background-color:#10D2E8;margin-top:2px;">examples</div>
</div>
<div style="width:290px;float:left;margin-top:14px;margin-left:10px;">
<div style="font-family:'helvetica neue';font-size:11px;color:#000;text-align:left;line-height:110%;text-transform:uppercase;letter-spacing:1px;margin-left:-3px;">the reviewer</div>
<div style="font-family:arial;font-size:12px;margin-top:20px;color:#000;text-align:justify;line-height:100%;text-transform:uppercase;"><strong>Status | Experience | Specialties</strong></div>
<div style="font-family:arial;font-size:12px;margin-top:8px;color:#000;text-align:justify;line-height:110%;margin-right:15px;">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. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam.</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:900px;float:left;margin:0px;background-color:#10D2E8;height:50px;">
<div style="font-family:'lucida grande';font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:19.5px;text-transform:uppercase;"><a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-layouts-gallery-layout" rel="nofollow"><span style="color:#FFFFFF;">coded &amp; designed by holistic from syncratic designs.</span></a></div>
</div>
</div>
Raw
03 - Pickup
<div style="width:900px;float:left;margin:auto;margin-bottom:20px;">
<div style="width:900px;height:80px;background-color:#000;float:left;margin:0px;">
<div style="width:900px;margin-top:33px;">
<div style="width:100px;float:left;margin-left:100px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:100px;float:left;margin-left:30px;">
<div style="color:#FFFFFF;text-align:left;text-transform:uppercase;line-height:100%;font-family:calibri, arial;font-size:14px;">link</div>
</div>
<div style="width:150px;float:left;margin-left:10px;margin-top:-6px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;text-transform:uppercase;line-height:120%;"><strong>Graphic shop</strong></div>
<div style="border-top:1.5px solid #FFFFFF;float:left;width:140px;margin-left:5px;margin-right:5px;">
<div style="font-family:'helvetica neue';font-size:9px;color:#FFFFFF;text-align:center;line-height:120%;text-transform:uppercase;letter-spacing:.7px;">established dec 2012</div>
</div>
</div>
</div>
</div>
<div style="width:350px;float:left;margin:0px;"><img alt="" src="http://cfile8.uf.tistory.com/image/165D14345033D7541FD703" style="width:350px;float:left;margin:-3px;padding:3px;height:525px;" />
<div style="width:350px;height:200px;float:left;margin:0px;background-color:#000;">
<div style="width:350px;margin-top:120px;">
<div style="font-family:'arial narrow';font-size:44px;color:#10D2E8;text-align:right;margin-right:25px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#E82610;text-align:right;margin-right:19px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-44px;">saturation</div>
<div style="font-family:'arial narrow';font-size:44px;color:#FFFFFF;text-align:right;margin-right:22px;line-height:100%;letter-spacing:.3px;text-transform:uppercase;margin-top:-43px;">saturation</div>
</div>
</div>
</div>
<div style="width:550px;float:left;margin:0px;height:725px;background-color:#F7F7F7;">
<div style="width:500px;float:left;margin-left:25px;margin-top:75px;">
<div style="font-family:'arial narrow';font-size:13px;color:#000;text-align:left;line-height:110%;text-transform:uppercase;letter-spacing:.3px;margin-left:20px;">designer name&nbsp;&bull; story title&nbsp;&bull; other information &bull;&nbsp;one line only please!</div>
<div style="font-family:helvetica;font-size:40px;letter-spacing:.3px;color:#000;text-align:left;line-height:100%;margin-left:20px;margin-top:-7px;">username</div>
<div style="width:470px;float:left;margin-top:20px;height:560px;margin-left:30px;">
<div style="padding:10px;padding-bottom:10px;float:left;margin:0px;margin-left:65px;width:280px;background-color:#10D2E8;"><img alt="" src="http://i.imgur.com/QczikrG.png" style="width:280px;float:left;" /></div>
<div style="width:490px;float:left;margin-top:15px;">
<div style="width:180px;float:left;margin:0px;">
<div style="width:180px;height:33px;float:left;background-color:#10D2E8;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:9px;text-transform:uppercase;">poster link</div>
</div>
<div style="width:180px;height:33px;float:left;background-color:#10D2E8;margin-top:3px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:9px;text-transform:uppercase;">banner link</div>
</div>
<div style="width:180px;height:33px;float:left;background-color:#10D2E8;margin-top:3px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:9px;text-transform:uppercase;">story link</div>
</div>
<div style="width:180px;height:33px;float:left;background-color:#10D2E8;margin-top:3px;">
<div style="font-family:'trebuchet ms';font-size:15px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:9px;text-transform:uppercase;">extra link</div>
</div>
</div>
<div style="width:250px;float:left;margin-left:10px;">
<div style="width:100px;float:left;margin:0px;">
<div style="font-family:'arial narrow';font-size:39px;color:#10D2E8;text-align:center;line-height:90%;letter-spacing:-.2px;"><strong>NOTE</strong></div>
<div style="font-family:'trebuchet ms';font-size:14px;color:#000;text-align:center;line-height:100%;text-transform:uppercase;">designer&#39;s</div>
</div>
<div style="width:145px;float:left;margin-left:5px;">
<div style="font-family:'lucida grande';font-size:10.5px;color:#888888;text-align:justify;line-height:103%;">Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante mauris.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:900px;float:left;margin:0px;background-color:#10D2E8;height:50px;">
<div style="font-family:'lucida grande';font-size:11px;color:#FFFFFF;text-align:center;line-height:100%;margin-top:19.5px;text-transform:uppercase;"><a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-layouts-gallery-layout" rel="nofollow"><span style="color:#FFFFFF;">coded &amp; designed by holistic from syncratic designs.</span></a></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment