Intoduction


Taeled - Digital & Startup Agency HTML Template

An HTML Template

Created : 10/10/2020
By : themexriver
Email : support@themexriver.com

Thank you for purchasing Taeled - Digital & Startup Agency HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thankyou so much!

HTML Structure


The html template uses Latest Bootstrap v4.0.0 with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes. 

       <!-- Start of header
       ============================================= -->
       <header>
       ...
       </header>
       <!-- End of header
       ============================================= -->

       <!-- Start of section name
       ============================================= -->
       <section id="section-name-id" class="section-name-class">
       ...
       </section>
       <!-- End section name
       ============================================= -->


       <!-- Start of footer
       ============================================= -->
       <footer>
       ...
       </footer>
       <!-- End of footer
       ============================================= -->

Main Slider Structure


To learn how to use Main Slider , here is the code or go to Owl Carousel 2 and check how does it work. 


    <div id="slider-main" class="slider-main-wrap headline pera-content">
    <div class="slider-text-wrap">
    <div class="slider-tag-item">
    ----
    ----
    </div>
    <h1>main title here</h1>
    <div class="slider-btn">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>

    <div class="slider-text-wrap">
    <div class="slider-tag-item">
    ----
    ----
    </div>
    <h1>main title here</h1>
    <div class="slider-btn">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>

    <div class="slider-text-wrap">
    <div class="slider-tag-item">
    ----
    ----
    </div>
    <h1>main title here</h1>
    <div class="slider-btn">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">Button text <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>
    </div>

Circle Progress


To learn how to use Circle Progress , here is the code. 
      <div class="graph-outer">
      <input type="text" class="dial" data-fgColor="#ffaea1" data-bgColor="background-color" data-width="circle width" data-height="circle height" data-linecap="normal"  value="data value" thickness="0.09">
      <div class="inner-text count-box"><span class="count-text" data-stop="data value" data-speed="3500"></span>%</div>
      <h3>time in gaming</h3>
      </div>

Pricing & Plannings


To learn how to use Pricing & Plannings Tab , here is the code or go to and check how does it work. 


    <div class="pricing-plan-tab-btn">
    <ul id="tabs" class="nav text-uppercase nav-tabs">
    <li class="nav-item"><a href="#" data-target="#goal" data-toggle="tab" class="nav-link text-uppercase active">Pricing tab title  </a></li>
    <li class="nav-item"><a href="#" data-target="#profit" data-toggle="tab" class="nav-link text-uppercase">Pricing tab title </a></li>
    <li class="nav-item"><a href="#" data-target="#passions" data-toggle="tab" class="nav-link text-uppercase">Pricing tab title</a></li>
    <li class="nav-item"><a href="#" data-target="#product" data-toggle="tab" class="nav-link text-uppercase">Pricing tab title</a></li>
    </ul>
    </div>

    <div class="pricing-table-wrapper">
    <div id="tabsContent" class="tab-content">
    <div id="goal" class="tab-pane fade active show">
    -----
    -----
    -----
    </div>
    <div id="profit" class="tab-pane fade active show">
    -----
    -----
    -----
    </div>
    <div id="passions" class="tab-pane fade active show">
    -----
    -----
    -----
    </div>
    <div id="product" class="tab-pane fade active show">
    -----
    -----
    -----
    </div>
    </div>
    </div>

Counter


Counter Structure 


    <h2 class="count">Put your counter text here</h2><span>+</span>

Testimonial Slider



    <div class="testimonial-slider-nav position-relative">
    <div class="testimonial-author-item">
    <div class="tst-author-nav">
    <div class="tst-author-img float-left">
    <img src="assetput your image path ahere1.jpg" alt="img">
    </div>
    <div class="tst-author-text headline text-uppercase">
    <h3>testimonial author name <span class="tst-degi">/testimonial designation</span></h3>
    </div>
    </div>
    <div class="tst-author-nav">
    <div class="tst-author-img float-left">
    <img src="put your image path ahere" alt="img">
    </div>
    <div class="tst-author-text headline text-uppercase">
    <h3>testimonial author name <span class="tst-degi">/testimonial designation</span></h3>
    </div>
    </div>
    <div class="tst-author-nav">
    <div class="tst-author-img float-left">
    <img src="put your image path ahere" alt="img">
    </div>
    </div>
    </div>
    </div>
    </div>

    <div class="testimonial-slider-for">
    <div class="testimonial-main-img position-absolute"><img src="assets/img/testimonial/tm1.png" alt=""></div>
    <div class="testimonial-slider-details">
    <div class="testimonial-slider-textinner clearfix position-relative">
    <div class="testimonial-main-text float-right">
    <div class="tst-icon">
    <i class="flaticon-quotation"></i>
    </div>
    <div class="tst-details-quot text-uppercase">
    ----
    ---
    </div>
    <div class="testimonial-name-degi text-uppercase headline">
    <h4>name</h4>
    <span>designation</span>
    </div>
    </div>
    </div>
    <div class="testimonial-slider-textinner clearfix position-relative">
    <div class="testimonial-main-text float-right">
    <div class="tst-icon">
    <i class="flaticon-quotation"></i>
    </div>
    <div class="tst-details-quot text-uppercase">
    ----
    ---
    </div>
    <div class="testimonial-name-degi text-uppercase headline">
    <h4>name</h4>
    <span>designation</span>
    </div>
    </div>
    </div>
    <div class="testimonial-slider-textinner clearfix position-relative">
    <div class="testimonial-main-text float-right">
    <div class="tst-icon">
    <i class="flaticon-quotation"></i>
    </div>
    <div class="tst-details-quot text-uppercase">
    ----
    ---
    </div>
    <div class="testimonial-name-degi text-uppercase headline">
    <h4>name</h4>
    <span>designation</span>
    </div>
    </div>
    </div>
    <div class="testimonial-slider-textinner clearfix position-relative">
    <div class="testimonial-main-text float-right">
    <div class="tst-icon">
    <i class="flaticon-quotation"></i>
    </div>
    <div class="tst-details-quot text-uppercase">
    ----
    ---
    ----
    ---
    </div>
    <div class="testimonial-name-degi text-uppercase headline">
    <h4>name</h4>
    <span>designation</span>
    </div>
    </div>
    </div>
    </div>
    </div>

Skill Progress bar


Skill Progress bar. 


   <div class="skill-progress-bar">
   <div class="skill-set-percent headline">
   <h4>Skill progress title</h4>
   <div class="progress">
   <div class="progress-bar" data-percent="progress bar value"></div>
   </div>
   </div>
   <div class="skill-set-percent headline">
   <h4>Skill progress title</h4>
   <div class="progress">
   <div class="progress-bar" data-percent="progress bar value"></div>
   </div>
   </div>
   <div class="skill-set-percent headline">
   <h4>Skill progress title</h4>
   <div class="progress">
   <div class="progress-bar" data-percent="progress bar value"></div>
   </div>
   </div>
   </div>

Video Popup


Video Popup Settings 


  <a class="video_box" href="Put your youtube video link here">Play</a<

Testimonial Slider 2



    <div id="testimonial-slide" class="testimonial-slide-section">
    <div class="testimonial-carousel-indicator clearfix">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
    <img src="put your image path here" alt="">
    </li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1">
    <img src="put your image path here" alt="">
    </li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2">
    <img src="put your image path here" alt="">
    </li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3">
    <img src="put your image path here" alt="">
    </li>
    </ol>
    </div>

    <div class="carousel-inner relative-position">
    <div class="carousel-item active">
    <div class="testimonial-inner-wrap position-relative clearfix">
    <div class="testimonial-img float-left">
    <img src="put your image path here" alt="">
    </div>
    <div class="testimonial-text d-inline-block text-uppercase position-relative">
    ----
    ----
    ---
    </div>
    </div>
    </div>
    <div class="carousel-item">
    <div class="testimonial-inner-wrap position-relative clearfix">
    <div class="testimonial-img float-left">
    <img src="put your image path here" alt="">
    </div>
    <div class="testimonial-text d-inline-block text-uppercase position-relative">
    ----
    ----
    ---
    </div>
    </div>
    </div>

    <div class="carousel-item">
    <div class="testimonial-inner-wrap position-relative clearfix">
    <div class="testimonial-img float-left">
    <img src="put your image path here" alt="">
    </div>
    <div class="testimonial-text d-inline-block text-uppercase position-relative">
    ----
    ----
    ---
    </div>
    </div>
    </div>
    </div>

Portfolio Slider Setting



    <div id="portfolio-slide-wrap4" class="portfolio-slider-4">
    <div class="portfolio-img-innerbox position-relative">
    <img src="assets/img/portfolio/port1.jpg" alt="">
    <div class="portfolio-btn-box">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">case study <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="portfolio-img-innerbox position-relative">
    <img src="assets/img/portfolio/port2.jpg" alt="">
    <div class="portfolio-btn-box">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">case study <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>
    <div class="portfolio-img-innerbox position-relative">
    <img src="assets/img/portfolio/port3.jpg" alt="">
    <div class="portfolio-btn-box">
    <div class="taeled-btn text-center position-relative text-uppercase">
    <a href="#">case study <i class="fas fa-arrow-right"></i></a>
    </div>
    </div>
    </div>
    </div>

Partner Slider Setting



    <div id="partner-slideid" class="partner-slider">
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    <div class="partner-img">
    <a href="#"><img src="put your image path here" alt=""></a>
    </div>
    </div>

Product Details Slider


You can set you set you mail Address by following this.
N.B- Sometimes your mail send into spam box for security issue when you use it..we recommended that check you spam box 


  <div class="td-product-carousel owl-carousel" id="td-product-single-carousel" data-slider-id="td-product-single-carousel">
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  <div class="td-shop-product-item">
  <img src="put your image path here" alt="" data-zoomed="put your image path here">
  </div>
  </div>
  <div class="td-product-show relative-position">
  <div class="owl-thumbs td-product-show_item" id="product_thumb" data-slider-id="td-product-single-carousel">
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  <div class="owl-thumb-item product-img-item">
  <img src="put your image path here" alt="">
  </div>
  </div>
  </div>

Google Map Setting



  <div id="taeled_map" data-lat="type your lat here" data-lon="type your lon here" data-zoom="12" data-info="Trinity Bellwoods Park" data-mlat="type your lat here" data-mlon="type your lon here">
  </div>

Contact Form PHP Setting


You can set you set you mail Address by following this.
N.B- Sometimes your mail send into spam box for security issue when you use it..we recommended that check you spam box

CSS Files and Structure


Mainly two main CSS files are used in this theme. The first one bootstrap.css, second one is style.css which for this template and responsive style include in style.css file.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

CSS Files

Common stylesheets included in all pages:

    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/video.min.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/slick-theme.css">
    <link rel="stylesheet" href="assets/css/style.css">

Jquery and javascript


This theme imports three types of Javascript files.

  • jQuery
  • Custom scripts (script.js)
  • Some plugins

  • jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. (All javascript plugins include in jquery-plugin-collection.js file)

   <script src="assets/js/jquery.min.js"></script>
   <script src="assets/js/bootstrap.min.js"></script>
   <script src="assets/js/popper.min.js"></script>
   <script src="assets/js/owl.carousel.min.js"></script>
   <script src="assets/js/jarallax.js"></script>
   <script src="assets/js/jquery.magnific-popup.min.js"></script>
   <script src="assets/js/appear.js"></script>
   <script src="assets/js/waypoints.min.js"></script>
   <script src="assets/js/jquery.counterup.min.js"></script>
   <script src="assets/js/tilt.jquery.min.js"></script>
   <script src="assets/js/knob.js"></script>
   <script src="assets/js/parallax-scroll.js"></script>
   <script src="assets/js/masonry.pkgd.min.js"></script>
   <script src="assets/js/imagesloaded.pkgd.min.js"></script>
   <script src="assets/js/slick.js"></script>
   <script src="assets/js/wow.min.js"></script>
   <script src="assets/js/script.js"></script>

Sources and Credits


Fonts Used int the template are google fonts, you can find theme on Google Fonts API

Fonts Used are :

"Roboto"

"Nunito"

"Montserrat"

"Playfair Display"

"Caveat"




Sliders Used Are :

Owl Carousel


Every Code is properly commented for Editing Ease.

Icons Used are :


Fontawsome Icons
https://fortawesome.github.io/Font-Awesome/

Support


Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Email Us at : support@themexriver.com