レスポンシブ　デザイン　技術紹介サンプル

puresccでシンプルな技術紹介ページを作成してみました。
ヘッダー、フッターには紫色の背景色を指定しています。
ご自由にお使いください。

<!DOCTYPE html>
<html>
    <head>
        <!-- メタ情報 START -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width">
        <meta name="robots" content="index,follow,noarchive" />
        <meta http-equiv="content-language" content="ja" />
        <!-- メタ情報 END -->

        <title>サンプル4</title>

        <!-- CSS インポート START -->
        <link rel="stylesheet" href="./build/pure-min.css">
        <link rel="stylesheet" href="./build/baby-blue.css">
        <link rel="stylesheet" href="./build/main.css">
        <!-- CSS インポート END -->
        </head>
    <body>
    <!-- グローバル START -->
    <div class="content">
         <!-- 会社情報　およびメニュー background-colorのところで背景色を変更-->
        <h2 id="horizontal-menu" class="content-subhead">サンプル会社<a href="#horizontal-menu" class="content-link"></a></h2>
        <div class="pure-menu pure-menu-open pure-menu-horizontal" style="background-color: #CC99CC;">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">会社概要</a></li>
                <li class="pure-menu-selected"><a href="#">技術紹介</a></li>
                <li style="background-color: #CC99CC;"><a href="#">お問い合わせ</a></li>
            </ul>
        </div>
        <br>
        <!-- ヘッダー -->
        <header>
            <h2>技術紹介</h2>
        </header>
        <div class="index-box">
            <div class="pure-u-1 l-centered">
                <img src="./build/image.jpg" width="100%">
            </div>
        </div>
        <!-- メイン -->
        <h4>What's New</h4>
        <p>
        <FONT size="2">
        <hr>
        20YY年MM月DD日<br>
        XXXXXを受賞<hr size="1">
        20YY年MM月DD日<br>
        XXXXXを受賞<hr size="1">
        20YY年MM月DD日<br>
        XXXXXを受賞<hr size="1">
        20YY年MM月DD日<br>
        XXXXXを受賞<hr>
        </FONT>
        </p>
        <!-- フッター background-colorのところで背景色を変更-->
        <div class="footer">
            <div class="pure-g-r" style="background-color: #CC99CC;">
                <div class="pure-u-1-3">
                    AAAAA
                </div>
                <div class="pure-u-1-3">
                    BBBBB
                </div>
                <div class="pure-u-1-3">
                    CCCCC
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

【上記コードのデモはこちら】