mirror of
https://github.com/picturepan2/instagram.css
synced 2024-06-11 10:22:14 +02:00
562 lines
19 KiB
HTML
562 lines
19 KiB
HTML
<!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>
|