index.html

---
template: index
---

<!DOCTYPE html>
<html class="is-index" data-template="index">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>{{site.title}} - {{site.subtitle}}</title>
    <meta name="description" content="{{site.description}}">

    <link rel="stylesheet" type="text/css" href="{{site.url}}/css/website.css?v={{ site.time | date: "%Y%m%d%H%M" }}">

    <meta property="og:url" content="{{site.url}}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{site.title}}">
    <meta property="og:image" content="{{site.url}}/images/css-reference-share.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="{{site.description}}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@jgthms">
    <meta name="twitter:creator" content="@jgthms">
    <meta name="twitter:title" content="{{site.title}}">
    <meta name="twitter:image" content="{{site.url}}/images/css-reference-share.png">
    <meta name="twitter:description" content="{{site.description}}">

    {% include favicons.html %}
  </head>
  <body>
    <header class="header">
      <div class="container">
        <h1 class="header-figure">
          <img src="{{site.url}}/images/css-reference-icon.png" alt="{{site.title}} icon">
          <img src="{{site.url}}/images/css-reference-type.png" alt="{{site.title}} type">
        </h1>
        <div class="header-content">
          <div class="header-carbon">
            {% include carbon.html %}
          </div>
          <div class="header-text">
            <h2 class="header-title">
              {{site.subtitle}}
            </h2>
            <p class="header-subtitle">
              <strong>Learn by example</strong>: <a href="{{site.url}}">cssreference.io</a> is a free visual guide to CSS. It features the most popular <strong>properties</strong>, and explains them with illustrated and animated <strong>examples</strong>.
            </p>
            <footer class="header-share">
              {% include social/button-twitter.html %}
              {% include social/button-facebook.html %}
            </footer>
          </div>
        </div>
      </div>
    </header>
    {% include ff.html %}
    <main class="index">
      <nav class="index-collections">
        <strong>Collections:</strong>
        <a href="{{site.url}}/animations/">Animations</a>
        <a href="{{site.url}}/backgrounds/">Backgrounds</a>
        <a href="{{site.url}}/box-model/">Box model</a>
        <a href="{{site.url}}/flexbox/">Flexbox</a>
        <a class="is-new" href="{{site.url}}/css-grid/">CSS Grid <span class="tag">New!</span></a>
        <a href="{{site.url}}/positioning/">Positioning</a>
        <a href="{{site.url}}/transitions/">Transitions</a>
        <a href="{{site.url}}/typography/">Typography</a>
      </nav>
      <div class="container">
        <div class="index-left">
          {% include components/finder.html %}
        </div>
      </div>
    </main>
    {% include sister.html %}
    {% include modals/share.html %}
    {% include google-fonts.html %}
    <script src="{{site.url}}/javascript/clipboard.min.js"></script>
    <script src="{{site.url}}/javascript/main.js"></script>
    {% include noscript.html %}
  </body>
</html>