"bootstrap Kilimanjaro nice blog"
Bootstrap 4.1.1 Snippet by luckmoshy

<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"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>webublogoverflow Tutorial</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="css/blog-home.css" rel="stylesheet"> <style></style> </head> <body> <div class="section" id="b-section-header" name="Header"><div class="widget Header" data-version="2" id="Header1"> <div class="header image-placement-behind no-image"> <div class="container"> <h1><a href="">Webublogoverflow Tutorial</a></h1> <p>Webublogoverflow</p> </div> </div> </div></div> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">Webublogoverflow</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> <div class="ml-auto my-2 my-lg-0"> <div class="section" id="b-section-navbar-search-form" name="Navbar: search form"><div class="widget BlogSearch" data-version="2" id="BlogSearch1"> <form action="" class="form-inline"> <input aria-label="Search this blog" class="form-control mr-sm-2" name="q" placeholder="Search this blog" type="text"> <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button> </form> </div></div> </div> </div> </div> </nav> <!-- Page Content --> <div class="container"> <div class="row"> <!-- Blog Entries Column --> <div class="col-md-8"> <h1 class="my-4">Kilimanjaro park <small>mbuga za wanyama</small> </h1> <!-- Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Serengeti</h2> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p> <a href="https://bootsnipp.com/fullscreen/6Xa15" class="btn btn-primary">Read More →</a> </div> <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div> </div> <!-- Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg"> <div class="card-body"> <h2 class="card-title">Manyara</h2> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p> <a href="https://bootsnipp.com/fullscreen/6Xa15" class="btn btn-primary">Read More →</a> </div> <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div> </div> <!-- Blog Post --> <div class="card mb-4"> <img class="card-img-top" src="https://3.bp.blogspot.com/--C1wpaf_S4M/W7V__10nRoI/AAAAAAAAK24/1NSfapuYSIY0f0wzXY9NgoH0FjQLT07YACKgBGAs/s1600/maxresdefault.jpg" alt="Card image cap"> <div class="card-body"> <h2 class="card-title">Tarangire</h2> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquid atque, nulla? Quos cum ex quis soluta, a laboriosam. Dicta expedita corporis animi vero voluptate voluptatibus possimus, veniam magni quis!</p> <a href="https://bootsnipp.com/fullscreen/6Xa15" class="btn btn-primary">Read More →</a> </div> <div class="card-footer text-muted"> Posted on January 1, 2017 by <a href="#">Start Bootstrap</a> </div> </div> <!-- Pagination --> <ul class="pagination justify-content-center mb-4"> <li class="page-item"> <a class="page-link" href="#">← Older</a> </li> <li class="page-item disabled"> <a class="page-link" href="#">Newer →</a> </li> </ul> </div> <!-- Sidebar Widgets Column --> <div class="col-md-4"> <!-- Search Widget --> <div class="card my-4"> <h5 class="card-header">Search</h5> <div class="card-body"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> </div> </div> </div> <!-- Categories Widget --> <div class="card my-3"> <h5 class="card-header">Categories</h5> <div class="card-body"> <div class="row"> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">Simba</a> </li> <li> <a href="#">Nyati</a> </li> <li> <a href="#">Faru</a> </li> </ul> </div> <div class="col-lg-6"> <ul class="list-unstyled mb-0"> <li> <a href="#">Kiboko</a> </li> <li> <a href="#">Fisi</a> </li> <li> <a href="#">Pundamlia</a> </li> </ul> </div> </div> </div> </div> <!-- Side Widget --> <div class="card my-4"> <h5 class="card-header">maelezo</h5> <div class="card-body"> You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers! </div> </div> <!-- Side Widget --> <div class="card my-4"> <h5 class="card-header">banner</h5> <div class="card-body"> <img class="card-img-top" src="https://2.bp.blogspot.com/-vvG5hMTFOro/W6RaoxdAikI/AAAAAAAAK1k/jezYdP7fvfYvt15Jv8a0agrGQE2lMU8YgCKgBGAs/s1600/MASAI-2.jpg" alt="Card image cap"> </div> </div> <!-- tweeter --> <div class="card my-4"> <h5 class="card-header">Tweeter here</h5> <div class="card-body"> <a class="twitter-timeline" href="https://twitter.com/Luckmoshy?ref_src=twsrc%5Etfw">Tweets by Luckmoshy</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a href="https://twitter.com/Luckmoshy?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @Luckmoshy</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div> </div> </div> <!-- /.row --> </div> <!-- /.container --> <!--footer--> <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> <!-- Bootstrap core JavaScript --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
.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; }

Related: See More


Questions / Comments:

why my css doesnt run im using codeigniter as my framewrok <link rel="stylesheet" href="<?php echo base_url().'../css/gaya.css'?>" type="text/css" > it doesnt run when i use yours <link href="css/gaya.css" rel="stylesheet"> also not working

rahmanadwi () - 8 months ago - Reply 0