<div class="container">
<div class="row">
<div class="card d-flex justify-content-center mx-auto my-3 p-5">
<h6 class="text-muted">INFORMATION</h6>
<h2>Contact Us</h2>
<div class="form-row">
<div class="form-group col-md-6 first"> <label for="inputFirstName">FIRST NAME <span>*</span></label> <input type="text" class="form-control" id="inputFirstName" name="firstname" required>
<div id="fname_error" class="val_error"></div>
</div>
<div class="form-group col-md-6 first"> <label for="inputLastName">LAST NAME <span>*</span></label> <input type="text" class="form-control" id="inputLastName" name="lastname">
<div id="lname_error" class="val_error"></div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6"> <label for="inputEmail">EMAIL <span>*</span></label> <input type="email" class="form-control" id="inputEmail" name="youremail">
<div id="email_error" class="val_error"></div>
</div>
<div class="form-group col-md-6"> <label for="inputPhone">PHONE <span>*</span></label> <input type="text" class="form-control" id="inputPhone" name="yourphoneno">
<div id="phone_error" class="val_error"></div>
</div>
</div>
<div class="form-group mt-0"> <label for="exampleFormControlTextarea1">MESSAGE <span>*</span></label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="yourmessage"></textarea>
<div id="message_error" class="val_error"></div>
</div>
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1"> Send me offers & updates</label> </div>
<div class="form-button pt-4"> <button type="submit" class="btn btn-primary btn-block btn-lg" value="Register" name="register"><span>SEND MESSAGE</span></button> </div>
</div>
</div>
</div>
@import url('https://fonts.google.com/specimen/Roboto+Slab?query=roboto+slab');
body {
background: #027676;
font-family: Arial, Helvetica, sans-serif
}
.card {
border: none;
border-radius: 0;
width: 550px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)
}
.text-muted {
font-weight: 500 !important;
font-size: 12px;
color: #6c757dcc !important
}
h2 {
color: #028282;
padding: 10px 0 20px;
font-family: Roboto Slab !important;
font-weight: bold
}
.form-group {
margin-top: 20px
}
.first {
margin-top: 0 !important
}
.form-control {
border-radius: 0
}
.form-group label {
font-size: 9px;
font-weight: bold
}
.form-group span {
color: rgb(255, 0, 0)
}
.form-control:focus {
border: 1.5px solid #adb5bd;
border-radius: 0;
box-shadow: none;
background: #ff000012;
letter-spacing: 1px;
color: #000
}
.form-check-label {
font-size: 9px;
font-weight: bold
}
.btn-block {
border-radius: 0;
border: none;
background: blue;
margin-top: 10px;
padding-top: 0px;
background: #027676
}
.btn-block:hover {
background: #027676;
}
.btn-block:focus {
box-shadow: none;
background: #018080 !important
}
.btn-primary span {
font-size: 12px
}
.val_error {
color: #dc3545;
font-size: 10px;
padding-top: 5px;
font-weight: bold
}