realty homepage template in plain html

<html>
<head>
	<title>realty page template</title>
</head>
<body>


  <nav class="top-bar" data-topbar>
    <ul class="title-area">

      <li class="name">
        <h1>
          <a href="#">
            Top Bar Title
          </a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>

    <section class="top-bar-section">

      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Main Item 1</a>
          <ul class="dropdown">
            <li><label>Section Name</label></li>
            <li class="has-dropdown">
              <a href="#" class="">Has Dropdown, Level 1</a>
              <ul class="dropdown">
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Dropdown Options</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
                <li><a href="#">Subdropdown Option</a></li>
              </ul>
            </li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><label>Section Name</label></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all →</a></li>
          </ul>
        </li>
        <li class="divider"></li>
        <li><a href="#">Main Item 2</a></li>
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Main Item 3</a>
          <ul class="dropdown">
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li class="divider"></li>
            <li><a href="#">See all →</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>


  <div class="row">
    <div class="large-12 columns">
      <img src="http://placehold.it/1600x600&text=Header"><br><br>
    </div>
  </div>


  <div class="row">

    <div class="large-3 panel columns">
      <img src="http://placehold.it/500x500&text=Image">

      <h4>Header</h4>

      <p>Fusce ullamcorper mauris in eros dignissim molestie posuere felis blandit. Aliquam erat volutpat. Mauris ultricies posuere vehicula. Sed sit amet posuere erat. Quisque in ipsum non augue euismod dapibus non et eros.</p><hr>

      <div class="row">
        <div class="large-4 columns">
        <a href="#" class="small button">Link</a>
        </div>

        <div class="large-4 columns">
        <a href="#" class="small button">Link</a>
        </div>

        <div class="large-4 columns">
        <a href="#" class="small button">Link</a>
        </div>
      </div>
    </div>

    <div class="large-9 columns">
      <div class="panel">
        <div class="row">

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>

          <div class="large-3 columns end">
            <img src="http://placehold.it/600x500&text=Thumbnail">
          </div>
        </div>
      </div>

      <div class="row">
        <div class="large-6 columns">
          <div class="panel">
            <h5>Subheader</h5>
            <p>Sed sit amet posuere erat. Quisque in ipsum non augue euismod dapibus non et eros.</p>
            <a href="#" class="small button">Link</a>
          </div>
        </div>

        <div class="large-6 columns">
          <div class="panel">
            <h5>Subheader</h5>
            <p>Sed sit amet posuere erat. Quisque in ipsum non augue euismod dapibus non et eros.</p>
            <a href="#" class="small button">Link</a>
          </div>
        </div>
      </div>
    </div>

  </div>


  <footer class="row">
  <div class="large-12 columns"><hr/>
      <div class="row">

        <div class="large-6 columns">
            <p>© Copyright no one at all. Go to town.</p>
        </div>

        <div class="large-6 columns">
            <ul class="inline-list right">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
            </ul>
        </div>

      </div>
  </div>
  </footer>

</body>
</html>