Columns

HTML

<h1>Heading One</h1>
<div class="columns four">
    <div class="col first">
        <p>Fap food truck banksy, beard squid seitan echo park next level banh mi blog cardigan. Sustainable lomo hoodie farm-to-table vice, biodiesel iphone. Banksy artisan mlkshk sustainable, DIY fanny pack 3 wolf moon american apparel brunch you probably haven't heard of them mustache quinoa butcher. Echo park american apparel stumptown squid fixie salvia, single-origin coffee master cleanse yr cred portland. Wes anderson leggings lo-fi, sartorial echo park retro fixie vinyl art party.</p>
        <h2>Heading Two</h2>
        <p>Sustainable whatever DIY synth, aesthetic craft beer tofu Austin. VHS irony keffiyeh aesthetic echo park, viral salvia before they sold out scenester gluten-free brooklyn retro.</p>
    </div>
    <div class="col">
        <p>Fap food truck banksy, beard squid seitan echo park next level banh mi blog cardigan. Sustainable lomo hoodie farm-to-table vice, biodiesel iphone. </p>
        <p>Banksy artisan mlkshk sustainable, <a href="http://google.com/">DIY fanny pack 3</a> wolf moon american apparel brunch you probably haven't heard of them mustache quinoa butcher.</p> 
        <p>Echo park american apparel stumptown squid fixie salvia, single-origin coffee master cleanse yr cred portland. Wes anderson leggings lo-fi, sartorial echo park retro fixie vinyl art party. Sustainable whatever DIY synth, aesthetic craft beer tofu Austin. VHS irony keffiyeh aesthetic echo park, viral salvia before they sold out scenester gluten-free brooklyn retro.</p>
    </div>
    <div class="col">
        
        <p>Fap food truck banksy, beard squid seitan echo park next level banh mi blog cardigan. Sustainable lomo hoodie farm-to-table vice, biodiesel iphone. Banksy artisan mlkshk sustainable, DIY fanny pack 3 wolf moon american apparel brunch you probably haven't heard of them mustache quinoa butcher.</p>
        <h3>Heading Three</h3>
        <p>Echo park american apparel...

CSS

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 80%;
    line-height: 1.4em;
    color: #252525;
    -webkit-font-smoothing: subpixel-antialiased;
     -khtml-font-smoothing: subpixel-antialiased;
       -moz-font-smoothing: subpixel-antialiased;
        -ms-font-smoothing: subpixel-antialiased;
         -o-font-smoothing: subpixel-antialiased;
            font-smoothing: subpixel-antialiased;
    text-shadow: rgba(255,255,255,0.4) 0px 1px 0px;
    background: #f9f9f9;
    min-width: 700px;
    padding: 20px;
}
p {margin-bottom: 1.5em;}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    line-height: 1em;
    font-weight: bold;
    margin: 0px 0px 0.4em 0em; padding: 0px;
}
h1, .h1 {font-size: 4em}
h2, .h2 {font-size: 3em}
h3, .h3 {font-size: 2.3em}
h4, .h4 {font-size: 2em}
h5, .h5 {font-size: 1.2em}

a:link, a:hover, a:active, a:visited {color: #36C}

.columns {
    display: block;
    position: relative;
    cursor: default;
    margin: 0px -10px;
}
.columns .col {
    display: table-cell;
    position: relative;
    width: 49.9999%;
    text-align: justify;
    border-left: 1px solid #888;
    -webkit-box-shadow: inset rgba(255,255,255,0.3) 1px 0px 0px, inset rgba(255,255,255,0.3) -1px 0px 0px;
}
.columns .col:hover {
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
    background:...

JavaScript

jQuery.fn.center = function () {
    this.css("top", (($(window).height() - this.outerHeight()) / 2));
    this.css("left", (($(window).width() - this.outerWidth()) / 2));
    return this;
};
jQuery.fn.hold = function () {
    this.css("height", ($(this).outerHeight()) + "px");
    this.css("width", ($(this).outerWidth()) + "px");
    return this;
};
var isLocked = false;

jQuery.fn.lockToggle = function () {    
    var top = $(window).scrollTop();
    var left = $(window).scrollLeft();

    if(isLocked) { // locked so unlock

       isLocked = false;
       $('body').css('overflow', 'auto');
       $(window).unbind('scroll');

    } else { // unlocked so lock

        isLocked = true;
        $('body').css('overflow', 'hidden');
        $(window).scroll(function(){
            $(this).scrollTop(top).scrollLeft(left);
        });

    }

    return this;
};;

$(document).ready(function() {
    /* LINKS */
    $("a").filter(function () {
        return this.hostname && this.hostname !== location.hostname;
    }).each(function () {
        $(this).attr({
            target: "_blank",
            title: "Visit " + this.href + " (click to open in a new window)"
        });
    });
    
    /* COLUMNS */
    
    
    /* ZOOM */
    $('.zoom').wrap('<div class="zoom-placeholder" />').wrap('<div class="zoom-container" />');
    $('.zoom-placeholder').hold();
    $('.zoom-container').click(function() {
        $(this).toggleClass('open').lockToggle();
        $('.zoom').center();
        $(window).resize(function() {
            $('.zoom').center();
        });
    });
    
});