2017-11-20 12:38:36 +01:00
<!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" >
2017-11-20 14:09:05 +01:00
< h1 > Instagram.css< / h1 >
2017-11-21 14:05:55 +01:00
< h2 > Complete set of Instagram filters in pure CSS< / h2 >
2017-11-20 12:38:36 +01:00
< p >
< a href = "https://github.com/picturepan2/instagram.css" target = "_blank" class = "btn btn-primary btn-lg" > GitHub< / a >
2017-12-23 15:50:35 +01:00
< a href = "https://www.paypal.me/picturepan2" target = "_blank" class = "btn btn-link btn-lg" > PayPal Donate< / a >
2017-11-20 12:38:36 +01:00
< / p >
< / div >
< / div >
2017-11-20 14:09:05 +01:00
< 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 >
2017-12-23 15:50:35 +01:00
< div id = "content" class = "section section-filters" >
2017-11-20 12:38:36 +01:00
< div class = "container grid-xl text-center" >
< div class = "columns" >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 12:38:36 +01:00
< div class = "card" >
< div class = "card-image" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Normal< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 12:38:36 +01:00
< div class = "card" >
2017-11-20 13:59:45 +01:00
< div class = "card-image filter-1977" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
2017-11-20 12:38:36 +01:00
< / div >
< div class = "card-header" >
< span class = "h6" > 1977< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 14:05:55 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Aden< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Brannan< / span >
< / div >
< / div >
< / div >
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-21 07:28:57 +01:00
< div class = "card" >
< div class = "card-image filter-brooklyn" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Brooklyn< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Charmes< / span >
< / div >
< / div >
< / div >
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-clarendon" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Clarendon< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 14:05:55 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Crema< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Earlybird< / span >
< / div >
< / div >
< / div >
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-21 07:46:42 +01:00
< div class = "card" >
< div class = "card-image filter-gingham" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Gingham< / span >
< / div >
< / div >
< / div >
2017-12-25 13:40:44 +01:00
< 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-example.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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Helena< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-hudson" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Hudson< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Kelvin< / span >
< / div >
< / div >
< / div >
2017-11-21 10:36:19 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Juno< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Lark< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Lo-Fi< / span >
< / div >
< / div >
< / div >
2017-11-21 14:05:55 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Ludwig< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Mayfair< / span >
< / div >
< / div >
< / div >
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-moon" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Moon< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Perpetua< / span >
< / div >
< / div >
< / div >
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-21 10:36:19 +01:00
< div class = "card" >
< div class = "card-image filter-reyes" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Reyes< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Skyline< / span >
< / div >
< / div >
< / div >
2017-11-21 10:36:19 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Slumber< / span >
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-12-25 13:40:44 +01:00
< 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-example.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-example.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-example.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-example.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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Vesper< / span >
< / div >
< / div >
< / div >
2017-11-21 10:36:19 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
2017-12-23 15:50:35 +01:00
< div class = "card-image filter-walden" >
2017-11-20 13:59:45 +01:00
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
2017-12-23 15:50:35 +01:00
< span class = "h6" > Walden< / span >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
2017-12-23 15:50:35 +01:00
< div class = "card-image filter-willow" >
2017-11-20 13:59:45 +01:00
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
2017-12-23 15:50:35 +01:00
< span class = "h6" > Willow< / span >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2017-11-21 10:12:20 +01:00
< div class = "column col-2 col-md-3 col-sm-6 col-xs-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-xpro-ii" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > X-Pro II< / span >
< / div >
< / div >
< / div >
2017-11-20 12:38:36 +01:00
< / div >
< / div >
< / div >
2017-11-20 14:09:05 +01:00
2017-11-20 12:38:36 +01:00
< 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" >
2017-12-25 13:40:44 +01:00
< 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 >
2017-11-20 12:38:36 +01:00
< 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 >
2017-11-26 07:06:18 +01:00
<!-- Global site tag (gtag.js) - Google Analytics -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-2702768-11" > < / script >
2017-11-20 12:38:36 +01:00
< script >
2017-11-26 07:06:18 +01:00
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-2702768-11');
2017-11-20 12:38:36 +01:00
< / script >
< / body >
< / html >