316 lines
19 KiB
HTML
316 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="wide wow-animation">
|
||
<head>
|
||
<!-- Site Title-->
|
||
<title>Progress bars</title>
|
||
<meta name="format-detection" content="telephone=no">
|
||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta charset="utf-8">
|
||
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
|
||
<!-- Stylesheets-->
|
||
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<!--[if lt IE 10]>
|
||
<div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
|
||
<script src="js/html5shiv.min.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body>
|
||
<!-- Page-->
|
||
<div class="page text-center">
|
||
<!-- Page Header-->
|
||
<header class="page-head bg-forms">
|
||
<!-- RD Navbar-->
|
||
<div class="rd-navbar-wrap navbar-transparent">
|
||
<nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fullwidth" data-lg-layout="rd-navbar-static" data-device-layout="rd-navbar-fixed" data-sm-device-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fullwidth" data-lg-device-layout="rd-navbar-static" data-lg-stick-up-offset="70px">
|
||
<button data-rd-navbar-toggle=".rd-navbar-top-panel" type="submit" class="rd-navbar-collapse-toggle"><span></span></button>
|
||
<div class="bg-black">
|
||
<div class="rd-navbar-top-panel bg-black">
|
||
<div><a href="callto:#" class="text-base text-bold text-top"><span class="mdi mdi-phone text-middle"></span> <span class="text-middle">1 (800) 123 1234</span></a><span class="inset-md-left-20 text-middle">USA, LOS ANGELES,901 East E Street, Wilmington, CA 90744</span></div>
|
||
<div>
|
||
<ul class="list-inline list-inline-xs">
|
||
<li><a href="#" class="icon icon-white fa-facebook"></a></li>
|
||
<li><a href="#" class="icon icon-white fa-google-plus"></a></li>
|
||
<li><a href="#" class="icon icon-white fa-linkedin"></a></li>
|
||
<li><a href="#" class="icon icon-white fa-twitter"></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rd-navbar-inner">
|
||
<!-- RD Navbar Panel-->
|
||
<div class="rd-navbar-panel">
|
||
<!-- RD Navbar Toggle-->
|
||
<button data-rd-navbar-toggle=".rd-navbar-nav-wrap" type="submit" class="rd-navbar-toggle"><span></span></button>
|
||
<!-- RD Navbar Brand-->
|
||
<div class="rd-navbar-brand"><a href="index.html" class="brand-name"><span class="h4 text-bold text-primary">Safe</span> <span class="h4 text-bold text-white">Drive</span> <span class="text-base veil reveal-md-block reveal-xl-inline-block">LA Driving School</span></a></div>
|
||
</div>
|
||
<div class="rd-navbar-nav-wrap">
|
||
<!-- RD Navbar Nav-->
|
||
<ul class="rd-navbar-nav">
|
||
<li><a href="./">Home</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="index.html">Home 1</a></li>
|
||
<li><a href="index-header-center.html">Home 2</a></li>
|
||
<li><a href="index-header-hamburger.html">Home 3</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="about-us.html">About</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="cars.html">Our cars</a></li>
|
||
<li><a href="faq.html">FAQs</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="lessons.html">Lessons</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="lessons-single.html">Lessons Single Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="teachers.html">Teachers</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="teachers-single.html">Teacher profile</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="active"><a href="#">Pages</a>
|
||
<!-- RD Navbar Megamenu-->
|
||
<ul class="rd-navbar-megamenu">
|
||
<li>
|
||
<p>News</p>
|
||
<ul>
|
||
<li><a href="blog-classic-right-sidebar.html">Classic Blog</a></li>
|
||
<li><a href="blog-grid.html">Grid Blog</a></li>
|
||
<li><a href="blog-masonry.html">Masonry Blog</a></li>
|
||
<li><a href="blog-modern.html">Modern Blog</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="blog-post.html">Single Post</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>Elements</p>
|
||
<ul>
|
||
<li><a href="typography.html">Typography</a></li>
|
||
<li><a href="tabs-accordion.html">Tabs & Accordions</a></li>
|
||
<li><a href="grid.html">Grid</a></li>
|
||
<li><a href="buttons.html">Buttons</a></li>
|
||
<li><a href="forms.html">Forms</a></li>
|
||
<li><a href="progress-bars.html">Progress Bars</a></li>
|
||
<li><a href="tables.html">Tables</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>Pages</p>
|
||
<ul>
|
||
<li><a href="event.html">Events Calendar</a></li>
|
||
<li><a href="appointment.html">Book (Appointment)</a></li>
|
||
<li><a href="careers.html">Careers</a></li>
|
||
<li><a href="pricing.html">Pricing</a></li>
|
||
<li><a href="services.html">Services</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="services-single.html">Services Single Page</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p>Pages</p>
|
||
<ul>
|
||
<li><a href="404.html">404 page</a></li>
|
||
<li><a href="503.html">503 page</a></li>
|
||
<li><a href="maintenance.html">Maintenance (Under Construction)</a></li>
|
||
<li><a href="coming-soon.html">Coming Soon</a></li>
|
||
<li><a href="login.html">Login Page</a></li>
|
||
<li><a href="register.html">Register Page</a></li>
|
||
<li><a href="search-results.html">Search Results</a></li>
|
||
<li><a href="site-map.html">Site Map</a></li>
|
||
<li><a href="privacy.html">Privacy Policy</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="testimonials.html">Testimonials</a></li>
|
||
<li><a href="links.html">Links</a></li>
|
||
<li><a href="#">News</a>
|
||
<ul class="rd-navbar-dropdown">
|
||
<li><a href="blog-classic-right-sidebar.html">Classic Blog With Right Sidebar</a></li>
|
||
<li><a href="blog-classic-left-sidebar.html">Classic Blog With Left Sidebar</a></li>
|
||
<li><a href="blog-classic-both-sidebar.html">Classic Blog With Both Sidebars</a></li>
|
||
<li><a href="blog-grid.html"> Grid Blog</a></li>
|
||
<li><a href="blog-grid-2col.html"> Grid Blog Two Columns</a></li>
|
||
<li><a href="blog-grid-3col.html"> Grid Blog Three Columns</a></li>
|
||
<li><a href="blog-masonry.html">Masonry Blog</a></li>
|
||
<li><a href="blog-masonry-2col.html">Masonry Blog Two Columns</a></li>
|
||
<li><a href="blog-masonry-3col.html">Masonry Blog Three Columns</a></li>
|
||
<li><a href="blog-modern.html"> Modern Blog</a></li>
|
||
<li><a href="blog-modern-right.html"> Modern Blog Right</a></li>
|
||
<li><a href="blog-modern-left-sidebar.html"> Modern Blog With Left Sidebar</a></li>
|
||
<li><a href="blog-post.html">Blog Post</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="contacts.html">Locations</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<section class="section-top-64 section-bottom-48 section-md-top-105 section-md-bottom-120 inset-left-15 inset-right-15">
|
||
<div class="shell text-sm-right">
|
||
<h1 class="big text-uppercase text-ebold">Progress bars</h1>
|
||
<ol class="breadcrumb">
|
||
<li><a href="#">Pages</a></li>
|
||
<li><a href="#">Elements</a></li>
|
||
<li>Progress bars</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
</header>
|
||
<!-- Page Content-->
|
||
<main class="page-content">
|
||
<section class="text-center text-sm-left section-top-50 section-sm-top-80">
|
||
<div class="container">
|
||
<h1>Progress Bars, Skill Bars, Counters</h1>
|
||
<p>These elements are vital to every website’s design, and with them you are able to <br class="visible-lg-inline">improve the overall look of your resource and attract more clients.</p>
|
||
<div class="row offset-top-22">
|
||
<div class="col-xs-12 col-sm-6">
|
||
<div class="progress-container text-left">
|
||
<p class="text-dark big text-bold">Teen Programs</p>
|
||
<!-- Progress Bar-->
|
||
<div data-value="75" data-stroke="10" data-easing="linear" data-duration="1000" data-counter="true" class="progress-bar-js progress-bar-horizontal progress-bar-default"></div>
|
||
<p class="text-dark big text-bold">Adult Instruction</p>
|
||
<div data-value="50" data-stroke="10" data-easing="linear" data-duration="1000" data-counter="true" class="progress-bar-js progress-bar-horizontal progress-bar-default"></div>
|
||
<p class="text-dark big text-bold">Stick Shift Lessons</p>
|
||
<div data-value="65" data-stroke="10" data-easing="linear" data-duration="1000" data-counter="true" class="progress-bar-js progress-bar-horizontal progress-bar-default"></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-1 offset-top-30 offset-sm-top-0">
|
||
<h5>Welcome to our website</h5>
|
||
<p class="offset-sm-top-20">Welcome to our wonderful world. We sincerely hope that each and every user entering our website will find exactly what he/she is looking for. With advanced features of activating account and new login widgets, you will definitely have a great experience of using our web page. It will tell you lots of interesting things about our company, its products and services, highly professional staff and happy customers.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="text-center section-50 section-sm-80">
|
||
<div class="shell">
|
||
<div class="range">
|
||
<div class="cell-xs-6 cell-sm-6 cell-md-3 cell-lg-2">
|
||
<div class="progress-bar-radial-wrap">
|
||
<div data-value="158" data-stroke="5" data-easing="linear" data-duration="1000" data-counter="true" data-trail="5" class="progress-bar-js progress-bar-radial progress-bar-default-1"></div>
|
||
<p class="text-dark big">students</p>
|
||
</div>
|
||
</div>
|
||
<div class="cell-xs-6 cell-sm-6 cell-md-3 cell-lg-2 offset-top-50 offset-xs-top-0">
|
||
<div class="progress-bar-radial-wrap">
|
||
<div data-value="12" data-stroke="5" data-easing="linear" data-duration="1000" data-counter="true" data-trail="5" class="progress-bar-js progress-bar-radial progress-bar-default-1"></div>
|
||
<p class="text-dark big">cars</p>
|
||
</div>
|
||
</div>
|
||
<div class="cell-xs-6 cell-sm-6 cell-md-3 cell-lg-2 offset-top-50 offset-md-top-0">
|
||
<div class="progress-bar-radial-wrap">
|
||
<div data-value="53" data-stroke="5" data-easing="linear" data-duration="1000" data-counter="true" data-trail="5" class="progress-bar-js progress-bar-radial progress-bar-default-1"></div>
|
||
<p class="text-dark big">partners</p>
|
||
</div>
|
||
</div>
|
||
<div class="cell-xs-6 cell-sm-6 cell-md-3 cell-lg-2 offset-top-50 offset-md-top-0">
|
||
<div class="progress-bar-radial-wrap">
|
||
<div data-value="38" data-stroke="5" data-trail="5" data-easing="linear" data-duration="1000" data-counter="true" class="progress-bar-js progress-bar-radial progress-bar-default-1"></div>
|
||
<p class="text-dark big">instructors</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<!-- Page Footer-->
|
||
<footer class="page-foot bg-gray-light section-50 section-md-top-80 section-md-bottom-60">
|
||
<section class="footer-content text-center text-sm-left">
|
||
<div class="shell">
|
||
<div class="range border-left-cell">
|
||
<div class="cell-xs-12 cell-sm-4 cell-lg-3 cell-lg-push-1">
|
||
<!-- RD Navbar Brand-->
|
||
<div class="rd-navbar-brand"><a href="index.html" class="brand-name"><span class="h4 text-bold text-primary">Safe</span> <span class="h4 text-bold text-dark">Drive</span></a></div>
|
||
<h6 class="big text-base text-bold offset-top-17">Address:</h6>
|
||
<div class="offset-top-7">
|
||
<p class="text-bold text-dark">4578 Marmora St, <br class="visible-lg-inline"> San Francisco D04 89GR.</p>
|
||
</div>
|
||
<address class="offset-top-7">
|
||
<div class="unit unit-sm-horizontal unit-middle">
|
||
<div class="unit-left"><span class="text-dark text-bold">Telephone:</span></div>
|
||
<div class="unit-body"><a href="callto:#" class="text-dark text-bold">1-800-1234-567</a><span class="text-dark text-bold">,</span></div>
|
||
</div>
|
||
<div class="unit unit-sm-horizontal unit-middle offset-top-7">
|
||
<div class="unit-left"><span class="text-dark text-bold">E-mail:</span></div>
|
||
<div class="unit-body"><a href="mailto:#" class="text-bold">info@demolink.org</a></div>
|
||
</div>
|
||
</address>
|
||
</div>
|
||
<div class="cell-xs-12 cell-sm-8 cell-lg-5 offset-top-45 offset-sm-top-0 cell-lg-push-3">
|
||
<h6 class="big text-bold">Newsletter</h6>
|
||
<div class="offset-top-30 text-left">
|
||
<p class="text-bold">Keep up with the latest school news and events. Enter your e-mail and subscribe to our newsletter.</p>
|
||
</div>
|
||
<div class="offset-top-15">
|
||
<form data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php" class="rd-mailform form-subscribe form-inline-flex-xs">
|
||
<div class="form-group">
|
||
<input placeholder="" type="email" name="email" data-constraints="@Required @Email" class="form-control">
|
||
</div>
|
||
<button type="submit" class="btn btn-md btn-primary">Subscribe</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="cell-xs-12 cell-sm-6 cell-lg-4 offset-top-30 offset-lg-top-0 cell-lg-push-2">
|
||
<div class="group-sm"><img src="images/footer-01-100x93.jpg" alt="" width="100" height="93"/><img src="images/footer-02-100x93.jpg" alt="" width="100" height="93"/><img src="images/footer-03-100x93.jpg" alt="" width="100" height="93"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr class="hr offset-top-40">
|
||
</div>
|
||
<div class="shell offset-top-40">
|
||
<p class="text-bold text-sm-left">SafeDrive © <span id="copyright-year"></span> <a href="privacy.html" class="text-base">Privacy Policy</a></p>
|
||
</div>
|
||
</section>
|
||
</footer>
|
||
</div>
|
||
<!-- Global Mailform Output-->
|
||
<div id="form-output-global" class="snackbars"></div>
|
||
<!-- PhotoSwipe Gallery-->
|
||
<div tabindex="-1" role="dialog" aria-hidden="true" class="pswp">
|
||
<div class="pswp__bg"></div>
|
||
<div class="pswp__scroll-wrap">
|
||
<div class="pswp__container">
|
||
<div class="pswp__item"></div>
|
||
<div class="pswp__item"></div>
|
||
<div class="pswp__item"></div>
|
||
</div>
|
||
<div class="pswp__ui pswp__ui--hidden">
|
||
<div class="pswp__top-bar">
|
||
<div class="pswp__counter"></div>
|
||
<button title="Close (Esc)" class="pswp__button pswp__button--close"></button>
|
||
<button title="Share" class="pswp__button pswp__button--share"></button>
|
||
<button title="Toggle fullscreen" class="pswp__button pswp__button--fs"></button>
|
||
<button title="Zoom in/out" class="pswp__button pswp__button--zoom"></button>
|
||
<div class="pswp__preloader">
|
||
<div class="pswp__preloader__icn">
|
||
<div class="pswp__preloader__cut">
|
||
<div class="pswp__preloader__donut"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||
<div class="pswp__share-tooltip"></div>
|
||
</div>
|
||
<button title="Previous (arrow left)" class="pswp__button pswp__button--arrow--left"></button>
|
||
<button title="Next (arrow right)" class="pswp__button pswp__button--arrow--right"></button>
|
||
<div class="pswp__caption">
|
||
<div class="pswp__caption__cent"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Java script-->
|
||
<script src="js/core.min.js"></script>
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html> |