shards-ui

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Shards - Agency Landing Page built with Shards - A Modern UI Toolkit</title> <meta name="description" content="A demo landing page for agencies or product oriented businesses built using Shards, a free, modern and lightweight UI toolkit based on Bootstrap 4."> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/shards.min.css?v=3.0.0"> <link rel="stylesheet" href="css/shards-extras.min.css?version=3.0.0"> </head> <body class="shards-landing-page--1">  <div class="welcome d-flex justify-content-center flex-column"> <div class="container">  <nav class="navbar navbar-expand-lg navbar-dark pt-4 px-0"> <a class="navbar-brand" href="#"> <img src="images/agency-landing/shards-logo-white.svg" class="mr-2" alt="Shards - Agency Landing Page"> Shards Agency </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <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="#">Our Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/DesignRevision"><i class="fa fa-twitter"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/designrevision"><i class="fa fa-facebook"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://dribbble.com/hisk"><i class="fa fa-dribbble"></i></a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/designrevision"><i class="fa fa-github"></i></a> </li> </ul> </div> </nav>  </div>   <div class="inner-wrapper mt-auto mb-auto container"> <div class="row"> <div class="col-md-7"> <h1 class="welcome-heading display-4 text-white">Product Development</h1> <p class="text-white">We can help you take your idea from concept to shipping using the latest technologies and best practices available.</p> <a href="#our-services" class="btn btn-lg btn-outline-white btn-pill align-self-center">Learn More</a> </div> </div> </div>  </div>   <div id="our-services" class="our-services section py-4"> <h3 class="section-title text-center my-5">Our Services</h3>  <div class="features py-4 mb-4"> <div class="container"> <div class="row"> <div class="feature py-4 col-md-6 d-flex"> <div class="icon text-primary mr-3"><i class="fa fa-paint-brush"></i></div> <div class="px-4"> <h5>Design & Branding</h5> <p>Quisque mollis mi ac aliquet accumsan. Sed sed dapibus libero. Nullam luctus purus duis sensibus signiferumque.</p> </div> </div> <div class="feature py-4 col-md-6 d-flex"> <div class="icon text-primary mr-3"><i class="fa fa-code"></i></div> <div class="px-4"> <h5>Programming</h5> <p>Quisque mollis mi ac aliquet accumsan. Sed sed dapibus libero. Nullam luctus purus duis sensibus signiferumque.</p> </div> </div> </div> <div class="row"> <div class="feature py-4 col-md-6 d-flex"> <div class="icon text-primary mr-3"><i class="fa fa-font"></i></div> <div class="px-4"> <h5>Copywriting</h5> <p>Quisque mollis mi ac aliquet accumsan. Sed sed dapibus libero. Nullam luctus purus duis sensibus signiferumque.</p> </div> </div> <div class="feature py-4 col-md-6 d-flex"> <div class="icon text-primary mr-3"><i class="fa fa-support"></i></div> <div class="px-4"> <h5>Training & Support</h5> <p>Quisque mollis mi ac aliquet accumsan. Sed sed dapibus libero. Nullam luctus purus duis sensibus signiferumque.</p> </div> </div> </div> </div> </div>  </div>   <div class="blog section section-invert py-4"> <h3 class="section-title text-center m-5">Latest Posts</h3> <div class="container"> <div class="py-4"> <div class="row"> <div class="card-deck"> <div class="col-md-12 col-lg-4"> <div class="card mb-4"> <img class="card-img-top" src="images/common/card-1.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Find Great Places to Work While Travelling</h4> <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...</p> <a class="btn btn-primary btn-pill" href="#">Read More →</a> </div> </div> </div> <div class="col-md-12 col-lg-4"> <div class="card mb-4"> <img class="card-img-top" src="images/common/card-3.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Quick Tips for Improving Your Website's Design</h4> <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...</p> <a class="btn btn-primary btn-pill" href="#">Read More →</a> </div> </div> </div> <div class="col-md-12 col-lg-4"> <div class="card mb-4"> <img class="card-img-top" src="images/common/card-2.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">A Designer's Tips While Travelling and Working</h4> <p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...</p> <a class="btn btn-primary btn-pill" href="#">Read More →</a> </div> </div> </div> </div> </div> </div> </div> </div>   <div class="testimonials section py-4"> <h3 class="section-title text-center m-5">Testimonials</h3> <div class="container py-5"> <div class="row"> <div class="col-md-4 testimonial text-center"> <div class="avatar rounded-circle with-shadows mb-3 ml-auto mr-auto"> <img src="images/common/avatar-1.jpeg" class="w-100" alt="Testimonial Avatar" /> </div> <h5 class="mb-1">Osbourne Tranter</h5> <span class="text-muted d-block mb-2">CEO at Megacorp</span> <p>Vivamus quis ex mattis, gravida erat a, iaculis urna. Proin ac eleifend tortor. Nunc in augue eget enim venenatis viverra.</p> </div> <div class="col-md-4 testimonial text-center"> <div class="avatar rounded-circle with-shadows mb-3 ml-auto mr-auto"> <img src="images/common/avatar-2.jpeg" class="w-100" alt="Testimonial Avatar" /> </div> <h5 class="mb-1">Darrin Ollie</h5> <span class="text-muted d-block mb-2">CEO at Megacorp</span> <p>Nullam eu ligula facilisis, commodo velit non, vulputate dolor. Aenean congue euismod vestibulum.</p> </div> <div class="col-md-4 testimonial text-center"> <div class="avatar rounded-circle with-shadows mb-3 ml-auto mr-auto"> <img src="images/common/avatar-3.jpeg" class="w-100" alt="Testimonial Avatar" /> </div> <h5 class="mb-1">Quinton Bruce</h5> <span class="text-muted d-block mb-2">CEO at Megacorp</span> <p> Aenean imperdiet ultrices tortor id convallis. Donec id metus magna. Morbi pretium odio faucibus blandit gravida.</p> </div> </div> </div> </div>   <div class="contact section-invert py-4"> <h3 class="section-title text-center m-5">Contact Us</h3> <div class="container py-4"> <div class="row justify-content-md-center px-4"> <div class="contact-form col-sm-12 col-md-10 col-lg-7 p-4 mb-4 card"> <form> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label for="contactFormFullName">Full Name</label> <input type="email" class="form-control" id="contactFormFullName" placeholder="Enter your full name"> </div> </div> <div class="col-md-6 col-sm-12"> <div class="form-group"> <label for="contactFormEmail">Email address</label> <input type="email" class="form-control" id="contactFormEmail" placeholder="Enter your email address"> </div> </div> </div> <div class="row"> <div class="col"> <div class="form-group"> <label for="exampleInputMessage1">Message</label> <textarea id="exampleInputMessage1" class="form-control mb-4" rows="10" placeholder="Enter your message..." name="message"></textarea> </div> </div> </div> <input class="btn btn-primary btn-pill d-flex ml-auto mr-auto" type="submit" value="Send Your Message"> </form> </div> </div> </div> </div>   <footer> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#">Shards Agency</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <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="#">Our Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </div> </nav> </footer>   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>