<div class="form-background">
<div class="form-white">
<form>
<h3>Contact Us</h3>
<p>Your Email</p>
<div class="w-100">
<input class="form-input" placeholder="mail@example.com">
</div>
<div class="w-50">
<p>First Name</p>
<input class="form-input">
</div>
<div class="w-50">
<p>Last Name Name</p>
<input class="form-input">
</div>
<div class="w-100">
<p>Message</p>
<textarea class="form-input form-long"></textarea>
</div>
<div style="vertical-align: middle">
<input id="sub" type="checkbox">
<label for="sub">Subscribe</label>
<button class="submit-button">SEND</button>
</div>
</form>
</div>
</div>
.form-background {
background-color: black;
padding: 30px;
}
.form-white {
background-color: white;
padding: 30px;
width: 80%;
max-width: 600px;
margin: auto;
}
.w-50 {
width: 50%;
float: left;
padding: 10px;
}
.w-100 {
width: 100%;
padding: 10px;
}
.form-input{
width: 100%;
padding: 10px;
font-size: 20px;
border: 1px solid black;
border-radius: 5px;
}
.form-long {
height: 200px;
}
.submit-button {
width: 120px;
border: none;
background-color: #FFC300;
padding: 10px;
display: block;
margin-left: auto;
border-radius: 10px;
color: #eee;
font-size: 20px;
}
div, input , textarea {
box-sizing: border-box;
}
<form>
<button type="submit">์ ์ก</button>
<input type="submit">
</form>
<input type="checkbox" id="subscribe">
<label for="subscribe">๋๋ฅด๊ธฐ</label>
input๋์ label์ ๋๋ฌ๋ input์ ์ ํํ ์ ์์ต๋๋ค.
ํน์ ๊ทธ๋ฅ ์ ์ ๋ชฉ์ด ํ์ํ ๋๋ h, p ํ๊ทธ ์ด๋ฐ๊ฑฐ ๋ง๊ณ ํ๊ทธ๋ฅผ ๊ฐ๋ ์ด์ฉํฉ๋๋ค.