"PHOPS"
Bootstrap 4.1.1 Snippet by hanSolo012

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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="styles/style.css"> <title>PHOPS</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-lith fixed-top"> <a class="navbar-brand"href="#">PHOPS</a> <button class="navbar-toggler btn-dark" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Products</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Contacts</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Baskets <span class= "badge badge-light bg-none"> 4</ span></a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-dark my-2 my-sm-0 bg-dark" type="submit"><p class=" white">Search</p></button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block w-100" src="img/imgCont1.jpg" data-src="holder.js/900x400?theme=social" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/imgCont2.jpg" data-src="holder.js/900x400?theme=industrial" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="img/imgCont3.jpg" data-src="holder.js/900x400?theme=industrial" alt="Three slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn btn-outline-dark bg-dark"><p class=" white">More Information</p></button> </div> </div> </div> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn text-center btn-outline-dark bg-dark "><p class="white">More Information</p></button> </div> </div> </div> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn btn-outline-dark bg-dark "><p class="white">More Information</p></button> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class= "col-sm-1"></div> <div class="col-sm-10"> <div class="card"> <img class="card-img" src="img/imgCont1.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn btn-outline-dark bg-dark"><p class=" white">More Information</p></button> </div> </div> </div> <div class= "col-sm-1"></div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn btn-outline-dark bg-dark "><p class=" white">More Information</p></button> </div> </div> </div> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn text-center btn-outline-dark bg-dark"><p class="white">More Information</p></button> </div> </div> </div> <div class="col"> <div class="card"> <img class="card-img" src="img/123.jpg" alt="Card image"> <div class="card-img-overlay"> <button type="button" class="btn btn-outline-dark bg-dark "><p class="white">More Information</p></button> </div> </div> </div> </div> </div> <footer> <div class="container-fluid"> <ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <a href="#" class="list-group-item">Third item</a> </ul> </div> <div class="container">s <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6 "> <div class="logo-part"> <img src="https://i.ibb.co/sHZz13b/logo.png" class="w-50 logo-footer" > <p>7637 Laurel Dr. King Of Prussia, PA 19406</p> <p>Use this tool as test data for an automated system or find your next pen</p> </div> </div> <div class="col-md-6 px-4"> <h6> About Company</h6> <p>But horizontal lines can only be a full pixel high.</p> <a href="#" class="btn-footer"> More Info </a><br> <a href="#" class="btn-footer"> Contact Us</a> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6 px-4"> <h6> Help us</h6> <div class="row "> <div class="col-md-6"> <ul> <li> <a href="#"> Home</a> </li> <li> <a href="#"> About</a> </li> <li> <a href="#"> Service</a> </li> <li> <a href="#"> Team</a> </li> <li> <a href="#"> Help</a> </li> <li> <a href="#"> Contact</a> </li> </ul> </div> <div class="col-md-6 px-4"> <ul> <li> <a href="#"> Cab Faciliy</a> </li> <li> <a href="#"> Fax</a> </li> <li> <a href="#"> Terms</a> </li> <li> <a href="#"> Policy</a> </li> <li> <a href="#"> Refunds</a> </li> <li> <a href="#"> Paypal</a> </li> </ul> </div> </div> </div> <div class="col-md-6 "> <h6> Newsletter</h6> <div class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </div> <form class="form-footer my-3"> <input type="text" placeholder="search here...." name="search"> <input type="button" value="Go" > </form> <p>That's technology limitation of LCD monitors</p> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
html { } body { background-color: black; } .container { margin-top: 2%; } .nav-link { color: white; } .nav-link :hover { color: #ffffff; text-decoration: underline; } .card { color: wheat; } .card-img-overlay { color: white; } .container-fluid { margin-top: 30px; } .btn btn-outline-dark btn-block btn-lg { color: white; } .white { margin: 0; color: white; } .container-fluid { background-color: black; } .badge badge-light bg-none:hover { color: blue; } .navbar-brand { font-size: 40px; }

Related: See More

Paper Kit 2 PRO

Questions / Comments: