"Contact Us "
Bootstrap 4.1.1 Snippet by arslanahmed

Post to Facebook Tweet this

<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 ----------> <html> <head> <title>Contact Us</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div style="background-color: black; padding-bottom: 50px; padding-top: 50px;"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-6"> <div class="ff_contact_box"> <span class="fa fa-user"></span> <h4>Call Us</h4> <p style="margin:0px;">+923338048724</p> <p style="margin:0px;">+9231559510342</p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="ff_contact_box"> <span class="fa fa-envelope"></span> <h4>Email</h4> <p style="margin:0px;"><a style="text-decoration: none;transition: all 0.3s;" href="#">ashi3610@gmail.com</a></p> <p style="margin:0px"><a style="text-decoration: none;transition: all 0.3s;" href="#">demomail@gmail.com</a></p> </div> </div> <div class="col-lg-4 col-md-6"> <div class="ff_contact_box"> <span class="fa fa-map-marker"></span> <h4>Location</h4> <p style="margin:0px;">Khannapul Islamabad <br>Pakistan</p> </div> </div> </div> </div> </div> </body> </html>
/*-------- contact page start --------*/ .ff_contact_box { text-align: center; padding: 40px 0px; margin-bottom: 50px; background-image: url(contact.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: initial; position: relative; -webkit-perspective: 100px; -moz-perspective: 100px; -ms-perspective: 100px; perspective: 100px; } .ff_contact_box:after { content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; outline: rgba(232, 63, 83, 0.4) solid 10px; background-color: rgba(33, 39, 49, 0.9); z-index: -1; } .ff_contact_box span { color: #e83f53; font-size: 35px; margin-bottom: 10px; } .ff_contact_box h4 { font-size: 25px; color: #e83f53; margin-bottom: 15px; } .ff_contact_box p { color: #ffffff; } .ff_contact_box a { color: #ffffff; } .ff_contact_box a:hover { color: #e83f53; }

Related: See More

Paper Kit
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: