"Contact Us"
Bootstrap 4.1.1 Snippet by omarhassan2016

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Welcome to Contact Us Page</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <section> <div class="topCon"> <h2>Cntact Us</h2> <p>Always humans, never bots. The hands-down, sharpest and friendliest support team in the biz. <br> Contact us and we'll get back to you in about 30 minutes.</p> </div> <div class="container"> <div class="contactInfo"> <div class="box"> <div class="icon"> <i class="fa fa-map-marker"></i> </div> <div class="text"> <h3>Address</h3> <p>SSK Residency,AECS Layout,<br>Banglore,560068</p> </div> </div> <div class="box"> <div class="icon"> <i class="fa fa-phone"></i> </div> <div class="text"> <h3>Phone Number</h3> <p>+91-7406028344 <br>+91-9972659803 </p> </div> </div> <div class="box"> <div class="icon"> <i class="fa fa-envelope-o"></i> </div> <div class="text"> <h3>Email address</h3> <p>omarhassan-2016@outlook.com</p> </div> </div> </div> <div class="contactForm"> <h2>Send Message</h2> <form class="" action="index.html" method="post"> <div class="inputBox"> <input type="text" name="" value="" required> <span>Enter Full Name</span> </div> <div class="inputBox"> <input type="text" name="" value="" required> <span>Enter Email</span> </div> <div class="inputBox"> <textarea name="" required></textarea> <span>Type Your Message</span> </div> <div class="inputBox"> <input type="submit" name="" value="submit"> </div> </form> </div> </div> <footer>© 2020 Omar Hassan</footer> </section> </body> </html>
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins',sans-serif; } section { position: relative; min-height: 100vh; padding: 50px 100px; display: flex; justify-content: center; align-items: center; background-image: url(https://i.ibb.co/nDDmdVM/bg1.png); background-size: cover; flex-direction: column; } section .topCon { min-width: 800px; text-align: center; } section .topCon h2 { font-size: 36px; font-weight: 500; color: white; } section .topCon p { color: white; font-weight: 300; } .container{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 30px; } .container .contactInfo { width: 50%; display: flex; flex-direction: column; } .container .contactInfo .box { position: relative; padding: 20px 0; display: flex; } .container .contactInfo .box .icon { min-width: 60px; height: 60px; background-color: white; display: flex; justify-content: center; align-items: center; border-radius: 50%;font-size: 24px; } .container .contactInfo .box .text { display: flex; margin: 20px; flex-direction: column; font-size: 16px; color: white; font-weight: 300; } .container .contactInfo .box .text h3 { font-weight: 700; color: rgba(18, 240, 248); } .contactForm { width: 40%; padding: 60px; background-color: white; } .contactForm h2 { font-size: 30px; color: #333; font-weight: 500; } .contactForm .inputBox { margin-top: 10px; position: relative; width: 100%; } .contactForm .inputBox input,.contactForm .inputBox textarea { width: 100%; padding: 5px 0; font-size: 16px; margin: 10px 0; border: none; border-bottom: 2px solid silver; outline: none; resize: none; } .contactForm .inputBox span { position: absolute; left: 0; padding: 5px 0; font-size: 16px; margin: 10px 0; color: #666; transition: 0.5s; } .contactForm .inputBox input:focus ~span, .contactForm .inputBox input:valid ~span, .contactForm .inputBox textarea:focus ~span, .contactForm .inputBox textarea:valid ~span { font-size: 12px; color: rgb(255, 3, 137); transform: translateY(-20px); } .contactForm .inputBox input[type="submit"] { width: 100%; background-color: rgb(13, 198,204); border: none; color: white; font-weight: 500; font-size: 20px; } footer { display: flex; position: absolute; bottom: 10px; font-size: 12px; font-weight: 500; color: white; border: solid 1px black; } @media (max-width:991px) { .container{ flex-direction:column; } .container .contactInfo{ margin-bottom:50px; } .container .contactInfo, .contactForm{ width:100%; } }

Related: See More


Questions / Comments: