Sariel Guide manual

Only on Template Monster

By: JACodes

Introduction

What you'll need

Your code editor, ZIP unpacker

Getting Started

Extract / Unpack the template
You'll see demo, manual, psd, template folder, and readme.md file
Demo folder : What was used in the live preview of the template.
Manual folder : An offline manual aside from this one.
PSD folder : A photoshop file with og card template.
Template folder : A clean template with only few elements for you to get started.
Readme file : Other relevant info, Licensing etc..

Editing Sariel

Once done in Getting started.
Open template folder in your chosen code editor and go to index.html file.
View your changes by opening index.html located at template folder in your browser.

Note :
• Icons used is bootstrap icon.
• otherpage.html is if you want to separate sections into sub pages.
• Texts highlighted in yellow in this manual can be clicked in order to highlight the code.
• Icon like this can also be clicked to show screen shot of the element.

Before you start editing disable the loading first by commenting the code, code should look like the code reference above located at line 59 on the index.html file. So you won't see it everytime you refresh.

Customizing Hero banner.

Definition - The hero banner area is the area of the page between the navigation and the start of your content. The hero banner is often an image.

Changing slideshow timer (Click me to highlight) If you have multiple hero-page add data-slideShowIntervalBySeconds. This is the delay timer by seconds of when the next hero page will be shown. Can be removed if there's only one hero-page.

Adding new banner slide item Duplicate codeblock with class hero-page, hero-page-active is the starting point of the slider, only one hero-page-active must be present in among all your hero-page.

Adding video to main hero banner. Just replace the img tag inside the hero-page div with video tag along with the location of your video code reference above.

A secondary hero banner for subpages. As is, no slider option. can be replaced with video. code reference above

[@j-label-@j]index.html - Line: 142[@j]
    
    <section id="portfolio" class="section">
        <h2 class="section-title anim-fadeUp">Our Works</h2>
        <h5 class="italic text-center section-descr mb-50 anim-fadeUp">
            [SECTION DESCRIPTION]
        </h5>
        <div class="row">
            <button class="btn-1 no-border mt-5 mb-5 ml-10 mr-10 portfolio-btn anim-fadeUp" data-projtype="all">Filter All</button>
            [@j-hlight1|+|hl1-@j]<button class="btn-1 no-border mt-5 mb-5 ml-10 mr-10 portfolio-btn anim-fadeUp" [@j-hlight1|+|hl3-@j]data-projtype="one"[@j]>Filter 1</button>[@j]
        </div>
        <div class="row row-portfolio">
            [@j-hlight1|+|hl2-@j]<div class="col-desktop-3 col-tablet-2 col-mobile-1 portfolio-card [@j-hlight1|+|hl3-@j]one[@j] portfolio-card-active anim-fadeScaleUp" data-animDelay="1">
                <img src="art/work1.jpg" alt="THE IMAGE ON GRID">
                <h4 class="portfolio-title">[PORTFOLIO HOVER TITLE]</h4>
                [@j-hlight1|+|hl4-@j]<div class="info-to-popup">
                    <img src="art/work1.jpg" alt="THE IMAGE ON POPUP DETAIL">
                    <div class="portfolio-info">
                        <div class="row row-align-center">
                            <div class="col-desktop-2 col-tablet-mobile-1">
                                <h3 class="mt-5 mb-30">Portfolio Title</h3>
                                <h4>Description</h4>
                                <p>
                                    [PROJECT DESCRIPTION]
                                </p>
                            </div>
                            <div class="col-desktop-2 col-tablet-mobile-1">
                                <h4>Client</h4><p>[CLIENT NAME]</p>
                                <h4>Category</h4><p>[CATEGORY]</p>
                                <h4>Date</h4><p>[DATE]</p>
                                <h4>Project Link</h4><a href="#">[PROJECT LINK]</a>
                            </div>
                        </div>
                    </div>
                </div>[@j]
            </div>[@j]
            <div class="col-desktop-3 col-tablet-2 col-mobile-1 portfolio-card two portfolio-card-active anim-fadeScaleUp" data-animDelay="2">
                <img src="art/work2.jpg" alt="THE IMAGE ON GRID">
                <h4 class="portfolio-title">[PORTFOLIO HOVER TITLE]</h4>
                [@j-hlight1|+|hl4-@j]<div class="info-to-popup">
                    <video src="art/video.mp4" controls></video>
                    <div class="portfolio-info">
                        <h4>Details of this project</h4>
                    </div>
                </div>[@j]
            </div>
        </div>
    </section>

Adding portfolio items

A grid of with photos in Sariel located in Portfolio section that can be filtered and clicked to display full detail about a project.

Adding new portfolio items Your portfolio items is the div with class portfolio-card, duplicate that code block to create new ones and be that portfolio-card-active is also present if you have filter all button.

Adding new filter button. Duplicate the button element with portfolio-btn class in it add in a name and add value on data-projtype.

Binding portfolio card filter. To align the filter button with the portfolio-card make sure that whatever is on the portfolio-btn data-projtype value is also present as class in portfolio-card

Customizing portfolio card popup detail. Every portfolio-card has a div with class info-to-popup in it, the code within this div will be passed to portfolio-popup-container when clicked. Simply put you can input any html code inside info-to-popup and that will be the detail of the portfolio-card when clicked.

Notes: If you ever decided to separate portfolio section to another page be sure you have the code referenced above; within that page as this will be the container of the portfolio details.

[@j-label-@j]demo > index.html - Line: 135[@j]
    <div class="row">
        <div class="col-desktop-4 col-tablet-2 col-mobile-1 text-center [@j-hlight1|+|hl1-@j]anim-fadeUp[@j]" [@j-hlight1|+|hl2-@j]data-animDelay="1"[@j]>
            <i class="bi bi-brush h2-size"></i>
            <h5>Easy to use</h5>
            <p>
                Let the love of the moon kiss you good night,
                let the morning sun wake you up with loving light.
            </p>
        </div>
        <div class="col-desktop-4 col-tablet-2 col-mobile-1 text-center [@j-hlight1|+|hl1-@j]anim-fadeUp[@j]" [@j-hlight1|+|hl2-@j]data-animDelay="2"[@j]>
            <i class="bi bi-lightning-charge h2-size"></i>
            <h5>Light and Fast</h5>
            <p>
                Let the love of the moon kiss you good night,
                let the morning sun wake you up with loving light.
            </p>
        </div>
        <div class="col-desktop-4 col-tablet-2 col-mobile-1 text-center [@j-hlight1|+|hl1-@j]anim-fadeUp[@j]" [@j-hlight1|+|hl2-@j]data-animDelay="3"[@j]>
            <i class="bi bi-phone h2-size"></i>
            <h5>Responsive</h5>
            <p>
                Let the love of the moon kiss you good night,
                let the morning sun wake you up with loving light.
            </p>
        </div>
        <div class="col-desktop-4 col-tablet-2 col-mobile-1 text-center [@j-hlight1|+|hl1-@j]anim-fadeUp[@j]" [@j-hlight1|+|hl2-@j]data-animDelay="4"[@j]>
            <i class="bi bi-code-slash h2-size"></i>
            <h5>From Scratch</h5>
            <p>
                Let the love of the moon kiss you good night,
                let the morning sun wake you up with loving light.
            </p>
        </div>
    </div>

Animating contents

Animation trigger when content is visible to the user. The example can be seen above

Adding animation to element. To add animation to the element just add a class named anim-[The animation name]. Animation class reference:
anim-fadeUp
anim-fadeLeft
anim-fadeRight
anim-fadeScaleUp
anim-bounce-fadeUp
anim-bounce-fadeLeft
anim-bounce-fadeRight
anim-bounce-fadeScaleUp
Only use one in element's classlist.

Animation delay in msec. The data-animDelay is a delay in millisecond of when the element will animate once viewed by the user. Useful for evenly aligned elements. Disabled on mobile. Can be removed if you don't want any delay.

[@j-label-@j]index.html - Line: 298[@j]
    
    <section class="section" id="testimonials">
        <h2 class="section-title anim-fadeUp">Testimonials</h2>
        <h5 class="text-center section-descr mb-50 italic anim-fadeUp">
            [SECTION DESCRIPTION]
        </h5>
        <div class="testimonials-container">
            <button id="btn-testimony-back"></button>
            <button id="btn-testimony-forward"></button>
            [@j-hlight1|+|hl1-@j]<div class="testimony testimony-active">
                <i class="bi bi-quote h1-size"></i>
                <h5 class="mb-5">
                    This template is not only simple and clean but also lightweight and pure.
                    You'll find it to be an excellent choice, and it comes at a very affordable price.
                </h5>
                <br>
                <h5>Johnny C.</h5>
                <p class="text-uppercase half-opacity">the author</p>
            </div>[@j]
        </div>
    </section>

Adding testimonies

Adding testimonies to testimony section. To add new testimonies just duplicate codeblock div element with class testimony located inside the testimonials-container and remove the testimony-active class to your new testimony block. testimony-active must be placed at the first testimony block.
Note: btn-testimony-back and forward can be removed if you don't want user to toggle the testimony back and forth.

Drop down

Adding drop down button. Duplicate code block div with class drop-down, drop-down-title is a required as well as drop-down-content. drop-down-content is where you gonna be putting your data that when clicked will be revealed.

Changing Themes

Once you generated an array of hex code using the colorpickers in the index.html located at demo folder or the live Sariel site, go to the js folder of the website you are working on in this case you should be in template folder. Open script.js and you'll see the code above.
the theme1 variable is the light mode colors while theme2 would be the darkmode. Just paste the array of hex code you have generated, in any of the variable and you have your own color scheme.

Embedding map

Goto google map -> find your location -> click share -> click Embed a map -> click Copy HTML
now replace the iframe in the contact section. Code reference above.

Margins

mt- = margin-top \ mb- = margin-bottom \ mr- margin-right \ ml- = margin-left
the numbers after are by pixel incrementing by 5 to 50. Code reference above.

Columns

col-desktop-1 = 100% width or 1 column \ col-desktop-2 = 50% width or 2 column. Code reference above.

[@j-label-@j]index.html - Line: 34[@j]
    
    <nav>
        <div class="logo"><h3 class="mt-5 mb-5">Sariel</h3></div>
        [@j-hlight1|+|hl2-@j]<button class="mobile-menu no-border">
            <i class="bi bi-list mobile-menu-ico1"></i>
            <i class="bi bi-x-lg mobile-menu-ico2"></i>
        </button>[@j]
        [@j-hlight1|+|hl1-@j]<div class="navigations">
            <a href="#" class="nav-links">Home</a>
            <a href="#service" class="nav-links">Service</a>
            <a href="#about" class="nav-links">About</a>
            <a href="#portfolio" class="nav-links">Portfolio</a>
            <a href="#team" class="nav-links">Team</a>
            <a href="#pricing" class="nav-links">Pricing</a>
            <a href="#faqs" class="nav-links">Faqs</a>
            <a href="#testimonials" class="nav-links">Testimonial</a>
            <a href="#contact" class="nav-links">Contact</a>
        </div>[@j]
        [@j-hlight1|+|hl3-@j]<button class="btn-2 btn-themer">
            <i class="h4-size bi bi-brightness-high-fill theme-icon"></i>
            <i class="h5-size bi bi-moon-fill theme-icon"></i>
        </button>[@j]
    </nav>

Customizing links on nav bar

You can customize the links located on div with class navigations each a tag is a link.
That button with class mobile-menu is a button that would show when Sariel is viewed from mobile or tablet. you can leave it as is.
That button with class btn-themer is the button to change the theme of Sariel e.g darkmode and lightmode, if you don't want darkmode lightmode you can safely remove it.

Adding service cards

Duplicate code block click me and fill in the data such as [SERVICE NAME] or [SERVICE DESCRIPTION].

[@j-label-@j]index.html - Line: 255[@j]
    
    <section class="section" id="pricing">
        <h2 class="section-title anim-fadeUp">Pricing</h2>
        <h5 class="text-center section-descr mb-50 italic anim-fadeUp">
            [SECTION DESCRIPTION]
        </h5>
        <div class="row text-uppercase row-padded-lr">
            [@j-hlight1|+|hl1-@j]<div class="col-desktop-3 col-tablet-2 col-mobile-1 order-tablet-3 order-mobile-0 anim-fadeUp">
                <div class="pricing-card">
                    <h4>Regular</h4>
                    <small class="italic mb-15">recommended</small>
                    <hr>
                    <span>$<span class="h3-size">70</span>A Day</span>
                    <br><br>
                    <p>[FEATURE]</p>
                    <p>[FEATURE]</p>
                    <p>[FEATURE]</p>
                    <p>[FEATURE]</p>
                    <p>[FEATURE]</p>
                    [@j-hlight1|+|hl2-@j]<p class="unavailable">[DISABLED FEATURE]</p>[@j]
                    [@j-hlight1|+|hl2-@j]<p class="unavailable">[DISABLED FEATURE]</p>[@j]
                    <br>
                    <button class="btn-1">Start Now</button>
                </div>
            </div>[@j]
        </div>
    </section>

Adding pricing cards

Duplicate code block click me and fill in the data such as [FEATURES].
unavailable feature are the one with linethrough design and half opacity.

About smtp

The Simple Mail Transfer Protocol is an Internet standard communication protocol for electronic mail transmission. There's a lot of way to implement email marketing in your website. Heres some resources.
• smtpjs
• PHP Mailer
• Mailchimp
• SendinBlue
• Mailjet etc..

Notes: on some links

You'll notice some link has class trigger-load in them what this basically does is when you click on them it will show the loading effect. So whenever you have link that you are sure to open another website or part of your website like subpages; you can use this for smooth loading transition. Code reference above.

Useful Resources

https://autoprefixer.github.io/ - For css vendor prefixing

https://validator.w3.org/ - Markup Validator

https://icons.getbootstrap.com/ - Bootstrap Icon reference

https://babeljs.io/ - For js ES6 to ECMAScript 5 conversion

https://jshint.com/ - JS checker

https://obfuscator.io/ - If for some reason