<!--コンタクト------------------>
<section id="Contact">
<h2 class="page-title">Contact</h2>
<form action="#">
<div>
<label for="name">お名前</label>
<input type="text" id="neme" name="your-name">
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="your-email">
</div>
<div>
<label for="message">メッセージ</label>
<textarea id="message" name="your-message"></textarea>
</div>
<input type="submit" class="button" value="送信">
</form>
</section>
/*--コンタクト------------------*/
form div {
background-color: rgb(43, 144, 226);
margin-bottom: 14px;
}
label{
background: rgb(8, 62, 107);
font-size: 1.125rem;
margin-bottom: 10px;
display: block;
}
/*inputタグの各属性は[]で囲んで指定*/
input[type="text"],
input[type="email"],
textarea {
background: rgba(255,255,255,.5); /*半透明の指定*/
border: 1px #fff solid;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
}
input[type="text"],
input[type="email"]
{
width: 100%;
max-width: 240px;
}
textarea {
width: 100%;
max-width: 480px;
height: 6rem;
}
input[type="submit"] {
background-color: rgb(25, 211, 108);
border: none;
cursor: pointer;/*マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定*/
line-height:1;
}
.mailbotan{
background: rgb(139, 182, 218);
border: 1px #0c0c0c solid;
}