<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="container"> <br> <p class="text-center">More bootstrap 4 components on <a href="http://webublogoverflow.com/">webublogoverflow.com</a></p> <hr> <div class="row"> <aside class="col-sm-4"> <p>with us</p> <div class="card"> <article class="card-body"> <a href="" class="float-right btn btn-outline-primary">Sign up</a> <h4 class="card-title mb-4 mt-1">Choose us</h4> <form> <div class="form-group"> <label>Your email</label> <input name="" class="form-control" placeholder="Email" type="email"> </div> <!-- form-group// --> <div class="form-group"> <a class="float-right" href="#">Forgot?</a> <label>Your password</label> <input class="form-control" placeholder="******" type="password"> </div> <!-- form-group// --> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox"> Save password </label> </div> <!-- checkbox .// --> </div> <!-- form-group// --> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Login </button> </div> <!-- form-group// --> </form> </article> </div> <!-- card.// --> </aside> <!-- col.// --> <aside class="col-sm-4"> <p>Inter in</p> <div class="card"> <article class="card-body"> <a href="" class="float-right btn btn-outline-primary">Sign up</a> <h4 class="card-title mb-4 mt-1">Sign in</h4> <p> <a href="" class="btn btn-block btn-outline-info"> <i class="fab fa-twitter"></i>   Login via Twitter</a> <a href="" class="btn btn-block btn-outline-primary"> <i class="fab fa-facebook-f"></i>   Login via facebook</a> </p> <hr> <form> <div class="form-group"> <input name="" class="form-control" placeholder="Email or login" type="email"> </div> <!-- form-group// --> <div class="form-group"> <input class="form-control" placeholder="******" type="password"> </div> <!-- form-group// --> <div class="row"> <div class="col-md-6"> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Login </button> </div> <!-- form-group// --> </div> <div class="col-md-6 text-right"> <a class="small" href="#">Forgot password?</a> </div> </div> <!-- .row// --> </form> </article> </div> <!-- card.// --> </aside> <!-- col.// --> <aside class="col-sm-4"> <p>Our map</p> <div class="card"> <article class="card-body"> <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d15916.085640414378!2d33.185751550000006!3d-4.2160796!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2stz!4v1538627227928" width="320" height="330" frameborder="0" style="border:0" allowfullscreen></iframe> </article> </div> <!-- card.// --> </aside> <!-- col.// --> </div> <!-- row.// --> </div> <!--container end.//--> <br><br><br> <footer class="kilimanjaro_area"> <!-- Top Footer Area Start --> <div class="foo_top_header_one section_padding_100_70"> <div class="container"> <div class="row"> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>About Us</h5> <p>It includes rich features & contents. It's designed & developed based on One Page/ Multi-page Layout,blog themes,world press themes and blogspot. You can use any layout from any demo anywhere.</p> <p>webblogoverflow is completely creative, clean & 100% responsive website. Put your business into next level with Webublogoverflow.</p> </div> <div class="kilimanjaro_part m-top-15"> <h5>Social Links</h5> <ul class="kilimanjaro_social_links"> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i> Facebook</a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li> <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i> Pinterest</a></li> <li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i> YouTube</a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin</a></li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Tags Widget</h5> <ul class=" kilimanjaro_widget"> <li><a href="#">Classy</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Creative</a></li> <li><a href="#">One Page</a></li> <li><a href="#">Multipurpose</a></li> <li><a href="#">Minimal</a></li> <li><a href="#">Classic</a></li> <li><a href="#">Medical</a></li> </ul> </div> <div class="kilimanjaro_part m-top-15"> <h5>Important Links</h5> <ul class="kilimanjaro_links"> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Terms & Conditions</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>About Licences</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Help & Support</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Careers</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Privacy Policy</a></li> <li><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i>Community & Forum</a></li> </ul> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Latest News</h5> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> <div class="kilimanjaro_blog_area"> <div class="kilimanjaro_thumb"> <img class="img-fluid" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt=""> </div> <a href="#">Your Blog Title Goes Here</a> <p class="kilimanjaro_date">21 Jan 2018</p> <p>Lorem ipsum dolor sit amet, consectetur</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="kilimanjaro_part"> <h5>Quick Contact</h5> <div class="kilimanjaro_single_contact_info"> <h5>Phone:</h5> <p>+255 789 54 50 40 <br> +2255 766 90 94 00</p> </div> <div class="kilimanjaro_single_contact_info"> <h5>Email:</h5> <p>support@webblogoverflow.com <br> luckmoshy@gmail.com</p> </div> </div> <div class="kilimanjaro_part"> <h5>Latest Works</h5> <div class="kilimanjaro_works"> <a class="kilimanjaro_works_img" href="img/gallery/1.jpg"><img src="img/gallery/1.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/4.jpg"><img src="img/gallery/4.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/5.jpg"><img src="img/gallery/5.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/7.jpg"><img src="img/gallery/7.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/10.jpg"><img src="img/gallery/10.jpg" alt=""></a> <a class="kilimanjaro_works_img" href="img/gallery/11.jpg"><img src="img/gallery/11.jpg" alt=""></a> </div> </div> </div> </div> </div> </div> <!-- Footer Bottom Area Start --> <div class=" kilimanjaro_bottom_header_one section_padding_50 text-center"> <div class="container"> <div class="row"> <div class="col-12"> <p>© All Rights Reserved by <a href="#">Webublogoverflow.blogspot -(with all love)<i class="fa fa-love"></i></a></p> </div> </div> </div> </div> </footer>

.header { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; min-height: 350px; padding-top: 4rem; padding-bottom: 4rem; color: #fff; background-color: #777; } *, ::after, ::before { box-sizing: box; } h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.1; } .header h1 a { color: #fff; text-decoration: none; } /*********footer*******************/ . kilimanjaro_area { position: relative; z-index: 1; } .foo_top_header_one { background-color: #15151e; color: #fff; } .section_padding_100_70 { padding-top: 100px; padding-bottom: 70px; } .foo_top_header_one { color: #fff; }.kilimanjaro_part { margin-bottom: 30px; } .foo_top_header_one .kilimanjaro_part > h5 { color: #fff; } .kilimanjaro_part h4, .kilimanjaro_part h5 { margin-bottom: 30px; } .kilimanjaro_single_contact_info > p, .kilimanjaro_single_contact_info > h5, .kilimanjaro_blog_area > a, .foo_top_header_one .kilimanjaro_part > p { color: rgba(255,255,255,.5); } p, ul li, ol li { font-weight: 300; } ul { margin: 0; padding: 0; } .kilimanjaro_bottom_header_one { background-color: #111; } .section_padding_50 { padding: 50px 0; } .kilimanjaro_bottom_header_one p { color: #fff; margin: 0; } p, ul li, ol li { font-weight: 300; } .kilimanjaro_bottom_header_one a { color: inherit; font-size: 14px; } a, h1, h2, h3, h4, h5, h6 { font-weight: 400; } .m-top-15 { margin-top: 15px; } ul { margin: 0; padding: 0; } .kilimanjaro_widget > li { display: inline-block; } p, ul li, ol li { font-weight: 300; } ol li, ul li { list-style: outside none none; } .kilimanjaro_widget a { border: 1px solid #333; border-radius: 6px; color: #888; display: inline-block; font-size: 13px; margin-bottom: 4px; padding: 7px 12px; } ul { margin: 0; padding: 0; } .kilimanjaro_links a { border-bottom: 1px solid #333; color: rgba(255,255,255,.5); display: block; font-size: 13px; margin-bottom: 5px; padding-bottom: 10px; } .kilimanjaro_links a { color: rgba(255,255,255,.5); font-size: 13px; } top-15 { margin-top: 15px; } .foo_top_header_one .kilimanjaro_part > h5 { color: #fff; } .kilimanjaro_part h4, .kilimanjaro_part h5 { margin-bottom: 30px; } .kilimanjaro_social_links > li { display: inline-block; } p, ul li, ol li { font-weight: 300; } .kilimanjaro_social_links a { border: 1px solid #333; border-radius: 6px; color: #888; display: inline-block; font-size: 13px; margin-bottom: 3px; padding: 7px 12px; } .kilimanjaro_blog_area .kilimanjaro_date { color: #27ae60; font-size: 13px; margin-bottom: 5px; } .kilimanjaro_blog_area > p { color: rgba(255,255,255,.5); line-height: 1.3; margin-bottom: 0; } .kilimanjaro_works > a { display: inline-block; float: left; position: relative; width: 33.33333333%; z-index: 1; } .kilimanjaro_thumb { left: 0; position: absolute; top: 0; width: 75px; } .kilimanjaro_links a i { padding-right: 10px; } /* :: 18.0 Footer Area CSS */ .footer_area { position: relative; z-index: 1; } .footer_bottom p > i, .footer_bottom p > a:hover { color: #27ae60; } .social_links_area { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 50px 0 30px 0; text-align: center; position: relative; z-index: 1; } .social_links_area > a:hover { color: #27ae60; } .inline-style .social_links_area > a:hover { background-color: transparent; color: #27ae60; border: 0px solid transparent; } .single_feature:hover .feature_text h4 { color: #27ae60; } .kilimanjaro_blog_area { border-bottom: 1px solid #333; margin-bottom: 15px; padding: 0 0 15px 90px; position: relative; z-index: 1; } .kilimanjaro_links a { border-bottom: 1px solid #333; color: rgba(255,255,255,.5); display: block; font-size: 13px; margin-bottom: 5px; padding-bottom: 10px; }