Get Started

This documentation will help you get started with echo agency template. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

In this guide, you can see all the elements that are in the work and have been customized, and see and use the sample code and its classes.

Structure

assets All template source files like HTML / SCSS / CSS / JS that are then processed
- assets / js In this folder contains main plugin.js . In this file included all plugin and script. This file is called on all pages. All Plugin were minified
- assets / css In this folder contains main plugin.css . In this file included all plugin and CSS library. This file is called on all pages. All Plugin were minified
- assets / scss In this folder contains main style.css . In this file included all SCSS files. In this folder scss / components included all custom elements style.
package.json Includes the list of dependencies to install from npm.
documentation.html Contain all documentation files (installation, elements)

Installation

If you want to use CSS / JS files without using npm just include these two files assets / css / style.css in < head > of your demo and pages and
assets / js / script.js in end of < body > in < script >tag.
if you want use npm follow this steps:
1. install Node.js .
2. Use this command npm install -g to install all dependencies.
3. install SCSS file watcher and live compiler on your code editor(IDE).
  in vs-code Live sass compiler
  in phpstorm Sass compiler
It`s time to go.You can customise theme with your own styles.

Forms

Contact Form

In this Project we provided for you a sendEmail.php file to create contact form dynamically. You can see file in below to how it works



$data = [];
if ($_POST) {
    $name = "";
    $email = "";
    $subject = "";
    $comments = "";
    $recipient="sample@uone.com"; // Your email comes here

    if (isset($_POST['name'])) {
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    }

    if (isset($_POST['email'])) {
        $email = str_replace(array("\r", "\n", "%0a", "%0d"), '', $_POST['email']);
        $email = filter_var($email, FILTER_VALIDATE_EMAIL);
    }

    if (isset($_POST['subject'])) {
        $subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
    }

    if (isset($_POST['comments'])) {
        $comments = htmlspecialchars($_POST['comments']);
    }


    $headers = 'MIME-Version: 1.0' . "\r\n"
        . 'Content-type: text/html; charset=utf-8' . "\r\n"
        . 'From: ' . $email . "\r\n";
    if (mail($recipient, $subject, $comments, $headers)) {
        $data = array(
            'status' => 'Congratulation',
            'message' => 'Your message sent successfully.'
        );
    } else {
        $data = array(
            'status' => 'Error',
            'message' => 'Your message did not send.'
        );
    }
} else {
	$data = array(
		'status' => 'Warning',
		'message' => 'Something went wrong, Please try again.'
	);
}
echo json_encode($data);

FAQ

This guide will help you get started with Echo template. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

Contact Form

Questions

we used the latest version of libraries in our project .To find out what version of the library is running check Credits

Our template support languages written in a Right-To-Left (RTL) direction.check RTl Templates

A support group provides an opportunity for customers to ask their Questions and share personal experiences.Please follow Ceo@toonalite.com

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam, aut dolores.

Echo is an HTML template, so it doesn't support Wordpress themes.

Echo Template include Javascript and Jquery but in the future we will probably have these libraries .

Change log

v1.0.0 May 2022

version 1 initial release

Credits

JS and CSS

Plugin Name	Description
Bootstrap	Powerful, extensible, and feature-packed frontend toolkit.
Bootstrap Icon	Free, high quality, open source icon library with over 1,600 icons.
Swiper js	The Most Modern Mobile Touch Slider. We used Swiper for slider.
Prism Js	Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
Clipboard Js	A modern approach to copy text to clipboard.
tilt Js	A smooth 3D tilt javascript library forked from Tilt.js (jQuery version).
Scroll Cue	Animation for site. Show elements by scrolling.
Counter	This plugin that will count up (or down) to a target number at a specified speed
Isotope	Filter & sort magical layouts.
Swipebox	Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
Blobz	Pure CSS Animated Blobs.
Animate Css	Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects.

Images

Pexels

You can go to this link to find photos and select photos in Pexels

Freepik

You can go to this link to find photos and select photos in Freepik

Unsplash

You can go to this link to find photos and select photos in Unsplash

MockUp

You can go to this link to find photos and select photos in Freepik

Icons

Go to FontIcon section to access the icons.

Plugin Name	Description
Bootstrap Icon	Free, high quality, open source icon library with over 1,600 icons.

Illustration

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet laboriosam.

StorySet

You can go to this link to find photos and select photos in Storyset

Fonts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet laboriosam.

Plugin Name	Description
Poppins	Basic Font on website
Playfair	This font is used for some titles.
Nunito	This font is used for some pages. It`s a round font

Colors

Changing Primary Color

In this project we have changed the original bootstrap colors. To customize the main colors according to your taste. Apply changes to this user_variable file


$colors: ("blue": $blue,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "lightPink": $lightPink,
  "aqua": $aqua,
  "navy": $navy,
  "white": $white,
  "light": $light,
  "gray": $gray,
  "dark": $dark,
);
$secondary: $gray-600;
$success: $green;
$info: $aqua;
$warning: $yellow;
$danger: $red;
$main-color: $primary;
$theme-colors: map-merge($colors,
    ("primary": $primary,
        "secondary": $secondary,
        "success": $success,
        "info": $info,
        "warning": $warning,
        "danger": $danger,
    ));

Background Colors

.bg-blue

solid

pale

soft

.bg-red

solid

pale

soft

.bg-purple

solid

pale

soft

.bg-pink

solid

pale

soft

.bg-yellow

solid

pale

soft

.bg-aqua

solid

pale

soft

.bg-orange

solid

pale

soft

.bg-green

solid

pale

soft

.bg-lightPink

solid

pale

soft

.bg-navy

solid

pale

soft













.
.
.

Text Colors

Text Blue

Text Red

Text Purple

Text Aqua

Text Pink

Text Yellow

Text Navy

Text Orange

Text Light Pink

Text Black

Text White

Text Light

Text Gray

Text Pale Blue

Text Pale Red

Text Pale Purple

Text Pale Aqua

Text Pale Pink

Text Pale Yellow

Text Pale Navy

Text Pale Orange

Text Pale Light Pink

Text Soft Blue

Text Soft Red

Text Soft Purple

Text Soft Aqua

Text Soft Pink

Text Soft Yellow

Text Soft Navy

Text Soft Orange

Text Soft Light Pink













.
.
.

Border Colors

Blue

Pale Blue

Soft Blue

Red

Pale Red

Soft Red

purple

Pale purple

Soft purple

Orange

Pale Orange

Soft Orange

Aqua

Pale Aqua

Soft Aqua

Green

Pale Green

Soft Green

Pink

Pale Pink

Soft Pink

Yellow

Pale Yellow

Soft Yellow

Navy

Pale Navy

Soft Navy

Light Pink

Pale Light Pink

Soft Light Pink













.
.
.

Fonts

Font Options

You can watch the available fonts in different demos
Poppins
demo 1 demo 3 demo 4
Playfair
demo 2
Nunito
demo 6

Poppins is the default font in Echo.If you want to change your default font family add class in < body > tag.


<body class="font-nunito">

Custom Google Fonts

If you want to add your custom google font go to assets / scss / _user-variable.scss file and import your font.
In below, you can see how to import:


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
$main-font-family: 'Poppins', sans-serif;

Svg Icons

Custom Svg

Add some custom svg in demos

Sizes

Icons

Rocket

Weight

Shield

Announcement

Cost

Graphic Design

Parking

Placeholder

Statistics

Wheelchair

Arrow

Arrow 2

Arrow 3

Cursor

Cursor 2

Play Store

Apple Store

Shape Line

Font Icons

Bootstrap icons

We have used bootstrap font icons in this project. To see all the fonts, you can go to the bootstrap icon site and see the fonts.

In below, you can see how to import in SCSS file assets / scss / _user-variable.scss


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
$font-icon: 'bootstrap-icons';

Icons

grid-1x2-fill

share-fill

gear

gift

shield-lock-fill

Illustration

Set 1

Set 2

Resource

Background

Abstract

Misc

Spacing

The echo template provides values between 0 and 30 for the desired distance and more values using bootstrap spacing .

Width and Height

We have provided values between 8 and 560 for the Width and Height in this project which increases by 8 in all breakpoints. You can use the .w-* and .h-* class.

Top, Left, Bottom, Right

We have used spacing for the Top, Left, Bottom and Right in this project in all breakpoints. You can use the .start-* for left, .end-* for right, .top-* for top and .bottom-* for bottom.

You can also use these classes for the negative case .start-n* for left, .end-n* for right, .top-n* for top and .bottom-n* for bottom.


    Position for left
    Position for right
    Position for top
    Position for bottom

    Position for negative left
    Position for negative right
    Position for negative top
    Position for negative bottom

Border Width

We have provided values between 1 and 10 for the Border width in this project. You can use the .border-* class.


    Border 1px
    Border 2px
    Border 3px
    .
    .
    Border 10px

Line Height

We have provided values between 0 and 5 for the line height in this project. You can use the .lh-* class.


    Border 0px
    Border 1px
    Border 2px
    Border 3px
    Border 4px
    Border 5px

Accordion

Simple Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus luctus venenatis, lectus


<div class="accordion accordion-flush accordion-nbg" data-cues="slideInUp" data-duration="1500" id="accordionTransparent">
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-h1">
            <button aria-controls="flush-collapse2" aria-expanded="false" class="accordion-button" data-bs-target="#flush-collapse1" data-bs-toggle="collapse" type="button">
                <span class="text-capitalize mb-0 fs-18">new algorithm design</span>
            </button>
        </h2>
        <div aria-labelledby="flush-h1" class="accordion-collapse collapse show" data-bs-parent="#accordionTransparent" id="flush-collapse1">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-h2">
            <button aria-controls="flush-collapse2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse2" data-bs-toggle="collapse" type="button">
                <span class="text-capitalize mb-0 fs-18">New networking</span>
            </button>
        </h2>
        <div aria-labelledby="flush-h2" class="accordion-collapse collapse" data-bs-parent="#accordionTransparent" id="flush-collapse2">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-h3">
            <button aria-controls="flush-collapse3" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapse3" data-bs-toggle="collapse" type="button">
                <span class="text-capitalize mb-0 fs-18">new trend design</span>
            </button>
        </h2>
        <div aria-labelledby="flush-h3" class="accordion-collapse collapse" data-bs-parent="#accordionTransparent" id="flush-collapse3">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
</div>

Accordion Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus luctus venenatis, lectus


<div class="accordion accordion-flush accordion-nbg" data-cues="slideInUp" data-duration="1500" id="accordionTransparent">
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-headingOne">
            <button aria-controls="flush-collapseOne" aria-expanded="false" class="accordion-button" data-bs-target="#flush-collapseOne" data-bs-toggle="collapse" type="button">
                <i class="bi bi-grid-1x2-fill fs-32 text-blue"></i>
                <span class="text-capitalize mb-0 ms-4 fs-18">new algorithm design</span>
            </button>
        </h2>
        <div aria-labelledby="flush-headingOne" class="accordion-collapse collapse show" data-bs-parent="#accordionTransparent" id="flush-collapseOne">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-headingTwo">
            <button aria-controls="flush-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseTwo" data-bs-toggle="collapse" type="button">
                <i class="bi bi-git fs-32 text-blue"></i>
                <span class="text-capitalize mb-0 ms-4 fs-18">New networking</span>
            </button>
        </h2>
        <div aria-labelledby="flush-headingTwo" class="accordion-collapse collapse" data-bs-parent="#accordionTransparent" id="flush-collapseTwo">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
    <div class="accordion-item rounded-3 mb-4 border-0">
        <h2 class="accordion-header" id="flush-headingThree">
            <button aria-controls="flush-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#flush-collapseThree" data-bs-toggle="collapse" type="button">
                <i class="bi bi-display-fill fs-32 text-blue"></i>
                <span class="text-capitalize mb-0 ms-4 fs-18">new trend design</span>
            </button>
        </h2>
        <div aria-labelledby="flush-headingThree" class="accordion-collapse collapse" data-bs-parent="#accordionTransparent" id="flush-collapseThree">
            <div class="accordion-body text-secondary">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
                luctus venenatis, lectus luctus venenatis, lectus
            </div>
        </div>
    </div>
</div>

Animation

Scroll Cue Js

scrollCue.js is a JavaScript plugin that works without jQuery. Show elements by scrolling on page.

Single Element

You can use data-cue to add animation to one element.


    <figure class="shadow rounded-2 h-256" data-cue="slideInLeft">
        <img src="../assets/img/portfolio/portfolio-7.jpg" alt="/">
    </figure>
    <figure class="shadow rounded-2 h-256" data-cue="slideInLeft">
        <img src="../assets/img/portfolio/portfolio-5.jpg" alt="/">
    </figure>
    <figure class="shadow rounded-2 h-256" data-cue="slideInLeft">
        <img src="../assets/img/portfolio/portfolio-8.jpg" alt="/">
    </figure>

Parent Element

You can use data-cues to add animation to parent element.


<div data-cues="slideInLeft">
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-7.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-5.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-8.jpg" alt="">
    </figure>
</div>

Group Element

You can use data-group to group your elements.In this setting when the first element loaded other element continuous after first element.


<div data-cues="slideInLeft" data-group="images">
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-7.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-5.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-8.jpg" alt="">
    </figure>
</div>

Duration Element

You can use data-duration for the duration the animation is done.


<div data-cues="slideInLeft" data-duration="1500">
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-7.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-5.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256">
        <img src="../assets/img/portfolio/portfolio-8.jpg" alt="">
    </figure>
</div>

Delay Element

You can use data-delay for the delay the animation is done.


<div data-cues="slideInLeft" data-duration="1500">
    <figure class="shadow rounded-2 h-256" data-delay="300">
        <img src="../assets/img/portfolio/portfolio-7.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256" data-delay="1200">
        <img src="../assets/img/portfolio/portfolio-5.jpg" alt="">
    </figure>
    <figure class="shadow rounded-2 h-256" data-delay="600">
        <img src="../assets/img/portfolio/portfolio-8.jpg" alt="">
    </figure>
</div>

Avatars

Image Avatars

You can use size between .w-8 and .w-560 to change the image size. You can change your Image height too.


<figure class="w-96 h-96 rounded-circle ">
    <img src="../assets/img/user/user-4.jpg" alt="">
</figure>
<figure class="w-80 h-80 rounded-circle ">
    <img src="../assets/img/user/user-5.jpg" alt="">
</figure>
<figure class="w-64 h-64 rounded-circle ">
    <img src="../assets/img/user/user-6.jpg" alt="">
</figure>

BackGround

Overlay Background

To add overlay on the box background and image background .overlay : Use this class to add main style.

.overlay--cover use this class to active overlay background. with 30% overlay.
.overlay--cover-40 use this class to active overlay background. with 40% overlay.
.overlay--cover-50 use this class to active overlay background. with 50% overlay.

Use the .cover class in .overlay class if you want to create text inside the box

See code in below:



<figure class="h-256 rounded-2 overlay overlay-2">
    <div class="cover">
        <p class="text-center fs-25 text-white fw-bold">Your Content</p>
    </div>
    <img src="../assets/img/bg/bg-2.jpg" alt="">
</figure>

<figure class="h-256 rounded-2 overlay overlay-2 overlay--cover-40">
    <div class="cover">
        <p class="text-center fs-25 text-white fw-bold">Your Content</p>
    </div>
    <img src="../assets/img/bg/bg-2.jpg" alt="">
</figure>

<figure class="h-256 rounded-2 overlay overlay-2 overlay--cover-50">
    <div class="cover">
        <p class="text-center fs-25 text-white fw-bold">Your Content</p>
    </div>
    <img src="../assets/img/bg/bg-2.jpg" alt="">
</figure>

Dark Background

Your Content


<div class="wrap bg-dark text-white"></div>

Solid Color Background

Your Content

.bg-purple -
.bg-red -
.bg-blue -
.bg-yellow -
.bg-green -
.bg-aqua -
.bg-dark -
.bg-navy -
.bg-pink -
.bg-lightPink -
.bg-orange -
.bg-white -


<div class="wrap bg-purple text-white"></div>
<div class="wrap bg-red text-white"></div>

Pale Color Background

Your Content

.bg-pale-purple -
.bg-pale-red -
.bg-pale-blue -
.bg-pale-yellow -
.bg-pale-green -
.bg-pale-aqua -
.bg-pale-dark -
.bg-pale-navy -
.bg-pale-pink -
.bg-pale-lightPink -
.bg-pale-orange -
.bg-pale-white -


<div class="wrap bg-pale-blue text-white"></div>
<div class="wrap bg-pale-green text-white"></div>

Soft Color Background

Your Content

.bg-soft-purple -
.bg-soft-red -
.bg-soft-blue -
.bg-soft-yellow -
.bg-soft-green -
.bg-soft-aqua -
.bg-soft-dark -
.bg-soft-navy -
.bg-soft-pink -
.bg-soft-lightPink -
.bg-soft-orange -
.bg-soft-white -


<div class="wrap bg-soft-orange text-dark"></div>
<div class="wrap bg-soft-aqua text-dark"></div>

Button

Button Colors

Purple

Green

Yellow

Orange

Red

Navy

Pink

Blue

Light

Light-Pink

White

Dark


Purple
Green
Yellow
Orange
Red
Navy
Pink
Blue
Light
Light-Pink
White
Dark

Button Size

Button Shapes