<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Navigation --> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand text-white" href="#">Bootstrap 4</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link text-white" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Products</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="#">Contact</a> </li> </ul> </div> </div> </nav> <!-- Navigation --> <div class="my-5"></div> <!-- Contact --> <section class="container"> <!--Contact heading--> <h2 class="h1 m-0">Contact us</h2> <!--Contact description--> <p class="pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p> <div class="row"> <!--Grid column--> <div class="col-lg-5 mb-4"> <!--Form with header--> <div class="card border-primary rounded-0"> <div class="card-header p-0"> <div class="bg-primary text-white text-center py-2"> <h3><i class="fa fa-envelope"></i> Write to us:</h3> <p class="m-0">We'll write rarely, but only the best content.</p> </div> </div> <div class="card-body p-3"> <!--Body--> <div class="form-group"> <label>Your name</label> <div class="input-group"> <div class="input-group-addon bg-light"><i class="fa fa-user text-primary"></i></div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> <div class="form-group"> <label>Your email</label> <div class="input-group mb-2 mb-sm-0"> <div class="input-group-addon bg-light"><i class="fa fa-envelope text-primary"></i></div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> <div class="form-group"> <label>Service</label> <div class="input-group mb-2 mb-sm-0"> <div class="input-group-addon bg-light"><i class="fa fa-tag prefix text-primary"></i></div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> </div> <div class="form-group"> <label>Message</label> <div class="input-group mb-2 mb-sm-0"> <div class="input-group-addon bg-light"><i class="fa fa-pencil text-primary"></i></div> <textarea class="form-control"></textarea> </div> </div> <div class="text-center"> <button class="btn btn-primary btn-block rounded-0 py-2">Submit</button> </div> </div> </div> <!--Form with header--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-7"> <!--Google map--> <div class="mb-4"> </div> <!--Buttons--> <div class="row text-center"> <div class="col-md-4"> <a class="bg-primary px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-map-marker"></i></a> <p>San Francisco, CA 94126,<br> United States</p> </div> <div class="col-md-4"> <a class="bg-primary px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-phone"></i></a> <p>+ 01 234 567 89, <br> Mon - Fri, 8:00-22:00</p> </div> <div class="col-md-4"> <a class="bg-primary px-3 py-2 rounded text-white mb-2 d-inline-block"><i class="fa fa-envelope"></i></a> <p>info@gmail.com <br> sale@gmail.com</p> </div> </div> </div> <!--Grid column--> </div> </section> <!-- Contact --> <!-- Footer --> <footer class="footer bg-dark text-white"> <!-- Social Icons --> <div class="bg-primary"> <div class="container"> <div class="row py-4"> <div class="col-md-6 col-lg-7"> <h4 class="mb-0 white-text">Get connected with us on social networks!</h4> </div> <div class="col-md-6 col-lg-5 text-right"> <a><i class="fa fa-facebook white-text mr-lg-4 fa-2x"> </i></a> <a><i class="fa fa-twitter white-text mr-lg-4 fa-2x"> </i></a> <a><i class="fa fa-google-plus white-text mr-lg-4 fa-2x"> </i></a> <a><i class="fa fa-linkedin white-text mr-lg-4 fa-2x"> </i></a> <a><i class="fa fa-instagram white-text mr-lg-4 fa-2x"> </i></a> </div> </div> </div> </div> <!-- Social Icons --> <!-- Footer Links --> <div class="container pt-5 pb-2"> <div class="row"> <div class="col-md-3 col-lg-4 col-xl-3"> <h4>Company name</h4> <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25"> <p> When an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting </p> </div> <div class="col-md-2 col-lg-2 col-xl-2 mx-auto"> <h4>Products</h4> <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25"> <p><a href="#" class="text-white">Product-1</a></p> <p><a href="#" class="text-white">Product-2</a></p> <p><a href="#" class="text-white">Product-3</a></p> <p><a href="#" class="text-white">Product-4</a></p> </div> <div class="col-md-3 col-lg-2 col-xl-2 mx-auto"> <h4>Useful links</h4> <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25"> <p><a href="#" class="text-white">Home</a></p> <p><a href="#" class="text-white">About Us</a></p> <p><a href="#" class="text-white">Services</a></p> <p><a href="#" class="text-white">Contact</a></p> </div> <div class="col-md-4 col-lg-3 col-xl-3"> <h4>Contact</h4> <hr class="bg-white mb-2 mt-0 d-inline-block mx-auto w-25"> <p><i class="fa fa-home mr-3"></i> Company Location</p> <p><i class="fa fa-envelope mr-3"></i> info@example.com</p> <p><i class="fa fa-phone mr-3"></i> + 98 765 432 11</p> <p><i class="fa fa-print mr-3"></i> + 98 765 432 10</p> </div> </div> </div> <!-- Footer Links--> <hr class="bg-white mx-4 mt-2 mb-1"> <!-- Copyright--> <div class="container-fluid"> <p class="text-center m-0 py-1"> © 2017 Copyright <a href="#" class="text-white">Bootstrap-4</a> </p> </div> <!-- Copyright --> </footer> <!-- Footer -->

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css'); .bg-dark { background-color: #343a40!important; }