Getting Started
Components
- Home
- About
- Services
- Portfolio
- Client
- News
- Instagram Feed
- Contact
- Footer
- Terms | Disclaimer
Source & Credits
Support
More Template
Changelog

Documentation

Smary - Personal Portfolio HTML Template

Thank you so much for purchasing our item from TemplateMonster.

Version: 1.0.0
Author: Mountain Theme

Created: 1 March, 2024
Update: 1 March, 2024

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Template Features

Introducing the Smary - Personal Portfolio HTML Template, a sleek and professional solution designed to showcase your talents, skills, and projects in a captivating manner. Crafted with modern design trends in mind, this template offers a perfect balance of aesthetics.

Whether you're a freelancer, designer, developer, photographer, or creative professional, this template provides the perfect platform to highlight your work and attract potential clients or employers. With its clean and modern layout, your projects will take center stage, allowing visitors to easily navigate through your portfolio and explore your expertise.

The template's responsive design ensures that it adapts gracefully to various screen sizes and devices, enhancing accessibility and engagement for a diverse audience. Additionally, interactive elements such as service modal, portfolio modal, testimonials sliders, blog section, Instagram feed section, and smooth parallax animations may be incorporated to captivate visitors and showcase creative work effectively. The template has extensive online documentation that will be updated regularly and will help you customize the template.

It typically comprises a collection of well-structured HTML, CSS, and JavaScript files that collectively form a visually appealing and user-friendly website. This template uses the very popular Bootstrap 5 framework. The code is nicely formatted and commented, so it is developer-friendly and can be easily customized.

Clean and unique design
One Page Style
Based on Bootstrap 5
10 Color Schemes
Clean HTML5 and CSS3 code
No Console Error
Fully Responsive to all devices
Easy to Customize
All Modern Browsers Compatibility
Sticky Navigation
Side Navigation

Preloader
Instagram feed
Working Contact Form with Ajax
Google Fonts Used
Owl Carousel
Font Awesome Icon (Pro)
RTL Support
W3c Valid 100% Code
Free Updates
Extensive Documentation (Online Doc)
And much more…

Requirements

You will need the following software to customize this template.

Code Editing Software

Web Browser for testing

File Orginaze

When you purchase our Template from TemplateMonster, you need to download the Template files from your Template Monster account. Navigate to your downloads tab on Template Monster and find Template. Click the download button to see the two options.

All files and documentation (full zip folder). You will need to extract.

Customizaton

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the assets/css/custom.css File and link it in the Document <head> after the assets/css/style.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

<head>
    <!-- Fav Icon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">

    <!-- Template Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="assets/css/bootstrap.rtl.min.css"> -->
    <!-- Fontawesome -->
    <link rel="stylesheet" href="assets/css/all.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
    <!-- ProgressBar -->
    <link rel="stylesheet" href="assets/css/progressBar.min.css">
    <!-- Smary Theme CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/custom.css">

    <!-- CSS Skin File -->
    <link id="color-switcher" rel="stylesheet" href="assets/css/skins/blue.css">
</head>

Logo Setting

The Logo Container can be found in the Header Container - <header>

Change the logo open the HTML file, and go to the <header> tag. Find out logo class <a> tag and then change your logo.

<!-- Logo -->
<div class="col-auto col-lg-2">
    <a class="navbar-brand" href="index.html" title="Smary"><span>S</span>mary.</a>
</div>
<!-- Logo End -->

Put the first keyword of your logo in the span tag.

Site Title

To change the title of the site, go to the 7 number line of the index.html file and then change the site title.

<title>Smary - Personal Portfolio Template</title>

Changing Fonts

Smary template use fonts: Poppins from the Google Fonts Library. You can change the fonts from page head in HTML files (as following code). To change the web fonts of the site, go to the 15 number line of the index.html file and then change the web fonts.

From the template options go to index.html

<!-- Template Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

Icons

Font Awesome icon sets are used in this Smary template.

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-solid fa-wand-magic-sparkles"></i>
<i class="fa-solid fa-phone"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-solid fa-download"></i>

Please go to their official documentation pages for a full list of icons: Font Awesome

Color Schemes

You can change your Website's Color Scheme in an instant. We have build 10 Color css file for change template primary color.

aqua.css - Aqua Color
baraRed.css - Bara Red Color
blue.css - Blue Color
brown.css - Brown Color
green.css - Green Color
lightGray.css - Light Gray Coor
mediumSlateBlue.css - Medium Slate Blue Color
orange.css - Orange Color
pink.css - Pink Color
yellow.css - Yellow Color

Simply link color css file in the index.html file.

To change the primary color of the template, go to line 34 of the index.html file and then change the link to the css color file to change the color.

Light or Dark Theme

You can change the light or dark theme from the index.html file, by changing the class of the body tag.

Just go to the index.html file line number 37, where the body tag is started.

class="light" will set light theme and remove the class will set dark theme.

Light Theme

Dark Theme

Setting up RTL

We have included all the Tools to make your Website completely RTL ready. Simply follow the steps below:

Step 1

Add the dir="rtl" to the element at index.html file.

Add an appropriate lang attribute, like lang="ar", on the <html> element.

 <html dir="rtl" lang="ar">

Step 2

From index.html, you’ll need to apply an RTL version of Bootstrap CSS instead of default bootstrap css.

For that :

comment out <link rel="stylesheet" href="assets/css/bootstrap.min.css">

and uncomment <link rel="stylesheet" href="assets/css/bootstrap.rtl.min.css">

Components Info

Documentation for all components.

Home

You can change and edit your typing Animation texts by editing strings array in script.js file.

Image Background (Hero Section)

first of all, go to the template folder like home_main, go to the assets folder then the images folder, and paste your image or replace 101.png with your image.

Change Background Image - 1) go to style.css file 2) find out .hero-area CSS class 3) and change CSS property background URL()

URL (../images/101.png)

/*** Home ***/
.hero-area {
    background-image: url(../images/101.png);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    z-index: 1;
}

Video Background (Hero Section)

About Me

You can describe your content from the About section of the file index.html.

Services

You can change your service data from service section of index.html file.

Portfolio

Setting up Portfolio Filter:

Setting up Portfolio Items:

You can change your portfolio data from portfolio section of index.html file.

Client

You can change your client data from client section of index.html file.

Here we have used owl carousel. You can change slider configurations by changing settings object.

News

You can change your news data from news section of index.html file.

Instagram Feed

We have provided an Instagram feed section, where you can show your recent and important posts on Instagram.

Here we have used owl carousel. You can change slider configurations by changing settings object.

Contact

Contact Form

To receive mail from the contact form, the recipient's address must be changed. To change the recipient address go to the php folder from the assets folder then go to the mail.php file, find line number 23 change the webmail in double quotation, and give your cPanel webmail.

// FIXME: Update this to your desired email address.
$recipient = "abrarul@mountainclimbersstar.com";

Contact Details

You can change your contact detials info by changing this detials.

Footer

You can change your copyright from footer.

<p class="mb-3 mb-lg-0 copyright">Copyright © <span id="currentYear">2024</span> <a href="#">Smary</a>. All Rights Reserved.</p>

Terms & Policy | Disclaimer

You can change your Terms & Policy | Disclaimer.

Terms & Policy

Disclaimer

Source & Credits

Fonts:

Google Fonts - https://fonts.google.com/
Icons Font-face - https://fontawesome.com/

Images:

Scripts

jQuery - https://jquery.com/
Bootstrap 5 - https://getbootstrap.com/
Pace - https://codebyzach.github.io/pace/
Waypoints - http://imakewebthings.com/waypoints/
Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/
ProgressBar - jQuery Plugin
Isotope - https://isotope.metafizzy.co/
countTo - https://github.com/mhuggins/jquery-countTo
Parallaxie - jQuery Parallax Plugin - Parallaxie
Typed.js - https://mattboldt.com/demos/typed-js/

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +6 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.

More Templates

Checkout Our Below Premium Templates

HTML Templates :

AGKN - personal Portfolio HTML Template

Signs - Coming Soon HTML Template

PowerPoint Presentations :

Portland - Business PowerPoint Presentation Template

Fayaah - Business PowerPoint Template

Opal - Business Meeting PowerPoint Presentation Templates

Buzup - PowerPoint Presentation Template

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0.0

Initial Release

Mountain Theme