pixelfed
/
instagram.css
mirror of https://github.com/pixelfed/instagram.css


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Instagram.css - Pure CSS Instagram filters</title>
  <!-- Spectre.css CSS -->
  <link rel="stylesheet" href="assets/css/spectre.min.css">
  <link rel="stylesheet" href="assets/css/demo.min.css">
  <link rel="stylesheet" href="dist/instagram.css">
</head>
<body>
  <div class="section section-hero">
    <div id="overview" class="grid-hero container grid-lg text-center">
      <h1>Instagram.css</h1>
      <h2>Complete set of Instagram filters in pure CSS</h2> 
      <p>
        <a href="https://github.com/picturepan2/instagram.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
        <a href="https://www.paypal.me/picturepan2" target="_blank" class="btn btn-link btn-lg">PayPal Donate</a>
      </p>
    </div>
  </div>

  <div class="section section-ad">
    <div class="hide-md">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- GitHub-lg -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9894180784"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="show-md">
      <!-- GitHub-sm -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:300px;height:250px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9278881734"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>

  <div class="section section-filters">
    <div class="container grid-xl text-center">
      <div class="columns">

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Normal</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-1977">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">1977</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-aden">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Aden</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-amaro">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Amaro</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-ashby">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Ashby</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-brannan">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Brannan</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-brooklyn">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Brooklyn</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-charmes">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Charmes</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-clarendon">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Clarendon</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-crema">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Crema</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-dogpatch">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Dogpatch</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-earlybird">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Earlybird</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-gingham">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Gingham</span>
            </div>
          </div>
        </div>
        
        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-ginza">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Ginza</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-hefe">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Hefe</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-helena">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Helena</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-hudson">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Hudson</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-inkwell">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Inkwell</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-kelvin">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Kelvin</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-juno">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Juno</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-lark">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Lark</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-lofi">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Lo-Fi</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-ludwig">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Ludwig</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-maven">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Maven</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-mayfair">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Mayfair</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-moon">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Moon</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-nashville">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Nashville</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-perpetua">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Perpetua</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-poprocket">
              <img src="assets/img/instagram.jpg" class="img-responsive"/>
            </div>
            <div class="card-header">
              <span class="h6">Poprocket</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-reyes">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Reyes</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-rise">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Rise</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-sierra">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Sierra</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-skyline">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Skyline</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-slumber">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Slumber</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-stinson">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Stinson</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-sutro">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Sutro</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-toaster">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Toaster</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-valencia">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Valencia</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-vesper">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Vesper</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-walden">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Walden</span>
            </div>
          </div>
        </div>

        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-willow">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">Willow</span>
            </div>
          </div>
        </div>
        
        <div class="column col-2 col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <div class="card-image filter-xpro-ii">
              <img src="assets/img/instagram.jpg" class="img-responsive">
            </div>
            <div class="card-header">
              <span class="h6">X-Pro II</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="section section-ad">
    <div class="hide-md">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- GitHub-lg -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9894180784"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="show-md">
      <!-- GitHub-sm -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:300px;height:250px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9278881734"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>

  <footer class="section section-footer">
    <div id="copyright" class="grid-footer container grid-lg text-center">
      <p><a href="https://github.com/picturepan2/instagram.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
      <p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/devices.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
    </div>
  </footer>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2702768-11"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-2702768-11');
  </script>
</body>
</html>