Optico HTML Documentaion - by DesignerByte

Optico Introduction

This documentation will give you an understanding of how Optico template is structured and guide you in performing common functions.

If you want to customize, please contact us here: mail@designerbyte.com

Author: DesignerByte

Installation

Follow the steps below to get started with your Site Template:

Open the ... /Template Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- html/css - Stylesheets Folder
- html/fonts - Fonts Folder
- html/images - Images Folder
- html/js - Javacripts Folder
- html/index.html - (and All HTML files)
The other files can be used according to your preferences.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V4 Framework . Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.

HTML Structure

The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:


<!DOCTYPE html>

<html lang="en">

<head>

[Page meta, page css, page title etc...]

</head>

<body>

<!-- page wrapper -->

<div class="page-wrapper">

<!--header -->

<header id="site-header" class="header">

<div id="header-wrap">

[MENU CONTENT]

</div>

</header>

<!--header -->

<!-- page content -->

<div class="page-content">

<!--Section 1 -->

<section>

[SECTION 1 CONTENT]

</section>

<!--Section 1 -->

<!--Section 2 -->

<section>

[SECTION 2 CONTENT]

</section>

<!--Section 2 -->

</div>

<!-- page content -->

<!--footer -->

<footer class="footer">

[FOOTER_CONTENT]

</footer>

<!--footer -->

</div>

<!-- page wrapper -->

[PAGE JAVASCRIPTS HERE]

</body>

</html>

CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Fontawesome -->
<link rel="stylesheet" href="css/fontawesome.css">

<!-- Flaticon -->
<link rel="stylesheet" href="css/flaticon.css">

<!-- optico Icons -->
<link rel="stylesheet" href="css/optico-icons.css">

<!-- Themify Icons -->
<link rel="stylesheet" href="css/themify-icons.css">

<!-- Slick -->
<link rel="stylesheet" href="css/slick.css">

<!-- Slick Theme -->
<link rel="stylesheet" href="css/slick-theme.css">

<!-- Pretty Photo -->
<link rel="stylesheet" href="css/prettyPhoto.css">

<!-- Twentytwenty -->
<link rel="stylesheet" href="css/twentytwenty.css">

<!-- Shortcode CSS -->
<link rel="stylesheet" href="css/shortcode.css">

<!-- Base CSS -->
<link rel="stylesheet" href="css/base.css">

<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">

Javascript Structure

The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template:


<!-- jQuery JS -->
<script src="js/jquery.min.js"></script>

<!-- Popper JS -->
<script src="js/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>

<!-- jquery Waypoints JS -->
<script src="js/jquery-waypoints.js"></script>

<!-- jquery Appear JS -->
<script src="js/jquery.appear.js"></script>

<!-- Numinate JS -->
<script src="js/numinate.min.js"></script>

<!-- Slick JS -->
<script src="js/slick.min.js"></script>

<!-- PrettyPhoto JS -->
<script src="js/jquery.prettyPhoto.js"></script>

<!-- Circle Progress JS -->
<script src="js/circle-progress.js"></script>

<!-- Event Move JS -->
<script src="js/jquery.event.move.js"></script>

<!-- Twentytwenty JS -->
<script src="js/jquery.twentytwenty.js"></script>

<!-- Scripts JS -->
<script src="js/scripts.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:


<link rel="shortcut icon" href="images/favicon.ico"/>

Logo Settings

The Logo Container can be found in the Header Container - Replace "logo-white.png" with your own logo image URL.

<a href="index.html"><img src="images/logo-dark.png" alt="logo"></a>

Note Default height of logo is 60px. you can set height according to your logo type and your requirement.

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in css folder base.css file. See example below:


<!--  Montserrat font -->

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese');

<!--  Poppins font -->
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap&subset=devanagari,latin-ext');

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Section title

You can use this code for your page section title to maintain title style.


<div class="section-title">

  <h4 class="subheading">Subheading</h4>

  <h2>Your Title<strong> Your Title</strong></h2>

  <div class="lead">Title Description</div>

</div>

Text color

You can use color in the Text. simply add .white-color ( or any color you want) class where you want to use. See example below:

<div class="white-color">  

[YOUR TEXT CONTENT]

</div>

Note We include 3 color helper class in our template skincolor, white-color and darkgrey-color . you can add unlimited color class according to your needs.

Background color

You can use color in the background. simply add .bg-white (or any color you want) class where you want to use. See example below:

<div class="bg-white">  

[YOUR CONTENT]

</div>

Note We include 4 background color helper class in our template bg-white, skin-bg-color, bg-darkgrey and bg-lightgrey You can add unlimited background color class according to your needs

Background Image

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<div style="background:url(Path); ">    

[YOUR CONTENT]

</div>

Text align

You can add this helper class to any element in your HTML code to set text-align

Class	Description
.text-left	which means text-align: left;
.text-center	which means text-align: center;
.text-right	which means text-align: right;

Sliders

Slick Slider

Slick Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online Slick Slider documentation .

Shortcode

Accordion
Buttons
Blog Post
Counter
Icon Box
Service Box
Pricing Tables
Progress Bar
Social Icon
Team
Testimonials

Accordion

Use the below code to display accordion:


<div class="accordion">

<div id="accordion">

<div class="card">

<div class="card-header" id="headingOne">

<h5 class="header-title mb-0">

<a class="" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="llapseOne">Bibliographic and IP research</a>

</h5>

</div>

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">

<div class="card-body">The master-builders off human happiness no one rejects, ours avoids pleasure itself, because seds is pleasure, but because those who do not know to rationally.</div>

</div>

</div>

</div>

</div>

You can change the accordion styles with using following classes :

Class	Description
.accordion	Display the default Style of Accordion
.accordion-02	Display With Accordion Number

Button

Use the below to display Default Buttons:

Class	Code	Description	Result
.btn	<a href="#" class="btn">LEARN MORE</a>	Button	Button
.btn-outline	<a href="#" class="btn btn-outline">Button</a>	Outline Button	Button
.btn-inline	<a href="#" class="btn-inline">Button</a>	Inline Button	Button
.link-btn	<div class="link-btn"><a href="#" title="">READ MORE <i class="labtechco-icon-right-arrow"></i> </a></div>	Link Button	Button

Counter

Use the below code to display Counter style:

Counter Style 1


<div class="counter counter-style-1">
  <div class="fld-contents">
      <h4 class="counter-contents"> 
          <span data-appear-animation="animateDigits" data-from="0" data-to="168" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="" class="numinate completed">168</span>
      </h4>
      <h6 class="counter-title">
          <span>year of experiencs</span>
      </h6>
  </div>
</div>

Counter Style 2


<div class="counter counter-style-2">
    <div class="fld-contents">
        <h4 class="counter-contents"> 
                <span data-appear-animation="animateDigits" data-from="0" data-to="168" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="" class="numinate completed">168</span>
            </h4>
        <h6 class="counter-title">
                <span>year of experiencs</span>
            </h6>
    </div>
</div>

Icon box

Use the below code to display Icon box style:

Icon box Style 1


<div class="iconbox iconbox-style-1">
    <div class="iconbox-inner">
        <div class="iconbox-icon skincolor">
            <i class="flaticon-icon flaticon-glasses"></i>
        </div>
        <div class="iconbox-contents">
            <div class="iconbox-title">
                <h2>Best Treatment</h2>
            </div>
            <div class="iconbox-desc">
                <p>For A Clearer Tomorrow dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </div>
        </div>
    </div>
</div>

Icon box Style 2


<div class="iconbox iconbox-style-2">
    <div class="iconbox-inner">
        <div class="iconbox-contents">
            <div class="iconbox-title">
                <h2>Modern Equipment</h2>
            </div>
            <div class="iconbox-desc">
                <p>Wake Up with dolor sit ametcon sec tetur adipisicing elit,sed do.</p>
            </div>
        </div>
    </div>
</div>

Icon box Style 3


<div class="iconbox iconbox-style-3">
    <div class="iconbox-inner">
        <div class="iconbox-icon skincolor">
            <i class="flaticon-icon flaticon-testing-glasses"></i>
        </div>
        <div class="iconbox-contents">
            <div class="iconbox-title">
                <h2>Childrens</h2>
            </div>
            <div class="iconbox-desc">
                <p>Caring Your Eyes is important sec tetur adipisicing elit, sed do important sec tetur adipisicing.</p>
            </div>
        </div>
    </div>
</div>

Icon box Style 4


<div class="iconbox iconbox-style-4">
    <div class="iconbox-inner d-flex">
        <div class="iconbox-number">
            <div class="iconbox-icon skincolor">01.</div>
        </div>
        <div class="iconbox-contents">
            <div class="iconbox-title">
                <h2>Cornea Services</h2>
            </div>
            <div class="iconbox-desc">
                <p>Visual acuity test sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            </div>
        </div>
    </div>
</div>

Icon box Style 5


<div class="iconbox-style-5">
    <div class="iconbox-inner">
        <div class="iconbox-icon skincolor">
            <i class="flaticon-icon flaticon-eye-2"></i>
        </div>
        <div class="iconbox-contents">
            <div class="iconbox-title">
                <h4>Doctor Timetable</h4>
            </div>
            <div class="iconbox-desc">
                <p>Professional and Certificated Doctor consectetur adipisicing elit</p>
            </div>
        </div>
    </div>
</div>

Icon box Style 6


<div class="iconbox iconbox-style-6">
    <div class="iconbox-inner d-flex">
        <div class="iconbox-icon">
            <i class="themifyicon ti-headphone-alt"></i>
        </div>
        <div class="iconbox-contents">
            <div class="iconbox-title">
                    <h2>If you Have Any Questions Schedule an Appointment <strong>With Our Doctor OR Call Us On (010)123-456-7890</strong>
                    </h2>
                </div>
        </div>
    </div>
</div>

Icon box Style 7


<div class="iconbox iconbox-style-7">
    <div class="iconbox-inner d-flex">
        <div class="iconbox-icon skincolor">
            <i class="optico-icon optico-icon-location-pin"></i>
        </div>
        <div class="iconbox-inner">
            <div class="iconbox-contents">
                <div class="iconbox-title">
                    <h2>Our Address</h2>
                </div>
                <div class="iconbox-desc">
                    <p>351 Montreal Ave, Staten
                        <br>Island, NY 10306</p>
                </div>
            </div>
        </div>
    </div>
</div>

Service Box

Use the below code to display Service Box style:

Service Box Style 1


<div class="service-box service-style-1">
    <div class="service-thumbnail">
        <div class="service-thumbnail-inner">
            <img src="images/services/service-01.jpg" class="img-fluid" alt="">
        </div>
    </div>
    <div class="service-content">
        <div class="service-inner">
            <h3 class="service-box-title"><a href="service-detail.html">Paeditaric Ophthalmology</a></h3>
            <div class="service-desc">
                <p>If you got eyes sit ametcon sec tetur adipisicing.</p>
            </div>
            <div class="link-btn">
                <a class="skincolor" href="#">Read more<i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
</div>

Service Box Style 2


<div class="service-box service-style-2">
    <div class="service-thumbnail">
        <img src="images/services/service-02.jpg" class="img-fluid" alt="">
    </div>
    <div class="service-content">
        <div class="service-inner">
            <h4 class="service-box-title"><a href="service-detail.html" tabindex="0">Transitions Lenses</a></h4>
            <div class="service-desc">
                <p>Doctor Timetable Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
            </div>
        </div>
    </div>
</div>

Pricing Tables

Use the below code to display Pricing Tables style:


<div class="pricing-tablebox">
    <div class="pricingtable-main">
        <div class="pricingtable-icon medium-icon">
            <i class="flaticon-icon flaticon-eye"></i>
        </div>
        <h3 class="pricingtable-title">Eye Treatment</h3>
        <div class="pricingtable-desc">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
        </div>
        <div class="pricingtable-pricebox">
            <div class="pricingtable-price">15%</div>
            <h4 class="pricingtable-discount">Discount</h4>
        </div>
    </div>
    <div class="pricingtable-btn">
        <a href="#" class="btn">GET OFFER</a>
    </div>
</div>

Progress Bar

Use the below code to display Progress Bar style:


<div class="skill skill-medium">

<div class="skill-bar" data-percent="90" data-delay="0" data-type="%">

<div class="skill-title">BIOTECHNOLOGY</div>

</div>

</div>

Social Icon

Use the below code to display Social Icon style:


<ul class="social-icons">

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Facebook"><i class="fa fa-facebook"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Twitter"><i class="fa fa-twitter"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Flickr"><i class="fa fa-flickr"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Instagram"><i class="fa fa-instagram"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Vimeo"><i class="fa fa-vimeo"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Youtube"><i class="fa fa-youtube"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Stumbleupon"><i class="fa fa-stumbleupon"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Lastfm"><i class="fa fa-lastfm"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Rss"><i class="fa fa-rss"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Dribbble"><i class="fa fa-dribbble"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Skype"><i class="fa fa-skype"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Delicious"><i class="fa fa-delicious"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Behance"><i class="fa fa-behance"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Dropbox"><i class="fa fa-dropbox"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Soundcloud"><i class="fa fa-soundcloud"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Deviantart"><i class="fa fa-deviantart"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Yahoo"><i class="fa fa-yahoo"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Digg"><i class="fa fa-digg"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Tumblr"><i class="fa fa-tumblr"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Github"><i class="fa fa-github"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Xing"><i class="fa fa-xing"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Wikipedia"><i class="fa fa-wikipedia-w"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Android"><i class="fa fa-android"></i></a></li>

<li><a href="#" class="tooltip-top" data-toggle="tooltip" data-placement="top" data-tooltip="Apple"><i class="fa fa-apple"></i></a></li>

</ul>

Team

Use the below code to display Team:.

Team Style 1


<div class="teambox teambox-style-1">
    <div class="teambox-thumbnail">
        <img src="images/team/01.jpg" class="img-fluid animation" alt="">
    </div>
    <div class="teambox-content">
        <div class="team-title">
            <h4><a href="team-single.html">Anna Winds</a></h4>
        </div>
        <div class="team-position skincolor">Optegra eye</div>
        <div class="blog-desc">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="teambox-social-links">
            <ul class="social-icons">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Team Style 2


<div class="teambox teambox-style-2">
    <div class="teambox-thumbnail">
        <img src="images/team/01.jpg" class="img-fluid animation" alt="">
    </div>
    <div class="teambox-content">
        <div class="team-position skincolor">Optegra eye</div>
        <div class="team-title">
            <h4><a href="team-single.html">Anna Winds</a></h4>
        </div>
        <div class="blog-desc">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="teambox-social-links">
            <ul class="social-icons">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Team Style 3


<div class="teambox align-items-center teambox-style-3 d-flex">
    <div class="teambox-thumbnail">
        <img src="images/team/08.jpg" class="img-fluid animation" alt="">
    </div>
    <div class="col-lg-6">
        <div class="teambox-content">
            <div class="team-title">
                <h4><a href="team-single.html">Anna Winds</a></h4>
            </div>
            <div class="team-position skincolor">Optegra eye</div>
            <div class="blog-desc">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
            <span class="team-email">
                <i class="skincolor labtechco-icon-mail-alt"></i><a href="#">team@optico.com</a>
            </span>
            <div class="team-member-social-links">
                <ul class="team-social-links">
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Testimonial

Use the below code to display Testimonial:.

Testimonial Style 1


<div class="testimonialbox testimonialbox-style-1">
    <div class="testimonialbox-content">
        <div class="testimonialbox-desc">
            <blockquote class="testimonialbox-text">Long established fact that a reader will be distracted by the readable content of a page when looking at it's layout. The point of using Lorem Ipsum</blockquote>
        </div>
        <div class="testimonialbox-wrap d-flex">
            <div class="testimonialbox-thumbnail">
                <img src="images/testimonial/testimonial-02.jpg" class="img-fluid" alt="">
            </div>
            <div class="testimonialbox-author">
                <h3 class="author-name">Maria Flynn</h3>
                <span>CEO at Google INC</span>
            </div>
        </div>
    </div>
</div>

Testimonial Style 2

<div class="testimonialbox testimonialbox-style-2">
    <div class="testimonialbox-content">
        <div class="testimonialbox-desc">
            <blockquote class="testimonialbox-text">Long established fact that a reader will be distracted by the readable content of a page when looking at it's layout. The point of using Lorem Ipsum</blockquote>
        </div>
        <div class="testimonialbox-wrap">
            <div class="testimonialbox-thumbnail">
                <img src="images/testimonial/testimonial-02.jpg" class="img-fluid" alt="">
            </div>
            <div class="testimonialbox-author">
                <h3 class="author-name">Maria Flynn</h3>
                <span>CEO at Google INC</span>
            </div>
        </div>
    </div>
</div>

Browser Support

Hectolab supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 10 and above.

How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find "Rate this item" below the download button and rate out the theme.

Advance Thanks in Anticipation!

Change Log

Version 1 (3rd Oct 2019)

- Released on ThemeForest site

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Freepik Freepik
Unsplash Unsplash

Scripts

Jquery
Popper
Jquery appear
Jquery Waypoints
Jquery Numinate
Jquery Prettyphoto
Slick Min
Jquery Circle Progress
Jquery Event Move Used to support touch events on mobile devices.
Jquery twentytwenty

CSS & Fonts

Note For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.