page-template-example.html

---
layout: default
title: Page 3
description: This is my site. Welcome.
---

    <div class="row">
    <div class="large-12 columns">
 
      <!-- Navigation -->
 
        <ul class="button-group">
          <li><a href="#" class="button">Nav Item 1</a></li>
          <li><a href="#" class="button">Nav Item 2</a></li>
          <li><a href="#" class="button">Nav Item 3</a></li>
        </ul>
 
      <!-- End Navigation -->
 
 
      <!-- Header Content -->
 
        <div class="row">
 
          <div class="large-6 columns">
 
            <img src="http://placehold.it/800x550&text=Image"><br>
 
          </div>
 
 
          <div class="large-6 columns">
 
            <h3 class="show-for-small">Header<hr/></h3>
 
            <div class="panel">
              <h4 class="hide-for-small">Header<hr/></h4>
            <h5 class="subheader">Fusce ullamcorper mauris in eros dignissim molestie posuere felis blandit. Aliquam erat volutpat. Mauris ultricies posuere vehicula. Sed sit amet posuere erat. </h5>
            </div>
 
          <div class="row">
              <div class="large-6 small-6 columns">
                <div class="panel">
                  <h5>Header</h5>
                <h6 class="subheader">Praesent placerat dui tincidunt elit suscipit sed.</h6>
                <a href="http://foundation.zurb.com/templates.html" class="small button">Get more templates</a>
                </div>
              </div>
 
              <div class="large-6 small-6 columns">
                <div class="panel">
                  <h5>Header</h5>
                <h6 class="subheader">Praesent placerat dui tincidunt elit suscipit sed.</h6>
                <a href="#" class="small button">BUTTON TIME!</a>
                </div>
              </div>
          </div>
 
          </div>
 
        </div>
 
      <!-- End Header Content -->
 
 
      <!-- Search Bar -->
 
        <div class="row">
 
          <div class="large-12 columns">
            <div class="radius panel">
 
            <form>
              <div class="row collapse">
 
                <div class="large-10 small-8 columns">
                  <input type="text" />
                </div>
 
                <div class="large-2 small-3 columns">
                  <a href="#" class="postfix button expand">Search</a>
                </div>
 
              </div>
            </form>
 
          </div>
          </div>
 
        </div>
 
      <!-- End Search Bar -->
 
 
      <!-- Thumbnails -->
 
        <div class="row">
 
          <div class="large-12 show-for-small columns">
          <h3>Header</h3><hr>
        </div>
 
          <div class="large-3 small-6 columns">
            <img src="http://placehold.it/500x500&text=Thumbnail">
            <div class="panel">
              <p>Description</p>
            </div>
          </div>
 
          <div class="large-3 small-6 columns">
            <img src="http://placehold.it/500x500&text=Thumbnail">
            <div class="panel">
              <p>Description</p>
            </div>
          </div>
 
          <div class="large-3 small-6 columns">
            <img src="http://placehold.it/500x500&text=Thumbnail">
            <div class="panel">
              <p>Description</p>
            </div>
          </div>
 
          <div class="large-3 small-6 columns">
            <img src="http://placehold.it/500x500&text=Thumbnail">
            <div class="panel">
              <p>Description</p>
            </div>
          </div>
 
        </div>
 
      <!-- End Thumbnails -->
 
 

 
    </div>
  </div>