# EduGate - Multiconcept Education HTML Template

- created: 12/11/2015
- latest update: 2/5/2016
- by: Swlabs
- forum: http://support.swlabs.co/
- email: admin@swlabs.co

THANK YOU SO MUCH FOR BEING A VALUABLE & PURCHASE-VERIFIED CUSTOMER

### Introduction

EduGate is clean HTML template for educational purpose website or portal.

It can be used for a school, library, training center or even a private instructors, tutors… EduGate is a Modern, Creative, Responsive & Multipurpose HTML Template suitable for Educational Institutions like Universities and Colleges, Online Courses / Online Learning and Events.

PSD template is available at here

If you like this theme please rate it.

#### Features

- Clean and Clear Design
- 10 pre-defined color variations
- High Visual Hierchy / Contrast for easier to read
- Google Web Fonts: Lato
- Fontawesome Icons
- HTML & CSS Validated
- Parallax Scrolling Effect
- Carousel Slider
- CSS Animation
- Bootstrap Framework (Grid wide 1170px)
- Well-commented
- Cross Brower Supports: FireFox, Google Chrome, IE9+, Safari
- Clear formatting coding for easier to modify
- Free Support

### Template structure

EduGate comes with 23 HTML Pages:

1. HOME PAGE 01
2. HOME PAGE 02
3. HOME PAGE 03
4. COURSES
5. COURSE DETAIL
6. EVENTS
7. EVENT DETAIL
8. GALLERY 3 COLUMNS
9. GALLERY 4 COLUMNS
10. GALLERY MASONRY
11. CATEGORIES
12. TEACHER PROFILE
13. ABOUT US
14. LOGIN
15. REGISTER
16. 404 PAGE
17. FAQ
18. NEWS LIST
19. NEWS GRID
20. NEWS GRID NON SIDEBAR
21. NEWS MASONRY
22. NEWS DETAIL
23. CONTACT

...and more to go

### File structure

- assets/
  - css/
    - pages/... (Style for each page)/ul>
    - color-(1-10).css (multicolor, select & use the suitable color)
  - images/
  - js/
    - pages/... (Script for each page)
    - main.js (Script for global components)
    - other plugins scripts...
  - libs/ (included global plugins library)
- HTML files

### HTML Structure

#### Head Tag

    <!DOCTYPE html>
    <html lang="en">

    <head><title>Edugate | Home</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- LIBRARY FONT-->
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400italic,700,900,300">
        <link type="text/css" rel="stylesheet" href="assets/font/font-icon/font-awesome-4.4.0/css/font-awesome.css">
        <link type="text/css" rel="stylesheet" href="assets/font/font-icon/font-svg/css/Glyphter.css">
        <!-- LIBRARY CSS-->
        <link type="text/css" rel="stylesheet" href="assets/libs/animate/animate.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/bootstrap-3.3.5/css/bootstrap.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/owl-carousel-2.0/assets/owl.carousel.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/selectbox/css/jquery.selectbox.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/fancybox/css/jquery.fancybox.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/fancybox/css/jquery.fancybox-buttons.css">
        <link type="text/css" rel="stylesheet" href="assets/libs/media-element/build/mediaelementplayer.min.css">
        <!-- STYLE CSS-->
        <link type="text/css" rel="stylesheet" href="assets/css/color-1.css" id="color-skins">
    </head>

#### Body Tag

    <body>
    	<!-- HEADER -->
    	<header></header>
        <!-- WRAPPER -->
        <div id="wrapper-content">
        	<div id="page-wrapper">
    	        <!-- MAIN -->
    	        <div id="main-content"></div>
    	   	</div>
    	   	<div id="back-top">
    	    	<a href="#top"><i class="fa fa-angle-double-up"></i></a>
    	    </div>
        </div>
        <!-- FOOTER -->
    	<footer id="footer"></footer><!-- JAVASCRIPT LIBS-->
    	<script src="assets/libs/jquery/jquery-2.1.4.min.js"></script>
    	<script src="assets/libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    	<script src="assets/libs/smooth-scroll/jquery-smoothscroll.js"></script>
    	<script src="assets/libs/owl-carousel-2.0/owl.carousel.min.js"></script>
    	<script src="assets/libs/appear/jquery.appear.js"></script>
    	<script src="assets/libs/count-to/jquery.countTo.js"></script>
    	<script src="assets/libs/wow-js/wow.min.js"></script>
    	<script src="assets/libs/selectbox/js/jquery.selectbox-0.2.min.js"></script>
    	<script src="assets/libs/isotope/isotope.pkgd.min.js"></script>
    	<script src="assets/libs/fancybox/js/jquery.fancybox.js"></script>
    	<script src="assets/libs/fancybox/js/jquery.fancybox-buttons.js"></script>
    	<script src="assets/libs/js-cookie/js.cookie.js"></script>
    	!-- MAIN JS-->
    	<script src="assets/js/main.js"></script>
    	<!-- LOADING SCRIPTS FOR PAGE-->
    	<script src="assets/js/pages/homepage.js"></script>
    </body>

### Slider

#### Owl Carousel

We used Owl Carousel plugin for Home page banner.

For more information, please go on: http://owlgraphic.com/owlcarousel/

#### Slider content

We configured that slider content is in this HTML markup:

     <div class="carousel-logos owl-carousel">
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-1.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-2.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-3.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-4.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-5.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-6.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-1.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-2.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-3.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-4.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-5.png" class="img-responsive"></a>
        </div>
        <div class="logo-iteam item">
            <a href="#"><img src="assets/images/logo/logo-carousel-6.png" class="img-responsive"></a>
        </div>
    </div>
    </div>

You can apply other configuration for this plugins, please visit https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties to read more about this plugins API.

### Credits & Resource

#### Font

- Lato: https://www.google.com/fonts/specimen/Lato

#### Images

- http://www.shutterstock.com/
- http://www.freepik.com/
- https://randomuser.me/photos

#### Plugins

- jQuery: http://jquery.com/
- Bootstrap: http://getbootstrap.com/
- Smooth Scroll: https://github.com/kswedberg/jquery-smooth-scroll
- Owl Carousel: http://owlgraphic.com/owlcarousel/
- Appear: https://github.com/morr/jquery.appear
- Count To: https://github.com/mhuggins/jquery-countTo
- WOW JS: https://github.com/matthieua/WOW
- Isotope: http://isotope.metafizzy.co/
- Fancybox: http://fancybox.net/
- Animate CSS : http://daneden.github.io/animate.css/

### Contact

Thank you for purchased!

If you have any question, please contact with us via:

- Email: admin@swlabs.co