If you have any issue or question that this document does not cover, you can contact us via the Support Page.
You can view this template in any web browser from your computer, mobile device. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template.
All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.
This site template has a Responsive and Mobile-Friendly layout based on Bootstrap Boilerplate.
The main structure of this site is wrapped in a 'subpages' div. Inside of that div you will find sections of the site.
We are using one main CSS file (main.css) in this template which you are free to modify depending on the customization you require.
If you would like to edit the color, font, or style of any elements, you would do the following in css/main.css :
If you would like to edit a specific section or page 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.
There are also five additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder. The 5 style sheets are:
These files are included in the 'head' of index.html and blog-post-1.html:
This template uses several scripts. If you're a developer, you will find this particularly useful.
This template also use the PHP engine for activate the contact form. Important: For the functioning of the contact form on your hosting should be PHP.
Please replace the email address with your email address, this address will receive messages from the contact form in the /contact_form/contact_form.php file.
Images (Just on live preview, not included in download package):
Videos
For editing files I recommend you use Sublime Text 2 or similar program. Convenient following functions: syntax highlighting, find and replace function (to accelerate editing), etc.
<div class="header-content"> <div class="header-photo"> <img src="img/main_photo.jpg" alt="Alex Smith"> </div> <div class="header-titles"> <h2>Alex Smith</h2> <h4>Web Designer</h4> </div> </div>
<section data-id="resume" class="animated-section">
<div class="page-title"> <h2>Resume</h2> </div>
<section data-id="resume" class="animated-section"> <div class="page-title"> <h2>Resume</h2> </div> <div class="section-content"> <div class="row"> Our columns with content. </div> </div> </section>
In our demo 5 sections:
As you can see in the sections change attribute data-id. These values we need for the operation of the site navigation (main menu and the browser buttons "go back" and "go forward").
<section data-id="extra" class="animated-section"> <div class="page-title"> <h2>Extra</h2> </div> <div class="section-content"> <div class="row"> Our columns with content. </div> </div> </section>
<ul class="main-menu"> <li class="active"> <a href="#about-me" class="nav-anim"> <span class="menu-icon lnr lnr-home"></span> <span class="link-text">About Me</span> </a> </li> <li> <a href="#resume" class="nav-anim"> <span class="menu-icon lnr lnr-graduation-hat"></span> <span class="link-text">Resume</span> </a> </li> <li> <a href="#portfolio" class="nav-anim"> <span class="menu-icon lnr lnr-briefcase"></span> <span class="link-text">Portfolio</span> </a> </li> <li> < href="#blog" class="nav-anim"> <span class="menu-icon lnr lnr-book"></span> <span class="link-text">Blog</span> </a> </li> <li> <a href="#contact" class="nav-anim"> <span class="menu-icon lnr lnr-envelope"></span> <span class="link-text">Contact</span> </a> </li> <li> <a href="#extra" class="nav-anim"> <span class="menu-icon lnr lnr-envelope"></span> <span class="link-text">Extra</span> </a> </li> </ul>
Where you can adddata-animation="*", is the number of animation effect. More details about the animation effects you can read here.
<li> <a href="#extra" class="nav-anim"> <span class="menu-icon lnr lnr-envelope"></span> <span class="link-text">Extra</span> </a> </li>
You can select any of the 67 variants of the animation. To do this, you need to specify the attribute 'data-animations' with the appropriate amount of animation for the respective menu item. Example:
<li> <a href="#extra" class="nav-anim" data-animation="17"> <span class="menu-icon lnr lnr-envelope"></span> <span class="link-text">Extra</span> </a> </li>
List of animation options:
1: out effect: move to Left; in effect: move from Right; 2: out effect: move to Right; in effect: move from Left; 3: out effect: move to Top; in effect: move from Bottom; 4: out effect: move to Bottom; in effect: move from Top; 5: out effect: fade; in effect: move from Right on top; 6: out effect: fade; in effect: move from Left on top; 7: out effect: fade; in effect: move from Bottom on top; 8: out effect: fade; in effect: move from Top on top; 9: out effect: move to Left Fade; in effect: move from Right Fade; 10: out effect: move to Right Fade; in effect: move from Left Fade; 11: out effect: move to Top Fade; in effect: move from Bottom Fade; 12: out effect: move to Bottom Fade; in effect: move from Top Fade; 13: out effect: move to Left Easing on top; in effect: move from Right; 14: out effect: move to Right Easing on top; in effect: move from Left; 15: out effect: move to Top Easing on top; in effect: move from Bottom; 16: out effect: move to Bottom Easing on top; in effect: move from Top; 17: out effect: scale Down; in effect: move from Right on top; 18: out effect: scale Down; in effect: move from Left on top; 19: out effect: scale Down; in effect: move from Bottom on top; 20: out effect: scale Down; in effect: move from Top on top; 21: out effect: scale Down; in effect: scale Up Down delay300; 22: out effect: scale Down Up; in effect: scale Up delay300; 23: out effect: move to Left on top; in effect: scale Up; 24: out effect: move to Right on top; in effect: scale Up; 25: out effect: move to Top on top; in effect: scale Up; 26: out effect: move to Bottom on top; in effect: scale Up; 27: out effect: scale Down Center; in effect: scale Up Center delay400; 28: out effect: rotate Right Side First; in effect: move from Right delay200 on top; 29: out effect: rotate Left Side First; in effect: move from Left delay200 on top; 30: out effect: rotate Top Side First; in effect: move from Top delay200 on top; 31: out effect: rotate Bottom Side First; in effect: move from Bottom delay200 on top; 32: out effect: flip Out Right; in effect: flip In Left delay500; 33: out effect: flip Out Left; in effect: flip In Right delay500; 34: out effect: flip Out Top; in effect: flip In Bottom delay500; 35: out effect: flip Out Bottom; in effect: flip In Top delay500; 36: out effect: rotate Fall on top; in effect: scale Up; 37: out effect: rotate Out Newspaper; in effect: rotate In Newspaper delay500; 38: out effect: rotate Push Left; in effect: move from Right; 39: out effect: rotate Push Right; in effect: move from Left; 40: out effect: rotate Push Top; in effect: move from Bottom; 41: out effect: rotate Push Bottom; in effect: move from Top; 42: out effect: rotate Push Left; in effect: rotate Pull Right delay180; 43: out effect: rotate Push Right; in effect: rotate Pull Left delay180; 44: out effect: rotate Push Top; in effect: rotate Pull Bottom delay180; 45: out effect: rotate Push Bottom; in effect: rotate Pull Top delay180; 46: out effect: rotate Fold Left; in effect: move from Right Fade; 47: out effect: rotate Fold Right; in effect: move from Left Fade; 48: out effect: rotate Fold Top; in effect: move from Bottom Fade; 49: out effect: rotate Fold Bottom; in effect: move from Top Fade; 50: out effect: move to Right Fade; in effect: rotate Unfold Left; 51: out effect: move to Left Fade; in effect: rotate Unfold Right; 52: out effect: move to Bottom Fade; in effect: rotate Unfold Top; 53: out effect: move to Top Fade; in effect: rotate Unfold Bottom; 54: out effect: rotate Room Left Out on top; in effect: rotate Room Left In; 55: out effect: rotate Room Right Out on top; in effect: rotate Room Right In; 56: out effect: rotate Room Top Out on top; in effect: rotate Room Top In; 57: out effect: rotate Room Bottom Out on top; in effect: rotate Room Bottom In; 58: out effect: rotate Cube Left Out on top; in effect: rotate Cube Left In; 59: out effect: rotate Cube Right Out on top; in effect: rotate Cube Right In; 60: out effect: rotate Cube Top Out on top; in effect: rotate Cube Top In; 61: out effect: rotate Cube Bottom Out on top; in effect: rotate Cube Bottom In; 62: out effect: rotate Carousel Left Out on top; in effect: rotate Carousel Left In; 63: out effect: rotate Carousel Right Out on top; in effect: rotate CarouselRight In; 64: out effect: rotate Carousel Top Out on top; in effect: rotate Carousel Top In; 65: out effect: rotate Carousel Bottom Out on top; in effect: rotate Carousel Bottom In; 66: out effect: rotate Sides Out; in effect: rotate Sides In delay200; 67: out effect: rotate Slide Out; in effect: rotate Slide In;
To activate a random animation mode, you need to remove the attribute 'data-animation' from the menu item. Example:
<li> <a href="#resume" class="nav-anim"> <span class="menu-icon lnr lnr-graduation-hat"></span> <span class="link-text">Resume</span> </a> </li>
In this case, random animation will be applied, one of 67.
Skill block:
<!-- Skill 1 --> <div class="skill clearfix"> <h4>Web Design</h4> <div class="skill-value">95%</div> </div> <div class="skill-container skill-1"> <div class="skill-percentage"></div> </div> <!-- End of Skill 1 -->
The value for the <div class="skill-percentage skill-1"> set in the css/main.css file:
.skills-second-style .skill-container.skill-1 .skill-percentage { width: 95%; }
<div class="info-list-w-icon"> <div class="info-block-w-icon"> <div class="ci-icon"> <i class="lnr lnr-store"></i> </div> <div class="ci-text"> <h4>Ecommerce</h4> <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet ultricies ex lectus scelerisque nibh. Ut non sodales.></p> </div> </div> <div class="info-block-w-icon"> <div class="ci-icon"> <i class="lnr lnr-laptop-phone"></i> </div>><div class="ci-text"> <h4>Web Design></h4> <p>Pellentesque pellentesque, ipsum sit amet auctor accumsan, odio tortor bibendum massa, sit amet ultricies ex lectus scelerisque nibh. Ut non sodales.></p> </div> </div> </div>You can choose an icon
<i class="lnr lnr-store"></i>from the following fonts: Font Awesome Free version 5.12.1 (The complete set of 1,341 icons), Linearicons Free Font.
<div class="ci-icon"> <i class="lnr lnr-laptop-phone"></i> </div>
<div class="ci-icon"> <img src="img/service/web_design_icon.png" alt="Service"> </div>Where you need to replace the 'src' to the path to your image (icon).
The structure of the "Portfolio" subpage:
<!-- Portfolio Content --> <div class="portfolio-content"> <ul class="portfolio-filters"> <li class="active"> <a class="filter btn btn-sm btn-link" data-group="category_all">All</a> </li> <li> <a class="filter btn btn-sm btn-link" data-group="category_media">Media</a> </li> <li> <a class="filter btn btn-sm btn-link" data-group="category_mockups">Mockups</a> </li> <li> <a class="filter btn btn-sm btn-link" data-group="category_soundcloud">SoundCloud</a> </li> <li> <a class="filter btn btn-sm btn-link" data-group="category_vimeo-videos">Vimeo Videos</a> </li> <li> <a class="filter btn btn-sm btn-link" data-group="category_youtube-videos">YouTube Videos</a> </li> </ul> <!-- Portfolio Grid --> <div class="portfolio-grid three-columns"> <figure class="item lbaudio" data-groups='["category_all", "category_soundcloud"]'> <div class="portfolio-item-img"> <img src="images/portfolio/1.jpg" alt="SoundCloud Audio" title="" /> <a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/221650664&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" class="lightbox mfp-iframe" title="SoundCloud Audio"></a> </div> <i class="fa fa-volume-up"></i> <h4 class="name">SoundCloud Audio</h4> <span class="category">SoundCloud</span> </figure> ... </div> <!-- /Portfolio Grid --> </div> <!-- /Portfolio Content -->
Each item in the portfolio grid should be wrapped in the HTML tag <figure>...</figure>
You can add two types of content:
Link will have a class of "ajax-page-load" and the href attribute with a path to the HTML page (portfolio-1.html etc.):
<figure class="item standard" data-groups='["category_all", "category_media"]'> <div class="portfolio-item-img"> <img src="images/portfolio/2.jpg" alt="Media Project 2" title="" /> <a href="portfolio-1.html" class="ajax-page-load"></a> </div> <i class="far fa-file-alt"></i> <h4 class="name">Media Project 2</h4> <span class="category">Media</span> </figure>
Note : To test this Ajax loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the portfolio page (example portfolio-1.html) file using "http://" since Ajax makes HTTP requests.
Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.
<figure class="item lbimage" data-groups='["category_all", "category_mockups"]'> <div class="portfolio-item-img"> <img src="images/portfolio/5.jpg" alt="Mockup Design 1" title="" /> <a class="lightbox" title="Mockup Design 1" href="https://lmpixels.com/wp/kerge-wp/wp-content/uploads/2018/04/11.jpg"></a> </div> <i class="far fa-image"></i> <h4 class="name">Mockup Design 1</h4> <span class="category">Mockups</span> </figure>
<figure class="item lbvideo" data-groups='["category_all", "category_youtube-videos"]'> <div class="portfolio-item-img"> <img src="images/portfolio/6.jpg" alt="YouTube Video 1" title="" /> <a href="https://www.youtube.com/embed/bg0gv2YpIok" class="lightbox mfp-iframe" title="YouTube Video 1"></a> </div> <i class="fas fa-video"></i> <h4 class="name">YouTube Video 1</h4> <span class="category">YouTube Videos</span> </figure>
Link format for embedding videos:
YouTube: https://www.youtube.com/embed/id. Example: https://www.youtube.com/embed/w5tWYmIOWGk
Vimeo: https://player.vimeo.com/video/id. Example: https://player.vimeo.com/video/97102654
Note : To test video loading you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP.
By default, the template uses global Google Recaptcha V2 keys, if you want to use your keys, then you can create new keys here.
1. Replace site key in the index.html:
2. Replace Site secret key in the contact_form/contact_form.php:
//Google Maps $("#map").googleMap({ zoom: 16 // Google Map ZOOM. You can change this value }); $("#map").addMarker({ address: "S601 Townsend Street, San Francisco, California, USA", // Your Address. Change it });and replace "S601 Townsend Street, San Francisco, California, USA" with your address.
If Google Maps does not work, then you need to create a key for Google Maps and add it to the index.html file. To create the key, go here.
After you have created the key, add it to the index.html, for this:
To remove Google Maps from the page, do the following:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>and remove it.
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>-->and remove it.
<script type="text/javascript" src="js/jquery.googlemap.js"></script>and remove it.
<div id="map" class="map"></div>and remove it.
//Google Maps $("#map").googleMap({ zoom: 16 // Google Map ZOOM. You can change this value }); $("#map").addMarker({ address: "S601 Townsend Street, San Francisco, California, USA", // Your Address. Change it });and delete them.
Q: I work with the template on the local computer without using a server or local server and the following problem arose - the portfolio Media projects are not opened.
A: These portfolio projects are opened with the help of Ajax technology, for correct operation of Ajax you need to use a server or a local server, i.e. the page of the template should be opened through the protocol https:// or https://, and not throught the protocol file://. These are the rules of browsers. But there is one exception, it's the Mozilla Firefox browser.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.