Demo Style page

Ken Burns Thumbnails

Mass & Confession Times and Office Hours

Directions / Map

Calendar

Signup for Automatic Electronic Tithe

<div class="row featurerow">
  <div class="col-xs-6 col-sm-3">
    <div class="thumbnails thumbnail-style thumbnail-kenburn">
      <div class="thumbnail-img">
        <div class="overflow-hidden">
          <a href="about-masstimes"><img class="img-responsive" src="uploads/images/features/featurecrucifix.jpg" /></a>
        </div>
      </div>
      <div class="caption">
        <h3><a href="about-masstimes">Mass & Confession Times and Office Hours</a></h3>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-3">
    <div class="thumbnails thumbnail-style thumbnail-kenburn">
      <div class="thumbnail-img">
        <div class="overflow-hidden">
          <a href="about-directions"><img class="img-responsive" src="uploads/images/features/featuredirections.jpg" /></a>
        </div>
      </div>
      <div class="caption">
        <h3><a href="about-directions">Directions / Map</a></h3>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-3">
    <div class="thumbnails thumbnail-style thumbnail-kenburn">
      <div class="thumbnail-img">
        <div class="overflow-hidden">
          <a href="about-calendar"><img class="img-responsive" src="uploads/images/features/featurecalendar.jpg" /></a>
        </div>
      </div>
      <div class="caption">
        <h3><a href="about-calendar">Calendar</a></h3>
      </div>
    </div>
  </div>

  <div class="col-xs-6 col-sm-3">
    <div class="thumbnails thumbnail-style thumbnail-kenburn">
      <div class="thumbnail-img">
        <div class="overflow-hidden">
          <a href="steward-electronicgiving"><img class="img-responsive" src="uploads/images/features/featuretithe.jpg" /></a>
        </div>
      </div>
      <div class="caption">
        <h3><a href="steward-electronicgiving">Signup for Automatic Electronic Tithe</a></h3>
      </div>
    </div>
  </div>
</div>

Feature Box with Round Images

Mass Schedule

Mass, confession, and adoration times at St. Andrew the Apostle

View the Schedule

Bulletin

Online bulletin, announcements, events and the pastor letter.

View the Bulletin

Calendar

See everything happening on the parish calendar by month, week, or day.

View the Calendar

Photo Gallery

View photo albums of parish events over the last few years.

View the Gallery 

<div class="row featurerow">
<div class="col-xs-12 col-sm-6 col-lg-3">
  <div class="featurebox">
    <div class="icon">
      <div class="image" style="background: transparent url(uploads/images/features/featurecommunion.jpg) center center / cover;"></div>
      <div class="info">
        <h3 class="title">Mass Schedule</h3>
<p>Mass, confession, and adoration times at St. Andrew the Apostle</p>
<div class="more"><a href="mass-times-office-hours">View the Schedule <i class="fa fa-angle-double-right"></i></a></div>
      </div>
    </div>
    <div class="space"></div>
  </div> 
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
  <div class="featurebox">
    <div class="icon">
      <div class="image" style="background: transparent url(uploads/images/features/featurebulletin.jpg) center center / cover;"></div>
      <div class="info">
        <h3 class="title">Bulletin</h3>
<p>Online bulletin, announcements, events and the pastor letter.</p>
<div class="more"><a href="parish-bulletin-and-news">View the Bulletin <i class="fa fa-angle-double-right"></i></a></div>
      </div>
    </div>
    <div class="space"></div>
  </div> 
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
  <div class="featurebox">
    <div class="icon">
      <div class="image" style="background: transparent url(uploads/images/features/featurecalendar.jpg) center center / cover;"></div>
      <div class="info">
        <h3 class="title">Calendar</h3>
<p>See everything happening on the parish calendar by month, week, or day.</p>
<div class="more"><a href="calendar">View the Calendar <i class="fa fa-angle-double-right"></i></a></div>
      </div>
    </div>
    <div class="space"></div>
  </div> 
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
  <div class="featurebox">
    <div class="icon">
      <div class="image" style="background: transparent url(uploads/images/features/featuregallery.jpg) center center / cover;"></div>
      <div class="info">
        <h3 class="title">Photo Gallery</h3>
<p>View photo albums of parish events over the last few years.</p>
<div class="more"><a href="http://standrew-cfc.phanfare.com/">View the Gallery <i class="fa fa-angle-double-right"></i></a></div>
      </div>
    </div>
    <div class="space"></div>
  </div> 
</div>
</div>

Feature Box with Hover Shadow

Mass Schedule

Mass and Confession times and office hours

View Schedule

Online Bulletin

Read the bulletin and find out what's happening

View Bulletin

Parish Calendar

Check out the parish calendar for details on meetings

View Calendar

Photo Gallery

View photos from past parish events

View Gallery

<div class="row featurerow">
<div class="col-xs-12 col-sm-6 col-lg-3">
    <div class="featurebox-shadow">
      <div class="thumbnail-img">
          <a href="about-masstimes"><img class="img-responsive" src="uploads/images/features/featurecrucifix.jpg" /></a>
      </div>
      <div class="caption">
        <h3><a href="about-masstimes">Mass Schedule</a></h3>
        <p>Mass and Confession times and office hours</p>
        <p><a class="btn btn-primary" href="about-masstimes">View Schedule</a></p>
      </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
    <div class="featurebox-shadow">
      <div class="thumbnail-img">
          <a href="bulletin"><img class="img-responsive" src="uploads/images/features/featurebulletin.jpg" /></a>
      </div>
      <div class="caption">
        <h3><a href="bulletin">Online Bulletin</a></h3>
        <p>Read the bulletin and find out what's happening</p>
        <p><a class="btn btn-primary" href="bulletin">View Bulletin</a></p>
      </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
    <div class="featurebox-shadow">
      <div class="thumbnail-img">
          <a href="calendar"><img class="img-responsive" src="uploads/images/features/featurecalendar.jpg" /></a>
      </div>
      <div class="caption">
        <h3><a href="calendar">Parish Calendar</a></h3>
        <p>Check out the parish calendar for details on meetings</p>
        <p><a class="btn btn-primary" href="calendar">View Calendar</a></p>
      </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-lg-3">
    <div class="featurebox-shadow">
      <div class="thumbnail-img">
          <a href="photo-gallery"><img class="img-responsive" src="uploads/images/features/featuregallery.jpg" /></a>
      </div>
      <div class="caption">
        <h3><a href="photo-gallery">Photo Gallery</a></h3>
        <p>View photos from past parish events</p>
        <p><a class="btn btn-primary" href="photo-gallery">View Gallery</a></p>
      </div>
    </div>
</div>
</div>