All code are commented, so you can easily edit the code what you want. Header slider image and title rotator can be change from below code:
Navigation Bar script:
<!-- Navbar --> <div class="navbar navbar-transparent navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img class="logo" src="images/logo.png" alt=""></a> </div> <nav id="my-nav" class="navbar-collapse collapse" role="navigation"> <ul class="nav navbar-nav"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#services">Services</a> </li> <li> <a href="#process">Process</a> </li> <li> <a href="#team">Team</a> </li> <li> <a href="#portfolio">Portfolio</a> </li> <li> <a href="#pricing">Pricing</a> </li> <li> <a href="#blog">Blog</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </nav> <!--/.navbar-collapse --> </div> </div> <!-- End Navbar -->
About Section:
<!-- About Section --> <section id="about" class="section-content killPadding bg1"> <div class="container"> <div class="row"> <!-- Section Title --> <div class="section-title item_bottom text-center"> <div> <span class="fa fa-bank fa-2x"></span> </div> <h1>About <span>Identity</span></h1> </div> <!-- End Section Title --> </div> <div class="row"> <div class="col-md-4 feature-content text-center item_bottom"> <div class="icon-box"> <i class="fa fa-lightbulb-o fa-5x"></i> </div> <h4>We're Creative</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, nihil, libero, tenetur perspiciatis eos provident laborum eum dignissimos est consectetur cupiditate tempore culpa adipisci nostrum incidunt obcaecati voluptatem architecto fuga. </div> <!-- some text about yourself --> <div class="col-md-4 feature-content text-center item_top"> <div class="icon-box"> <i class="fa fa-flash fa-5x"></i> </div> <h4>We're Passionate</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, tenetur, culpa necessitatibus quibusdam quia assumenda fugiat eos dolores repudiandae voluptatem libero minus numquam cupiditate inventore excepturi. Temporibus accusantium fugiat optio! </div> <!-- ./some text about yourself --> <div class="col-md-4 feature-content text-center item_bottom"> <div class="icon-box"> <i class="fa fa-heart fa-5x"></i> </div> <h4>We're proffessional</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, eos ipsa quia laboriosam voluptatibus sit labore. Rerum, in temporibus. Dolor, ducimus, voluptas quidem ea laudantium doloribus quisquam doloremque fuga accusamus. </div> </div> <div class="row"> <div class="col-md-12 new-line text-center"> <div class="slider-container item_bottom"> <div class="swiper-about"> <div class="swiper-wrapper"> <!--First Slide--> <div class="swiper-slide"> <img src="images/about/slide1.jpg" class="img-responsive" alt="slide1"/> </div> <!--Second Slide--> <div class="swiper-slide"> <img src="images/about/slide2.jpg" class="img-responsive" alt="slide2"/> </div> <!--Third Slide--> <div class="swiper-slide"> <img src="images/about/slide3.jpg" class="img-responsive" alt="slide3"/> </div> </div> <!--/ .swiper-wrapper --> <div class="pagination-about"> </div> <!--/ swiper slider pagination --> </div> <!--/ .swiper-about --> </div> <!--/ .slider-container --> </div> </div> </div> </section> <!-- End About Section -->
In this theme there have 2 types of skill style. Circular chart and bar/line chart. You can easily change it from HTML area on index file. For circular chart:
<div class="chart" data-percent="91"> <span class="percent">91</span> <h4>Photoshop</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div>
You have to change 'data-percent' value. Change the title and description from below.
For bar/line chart:
<div class="skillBg"> <span data-width="80"><strong>English 80%</strong></span> </div>
Just need to change the 'data-width' value to show this chart.
You can set portfolio categories filter from below code. Here 'data-cat' attribute is the filter option.
<!--portfolio category--> <ul class="portfolio-filter-list white"> <li> <a class="active" href="#" data-cat="*">ALL</a> </li> <li> <a href="#" data-cat="design">Design</a> </li> <li> <a href="#" data-cat="photo">Photography</a> </li> <li> <a href="#" data-cat="video">Video</a> </li> <li> <a href="#" data-cat="web">Web</a> </li> <li> <a href="#" data-cat="mobile">Mobile</a> </li> </ul> <!--End portfolio category-->
You can add portfolio items by below code. Here i set class="design photo"; that means, for 'design' filter option and 'photo' filter option will visible this image. You can add more class with space, if you want this image will show for other categories.
In this theme, there have 4 predifend portfolio detail page. Single image, slider image, video and single image 2. All files are in 'projects' folder. Here you can insert link by href="#!projects/project-single-2.html" or href="#!projects/project-single.html". Which page you want, you can linkup. But that page should be in 'projects' folder.
<article class="design photo"> <a href="#!projects/project-single-2.html"> <img src="images/portfolio/thumb1.jpg" alt="image"/> <div class="overlay"> <div class="item-info"> <i class="fa fa-camera"></i> <h3>Project with single image</h3> <span>Design / Photo</span> </div> </div> <!-- End .overlay --> </a> </article>
For popup image, you have to use class='cb-img' and href=''.
<article class="video photo web design">
<!-- Popup Image -->
<a class="cb-img" href="images/portfolio/thumb8.jpg">
<img src="images/portfolio/thumb8.jpg" alt="image"/>
<div class="overlay">
<div class="item-info">
<i class="fa fa-camera"></i>
<h3>Project with single image</h3>
<span>Video / Photo / Web</span>
</div>
</div>
<!-- End .overlay -->
</a>
</article>
For popup youtube video, you have to use class='cb-youtube' and href='
<article class="video photo web design">
<!-- Popup Image -->
<a class="cb-youtube" href="http://www.youtube.com/v/fyCewvGXsdA">
<img src="images/portfolio/thumb8.jpg" alt="image"/>
<div class="overlay">
<div class="item-info">
<i class="fa fa-camera"></i>
<h3>Project with single image</h3>
<span>Video / Photo / Web</span>
</div>
</div>
<!-- End .overlay -->
</a>
</article>
For popup vimeo video, you have to use class='cb-vimeo' and href='
<article class="video photo web design">
<!-- Popup Image -->
<a class="cb-vimeo" href="http://player.vimeo.com/video/18312392">
<img src="images/portfolio/thumb8.jpg" alt="image"/>
<div class="overlay">
<div class="item-info">
<i class="fa fa-camera"></i>
<h3>Project with single image</h3>
<span>Video / Photo / Web</span>
</div>
</div>
<!-- End .overlay -->
</a>
</article>
Open sendemail.php. On 5th line, you get "$to = 'saif.shajib@gmail.com'; // Change it by your email address". Just replace saif.shajib@gmail.com id to your email ID. If you want to change the subject of mail, the you can get it on HTML area on form section. Code are find below:
<form method="post" name="contactform" id="contactform" class="form validate item_bottom" role="form"> <div class="form-group"> <input type="text" name="name" id="name" class="form-control required" placeholder="Name"> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control required email" placeholder="Email"> </div> <div class="form-group"> <textarea name="message" id="message" class="form-control input-lg required" rows="9" placeholder="Enter Message"></textarea> </div> <div class="form-group text-center"> <input type="submit" id="contactForm_submit" class="btn btn-trans btn-border btn-full" value="Submit"> </div> <input type="hidden" name="subject" value="Contact from your site"> </form>
Open js/gmap-settings.js file. Then set your longitude and latitude value. You can get your longitude and latitude value from http://universimmedia.pagesperso-orange.fr/geo/loc.htm.
Also you have to chnge the 'contentString' from below code. Get this code on line 30.
var contentString = '<div style="max-width: 300px" id="content">'+
'<div id="bodyContent">'+
'<h4>Jonathan Doe</h4>' +
'<p style="font-size: 12px">12, Segun Bagicha, 10th floor, Dhaka, Bangladesh. Lorem ipsum dolor sit amet incididunt ut labore et dolore psum dolor magna aliqua.</p>'+
'</div>'+
'</div>';
There are several Javascript files included. The full list is below:
<!-- Js Library --> <script type="text/javascript" src="js/modernizr.js"></script> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.sticky.js"></script> <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="js/jquery.appear.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.js"></script> <script type="text/javascript" src="js/jquery.flexslider.min.js"></script> <script type="text/javascript" src="js/jquery.fitvids.js"></script> <script type="text/javascript" src="js/jquery.superslides.js"></script> <script type="text/javascript" src="js/swiper.min.js"></script> <script type="text/javascript" src="js/waypoints.min.js"></script> <script type="text/javascript" src="js/jquery-countTo.js"></script> <script type="text/javascript" src="js/easyPieChart.js"></script> <script type="text/javascript" src="js/smoothscroll.js"></script> <script type="text/javascript" src="js/jquery.isotope.min.js"></script> <script type="text/javascript" src="js/jquery.nicescroll.min.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/gmap-settings.js"></script> <script type="text/javascript" src="js/script.js"></script> <!-- Js Library -->
Modernizr - Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.
jQuery - jQuery is a Javascript library that greatly reduces the amount of code that you must write.
<!-- List of Stylesheet --> <link type='text/css' href="css/normalize.css" rel="stylesheet"> <link type='text/css' href="css/bootstrap.min.css" rel="stylesheet"> <link type='text/css' href="css/font-awesome.min.css" rel="stylesheet"> <link type='text/css' href="css/style.css" rel="stylesheet"> <link type='text/css' href="css/style-responsive.css" rel="stylesheet">
Main stylesheet of Bootstrap 3
Font awesome core css file.
This file contains the all style of this page.
This file contains style for different resolution
NiceScroll