"Contact us page"
Bootstrap 4.0.0 Snippet by murli

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="fullWidth contactwel"> <div class="container"> <center style="margin-top: -38px"><img src="http://www.bncet.ac.in/wp-content/uploads/2017/06/fffff.png" height="75px"></center> <div class="row conbody"> <div class="col-md-1"></div> <div class="col-md-4 text-left"> <h3>Address</h3> <p>Plat No.154, B Ayodhaya Nagar,<br> Kanha Vihar, Bhura Patel Marg,<br> Near stadium,<br> Delhi.<br> Contact: +91-987654321<br> Email: abcd@gmail.com<br> <span style="color:#236fb4; text-decoration:underline; font-size:18px;">website :www.movekey.com</span> </p> <div> <img src="http://www.sme.in/cirkitelectro/images/contact_us_button.png" class="img-responsive" alt="" width="227px"> </div> </div> <div class="col-md-5 text-right"> <h3>Enquiry Form</h3> <form role="form" class="contact-form" id="contact-form" name="contactformfree" method="post" action="free_process.php" onsubmit="return validate.check(this)"> <div class="form-group"> <label for="fullName">Full Name :</label> <input type="text" class="form-control" name="Full_Name" id="Full_Name" aria-describedby="emailHelp" placeholder="Full Name" required=""> </div> <div class="form-group"> <label for="email">Email Id:</label> <input type="email" class="form-control" name="Email_Address" id="Email_Address" aria-describedby="emailHelp" placeholder="Email id" required=""> </div> <div class="form-group"> <label for="mobile">Mobile No :</label> <input type="number" class="form-control" name="Full_Name2" id="Full_Name2" aria-describedby="emailHelp" placeholder="Mobile No." required=""> </div> <div class="form-group"> <label for="messages">Messages :</label> <textarea class="form-control" name="Your_Message" id="Your_Message" rows="5"></textarea> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317718.6933426864!2d-0.3817855154247799!3d51.52830796345118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C+UK!5e0!3m2!1sen!2sin!4v1526460653096" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div>
.contactwel { width: 100%; padding: 0; margin: 50px 0 25px 0px; } .form-group label { font-size: 1.6rem; margin-bottom: .8rem; font-weight: 600; float:left; } .contactwel h1 { width: 100%; font-family: calibri; color: #2273ba; font-weight: bold; text-transform: uppercase; padding: 0; margin-bottom: 36px; font-size: 36px; text-align: center; background-image: url(../images/hborder.png); background-position: center bottom; background-repeat: no-repeat; padding-bottom: 20px; margin-bottom: 20px; } .conbody { width: 100%; padding: 0; margin: 15px 0px; } .conbody h3 { width: 100%; text-align: left; float: left; font-family: calibri; font-weight: bold; color: #2273ba; font-size: 24px; line-height: 36px; } .conbody p { float: left; font-family: calibri; font-size: 18px; line-height: 36px; text-align: left; color: #343333; } .btn.btn-primary { background-color: #030303; border: none; border-radius: 0px; float: left; width: 142px; } .btn.btn-primary:hover{ box-shadow:0px 0px 3px 3px skyblue; } } input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], textarea.form-control { /* box-shadow: inset 0 0 1rem 0 rgba(0,0,0, .1); */ border: 1px solid lightslategray; border-radius: .3rem; color: #363636; transition: .3s; transform-style: preserve-3d; -webkit-appearance: none; background-color: #fff; font-size: 1.4rem; outline: none !important; width: 100%; height: inherit; padding: 10px; border-radius:0px; height:55px; } p{ opacity:1 !important; }

Related: See More


Questions / Comments: