Seventh-Day Adventist Church

International Website Framework

Menu

Layout

There are several layout options that you can use to create your own templates.

Two Thirds Left

<div id="content">
  <div class="container">
    <div class="content-left">
	Main content goes here.
    </div>
   <div class="content-right">
	Secondary content goes here.
   </div>
  </div> <!-- End .container -->
</div> <!-- End #content -->

Grid

<div id="content">
  <div class="container">
    <div class="content-left">
      <div class="half border">
        <div class="block">
          <h3>Risus Quam Egestas Ultricies</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
        <div class="block">
          <h3>Consectetur Ull amcorper</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
        <div class="block">
          <h3>Risus Quam Eges tas Ultricies</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
        <div class="block">
          <h3>Risus Quam Egestas Ultricies</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
      </div> <!-- End .half .border -->
      <div class="half">
        <div class="block">
          <h3>Aenean Ridiculus</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
        <div class="block">
          <h3>Fusce Ultri cies Euismod</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
        <div class="block">
          <h3>Fringilla Nullam</h3>
          <p>Nulla vitae elit libero, a pharetra augue.</p>
          <a href="#" class="btn">More</a>
        </div> <!-- End .block -->
      </div> <!-- End .half -->
    </div> <!-- End #content-left -->
  </div> <!-- End .container -->
</div> <!-- End #content -->

Half

<div id="content">
  <div class="container">
    <div class="half">
	Half content goes here.
    </div>
   <div class="half">
	Half content goes here.
   </div>
  </div> <!-- End .container -->
</div> <!-- End #content -->