Customization

Typed JS

To customize the subtitle change the data-options attribute and type each word or sentence separately

<span class="typed_text" data-options="Web Developer, Graphic Designer"></span>

Gradient Grid

To have the kayden gradient grid in full effect, ensure that the column fits within one row and does not wrap over to the next row. Add kayden-gradient-grid classname in the row container element. Each row must have <div class=”row”> element. See example below.

<div class="kayden-gradient-grid">
    <div class="row g-0">
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center"></div>
    </div>
    <div class="row g-0">
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center"></div>
    </div>
</div>

Kayden Underline Title

Using kayden-underline-* classes you can easily add or remove an underline in the element.

kayden-underline classes apply to all bootstrap breakpoints, from xs to xxl.

For example kayden-underline-md-left or kayden-underline-lg-right or kayden-underline-center.

• kayden-underline-{prefix}-left: Set the underline from the left.
• kayden-underline-{prefix}-right: Set the underline from the right
• kayden-underline-{prefix}-center: Set the underline in the center.
• kayden-underline-{prefix}-big: Set the margin for the underline.

Kayden Underline Animation

The Kayden underline animation allows you to create an underline hover animation for the content. For this effect you have two classes: underline_animation for the hover container and underline_text for the target element.

For example, if you want to create this effect for element b when hovering over element a:

<div class="underline_animation" id="a">
    <div class="element">
        <h2 class="underline_text" id="b">Underline Effect</h2>
    </div>
</div>

How to add Item in Portfolio Section

You can add images, embed videos (YouTube, Vimeo), and links in the portfolio section.

If you want to add images, use the portfolio-image class name:

<!--Link of item. Image type. Use portfolio-image classname-->
<a href="./assets/images/portfolio-single.jpg" class="portfolio-single portfolio-image">

If you want to show an embedded link, use the portfolio-ifram classname

<!--Copy-Paste embedded link here -->
<a href="link" class="portfolio-single portfolio-iframe">

If you want to add permalink, there is no need to add an additional classname

<!--Copy-Paste link here -->
<a href="https://themeforest.net/user/theproger" target="_blank" class="portfolio-single">

Contact Form

Open the form.php file and modify your email here.

<?php
$email_host = ''; // SMTP host ex. smtp.gmail.com for gmail mailserver
$email = ''; // Your Email Address
$email_passsword = ''; //  Password

$welcome_subject = "Thank you for getting in touch!"; //Success Message Subject

$successTemplate = 'success-message.html'; // Success Template uri here
$messageTemplate = 'message.html'; // Message Template uri here