Abias

Multipurpose Personal Portfolio Templete

• created: 05/27/2021
• latest update: 05/27/2021
• by: webglib
• email: support@webglib.com

Thank you

Firstly, thanks a lot for purchasing this theme, your support is truly appreciated!

This document covers the installation process and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any more questions that are beyond the scope of this document, feel free to ask them in the dedicated support section.

Template Features:

• 7 Unique Home Demos
• 24 Html Pages
• Clean & Creative Design
• Massive & Creative Portfolio layouts
• Advance Framework
• HTML5 , CSS3 & Bootstrap
• Sticky Menu
• Onepage Nav
• Multipage & Onepage
• Parallax Animation
• Particle Effect
• Fully Responsive Design
• All files are well Commented
• Crossbrowser Compatible with IE9+, Firefox, Opera, Chrome
• Working PHP Form   
• Extensive Documentation

Pages:

• index.html is for home 1 demo.
• home_2.html is for home 2 demo.
• home_3.html is for home 3 attorny demo.
• home_dentist.html is for home 4 dentist demo.
• home_dark.html is for home 5 dark demo.
• home_minimal.html is for home 6 Minimal demo.
• grid_port.html is for home 7 grid demo.
• creative.html is for creative portfolio.
• creative_2.html is for creative 2 portfolio.
• blog.html is for blog grid page.
• blog_3.html is for blog 3 column page.
• single.html is for blog single page.
• service_1.html is for service 1 page.
• service_2.html is for service 2 page.
• single-service.html is for service details page.
• portfolio_1.html is for portfolio 1 page.
• portfolio_2.html is for portfolio 2 page.
• portfolio_3.html is for portfolio 3 page.
• single-project.html is for project details page.
• about-me.html is for about me page.
• about-us.html is for about us team page.
• pricing.html is for about us pricing page.
• coming.html is for coming soon coutdown page.
• 404.html is for not found page.
• contact.html is for contact page.

Go ahead to know more.

After unzip the download pack, you'll found a Template Folder with all the files.

You can view this Template in any browser, you can display or edit the Template without an internet connection.

But the two sections that will not work is the Google map Section which embeded directly from google map and Contact form which uses PHP, so will work only online.

Now open your FTP Client (like Filezilla) or directly through cpanel, upload the content of the Template on your server root (public_html).

Once the files are done uploading go to www.yourdomain.com/index.html

Please follow the tutorial to have a simple installation & customization of the theme.

This Template has a Responsive layout based on bootstrap framework.

Our HTML Coding Structure:

Here is some basic codes of our template.

<!--=========|  Service Section |=========-->
<section class="service pt-160 pb-100" id="service">
    <div class="container">
        <div class="service-wrapper">
            <div class="section-heading">
                <h2 class="section-title">Service</h2>
                <h3 class="section-subtitle">Something About Me</h3>
            </div>
            <div class="row justify-content-center">
                <!-- Service Single -->
                <div class="col-lg-4 col-md-6">
                    <div class="service-item gr-transition">
                        <div class="service-icon">
                            <i class="icofont-layers"></i>
                        </div>
                        <h4 class="service-title">Layout Design</h4>
                        <p class="service-description">Lorem ipsum dolor sit eliti sed eiusm aliquam quaeratamrsonar banglay valobasi voluptatem.</p>
                        <a href="#" class="service-btn">Read More</a>
                    </div>
                </div>
                <!-- Service Single -->
                <div class="col-lg-4 col-md-6">
                    <div class="service-item gr-transition">
                        <div class="service-icon">
                            <i class="icofont-interface"></i>
                        </div>
                        <h4 class="service-title">UI Design</h4>
                        <p class="service-description">Lorem ipsum dolor sit eliti sed eiusm aliquam quaeratamrsonar banglay valobasi voluptatem.</p>
                        <a href="#" class="service-btn">Read More</a>
                    </div>
                </div>
                <!-- Service Single -->
                <div class="col-lg-4 col-md-6">
                    <div class="service-item gr-transition">
                        <div class="service-icon">
                            <i class="icofont-code"></i>
                        </div>
                        <h4 class="service-title">Web Design</h4>
                        <p class="service-description">Lorem ipsum dolor sit eliti sed eiusm aliquam quaeratamrsonar banglay valobasi voluptatem.</p>
                        <a href="#" class="service-btn">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--=========| / Service Section |=========-->

We import google fonts and icon fonts from the main style.css file. You can check from here.

/*---------- 1.2 Font Import ----------*/
// Google Font = Josefin Sans
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
// Font Awesome
@import url('assets/css/font-awesome.all.min.css');
// Flat icon
@import url('assets/css/flaticon.css');
// Ico Font
@import url('assets/css/icofont.min.css');

Our CSS Structure:

Here is our CSS structure you can easily find any css from the table index.

/*
      Table Index       
=========================
1. Theme Style
    1.1 Variables
    1.2 Font Import
    1.3 Common Style
2. Header
3. Home
4. Stats
5. About
6. Service
7. Portfolio
8. Work
9. Client & Skill
10. Blog
    10.1 Blog Grid
    10.2 Blog Details
11. Subscribe
12. Footer
13. Others Pages
    13.1 404 page
    13.2 Coming Soon
    13.3 Contact Page
    13.4 Home 1
    13.5 Home 3
    13.6 Home 4
    13.7 Home Dark
    13.8 Grid Home
    13.9 Creative Portfolio
    13.10 Home Minimal
    13.11 Project Details
    13.12 Service Details
14. Responsive
    14.1 Responsive Grid Home
    14.2 Responsive Creative Portfolio
*/

<!-- All Stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/normalize.min.css">    
<link rel="stylesheet" href="assets/css/animated-headline.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/meanmenu.css">
<link rel="stylesheet" href="assets/css/starAnimation.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/theme-default.css">
<link rel="stylesheet" type="text/css" href="style.css">

These are the Js files that are loaded into templates in end of the Body Section there are some loaded into head.

Here is the js files are also the same in all the demos, and the Template has loaded all the js scripts in all pages, so u can use whatever u want from the template, wherever u want.

<!-- All js file -->
<script src="assets/js/jquery-3.5.1.min.js"></script>
<!-- Bootstrap js -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- js for plugin install -->
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/animated-counter.js"></script>
<script src="assets/js/jquery.meanmenu.min.js"></script>
<script src="assets/js/parallax.min.js"></script>
<script src="assets/js/animated-headline.js"></script>
<script src="assets/js/one-page-nav.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/particles.min.js"></script>
<script src="assets/js/tilt.jquery.min.js"></script>
<script src="assets/js/jquery.pointlight.js"></script>
<script src="assets/js/main.js"></script>

main.js file is use for custom javascript and plugin activation.

This template has 7 unique home demos. To install any of them please follow these steps.

1. First take a backup
2. Rename/Delete the index.html file.
3. Choose your home demo file and rename it to index.html

Change The logo:

The easiest way to change the logo. Just go the template folder > assets > img > logo here upload your logo as the same name the template have and replace. Logo will be change from every pages.

By following the same process you can change every image of the template.

You can change your logo also from html file manually.

1. Open The html file.
2. Go to line number 47 or find the logo text on the file.
3. You can change the logo from there like the screenshot.
4. If you have white and black color logo replace this carefully with the class name.
5. If you don't have a logo you can write your company name as alternative as the logo image. Like our screenshoot.

Place your logo text like this

Change Demo Text:

1. View the template and copy the text which you want to change.
2. Open the html file with any code editor(VS Code recommended).
3. Press ctrl+f (for windows) / Command+F (for mac). You will get a Find dialog.
4. Paste the copied text into it then press arrow/enter.
5. You will find the text and you can change it.

By following this process you can easily change any text of the template.

Icons:

If you would like to change icons you can use fontawesome icon and icofont icon in your design.

Contact Form:

1. Open message.php from the assets folder with any code editor.
2. Find $mail_to = "support@webglib.com";
3. Replace the email where you want to receive the mails.

Change Copyright:

1. Open HTML File with any code editor.
2. Press ctrl+f (for windows) / Command+F (for mac). You will get a Find dialog.
3. Type copyright on the search box / go to line number 978.
4. You will get the copyright text like the screenshot and url you can change it from here.

These are the basic customization the template. If you have any trouble to setting up the template please contact us. We will be happy to assist you.

We have used the following fonts, icons, plugins & images. All fonts, icon, plugins & images used in this template are free for commercial use.

Fonts:

1. Josefin Sans from google webfont.

Icons:

1. FontAwesome
2. Icofont
3. Flaticon

Plugins:

1. isotope
2. imagesloaded
3. animated-counter
4. meanmenu
5. parallax
6. animated-headline
7. slick slider
8. particles
9. tilt
10. pointlight

Images:

1. Pixabay
2. Freepik
3. Unsplash
4. Pexels

Note: Images in live preview are not included to the template.But if you need the images like in Template, just contact us and we'll send you all the images.

Once again, thank you so much for purchasing this template.
As I said at the beginning, We'd be glad to help you if you have any questions relating to this template. We I'll do our best to assist you.

If u have question u can ask us here. Thanks

webglib