[?] - Colorblock

Colorblock (Dark Version)

<div style="width:1000px;float:left;margin:auto;margin-bottom:25px;">
<div style="width:900px;float:left;padding:50px;background-color:#292929;">
<div style="width:900px;height:550px;float:left;">
<div style="width:900px;height:550px;float:left;overflow:hidden;">
<div style="width:900px;height:580px;float:left;overflow:auto;">
<div style="width:2700px;float:left;">
<div style="width:900px;height:550px;float:left;background-color:#FFF024;">
<div style="width:260px;float:left;margin-left:85px;margin-top:340px;">
<div style="font-family:futura;font-size:68px;color:#292929;float:left;letter-spacing:2px;line-height:100%;"><strong><em>#</em>FFF024</strong></div>

<div style="font-family:arial;font-size:11px;color:#292929;float:right;text-align:justify;margin-left:20px;margin-right:-15px;margin-top:3px;line-height:140%;letter-spacing:.7px;"><strong><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed nisi</em>.</strong></div>

<div style="height:11px;padding:5px;border:2px solid #292929;float:right;margin-top:5px;">
<div style="font-family:'trebuchet ms';font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#292929;text-align:center;line-height:100%;"><a href="#"><span style="color:#000000;"><strong>read more...</strong></span></a></div>
</div>
</div>
</div>

<div style="width:900px;height:550px;float:left;background-color:#20E8B9;">
<div style="width:260px;float:left;margin-left:395px;margin-top:200px;">
<div style="font-family:futura;font-size:68px;color:#292929;padding:8px;float:left;letter-spacing:2px;line-height:100%;"><strong><em>#</em>20E8B9</strong></div>

<div style="width:260px;float:left;">
<div style="font-family:futura;font-size:14px;color:#292929;float:right;text-align:right;margin-left:20px;margin-right:-15px;margin-top:0px;line-height:140%;letter-spacing:1.4px;padding:4px;border:2px solid #292929;"><strong><em>wonderlust</em>.</strong></div>
</div>

<div style="width:260px;float:left;">
<div style="font-family:futura;font-size:14px;color:#292929;float:right;text-align:right;margin-left:20px;margin-right:10px;margin-top:3px;line-height:140%;letter-spacing:1.4px;padding:4px;border:2px solid #292929;"><strong><em>speak no evil</em>.</strong></div>
</div>
</div>
</div>

<div style="width:900px;height:550px;float:left;background-color:#FF4754;">
<div style="font-family:futura;font-size:68px;color:#292929;padding:8px;border:6px solid #292929;float:left;letter-spacing:2px;line-height:100%;margin-top:265px;margin-left:278px;"><strong><em>#</em>FF4754</strong></div>
</div>
</div>
</div>
</div>

<div style="width:900px;float:left;margin-top:-500px;opacity:.999;">
<div style="width:120px;height:100px;float:left;background-color:#292929;">&nbsp;</div>

<div style="width:240px;height:100px;float:left;">
<div style="font-family:verdana;font-size:60px;color:#292929;float:left;margin-top:30px;line-height:100%;text-transform:lowercase;letter-spacing:-3px;margin-left:20px;margin-right:20px;"><strong>hues.</strong></div>
</div>

<div style="width:540px;float:left;height:100px;background-color:#292929;">
<div style="font-family:'trebuchet ms';font-size:11px;color:#fff;float:left;margin-left:80px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#fff;">link one</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#fff;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#fff;">link two</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#fff;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#fff;">link three</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#fff;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#fff;">link four</span></a></div>
</div>
</div>
</div>
</div>

<div style="margin-top:-100px;float:left;border:2px solid #292929;height:30px;width:30px;margin-left:70px;opacity:.999;">
<div class="tooltip" style="height:54px;width:54px;float:left;overflow:auto;margin-top:-2px;margin-left:-2px;border-bottom:none;" title="syncratic designs © 2016">&nbsp;</div>

<div style="margin-top:-42px;float:left;">
<div style="font-family:'century gothic', futura;margin-left:8px;font-size:10px;color:#292929;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:1.4px;" title="syncratic designs © 2016"><strong><a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-layouts-layout"><span style="color:#292929;">sd</span></a></strong></div>
</div>
</div>
</div>

Colorblock (Lite Version)

<div style="width:900px;float:left;margin:auto;margin-bottom:25px;">
<div style="width:900px;height:550px;float:left;">
<div style="width:900px;height:550px;float:left;overflow:hidden;">
<div style="width:900px;height:580px;float:left;overflow:auto;">
<div style="width:2700px;float:left;">
<div style="width:900px;height:550px;float:left;background-color:#FFF024;">
<div style="width:260px;float:left;margin-left:85px;margin-top:340px;">
<div style="font-family:futura;font-size:68px;color:#fff;float:left;letter-spacing:2px;line-height:100%;"><strong><em>#</em>FFF024</strong></div>

<div style="font-family:arial;font-size:11px;color:#fff;float:right;text-align:justify;margin-left:20px;margin-right:-15px;margin-top:3px;line-height:140%;letter-spacing:.7px;"><strong><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed nisi</em>.</strong></div>

<div style="height:11px;padding:5px;border:2px solid #fff;float:right;margin-top:5px;">
<div style="font-family:'trebuchet ms';font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#fff;text-align:center;line-height:100%;"><a href="#"><span style="color:#fff;"><strong>read more...</strong></span></a></div>
</div>
</div>
</div>

<div style="width:900px;height:550px;float:left;background-color:#20E8B9;">
<div style="width:260px;float:left;margin-left:395px;margin-top:200px;">
<div style="font-family:futura;font-size:68px;color:#fff;padding:8px;float:left;letter-spacing:2px;line-height:100%;"><strong><em>#</em>20E8B9</strong></div>

<div style="width:260px;float:left;">
<div style="font-family:futura;font-size:14px;color:#fff;float:right;text-align:right;margin-left:20px;margin-right:-15px;margin-top:0px;line-height:140%;letter-spacing:1.4px;padding:4px;border:2px solid #fff;"><strong><em>wonderlust</em>.</strong></div>
</div>

<div style="width:260px;float:left;">
<div style="font-family:futura;font-size:14px;color:#fff;float:right;text-align:right;margin-left:20px;margin-right:10px;margin-top:3px;line-height:140%;letter-spacing:1.4px;padding:4px;border:2px solid #fff;"><strong><em>speak no evil</em>.</strong></div>
</div>
</div>
</div>

<div style="width:900px;height:550px;float:left;background-color:#FF4754;">
<div style="font-family:futura;font-size:68px;color:#fff;padding:8px;border:6px solid #fff;float:left;letter-spacing:2px;line-height:100%;margin-top:265px;margin-left:278px;"><strong><em>#</em>FF4754</strong></div>
</div>
</div>
</div>
</div>

<div style="width:900px;float:left;margin-top:-500px;opacity:.999;">
<div style="width:120px;height:100px;float:left;background-color:#fff;">&nbsp;</div>

<div style="width:240px;height:100px;float:left;">
<div style="font-family:verdana;font-size:60px;color:#fff;float:left;margin-top:30px;line-height:100%;text-transform:lowercase;letter-spacing:-3px;margin-left:20px;margin-right:20px;"><strong>hues.</strong></div>
</div>

<div style="width:540px;float:left;height:100px;background-color:#fff;">
<div style="font-family:'trebuchet ms';font-size:11px;color:#ccc;float:left;margin-left:80px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#CCCCCC;">link one</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#ccc;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#CCCCCC;">link two</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#ccc;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#CCCCCC;">link three</span></a></div>

<div style="font-family:'trebuchet ms';font-size:11px;color:#ccc;float:left;margin-left:40px;margin-top:45px;letter-spacing:1.5px;line-height:100%;text-transform:uppercase;"><a href="#"><span style="color:#CCCCCC;">link four</span></a></div>
</div>
</div>
</div>
</div>

<div style="margin-top:-75px;float:left;border:2px solid #fff;height:30px;width:30px;margin-left:20px;opacity:.999;">
<div class="tooltip" style="height:54px;width:54px;float:left;overflow:auto;margin-top:-2px;margin-left:-2px;border-bottom:none;" title="syncratic designs © 2016">&nbsp;</div>

<div style="margin-top:-42px;float:left;">
<div style="font-family:'century gothic', futura;margin-left:8px;font-size:10px;color:#fff;text-align:center;line-height:100%;text-transform:uppercase;letter-spacing:1.4px;" title="syncratic designs © 2016"><strong><a href="http://www.asianfanfics.com/story/view/474056/syncratic-designs-layouts-layout"><span style="color:#fff;">sd</span></a></strong></div>
</div>
</div>