| Server IP : 78.140.185.180 / Your IP : 52.15.225.105 Web Server : LiteSpeed System : Linux cpanel13.v.fozzy.com 4.18.0-513.11.1.lve.el8.x86_64 #1 SMP Thu Jan 18 16:21:02 UTC 2024 x86_64 User : builderbox ( 1072) PHP Version : 7.3.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/builderbox/public_html/public/builder/templates/capital-city/ |
Upload File : |
<html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CapitalCity</title> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"> </head> <body data-spy="scroll" data-target="#navbar" class="d-flex flex-column"> <div class="navbar fixed-top alt navbar-expand-md navbar-dark" data-spy="affix" data-offset-top="1000"> <div class="container"> <a href="#" class="navbar-brand">Home</a> <a href="#" class="navbar-toggler text-white" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span> </a> <div class="navbar-collapse collapse" id="navbar"> <ul class="nav navbar-nav"> <li class="nav-item mr-2"><a href="#sec1" class="nav-link">Section 1</a> </li> <li class="nav-item mr-2"><a href="#sec2" class="nav-link">Section 2</a> </li> <li class="nav-item mr-2"><a href="#sec3" class="nav-link">Section 3</a> </li> <li class="nav-item mr-2"><a href="#sec4" class="nav-link">Section 4</a> </li> <li class="nav-item mr-2"><a href="#sec5" class="nav-link">Section 5</a> </li> </ul> <ul class="nav navbar-nav ml-auto"> <li class="nav-item mr-2"> <a href="#myModal" data-toggle="modal" class="nav-link"> <i class="fa fa-star"></i> </a> </li> </ul> </div> </div> </div> <div class="header alt d-flex align-items-center py-2" id="top"> <div class="container py-2"> <h1>CapitalCity</h1> <p class="lead">Starter Template for Bootstrap 4</p> <div> </div> <a href="sec1" class="btn btn-secondary btn-lg">Get Started</a> </div> </div> <section id="sec1" class="blurb min-vh-100"> <div class="container"> <div class="row"> <div class="col-lg-7"> <h1>The Simplicity of Bootstrap</h1> <p class="lead">The Most Popular Responsive Framework</p> </div> <div class="col-lg-5"> <h1 class="float-right"><i class="fa fa-mobile-phone fa-3x"></i> <i class="fa fa-tablet fa-3x"></i> <i class="fa fa-laptop fa-3x"></i></h1> </div> </div> </div> </section> <section id="sec2" class="bg-light min-vh-100"> <div class="container min-vh-100 d-flex py-4"> <div class="row my-auto justify-content-center"> <div class="col-lg-12 text-center"> <h1>Amazing Features</h1> </div> <div class="col-xl-2 col-sm-6 text-center py-2"> <div class="card card-body h-100"> <i class="fa fa-2x fa-rocket"></i> <h4>Rocket</h4> <p class="pt-4">Up-up-and-away with this starter template.</p> </div> </div> <div class="col-xl-2 col-sm-6 text-center py-2"> <div class="card card-body h-100"> <i class="fa fa-2x fa-magnet"></i> <h4>Magnet</h4> <p class="pt-4">For you are a magnet and I am steel.</p> </div> </div> <div class="col-xl-2 col-sm-6 text-center py-2"> <div class="card card-body h-100"> <i class="fa fa-2x fa-shield"></i> <h4>Shield</h4> <p class="pt-4">Protect yourself. Don't design like it's 1999.</p> </div> </div> <div class="col-xl-2 col-sm-6 text-center py-2"> <div class="card card-body h-100"> <i class="fa fa-2x fa-pencil"></i> <h4>Scholar</h4> <p class="pt-4">Because lead pencils are pretty smart.</p> </div> </div> </div> </div> </section> <section class="container-fluid callout min-vh-100" id="sec3"> <div class="row min-vh-100 align-items-center"> <div class="col-xl-6 col-sm-8 mx-auto"> <div class="row text-center"> <div class="col-lg-12"> <h2>Random People</h2> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/12.jpg"> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/95.jpg"> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/67.jpg"> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/27.jpg"> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/15.jpg"> </div> <div class="col-6 col-sm py-2"> <img class="rounded-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/18.jpg"> </div> </div> </div> </div> </section> <div class="blurb" id="sec4"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h1>Mobile-first</h1> <span class="display-1"> <i class="fa fa-mobile fa-4x display-1"></i> </span> </div> </div> </div> </div> <section class="container-fluid bg-light py-5 min-vh-100"> <div class="row align-items-center min-vh-100 text-center"> <div class="col-lg-6 col-md-8 mx-auto"> <h4>100% Responsive</h4> <h2>Features Galore</h2> </div> <div class="w-100"></div> <div class="col-lg-6 col-md-8 col-sm-10 mx-auto"> <p class="lead text-justify"> Bootstrap 4 has various features that make Web development faster, and more consistent. Start with the powerful, flexbox-based Bootstrap grid, responsive layouts are easy to design. Bootstrap also provides styled elements such as buttons, alerts, tooltips, modals & cards that help to make a site visually appealing. </p> </div> </div> </section> <section class="container py-4 min-vh-100"> <div class="row"> <div class="col-lg-5"> <h1><i class="fa fa-plane fa fa-3x"></i></h1> </div> <div class="col-lg-7"> <h1 class="float-right">Launch Your Web Design</h1> <p class="lead float-right">With this Responsive Bootstrap Template</p> </div> </div> <div class="row"> <div class="col-xl-6 col-lg-8 col-md-10 mx-auto py-3"> <p class="text-justify">Retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. Wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p> </div> </div> </section> <section class="container-fluid d-flex flex-column py-5 bright min-vh-100" id="sec5"> <div class="row mb-auto justify-content-center"> <div class="col-lg-6 justify-content-center text-center"> <h3>Smashing Heading</h3> </div> <div class="w-100"></div> <div class="col-lg-4 col-md-6 col-sm-10 py-2"> <div class="card h-100 shadow"> <div class="card-header text-center"> <h2><i class="d-none d-md-inline fa fa-chevron-left"></i> Left</h2> </div> <div class="card-body text-center d-flex flex-column"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis si. </p> <div class="mt-auto"> <button class="btn btn-lg btn-primary btn-block">Login</button> </div> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-10 py-2"> <div class="card h-100 shadow"> <div class="card-header text-center"> <h2>Right <i class="d-none d-md-inline fa fa-chevron-right"></i></h2> </div> <div class="card-body text-center d-flex flex-column"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis si. </p> <div class="mt-auto"> <button class="btn btn-lg btn-primary btn-block">Sign Up</button> </div> </div> </div> </div> </div> </section> <div class="blurb"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-10 text-center"> <h3>Sharing the Bootstrap Love</h3> <form role="form" class="pb-4 pt-5 px-5 border rounded shadow" action="default-form-handler"> <div class="form-group row"> <label class="col-md-2 col-form-label form-control-label text-muted d-none d-md-block text-right">Name</label> <div class="col-md-5 col-6"> <input class="form-control" type="text" value="Jane"> </div> <div class="col-md-5 col-6"> <input class="form-control" type="text" value="Bishop"> </div> </div> <div class="form-group row pt-3"> <label class="col-md-2 col-form-label form-control-label text-muted d-none d-md-block text-right">Address</label> <div class="col-md-10"> <input class="form-control" type="text" placeholder="Street"> </div> </div> <div class="form-group row"> <label class="col-md-2 col-form-label form-control-label text-muted"></label> <div class="col-6"> <input class="form-control" type="text" placeholder="City"> </div> <div class="col-md-4 col-6"> <select class="form-control"> <option>State</option> <option>AK</option> <option>AZ</option> <option>CA</option> <option>CO</option> </select> </div> </div> <div class="form-group row pt-3 align-items-center"> <label class="col-md-2 col-form-label form-control-label"></label> <div class="col-md-10 text-right"> <div class="custom-control custom-checkbox pt-1 d-inline-block"> <input type="checkbox" class="custom-control-input" id="customCheck" checked=""> <label class="custom-control-label" for="customCheck">Check me out</label> </div> <input type="reset" class="btn btn-outline-secondary ml-3 copyable" value="Cancel"> <input type="button" class="btn btn-primary ml-2 copyable" value="Submit"> </div> </div> </form> </div> </div> </div> </div> <footer class="bg-light mt-auto"> <div class="container-fluid d-flex flex-column pt-5"> <div class="row justify-content-center mt-auto"> <div class="col-lg-6 text-center"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-facebook fa fa-2x"></i> </li> <li class="list-inline-item"><i class="fa fa-twitter fa fa-2x"></i> </li> <li class="list-inline-item"><i class="fa fa-google fa-2x"></i> </li> <li class="list-inline-item"><i class="fa fa-pinterest fa fa-2x"></i> </li> </ul> <p class="small text-purple">Built with <i class="fa fa-heart-o"></i> by Themes.guide 2019</p> </div> </div> </div> <ul class="nav float-right scroll-top mr-4"> <li class="nav-item"> <a href="#top" title="Scroll to top" class="nav-link"><i class="fa fa-chevron-up fa fa-3x"></i></a> </li> </ul> </footer> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Hello Modal</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body p-4" id="result"> <h5 class="text-center text-purple">This modal is responsive too!</h5> <div class="row text-center py-4"> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> <div class="col-sm-6 col-lg-3"> Content </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script> </body></html>