レスポンシブ デザイン 会社概要サンプル

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

<!DOCTYPE html>
<!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>サンプル3</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 class="pure-menu-selected"><a href="#">会社概要</a></li>
                <li><a href="#">技術紹介</a></li>
                <li style="background-color: #CC99CC;"><a href="#">お問い合わせ</a></li>
            </ul>
        </div>
        <br>
        <!-- ヘッダー -->
        <header>
        	<h2>会社概要</h2>
        </header>
        <!-- メイン -->
        <FONT size="2">
        <p>商号</p>
        <hr>
        <p>XXXXX株式会社</p><br>
        <p>設立</p>
        <hr>
        <p>1XXX年(昭和XX年)X月X日</p><br>
        <p>本社所在地</p>
        <hr>
        <p>XXXXXXXXXXXX</p><br>
        <p>従業員数</p>
        <hr>
        <p>XXXXX人</p><br>
        <p>YYYYYYY</p>
        <hr>
        <p>ZZZZZZZ</p><br>
        </FONT>
        <!-- フッター 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>

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


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket