Skip to content

Instantly share code, notes, and snippets.

@kbariotis

kbariotis/index.html

Forked from anonymous/index.html
Created July 17, 2013 15:59
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jul 17, 2013.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <h1>Flexible columns &mdash; fixed width gutter</h1>
    <h2>Using a border as faux margin</h2>

    <div class="flexwrapper">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    </div>
    31 changes: 31 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    body { background: #eff5f5; }

    .flexwrapper {
    margin-left: -1em;
    }

    .flexwrapper > section {
    float: left;
    width: 25%;
    border-left: 1em solid #eff5f5;
    box-sizing: border-box;
    margin-bottom: .5em;
    padding-top: 25%;
    }

    .flexwrapper > section:nth-child(1) { background: #a9cc5b; }
    .flexwrapper > section:nth-child(2) { background: #39b4e0; }
    .flexwrapper > section:nth-child(3) { background: #e4582b; }
    .flexwrapper > section:nth-child(4) { background: #f8c624; }







    /* Decorative bits and bobs */

    body { font: 1.125em/1.4 'Source Sans Pro', sans-serif; background: #eff5f5; color: #31656e; text-align: center; padding: 4em 0; }
    h1 { font-weight: 900; font-size: 1.6em; line-height: 1.2; }
    h2 { font-weight: 400; font-size: 1em; color: #597a80; text-transform: uppercase; margin: .5em 0 4em; letter-spacing: .25em; }