documentation.css

.landing-page > section {
  margin-bottom: 80px;
}
.section-header {
  margin: 50px 0;
}

.section-features .icon-container {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 45px;
    text-align: center;
    border-radius: 50%;
    border: 2px #04a404 solid;
  	color: #04a404;
}

.feature-header {
  margin: 30px 0;
}

.section-about .member-headshot{
  height: 140px;
}

.social-icon-list {
  font-size: 26px;
}

.learning-resource {
  background: #f5f5f5;
  border-bottom: 3px solid #87b8e2;
  height: 200px;
}

documentation.html

<div class="landing-page">
  <section class="section-features text-center">
    <h2 class="section-header">TestStack Projects</h2>

    <div class="row">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="icon-container">
          <div class="icon fa fa-bars"></div>
        </div>

        <h3 class="feature-header">BDDfy</h3>

        <p>BDDfy is a simple and fully featured BDD framework that makes it
        easy to turn your unit tests into living documentation. It works with
        any testing framework and test runner.</p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="icon-container">
          <div class="icon fa fa-bars"></div>
        </div>

        <h3 class="feature-header">White</h3>

        <p>White is a framework for automating rich client applications.
        Tests/automation programs can be written in any .NET language and do
        not require the use of proprietary scripting languages.</p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="icon-container">
          <div class="icon fa fa-bars"></div>
        </div>

        <h3 class="feature-header">Seleno</h3>

        <p>Seleno is a framework for automating web applications that uses
        Selenium for browser automation. It implements Page Objects and Page
        Components for reading and writing web page data using strongly typed
        view models.</p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="icon-container">
          <div class="icon fa fa-bars"></div>
        </div>

        <h3 class="feature-header">Fluent MVC Testing</h3>

        <p>The Fluent MVC Testing library provides a fluent interface for
        creating terse and expressive tests against ASP.NET MVC controllers.
        The motivation behind this library is to provide a way to test MVC
        actions quickly and maintainably.</p>
      </div>

      <div class="col-md-4 col-sm-6 col-xs-12">
        <div class="icon-container">
          <div class="icon fa fa-bars"></div>
        </div>

        <h3 class="feature-header">Convention Tests</h3>

        <p>Convention over Configuration is a great way to cut down repetitive
        boilerplate code. ConventionTests is a code-only NuGet that provides a
        simple API to validate that your code adheres to your conventions.</p>
      </div>
    </div>
  </section>

  <section class="section-about text-center row">
    <div class="col-sm-6 col-md-6 col-xs-12">
      <h2 class="section-header">About TestStack</h2>

      <p>In 2012 Mehdi Khalili and Michael Whelan started TestStack with BDDfy,
      a simple yet powerful and extensible BDD framework for .Net. that Mehdi
      had created, and Seleno, another .Net framework for automated UI testing
      with Selenium. Since then, they have been joined by Krzysztof Kozmic,
      Jake Ginnivan and Rob Moore and the White, Fluent MVC Testing, and
      Convention Tests projects have been added.</p>

      <p>The goal of TestStack is to provide frameworks that support agile
      teams of developers, testers, and customers develop software in a "test
      first" approach (aligning with the left side of <a href=
      "http://www.michael-whelan.net/introducing-teststack/">Marick's
      Quadrant</a>). These tests promote the "testing as design" mindset, and
      tend to be automated. Things like unit and integration tests, acceptance
      tests, and UI tests and methodologies like Behaviour Driven Development
      and Acceptance Test Driven Development.</p>
    </div>

    <div class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1 col-xs-12">
      <div class="row">
        <div class="col-md-6">
          <img class="member-headshot img-circle" src=
          "//teststack.net/assets/images/team/mehdi.png">

          <h4>Mehdi Khalili</h4>

          <p>Brisbane</p>

          <ul class="social-icon-list list-inline">
            <li>
              <a class="fa fa-twitter" href=
              "http://twitter.com/MehdiKhalili"></a>
            </li>

            <li>
              <a class="fa fa-link" href="http://www.mehdi-khalili.com/"></a>
            </li>

            <li>
              <a class="fa fa-github" href="http://github.com/MehdiK"></a>
            </li>
          </ul>
        </div>

        <div class="col-md-6">
          <img class="member-headshot img-circle" src=
          "//teststack.net/assets/images/team/michael.png">

          <h4>Michael Whelan</h4>

          <p>London</p>

          <ul class="social-icon-list list-inline">
            <li>
              <a class="fa fa-twitter" href="http://twitter.com/mjmwhelan"></a>
            </li>

            <li>
              <a class="fa fa-link" href="http://www.michael-whelan.net/"></a>
            </li>

            <li>
              <a class="fa fa-github" href="http://github.com/mwhelan"></a>
            </li>
          </ul>
        </div>

        <div class="col-md-6">
          <img class="member-headshot img-circle" src=
          "//teststack.net/assets/images/team/jake.jpeg">

          <h4>Jake Ginnivan</h4>

          <p>London</p>

          <ul class="social-icon-list list-inline">
            <li>
              <a class="fa fa-twitter" href=
              "http://twitter.com/JakeGinnivan"></a>
            </li>

            <li>
              <a class="fa fa-link" href="http://jake.ginnivan.net/"></a>
            </li>

            <li>
              <a class="fa fa-github" href=
              "http://github.com/JakeGinnivan"></a>
            </li>
          </ul>
        </div>

        <div class="col-md-6">
          <img class="member-headshot img-circle" src=
          "//teststack.net/assets/images/team/rob.jpg">

          <h4>Rob Moore</h4>

          <p>Perth</p>

          <ul class="social-icon-list list-inline">
            <li>
              <a class="fa fa-twitter" href="http://twitter.com/robdmoore"></a>
            </li>

            <li>
              <a class="fa fa-link" href="http://robdmoore.id.au/"></a>
            </li>

            <li>
              <a class="fa fa-github" href="http://github.com/robdmoore"></a>
            </li>
          </ul>
        </div>

        <div class="col-md-6">
          <img class="member-headshot img-circle" src=
          "//teststack.net/assets/images/team/krzysztof.jpg">

          <h4>Krzysztof Koźmic</h4>

          <p>Brisbane</p>

          <ul class="social-icon-list list-inline">
            <li>
              <a class="fa fa-twitter" href="http://twitter.com/kkozmic"></a>
            </li>

            <li>
              <a class="fa fa-link" href="http://kozmic.net/"></a>
            </li>

            <li>
              <a class="fa fa-github" href="http://github.com/kkozmic"></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="section-learn">
    <h2 class="section-header text-center">Learn More</h2>

    <div class="row">
      <div class="learning-resource col-md-6">
        <h3>TestStack Documentation</h3>

        <p>We aspire to have comprehensive documentation for all of our
        projects, but we can always use help. If you would like to contribute
        please read <a href=
        "http://docs.teststack.net/Contributing.html">Contributing to
        TestStack</a> for more information.</p><a class="btn btn-primary" href=
        "http://docs.teststack.net/">TestStack Documentation</a>
      </div>

      <div class="learning-resource col-md-6">
        <h3>Pluralsight</h3>

        <p><a href="https://twitter.com/robertsjason">Jason Roberts</a> has a
        couple of awesome Pluralsight courses about TestStack that will
        accelerate your learning.</p>
      </div>

      <div class="learning-resource col-md-6">
        <h3>NDC Oslo 2012</h3>

        <p>Krzysztof Koźmic spoke about ConventionTests at NDC 2012. You can
        find the slides <a href="http://kozmic.pl/presentations/">here</a> and
        the introductory blog post <a href=
        "http://kozmic.pl/2012/06/14/using-conventiontests/">here</a>.</p><a class="btn btn-primary"
        href="http://vimeo.com/43676874">Video on Vimeo</a>
      </div>
    </div>
  </section>
</div>