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>
