Education Master html Template

Overview

After downloaded the template package from Themeforest, unzip it if you haven't already. Inside the package you will find the following files and folders:

• Grows Business v2.0
  • Documentation
  • HTML
    • css
      • bootstrap.css
      • font-awesome.min.css
      • materialize.css
      • responsive.css
      • style-mob.css
    • fonts
    • images
    • js
      • bootstrap.js
      • custom.js
      • html5shiv.js
      • main.min.js
      • materialize.min.js
      • respond.min.js
    • about.html
    • admission.html
    • all-courses.html
    • awards.html
    • contact-us.html
    • course-details.html
    • dashboard.html
    • db-courses.html
    • db-exams.html
    • db-profile.html
    • db-time-line.html
    • event-details.html
    • event-register.html
    • events.html
    • index.html
    • seminar.html

Installion

Follow these easy steps to install the template from scratch:

1. Connect to your website with an Ftp client (eg. FileZilla)
2. Upload the contents of the whole /Template folder to your desired root folder
3. Once uploaded, edit the template files according to your needs, than save
4. Refresh your browser in order to see the modifications

Editing

To edit the files in this template, you need a text / code editor software installed on your computer. Below, there are some popular free code editor softwares:

• Sublime Text (Recommended)
• Notepad++ (Windows)
• TextMate (Mac)

Html Files

In the unzipped archive, you will find the following html template files:

The main html template file is index.html

Css Files

In the /css folder, you will find the following structure:

• css/
  • bootstrap.css
  • font-awesome.min.css
  • materialize.css
  • style.css
  • style-mob.css

The default css stylesheet of the theme is style.css

Script Files

In the /js/ folder, you will find the following structure:

• javascripts/
  • bootstrap.js
  • custom.js
  • html5shiv.js
  • main.min.js
  • materialize.min.js
  • respond.min.js

The main javascript files of the theme is custom.js

font Files

In the HTML/fonts folder, you will find the following structure:

• fonts/
  • FontAwesome(font-awesome fonts)
  • fontawesome-webfont.eot(font-awesome fonts)
  • fontawesome-webfont(font-awesome fonts)
  • fontawesome-webfont.woff(font-awesome fonts)
  • fontawesome-webfont.woff2(font-awesome fonts)
  • micon.woff2(materialize fonts)

The above all font formats are same font family but micon.woff2 fonts are materialize fonts.

3.1: SOURCE CODE STRUCTURE: HEADER SECTION

The header section defind for meta tags, website title, fav icon, google fonts and style sheets(css files)

1. Title tag : Title for your website
2. Meta tag : The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document and more
3. Fav icon : Favicons appear in the browser tab, address bar, browser history, bookmarks bar, etc
4. Google Font : A simple and easy way to add custom google fonts to your website.
5. Font-Awesome : Font-Awesome icons
6. Style Sheet : All CSS files
7. Style Sheet : Mobile friendly and responsive CSS style sheet
8. IE8 and IE9 : Internet Explored supporting scripts html5shiv.js and respond.min.js

3.2: SOURCE CODE STRUCTURE: BODY SECTION

The body section defind for header, slider, band, services, free consultant and more..

1. MOBILE MENU : This section only showing one mobile and tablets
2. HEADER SECTION : This section have logo, menu, register, loging and more
3. SLIDER : Slider section you can add n-number of slider images
4. QUICK LINKS : Quick link section, users can easily access this quick links
5. DISCOVER MORE : Discover about college, school, training center and more
6. POPULAR COURSES : You can show your popular courses using this section
7. UPCOMING EVENTS : Describe your upcoming events using this section
8. NEWS AND EVENTS : You can show your news and events using this section
9. FOOTER COURSE BOOKING : You can describe your most popular course here.
10. FOOTER : Footer section have top courses, new courses, help and support and more
11. COPY RIGHTS : You can write your copyrighs here.
12. SECTION LOGIN, REGISTER AND FORGOT PASSWORD : This section have all popups like login, register and forgot password
13. SOCIAL MEDIA SHARE : you can show your social media details here

Theme Edit

CHANGE FONT FAMILY

if you want's to change your theme font following the instructions below.

1. Step 1: Go to the website link

https://fonts.google.com/

2. Step 2: pick your favorite font
3. Step 3: Copy and past your link into header section
4. Step 4: Copy font family into your style.css file

SECTIONS : Top bar

1. Open up index.html from the HTML/ folder
2. This top bar for common, it's showing all pages
3. This section have four parts like address, contact info, cocial media and login, register

	class="ed-top"

4. This sections have search box and background image.

SECTIONS : Logo and Menu

1. Open up index.html from the HTML/ folder
2. This section have two parts one is logo and second one is menu section
3. Logo: you can use any kind of image formats like .jpg, .png, .gif and more but image ratio better for 4:1... this format suitable for this theme
4. Menu: we provide normal and mega menu in this template.

	class="top-logo"

5. Fixed menu: top fixed menu, you can adjust using below positions

	 data-spy="affix" data-offset-top="250"

SECTIONS : SEARCH BOX

1. Open up index.html from the HTML/ folder
2. This search box using for course searching
3. Jquery event using this search box

	id="sf-box"

4. This sections have search box and background image.

SECTIONS : Slider

1. Open up index.html from the HTML/ folder
2. You ca add multiple slider images in this slider
3. Image size: we preferred image size is 1600px X 700px
4. Image format: Using .jpg, .png, .jpeg anf .gif

SECTIONS : Quick Links

1. This section showing important links
2. We preferred this section you need to add some important pages for this link because visitors easily access this page.

SECTIONS : Discover More

1. This section you can show your most important part of your university
2. We preferred Admission, academic, courses, seminar and more

SECTIONS : Popular Courses

1. This section you show the all course details
2. Showcase of your course

SECTIONS : Upcoming Events

1. This section showing upcoming events
2. Date: This blue section you can write event date and time
3. Description: We preferred to showing event name, short descriptions and date

SECTIONS : Job Vacants

1. This section showing Job Vacants
2. Image: You can use some square size small images
3. Description: We preferred to showing Job name, short descriptions and location

SECTIONS : Register & Login

1. This section showing Register & Login
2. Register: This register form have user name, email id, password and confirm password
3. Login: This login form have user name and password

SECTIONS : News and Events

1. PHOTO GALLERY: You can show your photo albums here
2. VIDEO GALLERY: You can show your video albums here
3. NEWS & EVENT: You can show your short news and events here

SECTIONS : FOOTER SECTION

1. This section have three parts
2. TOP COURSES: Show your top course here
3. NEW COURSES: Show your new courses here
4. HELP & SUPPORT: Here show your help and support details

SECTIONS : FOOTER SECTION : 2

1. This section have three parts
2. GET IN TOUCH: Address and contact information
3. DOWNLOAD OUR FREE MOBILE APPS: Quick download link for your mobile app
4. SOCIAL MEDIA: Show your social media profile here. stay connect with your customers

SECTIONS : COPYRIGHTS

1. This section have Copy-Rights information

Script Sources

• jQuery
• Bootstrap

Font Sources

• Google Webfonts
• FontAwesome

Css Sources

• Bootstrap 3
• Materialize css

Image Sources

• Allfreephotos

Note: Images used in the theme preview are only for demo purposes and not included in the main download.