2017-11-20 12:38:36 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2020-02-10 17:09:29 +01:00
< meta http-equiv = "x-ua-compatible" content = "ie=edge" >
2017-11-20 12:38:36 +01:00
< meta name = "robots" content = "index, follow" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >
2020-02-10 17:09:29 +01:00
< meta name = "description" content = "All Instagram filter effects in CSS. Complete set of Instagram filters in pure CSS. Preview all Instagram filters." >
2017-11-20 12:38:36 +01:00
< title > Instagram.css - Pure CSS Instagram filters< / title >
2018-11-18 08:25:58 +01:00
< link rel = "canonical" href = "https://picturepan2.github.io/instagram.css" >
2017-11-20 12:38:36 +01:00
<!-- Spectre.css CSS -->
< link rel = "stylesheet" href = "assets/css/spectre.min.css" >
< link rel = "stylesheet" href = "assets/css/demo.min.css" >
2018-11-18 08:09:21 +01:00
<!-- Instagram.css CSS -->
< link rel = "stylesheet" href = "dist/instagram.min.css" >
2017-11-20 12:38:36 +01:00
< / head >
< body >
2018-11-18 08:09:21 +01:00
< div class = "section section-ad bg-gray" >
2017-11-20 14:09:05 +01:00
< 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 >
2020-02-10 17:09:29 +01:00
< 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 >
2017-12-25 13:43:37 +01:00
< div class = "section section-filters" >
2018-11-18 08:09:21 +01:00
< 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" >
2020-02-10 17:09:29 +01:00
< script async src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" > < / script >
<!-- github - vertical - sm -->
< ins class = "adsbygoogle"
style="display:inline-block;width:120px;height:240px"
data-ad-client="ca-pub-2225124559530218"
data-ad-slot="5087273059">< / ins >
< script >
(adsbygoogle = window.adsbygoogle || []).push({});
< / script >
2018-11-18 08:09:21 +01:00
< / div >
< / div >
< div class = "section section-filters" >
< div class = "container grid-lg text-center" >
2017-11-20 12:38:36 +01:00
< div class = "columns" >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-20 12:38:36 +01:00
< div class = "card" >
< div class = "card-image" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 12:38:36 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Normal< / div >
< div class = "text-gray c-select-all" > < / div >
2017-11-20 12:38:36 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-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" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 12:38:36 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > 1977< / div >
< div class = "text-gray c-select-all" > filter-1977< / div >
2017-11-20 12:38:36 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 14:05:55 +01:00
< div class = "card" >
< div class = "card-image filter-aden" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 14:05:55 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Aden< / div >
< div class = "text-gray c-select-all" > filter-aden< / div >
2017-11-21 14:05:55 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-amaro" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Amaro< / div >
< div class = "text-gray c-select-all" > filter-amaro< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-ashby" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Ashby< / div >
< div class = "text-gray c-select-all" > filter-ashby< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-brannan" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Brannan< / div >
< div class = "text-gray c-select-all" > filter-brannan< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 07:28:57 +01:00
< div class = "card" >
< div class = "card-image filter-brooklyn" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 07:28:57 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Brooklyn< / div >
< div class = "text-gray c-select-all" > filter-brooklyn< / div >
2017-11-21 07:28:57 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-charmes" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Charmes< / div >
< div class = "text-gray c-select-all" > filter-charmes< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-clarendon" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Clarendon< / div >
< div class = "text-gray c-select-all" > filter-clarendon< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 14:05:55 +01:00
< div class = "card" >
< div class = "card-image filter-crema" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 14:05:55 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Crema< / div >
< div class = "text-gray c-select-all" > filter-crema< / div >
2017-11-21 14:05:55 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-dogpatch" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Dogpatch< / div >
< div class = "text-gray c-select-all" > filter-dogpatch< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-earlybird" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Earlybird< / div >
< div class = "text-gray c-select-all" > filter-earlybird< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 07:46:42 +01:00
< div class = "card" >
< div class = "card-image filter-gingham" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 07:46:42 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Gingham< / div >
< div class = "text-gray c-select-all" > filter-gingham< / div >
2017-11-21 07:46:42 +01:00
< / div >
< / div >
< / div >
2017-12-25 13:40:44 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-ginza" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Ginza< / div >
< div class = "text-gray c-select-all" > filter-ginza< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-hefe" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Hefe< / div >
< div class = "text-gray c-select-all" > filter-hefe< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-helena" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Helena< / div >
< div class = "text-gray c-select-all" > filter-helena< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-hudson" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Hudson< / div >
< div class = "text-gray c-select-all" > filter-hudson< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-inkwell" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Inkwell< / div >
< div class = "text-gray c-select-all" > filter-inkwell< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-kelvin" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Kelvin< / div >
< div class = "text-gray c-select-all" > filter-kelvin< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 10:36:19 +01:00
< div class = "card" >
< div class = "card-image filter-juno" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 10:36:19 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Juno< / div >
< div class = "text-gray c-select-all" > filter-juno< / div >
2017-11-21 10:36:19 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 10:12:20 +01:00
< div class = "card" >
< div class = "card-image filter-lark" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 10:12:20 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Lark< / div >
< div class = "text-gray c-select-all" > filter-lark< / div >
2017-11-21 10:12:20 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-lofi" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Lo-Fi< / div >
< div class = "text-gray c-select-all" > filter-lofi< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 14:05:55 +01:00
< div class = "card" >
< div class = "card-image filter-ludwig" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 14:05:55 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Ludwig< / div >
< div class = "text-gray c-select-all" > filter-ludwig< / div >
2017-11-21 14:05:55 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-maven" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Maven< / div >
< div class = "text-gray c-select-all" > filter-maven< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-mayfair" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Mayfair< / div >
< div class = "text-gray c-select-all" > filter-mayfair< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-moon" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Moon< / div >
< div class = "text-gray c-select-all" > filter-moon< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-nashville" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Nashville< / div >
< div class = "text-gray c-select-all" > filter-nashville< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-perpetua" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Perpetua< / div >
< div class = "text-gray c-select-all" > filter-perpetua< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2018-01-03 04:40:47 +01:00
< div class = "card" >
< div class = "card-image filter-poprocket" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" / >
2018-01-03 04:40:47 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Poprocket< / div >
< div class = "text-gray c-select-all" > filter-poprocket< / div >
2018-01-03 04:40:47 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 10:36:19 +01:00
< div class = "card" >
< div class = "card-image filter-reyes" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 10:36:19 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Reyes< / div >
< div class = "text-gray c-select-all" > filter-reyes< / div >
2017-11-21 10:36:19 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-rise" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Rise< / div >
< div class = "text-gray c-select-all" > filter-rise< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-sierra" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Sierra< / div >
< div class = "text-gray c-select-all" > filter-sierra< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-skyline" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Skyline< / div >
< div class = "text-gray c-select-all" > filter-skyline< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-21 10:36:19 +01:00
< div class = "card" >
< div class = "card-image filter-slumber" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-21 10:36:19 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Slumber< / div >
< div class = "text-gray c-select-all" > filter-slumber< / div >
2017-11-21 10:36:19 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-stinson" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Stinson< / div >
< div class = "text-gray c-select-all" > filter-stinson< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-sutro" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Sutro< / div >
< div class = "text-gray c-select-all" > filter-sutro< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-toaster" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Toaster< / div >
< div class = "text-gray c-select-all" > filter-toaster< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-valencia" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Valencia< / div >
< div class = "text-gray c-select-all" > filter-valencia< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-12-25 13:40:44 +01:00
< div class = "card" >
< div class = "card-image filter-vesper" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-12-25 13:40:44 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Vesper< / div >
< div class = "text-gray c-select-all" > filter-vesper< / div >
2017-12-25 13:40:44 +01:00
< / div >
< / div >
< / div >
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-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" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Walden< / div >
< div class = "text-gray c-select-all" > filter-walden< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-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" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > Willow< / div >
< div class = "text-gray c-select-all" > filter-willow< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2017-12-23 15:50:35 +01:00
2018-11-18 08:09:21 +01:00
< div class = "column col-3 col-md-6 col-sm-12" >
2017-11-20 13:59:45 +01:00
< div class = "card" >
< div class = "card-image filter-xpro-ii" >
2020-02-10 17:09:29 +01:00
< img src = "assets/img/instagram.jpg" class = "img-responsive" alt = "Instagram.css - Pure CSS Instagram filter" >
2017-11-20 13:59:45 +01:00
< / div >
< div class = "card-header" >
2018-11-18 08:09:21 +01:00
< div class = "h5" > X-Pro II< / div >
< div class = "text-gray c-select-all" > filter-xpro-ii< / div >
2017-11-20 13:59:45 +01:00
< / div >
< / div >
< / div >
2018-01-03 04:40:47 +01:00
2017-11-20 12:38:36 +01:00
< / div >
< / div >
< / div >
2017-11-20 14:09:05 +01:00
2018-11-18 08:09:21 +01:00
< div class = "section section-ad bg-gray" >
2017-11-20 12:38:36 +01:00
< 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 >
2018-11-18 08:09:21 +01:00
< footer class = "section section-footer bg-gray" >
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 >
2018-06-20 17:23:06 +02:00
<!-- Google Analytics tracking code -->
2017-11-20 12:38:36 +01:00
< script >
2018-06-20 17:23:06 +02:00
(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');
2017-11-20 12:38:36 +01:00
< / script >
< / body >
< / html >