Thank you for purchasing this template. :)
This template based on Bootstrap 3 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/3.3/
This template requires that you are familiar with at least HTML and CSS. If you are not familiar with HTML and CSS, I highly recommend that you to hire a specialist. It will save your time and you will get only positive emotions while using this product.
It is also required that you are familiar with Bootstrap 3. If not, then it is strongly recommended that you will familiarize yourself with how the Bootstrap works before you begin to customize this template.
Aivo - is a simple HTML template. HTML is static, this means no dynamic features (no PHP and MySQL). This template is just a good starting point if you want to create your own web site contains mainly the design elements you can use.
* Some parts may not work properly in your local computer. Upload template to your web server in order to function properly!
All template files are located in folder named "UPLOAD".
+-- aivo / +-- assets / ¦ +-- css / ¦ ¦ +-- helper.css (helper CSS classes) ¦ ¦ +-- theme.css (template master CSS) ¦ +-- img / ¦ ¦ +-- ...all images used ¦ +-- js / ¦ ¦ +-- theme.js (template JS) ¦ +-- vendor / ¦ ¦ +-- bootstrap (all Bootstrap files) ¦ ¦ +-- ...all external scripts/plugins ¦ +-- favicon.ico +-- mail.php +-- index.html +-- about-me.html +-- about-me-2.html +-- ...all .html files
Simply upload all template files (can be found in "UPLOAD" folder) to your server using your favorite FTP client (I recommend FileZilla). Once uploaded, point your browser to your site URL and you are done. No any hocus-pocus. :)
This template based on Bootstrap 3 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/3.3/
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
More information about Bootstrap grid system: https://getbootstrap.com/docs/3.3/css/
<!DOCTYPE html>
<!--
Template: Aivo - Multipurpose Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>Your template page title here...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Responsive multipurpose portfolio HTML website template">
<meta name="keywords" content="HTML5, CSS3, Bootsrtrap, Responsive, Multipurpose, Portfolio, Template, Theme, Website, Themetorium" />
<meta name="author" content="themetorium.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon (http://www.favicon-generator.org/) -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google fonts (https://www.google.com/fonts) -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet"> <!-- Global font -->
<!-- Bootstrap CSS (https://getbootstrap.com/docs/3.3/) -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css"> <!-- bootstrap CSS (https://getbootstrap.com/docs/3.3/) -->
<!-- Libs and Plugins CSS -->
All template scripts libs and plugins CSS here...
<!-- Theme master CSS -->
<link rel="stylesheet" type='text/css' href="assets/css/helper.css">
<link rel="stylesheet" type='text/css' href="assets/css/theme.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- ===========
///// Body /////
================
* Use class "animsition" to enable page transition while page loads.
* Use class "tt-boxed" to enable page boxed layout globally (affects all elements containing class "tt-wrap").
-->
<body id="body" class="animsition tt-boxed">
<!-- =================
//// Begin header ////
======================
* Use class "header-show-hide-on-scroll" to hide header on scroll down and show on scroll up.
* Use class "header-fixed-top" to set header to fixed position.
* Use class "header-transparent" to set header to transparent.
* Use class "header-transparent-dark" to enable transparent dark header (use it for light background). Note: class "header-transparent" is required!
* Use class "menu-align-left" to align menu to left.
* Use class "menu-align-right" to align menu to right.
* Use class "menu-align-center" to align menu to center (do not use with header classes!).
-->
<header id="header" class="header-show-hide-on-scroll menu-align-right">
<!-- Begin header inner -->
<div class="header-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag!). Note: additionally you can use prepared helper class "max-width-*" to add custom width to "tt-wrap". Example: "max-width-1500" (class "tt-wrap" is still required!). More info about helper classes in file "helper.css" -->
<!-- Begin logo
================ -->
<div id="logo">
<!-- logo images for big screens -->
<a href="index.html" class="logo-dark"><img src="assets/img/logo-dark.png" alt="logo"></a>
<a href="index.html" class="logo-light"><img src="assets/img/logo-light.png" alt="logo"></a>
<!-- logo images for smaller screens -->
<a href="index.html" class="logo-dark-m"><img src="assets/img/logo-dark-m.png" alt="logo"></a>
<a href="index.html" class="logo-light-m"><img src="assets/img/logo-light-m.png" alt="logo"></a>
</div>
<!-- End logo -->
<!-- ====================
//// Begin main menu ////
===================== -->
<nav class="tt-main-menu">
All main menu code here...
</nav>
<!-- End main menu -->
</div>
<!-- End header inner -->
</header>
<!-- End header -->
<!-- *************************************
*********** Begin body content ***********
************************************** -->
<div id="body-content">
<!-- ========================
///// Begin page header /////
=============================
* Use classes "ph-xs", "ph-sm", "ph-lg" or "ph-xlg" to set page header size.
* Use class "ph-center" or "ph-right" to align page header caption.
-->
<section id="page-header">
All page header content code here...
</section>
<!-- End page header -->
<!-- ============================
///// Begin example section /////
============================= -->
<section id="example-section-1">
<div class="example-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag!). Note: additionally you can use prepared helper class "max-width-*" to add custom width to "tt-wrap". Example: "max-width-1500" (class "tt-wrap" is still required!). More info about helper classes in file "helper.css" -->
All section content code here...
</div> <!-- /.example-section-innerr -->
</section>
<!-- End example section -->
<!-- ============================
///// Begin example section /////
============================= -->
<section id="example-section-2">
<div class="example-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag!). Note: additionally you can use prepared helper class "max-width-*" to add custom width to "tt-wrap". Example: "max-width-1500" (class "tt-wrap" is still required!). More info about helper classes in file "helper.css" -->
All section content code here...
</div> <!-- /.example-section-innerr -->
</section>
<!-- End example section -->
<!-- ============================
///// Begin example section /////
============================= -->
<section id="example-section-2">
<div class="example-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag!). Note: additionally you can use prepared helper class "max-width-*" to add custom width to "tt-wrap". Example: "max-width-1500" (class "tt-wrap" is still required!). More info about helper classes in file "helper.css" -->
All section content code here...
</div> <!-- /.example-section-innerr -->
</section>
<!-- End example section -->
<!-- ===========================
///// Begin footer section /////
================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-dark no-margin-top">
<div class="footer-inner">
All footer content code here...
</div> <!-- /.footer-inner -->
<!-- Scroll to top button -->
<a href="#body" class="scrolltotop sm-scroll" title="Scroll to top"></a>
</section>
<!-- End footer section -->
</div>
<!-- End body content -->
<!-- ====================
///// Scripts below /////
===================== -->
<!-- Core JS -->
<script src="assets/vendor/jquery/jquery.min.js"></script> <!-- jquery JS (https://jquery.com) -->
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- bootstrap JS (https://getbootstrap.com/docs/3.3/) -->
<!-- Libs and Plugins JS -->
All template libs and plugins JS here...
<!--==============================
///// Begin Google Analytics /////
============================== -->
<!-- Paste your Google Analytics code here.
Go to http://www.google.com/analytics/ for more information. -->
<!--==============================
///// End Google Analytics /////
============================== -->
</body>
</html>
jQuery - is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. For more information: http://www.jquery.com
Note: The initialization of the elements, libs and features is made by the file named "theme.js" which is located in the folder named "js".
This template contains some extra prepared helper classes you can use. All helper classes are located in the file "helper.css". You are free to use these classes to customize your web site.
Touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders and slideshows. Based on popular OWL Carousel
<!-- Begin content carousel (https://owlcarousel2.github.io/OwlCarousel2/) ==================================================================== * Use class "nav-outside" for outside nav (requires boxed layout). * Use class "nav-outside-top" for outside top nav (requires enough space at the top of the carousel). * Use class "nav-bottom-right" for bottom right nav. * Use class "nav-rounded" for rounded nav. * Use class "nav-light" to enable nav light style. * Use class "dots-outside" for outside dots (requires enough space at the bottom of the carousel). * Use class "dots-left", "dots-right" or "dots-center-right" to align dots. * Use class "dots-rounded" for rounded dots. * Use class "owl-mousewheel" to enable mousewheel support. * Use class "cursor-grab" to enable cursor grab icon (no effect on links!). * Use class "cc-hover-zoom" to enable carousel items hover effect. ================================================================ * Available carousel data attributes: data-items="5".......................(items visible on desktop) data-tablet-landscape="4"............(items visible on mobiles) data-tablet-portrait="3".............(items visible on mobiles) data-mobile-landscape="2"............(items visible on tablets) data-mobile-portrait="1".............(items visible on tablets) data-loop="true".....................(true/false) data-margin="10".....................(space between items) data-center="true"...................(true/false) data-start-position="0"..............(item start position) data-animate-in="fadeIn".............(more animations: http://daneden.github.io/animate.css/) data-animate-out="fadeOut"...........(more animations: http://daneden.github.io/animate.css/) data-mouse-drag="false"..............(true/false) data-touch-drag="false"..............(true/false) data-autoheight="true"...............(true/false) data-autoplay="true".................(true/false) data-autoplay-timeout="5000".........(milliseconds) data-autoplay-hover-pause="true".....(true/false) data-autoplay-speed="800"............(milliseconds) data-drag-end-speed="800"............(milliseconds) data-nav="true"......................(true/false) data-nav-speed="800".................(milliseconds) data-dots="false"....................(true/false) data-dots-speed="800"................(milliseconds) --> <div class="owl-carousel" data-items="1" data-nav="true"> <!-- Begin carousel item ========================= --> <div class="cc-item"> your content here... </div> <!-- End carousel item --> <!-- Begin carousel item ========================= --> <div class="cc-item"> your content here... </div> <!-- End carousel item --> <!-- Begin carousel item ========================= --> <div class="cc-item"> your content here... </div> <!-- End carousel item --> </div> <!-- End content carousel -->
More information about OWL Carousel: https://owlcarousel2.github.io/OwlCarousel2/
An open source jQuery component to easily build your custom Youtube player or to use a Youtube video as background for your page.
<!-- Begin YTPlayer (Youtube video background)
=======================================================
* NOTE: Replace videoURL with your own (videoURL:'your-youtube-video-URL').
* Do not forget to add your background image for mobile devices (because the video background doesn't work on mobile devices).
* YTPlayer may not work in the local computer. It works properly only if used under a web server.
* Read more info about YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer
-->
<div class="youtube-bg-wrap bg-dark">
<div class="youtube-bg"
style="background-image: url(assets/img/video-bg/video-bg-2.jpg); background-position: 50% 50%;"
data-property="{
videoURL: 'https://www.youtube.com/watch?v=Htg9O7zun50',
containment: 'self',
quality: 'default',
startAt: 0,
stopAt: 0,
autoPlay: true,
loop: true,
mute: true,
showControls: false,
showYTLogo: false,
realfullscreen: true,
addRaster: false,
optimizeDisplay: true,
stopMovieOnBlur: true
}">
<!-- Element cover
===================
* Use class "cover-opacity-*" to set cover opasity (1, 1.5, 2, 2.5, ... 9.5). Example: "cover-opacity-2" or "cover-opacity-2-5".
* Aditional color classes you can use: "cover-color", "cover-light", "cover-red", "cover-pink", "cover-purple", "cover-green", "cover-blue", "cover-yellow" or "cover-brown" to set cover background color (note: class "cover-color" = template main color).
* Use class "cover-gradient-dark", "cover-gradient-light" or "cover-gradient-color" to enable cover gradient background.
-->
<div class="cover cover-opacity-6"></div>
</div> <!-- /.youtube-bg -->
</div>
<!-- End YTPlayer -->
More information about YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer
This template includes a working contact form. Proceed as follows in order to configure it.
Open file "contact.html" or whatever file containing the contact form. Find and configure the following code:
<!-- Begin hidden required fields (https://github.com/agragregra/uniMail) --> <input type="hidden" name="project_name" value="yourwebsiteaddress.com"> <!-- Change value to your site name --> <input type="hidden" name="admin_email" value="your@email.com"> <!-- Change value to your valid email address (where a message will be sent) --> <input type="hidden" name="form_subject" value="Message from yourwebsiteaddress.com"> <!-- Change value to your own message subject --> <!-- End Hidden Required Fields -->
More information about uniMail: https://github.com/agragregra/uniMail
Font Awesome - gives you scalable vector icons that can instantly be customized size, color, drop shadow, and anything that can be done with the power of CSS.
<i class="fas fa-search"></i> <i class="far fa-user"></i> <i class="fal fa-folder-open"></i> ...
More information about Font Awesome: https://fontawesome.com/
Ultra crisp line icons with Integrity.
<span class="lnr lnr-home"></span> <span class="lnr lnr-heart"></span> <span class="lnr lnr-rocket"></span> ...
More information about Linearicons: https://linearicons.com/
Google Fonts:
Please take a look in the <head> part of the website and you will find this tag:
<!-- Google fonts (https://www.google.com/fonts) --> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet"> <!-- Global font -->
To change the font, first go to http://www.google.com/webfonts choose a font/fonts and use the generated code.
The best way to uptate the template is to use some file comparison software to compare the differences between the old and new template versions
(I recommend “WinMerge”: ). Then make the necessary changes. I know this may be time consuming, but unfortunately there is no easier solution.
The good practice is that you do not edit directly to the template core CSS files. Instead, create a new CSS file (for example: "custom.css") and place it in the folder assets/css/, then make your changes there.
Do not forget to add: <link rel="stylesheet" type='text/css' href="assets/css/custom.css"> to <head> part of your HTML file. Make sure it is located below "Template master CSS" section, otherwise it will not work.
<head> part of your HTML file find:
<!-- Theme master CSS --> <link rel="stylesheet" type='text/css' href="assets/css/helper.css"> <link rel="stylesheet" type='text/css' href="assets/css/theme.css">Below it add:
<!-- Theme custom CSS --> <link rel="stylesheet" type='text/css' href="assets/css/custom.css">
Now file custom.css overwrites the master CSS files and next time if you update the template then your CSS changes will not be lost.
Customization services - I am available for freelance hire. If you want some customizations to your template then please do not hesitate to contact me, we can discuss it.
*Note that this service will charge you extra!
If you need help with this template, please send me an email by using the contact form on my ThemeForest profile page.