html + css

=====
HTML

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/design.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>

<body style="background-color: #EEE;">
<!--<body style="background-image: url(img/bg.jpg);">-->

<div class="small-12 columns"  style="background-color: #EEE; padding:0; margin:0;">
    <div class="row">
        <div class="small-12 columns padding-40">

            <a class="box" href="https://twitch.tv/directory/following">
            <div class="small-2 columns box">
            <img src="img/twitch.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="http://boards.4chan.org/a/catalog">
            <div class="small-2 columns box">
            <img src="img/a.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="http://boards.4chan.org/vg/catalog">
            <div class="small-2 columns box">
            <img src="img/vg.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://twitter.com">
            <div class="small-2 columns box">
            <img src="img/twitter.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://facebook.com">
            <div class="small-2 columns box">
            <img src="img/facebook.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://youtube.com">
            <div class="small-2 columns box">
            <img src="img/youtube.jpg" width="100%" />
            </div>
            </a>

        </div>
    </div>
</div>

    <!--<div class="small-12 columns" style="background-color: #DDD; height: 1px;">
    </div>-->

<div class="small-12 columns"  style="background-color: #F5F5F5; padding:0; margin:0;">
    <div class="row">
        <div class="small-12 columns padding-40">

            <a class="box" href="https://mail.google.com">
            <div class="small-2 columns box">
            <img src="img/gmail.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://drive.google.com">
            <div class="small-2 columns box">
            <img src="img/drive.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://mail.google.com/mail/u/1/">
            <div class="small-2 columns box">
            <img src="img/esl.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://drive.google.com/drive/u/1/">
            <div class="small-2 columns box">
            <img src="img/esl-drive.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://trello.com/">
            <div class="small-2 columns box">
            <img src="img/trello.jpg" width="100%" />
            </div>
            </a>

            <a class="box" href="https://login.xero.com/">
            <div class="small-2 columns box">
            <img src="img/xero.jpg" width="100%" />
            </div>
            </a>

        </div>
    </div>
</div>

    <!--<div class="small-12 columns" style="background-color: #DDD; height: 1px;">
    </div>

</body>

=====
CSS

.padding-40 {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
}

.padding-20 {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.padding-80 {
    padding-top: 80px;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 80px;
}

.box:hover img {
    opacity: 0.7;
}

.box {
    text-align: center;
}