レスポンシブ デザイン 問い合わせサンプル

puresccでシンプルな問い合わせページを作成してみました。
ご自由にお使いください。
そういえば、Yahooのトップページがスマホ対応しましたね。
purecssぽいです。

<!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>サンプル8</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">
        <style>
            .l-box {
                padding: 1em;
            }
            .index-box {
                padding: 0 1em;
            }
        </style>
        <!-- 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: #FFD464;">
            <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: #FFD464;"><a href="#">お問い合わせ</a></li>
            </ul>
        </div>
        <br>
        <!-- ヘッダー -->
        <header>
            <h2>お問い合わせ</h2>
        </header>
        <!-- メイン -->
        <form class="pure-form pure-form-aligned">
            <fieldset>
            <div class="pure-control-group">
                <label for="name">お名前</label>
                <input id="name" type="text" placeholder="名前">
            </div>

            <div class="pure-control-group">
                <label for="Tel">電話番号</label>
                <input id="Tel" type="text" placeholder="0X-XXXX-XXXX">
            </div>

            <div class="pure-control-group">
                <label for="email">メールアドレス</label>
                <input id="email" type="email" placeholder="Email Address">
            </div>

            <div class="pure-control-group">
                <label for="type">種別</label>
                <select id="type">
                    <option>製品について</option>
                    <option>故障について</option>
                    <option>その他</option>
                </select>
            </div>

            <div class="pure-control-group">
                <label for="content">内容</label>
                <textarea id="content" rows="5"></textarea >
            </div>

            <div class="pure-controls">
                <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
        </fieldset>
    </form>


        <br>
        <!-- フッター background-colorのところで背景色を変更-->
        <div class="footer">
            <div class="pure-g-r" style="background-color: #FFD464;">
                <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




コメントはまだありません


You can leave the first : )