<div class="snote">
        <ul>
            <li>
                <a href="#LINK 1">
                    <h2>Gift #1</h2><hr />
                    <p>Beschrijving</p>
                </a>
            </li>
            <li>
                <a href="#LINK 2">
                    <h2>Gift #1</h2><hr />
                    <p>Beschrijving</p>
                </a>
            </li>
            <li>
                <a href="#LINK 3">
                    <h2>Gift #1</h2><hr />
                    <p>Beschrijving</p>
                </a>
            </li>
            <li>
                <a href="#LINK 4">
                    <h2>Gift #1</h2><hr />
                    <p>Beschrijving</p>
                </a>
            </li>
            <li>
                <a href="#LINK 5">
                    <h2>Gift #1</h2><hr />
                    <p>Beschrijving</p>
                </a>
            </li>
        </ul>
    </div>
    <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
    <style>
        .snote{
            max-width:100%;
        }

        .snote h2,p{
            font-size:100%;
            font-weight:normal;
        }

        .snote ul,li{
            list-style:none;
        }

        .snote ul{
            overflow:hidden;
            padding:3em;
        }

        .snote ul li a{
            text-decoration:none;
            color:#000;
            background:#ffc;
            display:block;
            height:15em;
            width:12em;
            padding:1em;
            -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            box-shadow: 5px 5px 7px rgba(33,33,33,.7);
            -webkit-transform:rotate(-6deg);
            -o-transform:rotate(-6deg);
            -moz-transform:rotate(-6deg);
            -moz-transition:-moz-transform .15s linear;
            -o-transition:-o-transform .15s linear;
            -webkit-transition:-webkit-transform .15s linear;
        }

        .snote ul li:nth-child(even) a{
            -o-transform:rotate(4deg);
            -webkit-transform:rotate(4deg);
            -moz-transform:rotate(4deg);
            position:relative;
            top:5px;
            background:#cfc;
        }

        .snote ul li:nth-child(3n) a{
            -o-transform:rotate(-3deg);
            -webkit-transform:rotate(-3deg);
            -moz-transform:rotate(-3deg);
            position:relative;
            top:-5px;
            background:#ccf;
        }

        .snote ul li:nth-child(5n) a{
            -o-transform:rotate(5deg);
            -webkit-transform:rotate(5deg);
            -moz-transform:rotate(5deg);
            position:relative;
            top:-10px;
            background:#fcf;
        }

        .snote ul li a:hover,ul li a:focus{
            -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
            -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            box-shadow:10px 10px 7px rgba(0,0,0,.7);
            -webkit-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -o-transform: scale(1.25);
            position:relative;
            z-index:5;
        }

        .snote ul li{
            float:left;
        }

        .snote ul li h2{
            font-size:160%;
            font-weight:bold;
            padding-bottom:0px;
            font-family:Oswald;
            text-align:center;
            color:#000;
        }

        .snote ul li p{
            font-family:'Shadows Into Light Two',arial,sans-serif;
            font-size:140%;
            color:#000;
        }
    </style>