Eduharvard - Multi-Concept Education & Courses HTML Template

  • Version: 1.0.0
  • Last Updated: 06/01/2017
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates.

Template features:

  • HTML5 & CSS3
  • Responsive Template
  • Free icons used
  • Pixel Perfect
  • Clean & Unique Design
  • Easy to customize
  • Retina Ready
  • Unlimited Colors
  • Boxed or Wide layout
  • Ajax Contact Form
  • Ajax Appoinment Form
  • 3 Portfolio page
  • Portfolio Masonry
  • Portfolio grid alt
  • Four types of header
  • One page
  • 2 Blog Page
  • Parallax Effect
  • & much more...

HTML Structure

Eduharvard HTML Templates is a Modern, Creative, Responsive. Template Design suitable for Educational Institutions like Universities and Colleges, Online Courses / Online Learning and Events. Clean, crisp and simple design that can easily be adapted and used for variety of similar niche websites. This HTML Template has dark & light versions, boxed & wide versions, Singlepage & Multipage versions, & Unlimited Colors.

Below is Unc basic structure:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Eduharvard - Multi-Concept Education & Courses HTML Template</title>

    <!-- Mobile Specific Metas -->

    <!-- Bootstrap  -->

    <!-- Template Style -->

    <!-- Responsive -->

    <!-- colors -->    
   
    <!-- Animation Style -->    

    <!-- Favicon and touch icons  -->
</head>

<body>
	<!-- Header -->	

	<!-- Slider -->

    <!-- Section -->
    <section class="flat-row"> </section>

    <!-- Footer -->
    <footer class="footer"> </footer>

   	<!-- Bottom -->
   	<div class="bottom"> </bottom>

   	<!-- Go Top -->
    <a class="go-top">
     	<i class="fa fa-chevron-up"></a>
    </a>
   
   <!-- Javascript -->
   <script type="text/javascript" src="javascript/jquery.min.js"></script>
   <script type="text/javascript" src="javascript/bootstrap.min.js"></script>
   <script type="text/javascript" src="javascript/jquery.easing.js"></script>
   <script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
   <script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
   <script type="text/javascript" src="javascript/owl.carousel.js"></script>
   <script type="text/javascript" src="javascript/jquery-waypoints.js"></script>   
   <script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>   
   <script type="text/javascript" src="javascript/jquery-countTo.js"></script>   
   <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
   <script type="text/javascript" src="javascript/jquery.magnific-popup.min.js"></script>
   <script type="text/javascript" src="javascript/parallax.js"></script>
   <script type="text/javascript" src="javascript/smoothscroll.js"></script>
   <script type="text/javascript" src="javascript/jquery-validate.js"></script>
   <script type="text/javascript" src="javascript/jquery.countdown.js"></script>
   <script type="text/javascript" src="javascript/switcher.js"></script>
   <script type="text/javascript" src="javascript/main.js"></script>
</body>

</html>

CSS System

The Unc CSS System contains 3 parts:
  • Template style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Template style )


/** 
  * Reset
  * Repeatable Patterns
  * Flat top
  * Social links
  * Header
  * Widget
  * Page title
  * Breadcrumbs
  * Blog post
  * Pagination
  * Blog single
  * Footer
  * 404
  * Search results
  * Boxed
  * Switcher
  * GoTop Button
  * Parallax
  * Revolution Slider
  * Preload
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/** 
  * Item
  * Flat divider
  * Row
  * Flat button
  * Flat counter
  * Flat title section
  * Flat blog shortcode
  * Flat tabs
  * Flat general
  * Flat history
  * Flat member
  * Flat promobox
  * Flat clients
  * Flat accordion
  * Flat list
  * Flat iconlist
  * Flat testimonials
  * Flat iconbox
  * Flat portfolio
  * Flat map
  * Flat contact form
  * Flat imagebox
  * Flat iconbox
  * Progress Bar
  * Flat make-quote
  * Flat quick form
  * Flat shop
*/

Javascript - Fonts - Animation - Bootstrap style

/**  
  * font-awesome.css
  * simple-line-icons.css
  * magnific-popup.css

  * owl.carousel.css
  * flexslider.css
  * justifiedGallery.css

  * animate.css
  * shortcodes.css

  * bootstrap.css 
  * revolution-slider.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, & Progress bar and more..)

Main.js ( javascript/main.js )


/**
  * isMobile
  * responsiveMenu
  * headerFixed
  * onepage_nav
  * ajaxContactForm
  * alertBox
  * generalSlider
  * flatTestimonial
  * detectViewport
  * flatCounter
  * googleMap
  * swClick
  * popupGallery
  * flatAccordion
  * portfolioIsotope
  * flatTabs
  * goTop
  * progressBar
  * flatFilterPrice
  * retinaLogos
  * flatSearch
  * parallax
  * removePreloader
*/

Shortcodes System

You can easily use the shortcodes to create your own page.

    
/** 
  * Item
  * Flat divider
  * Row
  * Flat button
  * Flat counter
  * Flat title section
  * Flat blog shortcode
  * Flat tabs
  * Flat general
  * Flat history
  * Flat member
  * Flat promobox
  * Flat clients
  * Flat accordion
  * Flat list
  * Flat iconlist
  * Flat testimonials
  * Flat iconbox
  * Flat portfolio
  * Flat map
  * Flat contact form
  * Flat imagebox
  * Flat iconbox
  * Progress Bar
  * Flat make-quote
  * Flat quick form
  * Flat shop
*/

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

contact-process.php ( contact/contact-process.php )


$address = "themesflat@gmail.com";

Example Edit Template

1. Example of how to edit the logo template


You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Unc:-> images -> logo.png

2. Example of how to edit the "iconbox" template

Two column: add class "item-two-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Unc - Consultant Finance HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-two-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Three column: add class "item-three-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Unc - Consultant Finance HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-three-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Four column: add class "item-four-column"

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Unc - Consultant Finance HTML Templates</title>
</head>

<body>

    <!-- Section -->
    <section class="flat-row"> 
    	<div class="flat-iconbox-style"> 
    		<div class="flat-item item-four-column"> 
    			...
    		</div>
    	</div>
    </section>

</body>

</html>

Credits