Seventh-Day Adventist Church

International Website Framework

Menu

Two Thirds Slideshow

This is the default slideshow where the image is on the left and a blurb of text is contained on the right.

<div class="container">
  <div id="home-hero">
    <ul id="home-slides">
      <li>
        <img src="slide.jpg" class="slide-bg" />
        <div class="home-slides-content">
          <h1>Headline</h1>
          <p>Vestibulum id ligula porta felis euismod semper.</p>
        </div>
      </li>
      <li>
        <img src="slide.jpg" class="slide-bg" />
        <div class="home-slides-content">
          <h1>Headline</h1>
          <p>Vestibulum id ligula porta felis euismod semper.</p>
        </div>
      </li>
      <li>
        <img src="slide.jpg" class="slide-bg" />
        <div class="home-slides-content">
          <h1>Headline</h1>
          <p>Vestibulum id ligula porta felis euismod semper.</p>
        </div>
      </li>
    </ul> <!-- End #home-slides -->
    <div id="home-slides-nav"></div>
  </div> <!-- End #home-hero -->
</div> <!-- End .container -->

Full Width Slideshow

A slideshow option that removes all text and just cycles through images.

<div class="container">
  <div id="home-hero">
    <ul id="home-slides" class="full-width">
      <li>
        <img src="slide.jpg" class="slide-bg" />
      </li>
      <li>
        <img src="silde.jpg" class="slide-bg" />
      </li>
      <li>
        <img src="silde.jpg" class="slide-bg" />
      </li>
    </ul>
    <div id="home-slides-nav" class="full-width"></div>
  </div> <!-- End #home-hero -->
</div> <!-- End .container -->

Split Callout

This split callout is great to use on a homepage or in a major section of the site.

Example:

<div id="home-callout">
  <div class="two-thirds-left">
    <h2>Third Title</h2>
    <p>Vestibulum id ligula porta felis euismod semper.</p>
    <a href="#" id="spirituality" class="callout">
      <strong>Spirituality</strong>My God loves without restraint...
      <span class="go"></span>
    </a>
    <a href="#" id="vitality" class="callout">
      <strong>Vitality</strong>My Life is a gift to be valued...
      <span class="go"></span>
    </a>
    <a href="#" id="service" class="callout">
      <strong>Service</strong>My World is a place where people find hope...
      <span class="go"></span>
    </a>
  </div> <!-- End .two-thirds-left -->
  <div class="third-right">
    <h3 class="ico-book">Our Beliefs</h3>
    <p>Vestibulum id ligula porta felis euismod semper</p>
    <a href="#" class="btn btn-go">Learn More</a>
  </div> <!-- End .third-right -->
</div> <!-- End #home-callout -->

Thirds Callout

A simple thirds based layout for smaller items.

Example:

<div class="thirds">
  <div class="third first">
    <h4>Values</h4>
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>
  <div class="third second">
    <h4>Vision</h4>
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>
  <div class="third">
    <h4>Mission</h4>
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>
</div> <!-- End .thirds -->

Sermon/Podcast Listing

A great list with a microphone icon to denote podcasts or sermons.

Example:

<h3 class="divider">Recent Sermons</h3>
  <div class="sermon">
    <a href="#">The Road Less Traveled</a>
    Charles Tapp, March 30, 2013
  </div>
  <div class="sermon">
    <a href="#">Fighting For Your Life</a>
    Charles Tapp, March 23, 2013
  </div>
  ...
<a href="#" class="btn">View all sermons</a>

Blog Archive/Category Listing

This is a basic unordered list that displays nicely for a blog archive or category listing.

<h3 class="divider">Categories</h3>
<ul>
  <li><a href="#">Camp Upward Bound</a> <span>(1)</span></li>
  <li><a href="#">Children's Ministry</a> <span>(4)</span></li>
  <li><a href="#">Christian Life</a> <span>(5)</span></li>
  ...
</ul>

Call to Action Links

There are three default icons you can use with large CTA links. Adding your own is easy as well.

Example:

<div id="big-links" class="block">
  <a href="#" id="ico-eye" class="big-link">
    <strong>Watch</strong>our weekly services live
  </a>
  <a href="#" id="ico-email" class="big-link">
    <strong>Sign Up</strong>for our email newsletter
  </a>
  <a href="#" id="ico-mic" class="big-link">
    <strong>Subscribe</strong>to the Simple Truths Podcast
  </a>
</div> <!-- End .block -->

Horizontal Form

A simple horizontal form layout.

Example:

<form>
  <input type="text" name="name" placeholder="Name" />
  <input type="text" name="email" placeholder="Email Address" />
  <input type="submit" name="submit" value="Submit" />
</form>

Vertical Form

A simple vertical form layout.

Example:

<form class="large-form">
  <input type="text" name="name" placeholder="Name" />
  <input type="text" name="email" placeholder="Email Address" />
  <input type="text" name="subject" placeholder="Subject" />
  <textarea name="message" placeholder="Enter your message here"></textarea>
  <input type="submit" name="submit" value="Send Message" />
</form>