Menu Toggle
More
Close

Sample Page

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h3>
<h4 class="heading4">Heading 4</h4>
<h5 class="heading5">Heading 5</h5>
<h6 class="heading6">Heading 6</h6>

Heading 2

This is body copy, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris. Ut facilisis justo non nibh vestibulum aliquam. Donec quis velit imperdiet ligula molestie elementum in at purus. Nunc pellentesque a sapien vel scelerisque. Phasellus sit amet aliquet eros. Donec nec interdum tellus, id congue felis.

Heading 3

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras enim odio, eleifend eu blandit in, aliquet vitae nisi. Maecenas non leo massa. Suspendisse laoreet metus vitae mollis rhoncus. Nulla nec placerat felis, commodo fringilla enim. Praesent felis augue, sodales posuere ullamcorper molestie, pretium lacinia enim. Cras vitae congue enim. Praesent hendrerit

Show Code
<h2>Heading 2</h2>
This is body copy, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris. Ut facilisis justo non nibh vestibulum aliquam. Donec quis velit imperdiet ligula molestie elementum in at purus. Nunc pellentesque a sapien vel scelerisque. Phasellus sit amet aliquet eros. Donec nec interdum tellus, id congue felis.

<h3>Heading 3</h3>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras enim odio, eleifend eu blandit in, aliquet vitae nisi. Maecenas non leo massa. Suspendisse laoreet metus vitae mollis rhoncus. Nulla nec placerat felis, commodo fringilla enim. Praesent felis augue, sodales posuere ullamcorper molestie, pretium lacinia enim. Cras vitae congue enim. Praesent hendrerit

Use “text-highlight” class to make text highlight.

Use “border” class for border
Use “text-center” class for text align center
Use “text-right” class for text align right
Use “text-justify” class for text align justify
Use “margin-bottom-medium” class for add margin bottom medium
Use “margin-bottom-big” class for add margin bottom big
Use “padding-bottom-medium” class for add padding bottom medium
Use “padding-bottom-big” class for add padding bottom big

Show Code
<span class="text-highlight">Use <strong>"text-highlight"</strong> class to make text highlight.</span>
<div class="border">Use <strong>"border"</strong> class for border</div>
<div class="text-center">Use <strong>"text-center"</strong> class for text align center</div>
<div class="text-right">Use <strong>"text-right"</strong> class for text align right</div>
<div class="text-justify">Use <strong>"text-justify"</strong> class for text align justify</div>
<div class="margin-bottom-medium"> Use <strong>"margin-bottom-medium"</strong> class for add margin bottom medium</div>
<div class="margin-bottom-big"> Use <strong>"margin-bottom-big"</strong> class for add margin bottom big</div>
<div class="padding-bottom-medium"> Use <strong>"padding-bottom-medium"</strong> class for add padding bottom medium</div>
<div class="padding-bottom-big"> Use <strong>"padding-bottom-big"</strong> class for add padding bottom big</div>

Unordered List item style

Show Code
<ul class="list-style-none">
  <li>List item 1</li>
  <li><a href="#">List item 2</a>
   <ul>
    <li><a href="#">Sub List item 1</a></li>
    <li><a href="#">Sub List item 2</a></li>
    <li><a href="#">Sub List item 3</a></li>
  </ul>
 </li>
 <li><a href="#">List item 3</a></li>
 <li><a href="#">List item 4</a></li>
</ul>
Show Code
<ul class="list-style">
  <li>List item 1</li>
  <li><a href="#">List item 2</a>
   <ul>
    <li><a href="#">Sub List item 1</a></li>
    <li><a href="#">Sub List item 2</a></li>
    <li><a href="#">Sub List item 3</a></li>
   </ul>
  </li>
  <li><a href="#">List item 3</a></li>
  <li><a href="#">List item 4</a></li>
</ul>

Ordered List item style

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Show Code
<ol class="list-style order-lower-roman">
 <li>List item 1</li>
 <li><a href="#">List item 2</a>
  <ul>
   <li><a href="#">Sub List item 1</a></li>
   <li><a href="#">Sub List item 2</a></li>
   <li><a href="#">Sub List item 3</a></li>
  </ul>
 </li>
 <li><a href="#">List item 3</a></li>
 <li><a href="#">List item 4</a></li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Show Code
<ol class="list-style order-upper-alpha">
 <li>List item 1</li>
 <li><a href="#">List item 2</a>
  <ul>
   <li><a href="#">Sub List item 1</a></li>
   <li><a href="#">Sub List item 2</a></li>
   <li><a href="#">Sub List item 3</a></li>
  </ul>
 </li>
 <li><a href="#">List item 3</a></li>
 <li><a href="#">List item 4</a></li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
Show Code
<ol class="list-style order-lower-alpha">
 <li>List item 1</li>
 <li><a href="#">List item 2</a>
  <ul>
   <li><a href="#">Sub List item 1</a></li>
   <li><a href="#">Sub List item 2</a></li>
   <li><a href="#">Sub List item 3</a></li>
  </ul>
 </li>
 <li><a href="#">List item 3</a></li>
 <li><a href="#">List item 4</a></li>
</ol>

Post style – 1

News title goes here

Dummy tex copy Lorem ipsum. Read More

 
News title goes here

Dummy tex copy Lorem ipsum. Read More

Show Code
<h3>Post style - 1</h3>
<div class="box boxBorder">
 <div class="row">
  <div class="col-6">
   <img class="poststyle2" src="https://cdn.s3waas.gov.in/master/uploads/2017/04/2017110775.jpg" alt="" />
  </div>
  <div class="col-6">
   <h5>News title goes here</h5>
    Dummy tex copy Lorem ipsum.
	<a class="btn btn-link uppercase postReadmore" href="#">Read More </a>
  </div>
 </div>
 <div class="hr"></div>
 <div class="row">
  <div class="col-6">
   <img class="poststyle2" src="https://cdn.s3waas.gov.in/master/uploads/2017/04/2017110736.jpg" alt="" />
  </div>
  <div class="col-6">
   <h5>News title goes here</h5>
   Dummy tex copy Lorem ipsum.
   <a class="btn btn-link uppercase postReadmore" href="#">Read More </a>
  </div>
 </div>
 <button class="btn btn-block uppercase btn-primary btn-black">View All</button>
</div>

Post style – 2

Pomogranate Picking festival at Parashar Agritourism

Pomogranate is such nutritive fruit for us which helps as anti aging, anti toxicant, provide relief from stomach More

Pomogranate Picking festival at Parashar Agritourism

Pomogranate is such nutritive fruit for us which helps as anti aging, anti toxicant, provide relief from stomach More

Show Code
<h3>Post style - 2</h3>
<div class="boxBorder">
 <div class="poststyle">
  <h4>Pomogranate Picking festival at Parashar Agritourism</h4>
  Pomogranate is such nutritive fruit for us which helps as anti aging, anti toxicant, provide relief from stomach
  <a class="btn btn-link uppercase postReadmore" href="#">More </a>
 </div>
 <div class="poststyle">
  <h4>Pomogranate Picking festival at Parashar Agritourism</h4>
  Pomogranate is such nutritive fruit for us which helps as anti aging, anti toxicant, provide relief from stomach
  <a class="btn btn-link uppercase postReadmore" href="#"> More </a>
 </div>
</div>

Link / Button

Link Button Button

Show Code
<a href=”#” class=”link” aria-label=”Link Details”>Link</a>
<a href=”#” class=”btn btn-default” aria-label=”Button Details”>Button</a>
<a href=”#” class=”btn btn-primary” aria-label=”Button Details”>Button</a>

PDF Link

<span class="pdf-downloads">
<a target="_blank" href="#" aria-label="Title of document 2 PDF (File Size) - opens in a new window" title="Click here to view"> Title of Document (File Size) </a>
<a href="#" title="Click here to download" class="download" download="(PdfFileName).pdf"> <i class="fa fa-download pdf-download" aria-hidden="ture"></i></a> 
</span>

Paragraph with image

sample Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris. Ut facilisis justo non nibh vestibulum aliquam. Donec quis velit imperdiet ligula molestie elementum in at purus. Nunc pellentesque a sapien vel scelerisque. Phasellus sit amet aliquet eros. Donec nec interdum tellus, id congue felis.

sample Image
Caption

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras enim odio, eleifend eu blandit in, aliquet vitae nisi. Maecenas non leo massa. Suspendisse laoreet metus vitae mollis rhoncus. Nulla nec placerat felis, commodo fringilla enim. Praesent felis augue, sodales posuere ullamcorper molestie, pretium lacinia enim. Cras vitae congue enim. Praesent hendrerit, urna non dictum fringilla, ex mauris faucibus diam, eu ullamcorper tortor eros et nisi.

Show Code
<h2>Paragraph with image</h2>
<div class="pull-right sample-img-cntr">
 <img src="https://cdn.s3waas.gov.in/master/uploads/2017/04/2017110775.jpg" alt="sample Image" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est.

Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris. Ut facilisis justo non nibh vestibulum aliquam. Donec quis velit imperdiet ligula molestie elementum in at purus. Nunc pellentesque a sapien vel scelerisque. Phasellus sit amet aliquet eros. Donec nec interdum tellus, id congue felis.
<div class="pull-left sample-img-cntr">
 <img src="https://cdn.s3waas.gov.in/master/uploads/2017/04/2017110736.jpg" alt="sample Image" /> <br> Caption
</div>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras enim odio, eleifend eu blandit in, aliquet vitae nisi. Maecenas non leo massa. Suspendisse laoreet metus vitae mollis rhoncus. Nulla nec placerat felis,

commodo fringilla enim. Praesent felis augue, sodales posuere ullamcorper molestie, pretium lacinia enim. Cras vitae congue enim. Praesent hendrerit, urna non dictum fringilla, ex mauris faucibus diam, eu ullamcorper tortor eros et nisi.

Table 1

Caption
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Show Code
<h2>Table 1</h2>
<table>
 <caption>Caption</caption>
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
   <th>Heading 3</th>
   <th>Heading 4</th>
   <th>Heading 5</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
 </tbody>
</table>

Table 2

Caption
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Show Code
<table class="table1">
 <caption>Caption</caption>
 <thead>
  <tr>
   <th>Heading 1</th>
   <th>Heading 2</th>
   <th>Heading 3</th>
   <th>Heading 4</th>
   <th>Heading 5</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
  <tr>
   <td>Item 1</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
   <td>Item 5</td>
  </tr>
 </tbody>
</table>

Two column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris.

Show Code
<h2>Two column layout</h2>
<div class="col-6">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris.</p>
</div>
<div class="col-6">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec. Nullam rutrum, magna in tristique placerat, diam nibh sollicitudin urna, vitae congue massa nisl quis est. Etiam quis ligula faucibus, aliquet lacus eget, gravida elit. In ut dolor mauris.</p>
</div>

Three column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.

Show Code
<h2>Three column layout</h2>
<div class="col-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.</p>
</div>
<div class="col-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.</p>
</div>
<div class="col-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta euismod erat et pretium. Suspendisse tincidunt vestibulum orci, ut gravida augue tincidunt nec.</p>
</div>

Contact widget

Name: Full name

Email: abc[at]email[dot]com

Phone: 9999999999

Address: 3rd Floor, Dummy Building, Dummy Road, Dummy Nagar

Pin: 000000

Website: www[dot]website[dot]com

Hide Code
<div class="clear">
<p><strong>Name:</strong> Full name</p>
<p><strong>Email:</strong> abc[at]email[dot]com</p>
<p><strong>Phone:</strong> 9999999999</p>
<p><strong>Address:</strong> 3rd Floor, Dummy Building, Dummy Road, Dummy Nagar</p>
<p><strong>Pin:</strong> 000000</p>
<p><strong>Website:</strong> <a href="#" class="weburl"> www[dot]website[dot]com</a></p>
</div>