Yaddu Documentation

What's inside the Documents

It's time to see and read all sections of this documents to learn about how you can make changes in Salesman template

What's Included

  • assets
    • css
      • bootstrap.min.cssMinified version of bootstrap CSS library
      • style.cssWrite your custom styles in this file
      • responsive.cssContainig All Media Query for Responsivness
    • imagesHere is a place to put your media files like logo, images, etc.
    • js
      • bootstrap.min.jsMinified version of bootstrap Javascript
      • jquery.min.jsMinified version of jQuery library
      • modernizr.js Modernizr Javascript file
      • main.jsWrite your custom scripts in this file
  • index.html Main HTML File

Components

Page Layout

We have followed Bootstrap standard layout

<div class="container">
<div class="row">
<div class="col-md-X">
.......
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->

<div class="col-md-X"> Define how many columns you want in row, Where X is value from 1 to 12.

Some Example layout for Page column

One Half <div class="col-md-6">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Half <div class="col-md-6">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

One Third <div class="col-md-4">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab consequatur fugiat delectus sint in velit quo possimus, ullam aspernatur ipsa natus tenetur nulla distinctio doloremque totam.

Header

Following code snippet demonstrates .site-header

<!--================ Header : Main Banner Section Start Here ===================-->
<header class="site-header">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-7">
<div id="bannr_text">
<!--================ Add your Brand Name Here ===================-->
<span class="site-logo mt5">Salesman</span>
<!--================ Main Heading and Sub Heading to describe your business ===================-->
<h1>Learn to grow your online sales 10X in just 21 days!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<!--================ Call to action button ===================-->
<a href="" class="btn-alpha mt2 ps-btn">Buy Now - Just $7</a>
</div>
</div><!--/col-->
<div class="col-md-5 col-sm-5">
<div class="banner_book">
<!--================ Place Your Image in images folder and Add Name here ===================-->
<img src="images/ebook-516X553.png" class="img-responsive" alt="ebook">
</div>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
</header>
<!--================ Header : Main Banner Section End Here ===================-->

Elements

Review

Following code snippet demonstrates #review

<!--============= Copy and Paste following code to add more reviews ===========-->
<div class="item">
<div class="line-heading"><span><i class="fa fa-quote-left"></i></span></div>
<p class="quote-text">This eBook provides amazing strategies to boost my sales, it is very easy if you go through each steps of the book and impletement it on other day. Thanks a ton:)</p>
<div class="review-author">
<!--============= Place Image in "images" folder and add name here ===========-->
<img class="img-circle" src="images/testimonial1.jpg" width="70" alt="John Doe">
<p class="text-left"><span class="author-name">John Doe</span><br><span class="text-muted">Some Good Company</span></p>
</div>
</div><!--/item-->

You Can find above code inside the <div class="carousel-inner"> in Review Section.

FAQ

Following code snippet demonstrates #faq

<!--=============Copy and Paste following code to add more FAQ's ===========-->
<h5 class="accordion-toggle">Is there any guarantee?</h5>
<div class="accordion-content">
<p>Earum enim sed dolorum, exercitationem temporibus quaerat eos, accusantium amet facilis facere eaque commodi optio quidem rem minima nisi laborum quae animi nostrum aut voluptates veniam. Cum neque quam fuga sapiente quidem eum necessitatibus nulla, cupiditate a, repudiandae iusto in dolor eaque commodi nostrum consequuntur dolores velit eligendi dolorem quae. Distinctio quae, cumque aliquid quos consequuntur perspiciatis voluptates, laboriosam velit qui et aut sint esse nemo voluptatibus, dolore veritatis natus facilis commodi sed.</p>
</div><!--/accordion-content-->

You Can find above code inside the <div class="accordion"> in FAQ Section.

Call to Action

Following code snippet demonstrates #cta

<!--================ CTA Section Start Here ===================-->
<section id="cta" class="burger themebg text-center white-text">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2>Get this amazing eBook now!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia perferendis sunt, adipisci nemo cumque, repudiandae autem.</p>
<a href="" class="btn-alpha mt2">Buy Now - Just $7</a>
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
</section> <!-- /cta -->
<!--================ CTA Section End Here ===================-->

Social Icons

Ref document part Footer to know about how to add social links

Basic-styling

Typography

Following code snippet demonstrates Headings and Paragraph

<!--=============== Headings =============-->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<!--=============== Paragraph =============-->
<p>Paragraph</p>
This is paragraph lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Color

<!--=============== CSS for theme background and Dark backgroud section =============-->
.themebg {
background: #1242a2;
}
.darkbg {
background-color: #EEF3F9;
}

Find above class in style.css file in css folder

Change theme color by placing your #color code here #1242a2

Icons

This template supports Font Awesome Icons. You can look for your favorite icons online:

Font Awesome : http://fontawesome.io/icons/