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 = "#content" class = "btn btn-primary btn-lg" > Demo< / a >
< a href = "https://github.com/picturepan2/instagram.css" target = "_blank" class = "btn btn-primary btn-lg" > GitHub< / a >
< / p >
< p > < a href = "https://www.paypal.me/picturepan2" target = "_blank" > PayPal Donate< / a > < / 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-11-20 12:38:36 +01:00
< div id = "content" class = "section section-device" >
< div class = "container grid-xl text-center" >
< div class = "columns" >
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-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-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-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-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-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-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-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-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-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-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-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-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 >
< 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 >
< 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-willow" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Willow< / 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-walden" >
< img src = "assets/img/instagram-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Walden< / 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-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" >
< div id = "copyright" class = "grid-footer container grid-lg" >
< p > < a href = "https://github.com/picturepan2/emoji.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 >
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 >