instagram.css
Version:
628 lines (576 loc) • 23.9 kB
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 name="description" content="Instagram.css - Pure CSS Instagram filters. Complete set of Instagram like filters in pure CSS.">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Instagram.css - Pure CSS Instagram filters</title>
<link rel="canonical" href="https://picturepan2.github.io/instagram.css">
<!-- Spectre.css CSS -->
<link rel="stylesheet" href="assets/css/spectre.min.css">
<link rel="stylesheet" href="assets/css/demo.min.css">
<!-- Instagram.css CSS -->
<link rel="stylesheet" href="dist/instagram.min.css">
</head>
<body>
<div class="section section-hero bg-gray">
<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-primary btn-lg">PayPal Donate</a>
</p>
</div>
</div>
<div class="section section-ad bg-gray">
<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 id="overview" class="grid-hero container grid-lg">
<h1 class="text-center">Getting started</h1>
<p>Download the compiled and minified <a href="https://github.com/picturepan2/instagram.css" target="_blank">Instagram.css files</a>. Include instagram.css located in /dist in your website or Web app <head> part.</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"instagram.min.css"</span>></span>
</code></pre>
<p>All filters use the same HTML structure with different <code>filter-[filter-name]</code> classes.</p>
<pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"filter-[filter-name]"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"assets/img/instagram.jpg"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</code></pre>
</div>
</div>
<div class="section section-ad bg-gray">
<div class="docs-ad docs-ad-sidebar text-center">
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script>
</div>
</div>
<div class="section section-filters">
<div class="container grid-lg text-center">
<div class="columns">
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Normal</div>
<div class="text-gray c-select-all"></div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-1977">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">1977</div>
<div class="text-gray c-select-all">filter-1977</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-aden">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Aden</div>
<div class="text-gray c-select-all">filter-aden</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-amaro">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Amaro</div>
<div class="text-gray c-select-all">filter-amaro</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ashby">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Ashby</div>
<div class="text-gray c-select-all">filter-ashby</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-brannan">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Brannan</div>
<div class="text-gray c-select-all">filter-brannan</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-brooklyn">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Brooklyn</div>
<div class="text-gray c-select-all">filter-brooklyn</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-charmes">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Charmes</div>
<div class="text-gray c-select-all">filter-charmes</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-clarendon">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Clarendon</div>
<div class="text-gray c-select-all">filter-clarendon</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-crema">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Crema</div>
<div class="text-gray c-select-all">filter-crema</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-dogpatch">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Dogpatch</div>
<div class="text-gray c-select-all">filter-dogpatch</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-earlybird">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Earlybird</div>
<div class="text-gray c-select-all">filter-earlybird</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-gingham">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Gingham</div>
<div class="text-gray c-select-all">filter-gingham</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ginza">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Ginza</div>
<div class="text-gray c-select-all">filter-ginza</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-hefe">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Hefe</div>
<div class="text-gray c-select-all">filter-hefe</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-helena">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Helena</div>
<div class="text-gray c-select-all">filter-helena</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-hudson">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Hudson</div>
<div class="text-gray c-select-all">filter-hudson</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-inkwell">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Inkwell</div>
<div class="text-gray c-select-all">filter-inkwell</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-kelvin">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Kelvin</div>
<div class="text-gray c-select-all">filter-kelvin</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-juno">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Juno</div>
<div class="text-gray c-select-all">filter-juno</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-lark">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Lark</div>
<div class="text-gray c-select-all">filter-lark</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-lofi">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Lo-Fi</div>
<div class="text-gray c-select-all">filter-lofi</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ludwig">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Ludwig</div>
<div class="text-gray c-select-all">filter-ludwig</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-maven">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Maven</div>
<div class="text-gray c-select-all">filter-maven</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-mayfair">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Mayfair</div>
<div class="text-gray c-select-all">filter-mayfair</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-moon">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Moon</div>
<div class="text-gray c-select-all">filter-moon</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-nashville">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Nashville</div>
<div class="text-gray c-select-all">filter-nashville</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-perpetua">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Perpetua</div>
<div class="text-gray c-select-all">filter-perpetua</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-poprocket">
<img src="assets/img/instagram.jpg" class="img-responsive"/>
</div>
<div class="card-header">
<div class="h5">Poprocket</div>
<div class="text-gray c-select-all">filter-poprocket</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-reyes">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Reyes</div>
<div class="text-gray c-select-all">filter-reyes</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-rise">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Rise</div>
<div class="text-gray c-select-all">filter-rise</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-sierra">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Sierra</div>
<div class="text-gray c-select-all">filter-sierra</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-skyline">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Skyline</div>
<div class="text-gray c-select-all">filter-skyline</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-slumber">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Slumber</div>
<div class="text-gray c-select-all">filter-slumber</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-stinson">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Stinson</div>
<div class="text-gray c-select-all">filter-stinson</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-sutro">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Sutro</div>
<div class="text-gray c-select-all">filter-sutro</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-toaster">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Toaster</div>
<div class="text-gray c-select-all">filter-toaster</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-valencia">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Valencia</div>
<div class="text-gray c-select-all">filter-valencia</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-vesper">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Vesper</div>
<div class="text-gray c-select-all">filter-vesper</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-walden">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Walden</div>
<div class="text-gray c-select-all">filter-walden</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-willow">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<div class="h5">Willow</div>
<div class="text-gray c-select-all">filter-willow</div>
</div>
</div>
</div>
<div class="column col-3 col-md-6 col-sm-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">
<div class="h5">X-Pro II</div>
<div class="text-gray c-select-all">filter-xpro-ii</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-ad bg-gray">
<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 bg-gray">
<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>
<!-- Google Analytics tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2702768-8', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>