<div class="container">
<form action="/action_page.php" method="post">
<div class="row">
<div class="col-70">
<input type="text" id="name" name="Name" placeholder="Name*" required>
</div>
</div>
<div class="row">
<div class="col-70">
<input type="email" id="email" name="email "placeholder="Email*" required>
</div>
</div>
<div clas="row">
<div class="col-70">
<input type="text" id="subject" name="subject" placeholder="Subject" >
</div>
</div>
<div class="row">
<div class="col-70">
<textarea id="message" placeholder="Message" ></textarea>
</div>
</div>
<div class="row">
<div class="col-70">
<input type="submit" id="submit" value="Send Message">
</div>
</div>
</form>
</div>
.container {
border-radius: 5px;
background-color: #d66ff66;
padding: 2px;
}
.row:after {
content: "";
display: table;
clear : both;
}
.col-70{
margin-left: 5em;
margin-top: 10px;
padding: 10px;
width: 70%;
}
input[type=text], [type=email] {
width: 100%;
padding: 12px;
border: hidden;
font-size: 18px;
font-family: calibri;
border-bottom: 2px solid grey;
outline: none;
box-sizing: border-box;
resize: vertical;
}
input:focus {
font-style: italic;
border-bottom: 2px solid black;
}
textarea{
width: 100%;
font-style:calibri;
padding: 12px;
border: hidden;
font-size: 18px;
font-family: calibri;
border-bottom: 2px solid grey;
outline: none;
height: 100px;
resize: none;
}
textarea:focus {
font-style: italic;
border-bottom: 2px solid black;
}
input[type=submit] {
border: 2px solid grey;
padding: 12px 12px 10px 12px;
font-size: 18px;
font-family: calibri;
background-color: white;
font-weight: 700;
float: right;
color: grey;
text-transform: uppercase;
transition: all 0.35s ease-in-out;
}
input[type=submit]:hover {
color: black;
padding: 12px 56px 10px 56px;
ouline: none;
border: 2px solid black;
letter-spacing: 0px;
}
@media screen and (max-width: 600px) {
.row, .col-70, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.