Seventh-Day Adventist Church

International Website Framework

Menu

Full Width Slideshow

This is a large full-width slideshow that works great as a replacement for a hero image.

A few things to note: to get the white background removed from the navigation, be sure to use the id="home" on the header element; two hero images are required for optimal viewing on mobile devices vs. desktop machines.

<body>
  <header id="home">
    ...
  </header> <!-- End header -->
  <div id="hero">
    <ul id="hero-slides">
      <li>
        <img src="hero.jpg" class="slide-bg slide-large" />
        <img src="hero-small.jpg" class="slide-bg slide-small" />
        <div class="hero-content dark">
          <h1>Join Us in<br />10 Days of Prayer</h1>
          <h4>January 9 - 19, 2013</h4>
          <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at.</p>
          <a href="#" class="btn white">Find out more</a>
        </div>
      </li>
      <li>
        <img src="hero.jpg" class="slide-bg slide-large" />
        <img src="hero-small.jpg" class="slide-bg slide-small" />
        <div class="hero-content dark">
          <h1>Join Us in<br />10 Days of Prayer</h1>
          <h4>January 9 - 19, 2013</h4>
          <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at.</p>
          <a href="#" class="btn">Find out more</a>
        </div>
      </li>
      <li>
        <img src="hero.jpg" class="slide-bg slide-large" />
        <img src="hero-small.jpg" class="slide-bg slide-small" />
        <div class="hero-content dark">
          <h1>Join Us in<br />10 Days of Prayer</h1>
          <h4>January 9 - 19, 2013</h4>
          <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at.</p>
          <a href="#" class="btn white">Find out more</a>
        </div>
      </li>
    </ul> <!-- End #hero-slides -->
    <div id="hero-slides-nav"></div>
  </div> <!-- End #hero -->
</body>

The associated Javascript needs to be in an included file, or at the bottom of the page containing the slideshow.

<script>
  $(function(){
    $('#hero-slides').responsiveSlides({
      pager: true,
      navContainer: '#hero-slides-nav'
    });
  });
</script>

Slideshow

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

<div class="content-left">
  <div id="content-slides-container">
    <ul id="content-slides">
      <li>
        <img src="slide.jpg" class="slide-bg" />
          <div class="content-slides-content">
            <h1>Maecenas dignissim mollis felis ut.</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing.</h3>
            <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at</p>
            <a href="#" class="btn">Find out more</a>
          </div>
      </li>
      <li>
        <img src="slide.jpg" class="slide-bg" />
          <div class="content-slides-content">
            <h1>Maecenas dignissim mollis felis ut.</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing.</h3>
            <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at</p>
            <a href="#" class="btn">Find out more</a>
          </div>
      </li>
      <li>
        <img src="slide.jpg" class="slide-bg" />
          <div class="content-slides-content">
            <h1>Maecenas dignissim mollis felis ut.</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing.</h3>
            <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at</p>
            <a href="#" class="btn">Find out more</a>
          </div>
      </li>
    </ul> <!-- End #content-slides -->
    <div id="content-slides-nav"></div>
  </div> <!-- End #content-slides-container -->
</div> <!-- End .content-left -->

The associated Javascript needs to be in an included file, or at the bottom of the page containing the slideshow.

<script>
  $(function(){
    $('#content-slides').responsiveSlides({
        pager: true,
        navContainer: '#content-slides-nav'
    });
  });
</script>

Hero

This is a basic hero image to be used at the top of most pages.

Example:

<div id="sub-hero">
  <div class="container">
    <h2>INFORMATION</h2>
    <h1>Structure</h1>
  </div>
</div> <!-- End #hero -->

You can have a hero also be taller. This is done by adding the class="tall" to the sub-hero element.

Example:

<div id="sub-hero" class="tall">
  <div class="container">
    ...
  </div>
</div> <!-- End #hero -->

You can override the default hero blue background by assigning a class to the sub-hero element and adding a style for that class in the CSS.

Example:

<div id="sub-hero" class="my-hero-example">
  <div class="container">
    ...
  </div>
</div> <!-- End #hero -->
#sub-hero.my-hero-example { background: url(../img/hero-example.jpg) no-repeat 50% 100%; }

Hero Caption

This is a caption that can sit on top of your hero.

Example:

<div id="sub-hero">
  <div class="container">
    <h2>VITALITY</h2>
    <h1>Family</h1>
    <div id="hero-caption">
      This is a hero caption.
    </div>
  </div>
</div>

Hero Video

This is a video that you can insert in the full width hero or full width slideshow.

<div id="hero">
  <ul id="hero-slides">
    <li>
      <img src="hero.jpg" class="slide-bg slide-large" />
      <img src="hero-small.jpg" class="slide-bg slide-small" />
      <div class="hero-video">
	    Hero Video Goes Here
      </div>
      <div class="hero-content">
        <h4>Video Title</h4>
        <p>Donec id elit non mi porta gravida at eget metus.</p>
        <a href="#" class="btn">View more episodes</a>
      </div> <!-- End .hero-content -->
    </li>
  </ul>
</div> <!-- End #hero -->

News/Press Release Listing

A listing of items in the right area of the site. Can include images or not.

Example:

<div id="news">
  <h3 class="ico-news">IN THE NEWS</h3>
  <div class="news-item">
    <img src="-/img/tmp/news-item-1.jpg" />
      <h5>Lorem Ipsum</h5>
      <span>Jan 14, 2013</span>
      <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at...</p>
      <a href="#">Read more</a>
  </div>
  <div class="news-item">
    <img src="-/img/tmp/news-item-1.jpg" />
      <h5>Lorem Ipsum</h5>
      <span>Jan 14, 2013</span>
      <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at...</p>
      <a href="#">Read more</a>
  </div>
  <div class="news-item">
    <img src="-/img/tmp/news-item-1.jpg" />
      <h5>Lorem Ipsum</h5>
      <span>Jan 14, 2013</span>
      <p>Suspendisse blandit arcu eros, non vestibulum neque consequat at...</p>
      <a href="#">Read more</a>
  </div>
  <a href="#" class="btn">View all news</a>
</div> <!-- End #news -->

Image Callout

A callout with an image and descriptive text beneath.

Example:

<div class="content">
  ...
  <div class="image-callout">
    <img src="callout.jpg" />
    <div class="caption">
      <h3>Nullam Nibh Consectetur</h3>
      <p>Integer posuere erat a ante venenatis dapibus posuere.</p>
    </div>
  </div> <!-- End .image-callout -->
  ...
</div> <!-- End .content -->

You can also float the image callout left, by adding class="callout-left" to your CSS.

<div class="content">
  ...
  <div class="image-callout callout-left">
    <img src="callout.jpg" />
    <div class="caption">
      <h3>Nullam Nibh Consectetur</h3>
      <p>Integer posuere erat a ante venenatis dapibus posuere.</p>
    </div>
  </div> <!-- End .image-callout -->
  ...
</div> <!-- End .content -->

Small Image List

A small image list can be used when listing sections or categories on the site.

Example:

<div id="content">
  <div class="container">
    <div class="content-left">
      <div class="block small-image-list">
        <h2>TITLE</h2>
        <div class="small-image-list-content">
          <p>Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum.</p>
          <a href="#" class="btn">Find out more</a>
        </div>
        <img src="image.png" />
      </div> <!-- End .block -->
    </div> <!-- End .content-left -->
  </div> <!-- End .container -->
</div> <!-- End #content -->

Large Image List

A large image list can be used when listing sections or categories on the site.

Example:

<div class="container">
  <div class="content-left">
    <div class="block">
      <div class="section-info" style="background: url(image.jpg) no-repeat 50% 50%;">
        <span>WORLD CHURCH</span>
      </div>
      <div class="service-content">
        <h3>Ligula Vestibulum</h3>
        <p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam.</p>
        <a href="#" class="btn">Find out more</a>
      </div>
    </div> <!-- End .block -->
  </div> <!-- End .content-left -->
</div> <!-- End .container -->

Call to Action List

A call to action list can be used when listing sections or categories on the site.

Example:

<div class="container">
  <div class="content-left">
    <div class="home-section">
      <h2>SPIRITUALITY</h2>
      <h3>My God loves without restraint...</h3>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      <a href="#" class="btn">Find out more</a>
      <img src="icon.png" class="circle" />
    </div> <!-- End .home-section -->
  </div> <!-- End .content-left -->
</div> <!-- End .container -->

Narrow Image Slider

A small slideshow module that works great inside a grid block.

Example:

<div class="half">
  <div class="block full">
    <ul class="block-slides">
      <li>
        <img src="-/img/large-cellist-temp.jpg" />
        <div class="block">
          <h3>Slide Title</h3>
          <span class="date">Jan 17, 2013</span>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <a href="#" class="btn">Complete photo archives</a>
        </div>
      </li>
      <li>
        <img src="-/img/large-cellist-temp.jpg" />
        <div class="block">
          <h3>Slide Title</h3>
          <span class="date">Jan 17, 2013</span>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <a href="#" class="btn">Complete photo archives</a>
        </div>
      </li>
      <li>
        <img src="-/img/large-cellist-temp.jpg" />
        <div class="block">
          <h3>Slide Title</h3>
          <span class="date">Jan 17, 2013</span>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <a href="#" class="btn">Complete photo archives</a>
        </div>
      </li>
    </ul>
  </div> <!-- End .block.full -->
</div> <!-- End .half -->

The associated javascript that goes with this narrow slide show is as follows:

$('.block-slides').responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 500,
});

Video Thumbnail

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

Example:

<div class="video-callout">
  <a href="#"><img src="video-thumb-temp.jpg" /></a>
  <h4>Video Feature</h4>
  <p>Euismod Pharetra Incept</p>
</div>

Video Grid

A video grid that displays thumbnails in a nice fashion.

Example:

<div class="video-thumb-container">
  <div class="video-thumb">
    <img src="video-thumb.jpg" />
    <p>Video Title</p>
    <span class="date">Jan 16, 2013</span>
  </div> <!-- End .video-thumb -->
  <div class="video-thumb">
    <img src="video-thumb.jpg" />
    <p>Video Title</p>
    <span class="date">Jan 16, 2013</span>
  </div> <!-- End .video-thumb -->
  <div class="video-thumb">
    <img src="video-thumb.jpg" />
    <p>Video Title</p>
    <span class="date">Jan 16, 2013</span>
  </div> <!-- End .video-thumb -->
  <div class="video-thumb">
    <img src="video-thumb.jpg" />
    <p>Video Title</p>
    <span class="date">Jan 16, 2013</span>
  </div> <!-- End .video-thumb -->
</div> <!-- End .video-thumb-container -->

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>

Pagination

A simple pagination.

Example:

<div class="block yellow">
  <a href="#" class="btn-paginate">Previous Page</a> /
  <a href="#" class="btn-paginate">Next Page</a>
</div> <!-- End .block -->

Read More

A simple script to reveal extra text in a section. This works automatically by simply adding a class of "read-more" to any block, the script will handle the rest.

<div class="block first read-more">
  ...
</div>

Filter

A simple filter that can be used on listing pages.

Example:

<div class="block short">
  <div id="filter">
    FILTER:
    <select id="month">
      <option>January</option>
      <option>February</option>
      <option>March</option>
      ...
    </select>
    <select>
      <option>2013</option>
      <option>2012</option>
      <option>2011</option>
      ...
    </select>
  </div>
</div> <!-- End .block .short -->

Modal

A modal to display a video on click. There are several components to this. The first is to include the proper Javascript files.

<script src="/-/js/jquery.fancybox.pack.js"></script>
<script src="/-/js/jquery.fancybox-media.js"></script>

Your HTML should look like this. This example is a modal that opens when clicking on a video thumbnail.

<div class="video-thumb quad">
  <a class="fancybox-media" href="http://vimeo.com/123456">
    <img src="video-thumb.jpg" />
  </a>
  <p>My Great Video</p>
  <span class="date">Jan 16, 2013</span>
</div> <!-- End .video-thumb -->

Finally, we need the Javascript to call the modal on click.

<script>
$(function(){
  // Video Lightbox Example
  $('.fancybox-media').fancybox({
    padding: 0,
    helpers : {
      media : {}
    }
  });
});
</script>

Modal Form

A modal to display a form on click. There are several components to this. The first is to include the proper Javascript files.

<script src="/-/js/jquery.fancybox.pack.js"></script>
<script src="/-/js/jquery.fancybox-media.js"></script>

Your HTML should look like this. This example is a modal that opens when clicking on a video thumbnail.

<a href="#email-signup" id="pop-signup">Email Signup</a>
<div id="email-signup" style="display: none;">
  <h2>Email Newsletter Signup</h2>
  <p>Sign up for our email newsletter to receive up-to-date emails on all things Adventist!</p>
  <form class="large-form">
    <input type="text" name="name" placeholder="Name" />
    <input type="text" name="email" placeholder="Email Address" />
    <input type="submit" name="submit" value="Submit" />
  </form>
</div>

Finally, we need the Javascript to call the modal on click.

<script>
$(function(){
  // Email Sign Up
  $('#pop-signup').fancybox({padding: 0});
});
</script>