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 >
< h2 > Pure CSS Instagram filters< / 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" >
< div class = "column col-3 col-md-6 col-sm-12" >
< 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 >
< div class = "column col-3 col-md-6 col-sm-12" >
< 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 07:28:57 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Brooklyn< / span >
< / div >
< / div >
< / div >
2017-11-20 13:59:45 +01:00
< 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Clarendon< / span >
< / 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Hudson< / span >
< / 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Moon< / span >
< / 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Willow< / span >
< / 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-example.jpg" class = "img-responsive" >
< / div >
< div class = "card-header" >
< span class = "h6" > Walden< / span >
< / 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-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 >
<!-- 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-9', 'auto');
ga('send', 'pageview');
< / script >
< / body >
< / html >