Tutspress

Multipurpose Education HTML Template

Thank you for purchasing our theme. 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 here. Thanks so much!

Created: 06/30/2021
By: 52Hz Pro
Latest Update: 09/09/2021

Introduction

Thank you so much for purchasing this template. Please feel free to contact us if you have question or problem about this template. We will do our best to provide you with the best possible assistance.

Features

100% Responsive Layout
HTML5 and CSS3
Bootstrap 4
Unique Sections and Design
Includes 16 Different Pages
Free Google Fonts
SEO friendly
Courses and blog pages
Includes single pages
Blog pages design with sidebar and full width mood
CSS Animations
FontAwesome icons (500+)
Documentation
and much more...

Structure

Once downloaded, unzip the compressed folder to see the structure of the Tutspress template. You'll see next structure:

								
├── assets/
│  └── animate/
│     └── *.css
│  └── bootstrap/
│     └── css/
│        └── *.css
│     └── js/
│        └── *.js
│  └── fontawesome/
│     └── *.js
│  └── img/
│     └── download/
│        └── *.jpg
│     └── favicons/
│        └── *.png, *.ico
│     └── other/
│        └── *.jpg
│     └── post/
│        └── *.jpg
│     └── jquery/
│        └── *.js
│     └── owlcarousel/
│        └── css/
│           └── *.css
│        └── js/
│           └── *.js
├── css/
│  └── *.css/
├── js/
   └── *.js

HTML Structure

All information are between tag <body> and </body>. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

This template based on a responsive layout. You can see general structure of this template.

- Logo

In the header of each page, you can replace your own logo with the default logo.

As you can see there are two kinds of logos (in the header): Text-based and Image-based. You can choose the preferred variant by removing HTML comments.

Don't forget to comment or delete another variant.

- Tapbar menu

Tutspress template supports topbar menu. You can customize each item easily.

As you can see there are between <header> and </header> tags.

- Header Information bar

In the header of each page, there is a section to put Your email address and contact number in it. this section called Express contact.

- Main menu(Main navigator)

You can customize each item of Main menu easily.

As you can see there are between <header> and </header> tags.

CSS Structure

It is a list of CSS files that include in this template:

File Name	Description
bootstrap.min.css	A framework for quickly design and customize responsive mobile-first sites. https://getbootstrap.com/docs/4.6/getting-started/introduction/
animate.css	A cross-browser library of CSS animations. As easy to use as an easy thing. http://daneden.github.io/animate.css
owl.carousel.min.css	owl.carousel is library to create tiny carousel with jQuery. https://owlcarousel2.github.io/OwlCarousel2/
owl.theme.default.min.css	owl.carousel is library to create tiny carousel with jQuery. https://owlcarousel2.github.io/OwlCarousel2/
responsive.css	Includes all style for responsive layout.
style.css	Base file that includes all theme styles.
customize.css	This file is for you! add your custom CSS code into this file.

- style.css

This file includes all variables used in this template. If you want to change the style and colors, it is better to add your style to the custom.css file. in another way you can start from this file

JavaScript

It is a list of JS files that include in this template:

File Name	Description
bootstrap.bundle.min.js	A framework for quickly design and customize responsive mobile-first sites. https://getbootstrap.com/docs/4.6/getting-started/introduction/
fontawesome.js	Font Awesome is one of the top open source library amd use for icons. https://github.com/FortAwesome/Font-Awesome
owl.carousel.min.js	owl.carousel is library to create tiny carousel with jQuery. https://owlcarousel2.github.io/OwlCarousel2/
jquery.js	jQuery is a well-known fast, small, and feature-rich JavaScript library. https://jquery.com/
custom.js	custom functions and scripts are here!.

Customization

CSS styles

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.

Strongly recommended:To change the style and colors, it is better to add your style to the custom.css file. in another way you can start from this file

example:

Any images that are placed within the blog section have 5px worth of padding and a light bluish background. If you would like to edit the display of these images, find the following section in the style sheet:

								
#primaryContent #blog img {
  change styles here:
}

HTML files

If you would like to import your data, simply find the appropriate label in the HTML file, and then scroll down until you find something that you want to edit.

All pages and files have been commented clearly. You can find elements and sections easily. don't forget all sections and elements are customizable

example:

It is part of the blog grid's codes

Change Fonts

You don't like these fonts? You can easily change it.

Delete this code from each page or replace your fonts path.

								
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700,900|Roboto:100,300,400">

Fonts

We've used various types of fonts in this template.

Fonts

Roboto (Google Web Font: https://fonts.google.com/specimen/Roboto)
Roboto Slab (Google Web Font: https://fonts.google.com/specimen/Roboto+Slab)

Icon Fonts

FontAwesome 5.15.2 https://fontawesome.com

Credits

Some of credits and sources.

JavaScript

CSS

Images

All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files. All images can be found on these sites:

Only exception is two background images (that is located in "other" folder of template). these images are our work and you can use them freely :)