startbootstrap/_layouts/home.html

---
layout: default
---

{% include masthead/masthead-home.html %}

<section class="py-5 bg-light">
  <div class="mb-5 sb-nav-tabs-wrapper">
    <div class="container">
      <ul class="nav nav-tabs sb-nav-tabs border-0" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link nav-link-theme active" id="theme-tab" data-toggle="tab" href="#theme" role="tab" aria-controls="home" aria-selected="true">Popular Themes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-link-template" id="template-tab" data-toggle="tab" href="#template" role="tab" aria-controls="profile" aria-selected="false">Popular Templates</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-link-snippet" id="snippet-tab" data-toggle="tab" href="#snippet" role="tab" aria-controls="contact" aria-selected="false">Popular Snippets</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="tab-content mb-5 mb-lg-0" id="myTabContent">
          <div class="tab-pane fade show active" id="theme" role="tabpanel" aria-labelledby="theme-tab">
            <div class="row">
              {% assign themes_sorted = site.themes | sort: 'rank' %}
              {% for theme in themes_sorted limit: 8 %}
              <div class="col-md-6">
                <div class="item-preview mb-5">
                  {% if theme.update %}
                    <span class="badge badge-info position-absolute badge-pill" style="right: -.5rem; top: -.5rem; z-index: 999;">Updated!</span>
                  {% endif %}
                  <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ theme.src }}">
                    <img class="lazy img-fluid" data-src="{{ theme.img-thumbnail }}" alt="{{ theme.img-desc }}">
                  </a>
                  <div class="item-preview-title d-flex align-items-center">
                      {{ theme.title }}
                      {% if theme.pro %}
                      <span class='badge badge-warning ml-auto small badge-pill'>Pro</span>
                      {% else %}
                      <span class='badge badge-success ml-auto small badge-pill'>Free</span>
                      {% endif %}
                  </div>
                  <div class="item-preview-description">{{ theme.bump }}</div>
                </div>
              </div>
              {% endfor %}
              <div class="col-12 text-center">
                <a href="/themes/" class="btn btn-xl btn-theme shadow">Browse All Themes</a>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="template" role="tabpanel" aria-labelledby="template-tab">
            <div class="row">
              {% assign templates_sorted = site.templates | sort: 'rank' %}
              {% for template in templates_sorted limit: 8 %}
              <div class="col-md-6">
                <div class="item-preview mb-5">
                  <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ template.src }}">
                    <img class="lazy img-fluid" data-src="{{ template.img-thumbnail }}" alt="{{ template.img-desc }}">
                  </a>
                  <div class="item-preview-title d-flex align-items-center">
                      {{ template.title }}
                      {% if template.pro %}
                      <span class='badge badge-warning ml-auto small badge-pill'>Pro</span>
                      {% else %}
                      <span class='badge badge-success ml-auto small badge-pill'>Free</span>
                      {% endif %}
                  </div>
                  <div class="item-preview-description">{{ template.bump }}</div>
                </div>
              </div>
              {% endfor %}
              <div class="col text-center">
                <a href="/templates/" class="btn btn-xl btn-template shadow">Browse All Templates</a>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="snippet" role="tabpanel" aria-labelledby="snippet-tab">
            <div class="row">
              {% assign snippets_sorted = site.snippets | sort: 'rank' %}
              {% for snippet in snippets_sorted limit: 9 %}
              <div class="col-md-4">
                <div class="item-preview mb-5">
                  <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ snippet.src }}">
                    <img class="lazy img-fluid" data-src="{{ snippet.img-thumbnail }}" alt="{{ snippet.img-desc }}">
                  </a>
                  <div class="item-preview-title">{{ snippet.title }}</div>
                  <div class="item-preview-description">{{ snippet.bump }}</div>
                </div>
              </div>
              {% endfor %}
              <div class="col text-center">
                <a href="/snippets/" class="btn btn-xl btn-snippet text-white shadow">Browse All Snippets</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="carbon-inverse mb-4">
          {% include carbon.html %}
        </div>
        <div class="card border-0 shadow mb-4">
          <div class="card-header border-0 bg-success text-white py-3">
            <span class="font-weight-bold small"><i class="far fa-books"></i> Latest Guides &amp; Tutorials</span>
          </div>
          <div class="list-group list-group-flush">
            {% assign guides_sorted = site.guides | sort: 'date' | reverse %}
            {% for guide in guides_sorted limit: 4 %}
            {% assign timeframe = 1209600 %}
            {% assign post_in_seconds = guide.date | date: "%s" | plus: 0 %}
            {% assign recent_posts = "now" | date: "%s" | minus: timeframe %}
            <a href="{{ guide.src }}" class="list-group-item list-group-item-action py-3">
              <div class="mb-1">
                {% if post_in_seconds > recent_posts %}
                <span class="badge badge-pill badge-warning">New!</span>
                {% endif %}
                {% if guide.categories contains 'beginner' %}
                <span class="badge badge-pill badge-guide">Beginner Friendly</span>
                {% endif %}
                {% if guide.categories contains 'design' %}
                <span class="badge badge-pill badge-theme">Design</span>
                {% endif %}
                {% if guide.categories contains 'development' %}
                <span class="badge badge-pill badge-template">Development &amp; Code</span>
                {% endif %}
              </div>
              <div class="font-weight-bold mb-1">{{ guide.title }}</div>
              <div class="small mb-2">{{ guide.description }}</div>
              <div class="small text-muted">{{ guide.date | date: "%b %-d, %Y" }}</div>
            </a>
            {% endfor %}
          </div>
        </div>
        <div class="text-center mb-4">
          <a href="/guides" class="btn btn-guide btn-xl shadow">Browse All Guides</a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content }}