<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 mt-5">
<div class="darkcontactform">
<form>
<h4 class="text-center mt-2">Bootatrap Customize Contact Form</h4>
<div class="form-group mt-4">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Your Full Name">
</div>
<div class="form-group mt-4">
<label for="email_id">Email address</label>
<input type="email" class="form-control" id="email_id" placeholder="Enter valid email address">
</div>
<div class="form-group mt-4">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Please provide concern topic">
</div>
<div class="form-group mt-4">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Please provide concern topic">
</div>
<div class="form-group mt-4">
<label for="message">Message</label>
<textarea row="7" class="form-control" id="message"></textarea>
</div>
<div class="form-group mt-4 form-check">
<input type="checkbox" class="form-check-input" id="policycheck">
<label class="form-check-label" for="policycheck">Do you agree our terms and conditions?</label>
</div>
<button type="submit" class="btn darksubmitbtn">Submit</button>
</form>
</div>
</div>
<div class="col-md-6 mt-5">
<div class="lightcontactform">
<form>
<h4 class="text-center mt-2">Bootatrap Customize Contact Form</h4>
<div class="form-group mt-4">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Your Full Name">
</div>
<div class="form-group mt-4">
<label for="email_id">Email address</label>
<input type="email" class="form-control" id="email_id" placeholder="Enter valid email address">
</div>
<div class="form-group mt-4">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Please provide concern topic">
</div>
<div class="form-group mt-4">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject" placeholder="Please provide concern topic">
</div>
<div class="form-group mt-4">
<label for="message">Message</label>
<textarea row="7" class="form-control" id="message"></textarea>
</div>
<div class="form-group mt-4 form-check">
<input type="checkbox" class="form-check-input" id="policycheck">
<label class="form-check-label" for="policycheck">Do you agree our terms and conditions?</label>
</div>
<button type="submit" class="btn lightsubmitbtn">Submit</button>
</form>
</div>
</div>
</div>
</div>
.darkcontactform{
box-shadow: 0px 8px 12px 2px rgb(0,0,0,0.24);
border-radius: 15px;
padding: 2em;
background-color: rgba(101, 12, 46, 0.77);
}
.darkcontactform h4{
color:#fff;
}
.darkcontactform label{
color:#fff;
}
.darkcontactform .form-control{
background-color: rgb(73, 31, 47);
background-clip: padding-box;
border: 1px solid rgb(73, 31, 47);
box-shadow: 0px 3px 5px 2px rgb(88, 54, 68);
color: #fff;
}
.darkcontactform input{
border-radius: 20px;
}
.darksubmitbtn{
padding: .5em 2.5em;
background: #491f2f;
border-color: #491f2f;
border-radius: 20px;
color: #fff;
box-shadow: 0px 3px 5px 2px rgb(88, 54, 68);
transition: all 1s linear;
}
.darksubmitbtn:hover, .darksubmitbtn:focus{
color: #fff;
box-shadow: 0px 3px 5px 2px rgb(88, 54, 68);
background-color: #89445e;
border: 1px solid #89445e;
}
/*///////////////////////////////////////////////////////////////////////*/
.lightcontactform{
box-shadow: 0px 8px 12px 2px rgb(0,0,0,0.24);
border-radius: 15px;
padding: 2em;
border-top:2px solid rgb(73, 31, 47);
}
.lightcontactform h4{
color:rgb(73, 31, 47);
}
.lightcontactform label{
color:rgb(73, 31, 47);
}
.lightcontactform .form-control{
background-color: rgb(216, 208, 211);
background-clip: padding-box;
border: 1px solid rgb(216, 208, 211);
box-shadow: 0px 3px 5px 2px rgb(206, 190, 196);
color: #491f2f;
}
.lightcontactform input{
border-radius: 20px;
}
.lightsubmitbtn{
padding: .5em 2.5em;
background: #89445e;
border-color: #89445e;
border-radius: 20px;
color: #fff;
box-shadow: 0px 3px 5px 2px rgb(88, 54, 68);
transition: all 1s linear;
}
.lightsubmitbtn:hover, .lightsubmitbtn:focus{
color: #fff;
box-shadow: 0px 3px 5px 2px rgb(88, 54, 68);
background-color: #491f2f;
border: 1px solid #491f2f;
}
