Esham

HTML5 Personal Portfolio Template

Created: 1/05/2018
By: validtheme
Website: http://validtheme.com
Email: support@validtheme.com

Thank you for purchasing our template. We hope that you find all your questions regarding this Template answered in this Documentation as much in details as possible. However, if you still need support, do not hesitate to contact us at our support forum for this Template. If you have any questions that are beyond the scope of this help file, please feel free to email me. Thanks so much!

Intro

Note: This is not a WordPress theme, and it wont install like a WordPress theme, this is a HTML5 template (static website).

Esham is HTML5 Personal Portfolio template, witch is 100% responsive and its build with Bootstrap 3. It has clean, minimalistic and modular design, also is well comentent with clean code.

To edit this template with your info you will need a code editor, i use Sublime Text (http://www.sublimetext.com/3) and a browser i recommend to use Google Chrome.

There is multiple home page layouts to chose from (multi page and one page), also various selection of pages that you can use to create your website, but you can also create your own page layouts very easily (just copy and paste code form the elements examples).

When you start editing the template with your info is good idea to create separate folder, copy the assets folder there, rename one of the index... files to index.html and then move and edit pages that you will use. Also is good practice to create separate styleseet for your edits and load it bellow Esham CSS.

Instalation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website root directory:
- HTML/css - Stylesheet files
- HTML/fonts – Icon font files
- HTML/images - Image files
- HTML/js - Javacript files
You should upload all or specific HTML files as per your need.
You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

What's included

Checkout the files that you'll see upon downloading

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

assets
- css
  - animate.cssAnimation Item CSS
  - bootsnav.cssNabar CSS
  - bootstrap.min.cssBootstrap Min CSS
  - font-awesome.min.cssFontAwesome Icon CSS
  - magnific-popup.cssPopup Window CSS
  - owl.carousel.min.cssOwl Carousel Min CSS
  - owl.theme.default.min.cssOwl Theme Default CSS
  - responsive.cssMain Responsive Media CSS
  - plugins.min.cssMinified version of all required CSS files
- fonts
- imgHere is a place to put your media files like logo, images, videos, etc.
- js
  - bootsnav.jsNavbar JS
  - bootstrap.min.jsBootstrap Min JS
  - count-to.jsFun Factor Counter JS
  - equal-height.min.jsSection Height Equalization JS
  - isotope.pkgd.min.jsMixitup Isotop JS
  - jaliswall.jsItem Masonary JS
  - jquery.appear.jsAppear JS
  - jquery.easing.min.jsEading JS
  - jquery.magnific-popup.min.jsPopup Window Helper JS
  - jquery-1.12.4.min.jsJquery Main JS
  - modernizr.custom.13711.jsModernizr JS
  - owl.carousel.min.jsOwl Carousel JS
  - particles.min.jsParticle Background JS
  - typed.jsTyped Effect Tedt JS
  - wow.min.jsAnimation WOW JS
  - YTPlayer.min.jsVideo Background Mian JS
  - plugins.min.jsMinified version of all required Javascript files
  - custom.jsTemplate Mian JS
index.html
index-2.html
...
style.css

HTML Structure

Check the structure of HTML files

Esham follows a simple and easy to customize coding structure. Here is the sample for your reference:


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Esham HTML5 Personal Portfolio Template</title>

    <!-- ========== Start Stylesheet ========== -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
  </head>
  

  <body>

    <!-- Start Navigation -->
    <nav class="navbar navbar-default navbar-fixed white no-background bootsnav">

    </nav>
    <!-- End Navigation-->


    <!-- Start Main
    ============================================= --->
    <main>

    </main>
    <!-- END Main Content -->


    <!-- Star Footer
    ============================================= -->
    <footer>

    </footer>
    <!-- End Footer -->


    <!-- jQuery Frameworks
    ============================================= -->
    <script src="assets/js/jquery-1.12.4.min.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>

Change Options

The rules for changing your current file

1. Typed Text

Cut the code below from assets/js/custom.js


/* ==================================================
    07. Typed Text Init Init
===============================================*/
$(".element").typed({
    strings: ["Professional Web Developer", "WordPress Expert", "Laravel Expert"],
    typeSpeed: 10,
    loop: true,
    backDelay: 2000
});

Paste inside your .html file (before body end).


<script>
    /* ==================================================
        07. Typed Text Init Init
    ===============================================*/
    $(".element").typed({
        strings: ["Professional Web Developer", "WordPress Expert", "Laravel Expert"],
        typeSpeed: 10,
        loop: true,
        backDelay: 2000
    });
</script>
</body>
</html>

Thumb

2. Video Background

Changing fonts

Esham uses 2 fonts: Open Sans & Roboto from the Google Fonts Library. You can change the fonts by following code

 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');