Topics in Gerontology Boxes

topics.html

<section class="fancy">
  <article>
  <header>
  <h3><span><!-- heading --></span></h3>
  </header>
  <p><!-- content here --></p>
  </article>
</section>

<section class="fancy meet-the-faculty">
  <article>
    <header>
      <h3><span>Meet the Faculty</span></h3>
      <h4><!-- faculty name --></h4>
    </header>
    <img alt="" class="floatleft" height="160" src="http://ogg.osu.edu/media/images/staff/" width="160" />
    <p><!-- faculty bio --></p>
  </article>
</section>

<section class="fancy research-into-practice">
  <article>
  <header>
  <h3><span>Putting Research into Practice</span></h3>
  </header>
  <p><!-- content here --></p>
  </article>
</section>

<section class="fancy reflection-and-growth">
  <article>
  <header>
  <h3><span>Reflection and Growth</span></h3>
  </header>
  <p><!-- content here --></p>
  </article>
</section>

<section class="fancy spirituality-case-study">
  <article>
  <header>
  <h3><span><small>In Our Everyday World . . .</small><br />"Spirituality in Nature"</span></h3>
  </header>
  <p><!-- content --></p>
  </article>
</section>

<section class="fancy resources">
  <article>
  <header>
  <h3><span>Resources</span></h3>
  </header>
  <p><!-- content --></p>
  </article>
</section>

<section class="fancy food-for-thought">
  <article>
  <header>
  <h3><span>Food for Thought</span></h3>
  </header>
  <!-- content goes here -->
  </article>
</section>

<section class="fancy key-point">
  <article>
  <header>
  <h3><span>Key Point</span></h3>
  </header>
  <!-- content goes here -->
  </article>
</section>

<section class="fancy important-point">
  <article>
  <header>
  <h3><span>Important Point!</span></h3>
  </header>
  <!-- content goes here -->
  </article>
</section>

<section class="fancy video-clip">
  <article>
    <header>
      <h3>Video Clip</h3>
      <p>Take a few moments to watch a short video on this topic before moving on.</p>
    </header>
    <!-- YouTube Embed code here -->
  </article>
</section>

<section class="fancy interactive">
  <article>
    <p><!-- content --></p>
    <p><a class="simple_interactive" href="#1"><!-- interactive content --></a></p>
    <p class="interactive_feedback"><span style="color: #ff0000;"><!-- feedback content --></span></p>
  </article>
</section>

<section class="fancy reflection">
  <article>
  <header>
  <h3><span>Questions for Reflection:</span></h3>
  </header>
  <div class="clearfix">
    <p><!-- question for reflection --></p>
    <div class="simple_interactive">
      <form action="#" method="get">
        <!-- form elements -->
        <textarea name="interactive" cols="55" rows="4" class="span6"></textarea><br />
        <input type="submit" name="submit" value="Get Feedback" /></br />
        <div class="feedback">
          <p><!-- feedback --></p>
        </div>
      </form>
    </div>
  </div>
  </article>
</section>

<section class="fancy case-study">
  <article>
  <header>
  <h3><span>Case Study</span></h3>
  </header>
  <div class="clearfix">
  <img alt="" class="floatleft" src="http://ogg.osu.edu/media/images/" width="280" height="273" />
  <p></p>
  </div>
  <div class="clearfix">
    <h4>Questions for Reflection:</h4>
    <p><!-- question for reflection --></p>
    <div class="simple_interactive">
      <form action="#" method="get">
        <!-- form elements -->
        <textarea name="interactive" cols="55" rows="4" class="span6"></textarea><br />
        <input type="submit" name="submit" value="Get Feedback" /></br />
        <div class="feedback">
          <p><!-- feedback --></p>
        </div>
      </form>
    </div>
  </div>
  </article>
</section>