Intoduction


SaaSio - Saas Startup Agency HTML Template

An HTML Template

Created : 25/05/2020
By : themexriver
Email : support@themexriver.com

Thank you for purchasing SaaSio 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
             ============================================= -->

StartUp Agency Slider Structure


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


     <div id="str-banner-slide" class="str-banner-slide-area owl-carousel">
     <div class="str-banner-content str-headline pera-content">
     ----
     -----
     ------
     </div>
     <div class="str-banner-content str-headline pera-content">
     ----
     -----
     ------
     </div>
     <div class="str-banner-content str-headline pera-content">
     ----
     -----
     ------
     </div>
     <div class="str-banner-content str-headline pera-content">
     ----
     -----
     ------
     </div>
     </div>

Project Filter Structure


To learn how to use "Why will you choose our app?" Slider and check how does it work. 


        <div class="ei-service-slide-btn ul-li-block clearfix">
        <div class="banner-pager clearfix" id="banner-pager">
        <a class="pager" data-slide-index="0">
        ----------
        ----------
        </a>

        <a class="pager" data-slide-index="1">
        ----------
        ----------
        </a>

        <a class="pager" data-slide-index="2">
        ----------
        ----------
        </a>
        </div>
        </div>
        </div>

        <div class="eight-service-text position-relative appeight-headline wow fadeFromRight" data-wow-delay="300ms" data-wow-duration="1500ms">
        <div class="ei-service-slide-mbl" data-background="assets/img/app-landing/mockup/smu1.png">
        <div class="slide-inner">
        <div class="ei-service-slide">
        <div class="slide-item">
        <div class="image">
        <img src="put Your Image Path Here" alt="" />
        </div>
        </div>
        <div class="slide-item">
        <div class="image">
        <img src="put Your Image Path Here" alt="" />
        </div>
        </div>
        <div class="slide-item">
        <div class="image">
        <img src="put Your Image Path Here" alt="" />
        </div>
        </div>
        <div class="slide-item">
        <div class="image">
        <img src="put Your Image Path Here" alt="" />
        </div>
        </div>

        </div>
        </div>
        </div>
        </pre>

expertise Carousel Structure


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


    <div id="ei-team-slide" class="ei-team-content owl-carousel">
    <div class="ei-team-pic-text wow fadeFromLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
    <div class="ei-team-img position-relative">
    <div class="team-mem-img-ei text-center position-relative">
    ----
    -----
    ------
    </div>
    <div class="ei-team-social">
    -----
    -----
    ---
    </div>
    </div>
    <div class="ei-team-text appeight-headline text-center pera-content">
    -----
    -----
    </div>
    </div>
    <div class="ei-team-pic-text wow fadeFromLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
    <div class="ei-team-img position-relative">
    <div class="team-mem-img-ei text-center position-relative">
    ----
    -----
    ------
    </div>
    <div class="ei-team-social">
    -----
    -----
    ---
    </div>
    </div>
    <div class="ei-team-text appeight-headline text-center pera-content">
    -----
    -----
    </div>
    </div>
    <div class="ei-team-pic-text wow fadeFromLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
    <div class="ei-team-img position-relative">
    <div class="team-mem-img-ei text-center position-relative">
    ----
    -----
    ------
    </div>
    <div class="ei-team-social">
    -----
    -----
    ---
    </div>
    </div>
    <div class="ei-team-text appeight-headline text-center pera-content">
    -----
    -----
    </div>
    </div>
    </div>

Testimonial Slider Structure


To learn how to use "Client’s review for work satisfaction." Owl Carousel , here is the code or go to Owl Carousel 2 and check how does it work. 


     <div id="testimonial-scroller" class="testimonial-scroller-area owl-carousel">
     <div class="ei-testimonial-img-text position-relative">
     <div class="test--quote-icon">
     <i class="fas fa-quote-right"></i>
     </div>
     <div class="ei-testimonial-img float-left text-center">
     <img src="Put Your Image Path here" alt="">
     </div>
     <div class="ei-testimonial-text">
     <div class="ei-testimonial-name appeight-headline pera-content">
     ----
     ----
     </div>
     <p>Your Text Here</p>
     <div class="ei-testi-rate ul-li clearfix">
     <ul>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     </ul>
     </div>
     </div>
     </div>
     <div class="ei-testimonial-img-text position-relative">
     <div class="test--quote-icon">
     <i class="fas fa-quote-right"></i>
     </div>
     <div class="ei-testimonial-img float-left text-center">
     <img src="Put Your Image Path here" alt="">
     </div>
     <div class="ei-testimonial-text">
     <div class="ei-testimonial-name appeight-headline pera-content">
     ----
     ----
     </div>
     <p>Your Text Here</p>
     <div class="ei-testi-rate ul-li clearfix">
     <ul>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     <li><i class="fas fa-star"></i></li>
     </ul>
     </div>
     </div>
     </div>
     </div>

Screenshoot Slider


To learn how to use Screenshots Slider, here is the code or go to Swiper Slider and check how does it work. 


     <div class="row ei-appScreenshotCarousel-container swiper-container">
     <div class="ei-screen-mobile-image"></div>
     <div class="swiper-wrapper">
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     <div class="swiper-slide" style="Put your Image Path here)"></div>
     </div>
     </div>
     <div class="banner-navigation">
     <div class="swiper-button-prev"><span class="fas fa-chevron-left"></span></div>
     <div class="swiper-button-next"><span class="fas fa-chevron-right"></span></div>
     </div>
     </div>

Counter Up Structure


To learn how to use "counter Up" Counter Up . 


        <div class="eg-counter-number pera-content text-center">
        <span class="odometer" data-count="Put your counted number here">00</span><strong>+</strong>
        <p>Downloads
        done</p>
        </div>

Video Popup


To learn how to use Video popup , here is the code or go to Fancy Box and check how does it work.. 


        <a href="Put Your Video link Here(Recommended Youtube video link)" class="lightbox-image overlay-box"><i class="fas fa-play"></i></a>
        if($('.lightbox-image').length) {
        $('.lightbox-image').fancybox({
        openEffect  : 'fade',
        closeEffect : 'fade',
        helpers : {
        media : {}
    }
});
}

Faq Accordion Structure


To learn how to use Accordion , here is the code or go to Bootstrap Accordion and check how does it work.. 


        <div class="accordion" id="accordionExample">
        <div class="row">
        <div class="col-lg-6 col-md-12">
        <div class="s2_faq">
        <div class="s2_faq-header" id="headingOne">
        <button class="" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">
        Your Title Here
        </button>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
        <div class="s2_faq-body">
        Faq Question Answer here
        </div> 
        </div>
        </div>
        <div class="s2_faq">
        <div class="s2_faq-header" id="headingOne">
        <button class="" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">
        Your Title Here
        </button>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
        <div class="s2_faq-body">
        Faq Question Answer here
        </div> 
        </div>
        </div>
        <div class="s2_faq">
        <div class="s2_faq-header" id="headingOne">
        <button class="" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">
        Your Title Here
        </button>
        </div>
        <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
        <div class="s2_faq-body">
        Faq Question Answer here
        </div> 
        </div>
        </div>
        </div>                            
        </div>
        </div>
        </div>

StartUp Agency Our awesome features Slider


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


     <div id="str-slide" class="str-feature-content owl-carousel">
     <div class="str-feature-box wow fadeFromUp" data-wow-delay="0ms" data-wow-duration="1500ms">
     <div class="str-hover-icon text-center"><i class="fas fa-plus"></i></div>
     <div class="str-feature-icon-text text-center">
     <div class="str-feature-icon">
     <img src="Your Image Path here" alt="">
     </div>
     <div class="str-feature-text str-headline">
     <h3>Your Title Here</h3>
     <div class="str-feature-list ul-li-block">
     <ul>
     <li>-----</li>
     <li>------</li>
     <li>-------</li>
     </ul>
     </div>
     </div>
     </div>
     </div>
     <div class="str-feature-box wow fadeFromUp" data-wow-delay="300ms" data-wow-duration="1500ms">
     <div class="str-hover-icon text-center"><i class="fas fa-plus"></i></div>
     <div class="str-feature-icon-text text-center">
     <div class="str-feature-icon">
     <img src="Your Image Path here" alt="">
     </div>
     <div class="str-feature-text str-headline">
     <h3>Your Title Here</h3>
     <div class="str-feature-list ul-li-block">
     <ul>
     <li>-----</li>
     <li>------</li>
     <li>-------</li>
     </ul>
     </div>
     </div>
     </div>
     </div>
     <div class="str-feature-box wow fadeFromUp" data-wow-delay="600ms" data-wow-duration="1500ms">
     <div class="str-hover-icon text-center"><i class="fas fa-plus"></i></div>
     <div class="str-feature-icon-text text-center">
     <div class="str-feature-icon">
     <img src="Your Image Path here" alt="">
     </div>
     <div class="str-feature-text str-headline">
     <h3>Your Title Here</h3>
     <div class="str-feature-list ul-li-block">
     <ul>
     <li>-----</li>
     <li>------</li>
     <li>-------</li>
     </ul>
     </div>
     </div>
     </div>
     </div>
     </div>

Progress Bar


To learn how to use Barfiller , here is the code or go to Barfiller and check how does it work.. 


     <h3>TItle Here</h3>
     <div id="progress1" class="barfiller">
     <div class="tipWrap"><span class="tip"></span></div>
     <span class="fill" data-percentage="Your Percentage Here"></span>
     </div>  
     <h3>TItle Here</h3>
     <div id="progress1" class="barfiller">
     <div class="tipWrap"><span class="tip"></span></div>
     <span class="fill" data-percentage="Your Percentage Here"></span>
     </div>   
     <h3>TItle Here</h3>
     <div id="progress1" class="barfiller">
     <div class="tipWrap"><span class="tip"></span></div>
     <span class="fill" data-percentage="Your Percentage Here"></span>
     </div>

Blog Slider


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


     <div id="str-blog-slide" class="str-blog-area owl-carousel">
     <div class="str-blog-img-text position-relative">
     <div class="str-blog-thumb">
     <img src="Put Your Image pathe here" alt="">
     </div>
     <div class="str-blog-meta text-center text-uppercase">
     Put Your Date here
     </div>
     <div class="str-blog-text str-headline">
     <a class="str-post-meta" href="#">by admin</a>
     <h3><a href="#">Put your title  here</a></h3>
     <div class="str-read-more">
     <a href="#">Read More</a>
     </div>
     </div>
     </div>
     <div class="str-blog-img-text position-relative">
     <div class="str-blog-thumb">
     <img src="Put Your Image pathe here" alt="">
     </div>
     <div class="str-blog-meta text-center text-uppercase">
     Put Your Date here
     </div>
     <div class="str-blog-text str-headline">
     <a class="str-post-meta" href="#">by admin</a>
     <h3><a href="#">Put your title  here</a></h3>
     <div class="str-read-more">
     <a href="#">Read More</a>
     </div>
     </div>
     </div>
     <div class="str-blog-img-text position-relative">
     <div class="str-blog-thumb">
     <img src="Put Your Image pathe here" alt="">
     </div>
     <div class="str-blog-meta text-center text-uppercase">
     Put Your Date here
     </div>
     <div class="str-blog-text str-headline">
     <a class="str-post-meta" href="#">by admin</a>
     <h3><a href="#">Put your title  here</a></h3>
     <div class="str-read-more">
     <a href="#">Read More</a>
     </div>
     </div>
     </div>
     </div>

Banner Typer WOrd



       <span class="cd-words-wrapper">
       <b class="is-visible">Your typing word</b>
       <b>Your Typing Word</b>
       <b>Your Typing Word</b>
       </span>

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/simple-line-icons.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/lightbox.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/isotope.pkgd.min.js"></script>
        <script src="assets/js/masonry.pkgd.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/lightbox.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/wow.min.js"></script>
        <script src="assets/js/script.js"></script>
        <script src="assets/js/gmap3.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?key=AIzaSyC61_QVqt9LAhwFdlQmsNwi5aUJy9B2SyA"></script>

Sources and Credits


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

Fonts Used are :

"Open Sans"



Background Parallax :

jarallax.js (in js Folder)


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