<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="bg-nav bg-dark"> <div class="container"> <nav class="navbar navbar-expand-sm navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Our Team</a> <a class="dropdown-item" href="#">Price Plans</a> <a class="dropdown-item" href="#">Blog</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> <div class="banner slider"> <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/roofing-slider-img.jpg" alt="Los Angeles"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-secondary mt-4">Get More Details</button> </div> </div> </div> <div class="carousel-item"> <img src="https://demo.proteusthemes.com/growthpress/wp-content/uploads/sites/65/2017/09/background22-1920x748.png" alt="Chicago"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-secondary mt-4">Get More Details</button> </div> </div> </div> <div class="carousel-item"> <img src="https://demo.proteusthemes.com/growthpress/wp-content/uploads/sites/65/2017/08/1min.png" alt="New York"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-secondary mt-4">Get More Details</button> </div> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <div class="services"> <div class="container"> <div class="row"> <div class="col-md-9 pt-5"> <h2>ABOUT OUR COMPANY</h2> <hr class="pb-4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt porta velit, sed suscipit massa consequat sed. Integer est ante, dictum quis metus non, rhoncus accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt porta velit, sed suscipit massa consequat sed. Integer est ante, dictum quis metus non, rhoncus accumsan.</p> <div class="row pt-3"> <div class="col-md-6"> <i class="fa fa-clock-o fa-2x pb-2"></i> <h5>24/7 AVAILABILITY</h5> <p>Lorem ipsum dolor sit amet, consecteturetur adipis cingelit, Mauris mollis.</p> </div> <div class="col-md-6"> <i class="fa fa-book fa-2x pb-2"></i> <h5>FREE ESTIMATION</h5> <p>Lorem ipsum dolor sit amet, consecteturetur adipis cingelit, Mauris mollis.</p> </div> </div> <div class="row pt-3"> <div class="col-md-6"> <i class="fa fa-sliders fa-2x pb-2"></i> <h5>CERTIFICATION</h5> <p>Lorem ipsum dolor sit amet, consecteturetur adipis cingelit, Mauris mollis.</p> </div> <div class="col-md-6"> <i class="fa fa-eye fa-2x pb-2"></i> <h5>QUICK & EFFICIENT</h5> <p>Lorem ipsum dolor sit amet, consecteturetur adipis cingelit, Mauris mollis.</p> </div> </div> </div> </div> </div> </div> <div class="cta bg-danger pb-4 pt-5 mt-5"> <div class="container"> <div class="row"> <div class="col-md-9"> <h2> From Complete Turn Key To Project Manager. Leave The Building To The Professionals. </h2> </div> <div class="col-md-3 mt-3"> <button type="button" class="btn btn-lg btn-dark">Book Service</button> </div> </div> </div> </div> <div class="roof mt-5"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2><strong>OUR SERVICES</strong></h2> <hr> </div> </div> <div class="row mt-5"> <div class="col-md-4"> <h4>1. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-1-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> <div class="col-md-4"> <h4>2. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-3-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> <div class="col-md-4"> <h4>3. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-2-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> </div> <div class="row mt-5"> <div class="col-md-4"> <h4>1. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-1-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> <div class="col-md-4"> <h4>2. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-3-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> <div class="col-md-4"> <h4>3. Residential Roofing</h4> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/Img-2-1.jpg"> <p class="pt-3"> Lorem Ipsum is simply dummy text of the printing dummy text ever since the 1500s and typesetting industry.</p> <a href="#">Learn More</a> </div> </div> </div> </div> <div class="provide mt-5 pb-3"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="http://insignia-themes.website/roofing/wp-content/uploads/2017/12/roofing-3.jpg?id=30"> </div> <div class="col-md-6 pt-4"> <h1>We Work to Provide Impeccable Home Services</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> <div class="row"> <div class="col-md-2"> <i class="fa fa-home fa-3x"></i> </div> <div class="col-md-10 pt-2"> <h4>Fast and Efficient Work</h4> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> <div class="col-md-2"> <i class="fa fa-barcode fa-3x"></i> </div> <div class="col-md-10 pt-2 mb-3"> <h4>Best Price Guarantee</h4> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </div> <button type="button" class="btn btn-lg btn-danger ">Book Service</button> </div> </div> </div> </div> </div> <div class="trust mt-5 pb-5 pt-5"> <div class="container pt-5"> <div class="row text-center"> <div class="col-md-12"> <h2>Equipment you can count on. People you can trust.</h2> <p class="pt-2 pb-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy.</p> <btn type="button" class="btn btn-danger">Book Service</btn> </div> </div> </div> </div> <div class="footer bg-dark pt-5 pb-3"> <div class="container pt-4"> <div class="row text-center"> <div class="col-md-12"> <h6>Say hello admin@invictus.com</h6> <ul class="list-unstyled"> <li class="list-inline-item"><a href="#"> Home</a></li> <li class="list-inline-item"><a href="#"> About us</a></li> <li class="list-inline-item"><a href="#"> Privacy</a></li> <li class="list-inline-item"><a href="#"> Terms & Conditions</a></li> <li class="list-inline-item"><a href="#"> Contact us</a></li> </ul> <p>Powered by : Invictus - Premium WordPress Theme</p> </div> </div> </div> </div>

img {width:100%;} .carousel-inner img {width: 100%;} .carousel-caption {color:#ccc;top:140px; bottom: auto; text-align:left;} .carousel-caption h1 {color:#fff;} .code-info h4 {color:#fff;} .services-box1:hover {background: ; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);} .trust {color:#fff; background-image: url("http://insignia-themes.website/roofing/wp-content/uploads/2017/12/roofing-bg.jpg?id=42");} .fa {color:#dd0000;} hr {border-color:#dd0000; width:30%;} .cta {color:#fff;} a {color:#dd0000;} a:hover {color:#dd0000;} .footer {color:#ccc;}