----------------------------------------------------------------html 소스 ------------------------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div>
<h1>contact us</h1>
</div>
<div>
<h3>Your Email</h3>
<form class="email-box">
<input type="email" value="email@example.com">
</form>
</div>
<div class="firla-box">
<div class="first-box">
<h3>First Name</h3>
<form>
<input type="text">
</form>
</div>
<div class="last-box">
<h3>Last name</h3>
<form>
<input type="text">
</form>
</div>
</div>
<div class="message-box">
<h3>Message</h3>
<form>
<input type="text">
</form>
</div>
<div class="rs-box">
<div class="radio-box">
<form>
<input type="radio">subscribe
</form>
</div>
<div class="send-box">
<h2>SEND</h2>
</div>
</div>
</div>
</body>
</html>
------------------------------------------------------------------css 소스-------------------------------------------------------------------------------------
div {
box-sizing: border-box;
}
.container {
width: 500px;
height: 500px;
margin: auto;
}
.first-box {
float: left;
}
.firla-box input {
width: 180px;
}
.last-box {
float: left;
position: absolute;
right: 0;
}
.message-box {
clear: both;
}
.message-box > form > input {
height: 100px;
width: 496px;
padding: 0px;
}
.radio-box {
float: left;
margin-top: 25px;
}
.send-box {
float: left;
display: block;
position: absolute;
right: 0;
background: yellow;
width: 120px;
text-align: center;
top: 10px;
height: 50px;
}
.send-box > h2 {
margin-top: 12px;
}
.rs-box {
position: relative;
}
.firla-box {
position: relative;
}
.email-box > input {
width: 496px;
padding: 0px;
}
