Mee html template

01. How to add new section or page to site?

Please follow below steps to add new section or page like About, Skills etc….

Step 1: Open index.html file in any HTML/Text Editor and find HTML Code

 <nav id="menu1" role="navigation">

Add below exampled new Link in above menu navigation div, here newlink is new identifier for new link and it should be unique with other menu item.

  <a href="#chapternewlink">
  <span id="link_newlink">New Link (You can add any text gere)</span>
  </a>

Step 2: Copy HTML of any section like

 <article class="content skills gray-bg" id="chapterskills">.........</article>

and paste it after a section where you want to show.

Replace id=”chapterskills” to id=”chapternewlink”

Step 3: Open js/jquery.page.js file.

Go to line #69. Copy text $(‘#link_contact’).removeClass(‘active’); and paste it after it.

Replace #link_contact’ to #link_newlink’
Go to line #113. Copy text $(‘#link_contact’).removeClass(‘active’); and paste it after it.

Replace #link_contact’ to #link_newlink’

Step 4: Open css/style.css and go to line# 468, you will have this class. content- wrapper Here width is 7356px, please add 804px in 7356px and replace it with width: 7356px; Every new section width 804px will be plus here.

Step 5: You will need to set top position for div called social to adjust position from top in css/style.css file at line # 421 or class called .social

Repeat same steps for all new sections/pages.

02. How to change background images in the template?

About section background image can be changed in /css/style.css file under this css class: .about Thank you section background image can be changed in /css/style.css file under this css class: .introduction-end

03. How to change icons?

We have used Font Awesome icons in this overall template sections. So you just need to change the class in below icon HTML code. You can please check all Font Awesome icons with their class name here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

 <i class="fa fa-photo"></i>

04. How to change language progress bars percentage?

You can change first numeric value in below code in this JS file: /js/settings.js to showcase your skill percentage, which will be reflected in the progress bar visual and text also. Please note that below are 3 JS functions for 3 language progress bars, so you can change them as per the ID in your HTML.

 progressBar(99, $('#progressBar'));
 progressBar(80, $('#progressBar2'));
 progressBar(60, $('#progressBar3'));

05. How to change skills counter in Pie charts?

In the below HTML code of Pie Chart, you just need to mention your percentage value (like 35, 50, 80, 90, etc…) in data-percent parameter:

 <span class="chart" data-percent="75"><span class="percent"></span>

06. How to make slides auto rotate and manage transition speed?

You can make slides auto rotate by changing autoPlay to true and change transition speed as required in below mentioned code in this JS file: /js/settings.js:

$(".owl-carousel").owlCarousel({
            navigation: true,
            slideSpeed: 300,
            paginationSpeed: 400,
            singleItem: true,
            autoPlay: false
        });