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
<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.
<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
<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>
<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
<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>
<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>
<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
<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
Pomogranate Picking festival at Parashar Agritourism
Pomogranate is such nutritive fruit for us which helps as anti aging, anti toxicant, provide relief from stomach
<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
<h3>Link / Button</h3> <a href="#" class="link">Link</a> <button class="btn btn-default">Button</button> <button class="btn btn-primary">Button</button>
Paragraph with 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.
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.
<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" /> </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
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 |
<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
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 |
<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.
<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.
<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>