deblan-mirror/instagram.css
1
0
Fork 0
mirror of https://github.com/picturepan2/instagram.css synced 2024-06-18 13:45:10 +02:00
Code Issues Projects Releases Wiki Activity

Update

Browse source
This commit is contained in:
Yan Zhu 2020-02-11 00:09:29 +08:00
parent f4c41aeb7b
commit b08f80f057
4 changed files with 69 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/css/demo.css
View file

@ -15,7 +15,7 @@
.section-filters .container {
padding-bottom: 3rem;
padding-top: 2rem;
padding-top: 3rem;
}
.section-filters .column {
@ -69,7 +69,7 @@
.grid-hero h1 {
color: #303742;
font-size: 1.6rem;
font-weight: 600;
font-weight: 700;
margin-bottom: 1rem;
}
@ -91,26 +91,6 @@
position: relative;
}
.docs-ad ins {
line-height: 1;
vertical-align: middle;
}
.docs-ad .carbon-wrap .carbon-img {
display: block;
}
.docs-ad .carbon-wrap .carbon-text {
color: #66758c;
display: block;
font-size: .6rem;
}
.docs-ad .carbon-poweredby {
color: #bcc3ce;
font-size: .6rem;
}
@media (min-width: 1366px) {
.docs-ad.docs-ad-sidebar {
bottom: 1rem;

2
assets/css/demo.min.css vendored
View file

@ -1 +1 @@
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.4"}.section-hero{padding:1.5rem .5rem}.section-ad{padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:2rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-filters .card-image img{-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem}.section-filters .c-select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.section-footer{color:#bcc3ce;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#66758c}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:3rem;position:relative}.grid-hero h1{color:#303742;font-size:1.6rem;font-weight:600;margin-bottom:1rem}.grid-hero h2{color:#3b4351;font-size:.9rem;font-weight:400;margin-bottom:1.5rem}.docs-ad{background:#f7f8f9;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem;display:block;margin:2rem 0;padding:.5rem;position:relative}.docs-ad ins{line-height:1;vertical-align:middle}.docs-ad .carbon-wrap .carbon-img{display:block}.docs-ad .carbon-wrap .carbon-text{color:#66758c;display:block;font-size:.6rem}.docs-ad .carbon-poweredby{color:#bcc3ce;font-size:.6rem}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem;z-index:99}}.code .hljs-tag{color:#455060}.code .hljs-comment{color:#bcc3ce}.code .hljs-class,.code .hljs-string,.code .hljs-title{color:#5755d9}.code .hljs-attribute,.code .hljs-built_in,.code .hljs-keyword,.code .hljs-name,.code .hljs-variable{color:#d73e48}.code .hljs-hexcolor,.code .hljs-value{color:#455060}
/*! Instagram.css v0.1.4 | MIT License | github.com/picturepan2/instagram.css */.version::after{content:"0.1.4"}.section-hero{padding:1.5rem .5rem}.section-ad{padding:1rem 0;text-align:center}.section-filters .container{padding-bottom:3rem;padding-top:3rem}.section-filters .column{padding:1rem}.section-filters .card{border:0}.section-filters .card-image{-webkit-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);-moz-box-shadow:0 .3rem 2rem rgba(51,51,51,.15);box-shadow:0 .3rem 2rem rgba(51,51,51,.15)}.section-filters .card-image img{-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem}.section-filters .c-select-all{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.section-footer{color:#bcc3ce;padding:1.8rem .75rem 1rem .75rem;position:relative}.section-footer p{line-height:1}.section-footer a{color:#66758c}.grid-hero{letter-spacing:-.021em;padding-bottom:2rem;padding-top:3rem;position:relative}.grid-hero h1{color:#303742;font-size:1.6rem;font-weight:700;margin-bottom:1rem}.grid-hero h2{color:#3b4351;font-size:.9rem;font-weight:400;margin-bottom:1.5rem}.docs-ad{background:#f7f8f9;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem;display:block;margin:2rem 0;padding:.5rem;position:relative}@media (min-width:1366px){.docs-ad.docs-ad-sidebar{bottom:1rem;margin:0;position:fixed;right:1rem;width:7.3rem;z-index:99}}.code .hljs-tag{color:#455060}.code .hljs-comment{color:#bcc3ce}.code .hljs-class,.code .hljs-string,.code .hljs-title{color:#5755d9}.code .hljs-attribute,.code .hljs-built_in,.code .hljs-keyword,.code .hljs-name,.code .hljs-variable{color:#d73e48}.code .hljs-hexcolor,.code .hljs-value{color:#455060}

26
assets/src/demo.scss
View file

@ -19,7 +19,7 @@
.section-filters {
.container {
padding-bottom: 3rem;
padding-top: 2rem;
padding-top: 3rem;
}
.column {
@ -66,7 +66,7 @@
h1 {
color: $dark-color;
font-size: 1.6rem;
font-weight: 600;
font-weight: 700;
margin-bottom: 1rem;
}
@ -85,28 +85,6 @@
margin: 2rem 0;
padding: .5rem;
position: relative;
ins {
line-height: 1;
vertical-align: middle;
}
.carbon-wrap {
.carbon-img {
display: block;
}
.carbon-text {
color: $gray-color-dark;
display: block;
font-size: .6rem;
}
}
.carbon-poweredby {
color: $gray-color;
font-size: .6rem;
}
}
@media (min-width: 1366px) {

120
index.html
View file

@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="Instagram.css - Pure CSS Instagram filters. Complete set of Instagram like filters in pure CSS.">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="All Instagram filter effects in CSS. Complete set of Instagram filters in pure CSS. Preview all Instagram filters.">
<title>Instagram.css - Pure CSS Instagram filters</title>
<link rel="canonical" href="https://picturepan2.github.io/instagram.css">
<!-- Spectre.css CSS -->
@ -15,17 +15,6 @@
<link rel="stylesheet" href="dist/instagram.min.css">
</head>
<body>
<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>
<div class="section section-ad bg-gray">
<div class="hide-md">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@ -50,6 +39,17 @@
</div>
</div>
<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>
<div class="section section-filters">
<div id="overview" class="grid-hero container grid-lg">
<h1 class="text-center">Getting started</h1>
@ -66,7 +66,15 @@
<div class="section section-ad bg-gray">
<div class="docs-ad docs-ad-sidebar text-center">
<script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
<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>
</div>
</div>
@ -77,7 +85,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Normal</div>
@ -89,7 +97,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-1977">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">1977</div>
@ -101,7 +109,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-aden">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Aden</div>
@ -113,7 +121,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-amaro">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Amaro</div>
@ -125,7 +133,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ashby">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Ashby</div>
@ -137,7 +145,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-brannan">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Brannan</div>
@ -149,7 +157,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Brooklyn</div>
@ -161,7 +169,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-charmes">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Charmes</div>
@ -173,7 +181,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Clarendon</div>
@ -185,7 +193,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-crema">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Crema</div>
@ -197,7 +205,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-dogpatch">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Dogpatch</div>
@ -209,7 +217,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-earlybird">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Earlybird</div>
@ -221,7 +229,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-gingham">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Gingham</div>
@ -233,7 +241,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ginza">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Ginza</div>
@ -245,7 +253,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-hefe">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Hefe</div>
@ -257,7 +265,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-helena">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Helena</div>
@ -269,7 +277,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Hudson</div>
@ -281,7 +289,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-inkwell">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Inkwell</div>
@ -293,7 +301,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-kelvin">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Kelvin</div>
@ -305,7 +313,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-juno">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Juno</div>
@ -317,7 +325,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-lark">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Lark</div>
@ -329,7 +337,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-lofi">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Lo-Fi</div>
@ -341,7 +349,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-ludwig">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Ludwig</div>
@ -353,7 +361,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-maven">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Maven</div>
@ -365,7 +373,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-mayfair">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Mayfair</div>
@ -377,7 +385,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Moon</div>
@ -389,7 +397,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-nashville">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Nashville</div>
@ -401,7 +409,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-perpetua">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Perpetua</div>
@ -413,7 +421,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-poprocket">
<img src="assets/img/instagram.jpg" class="img-responsive"/>
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter"/>
</div>
<div class="card-header">
<div class="h5">Poprocket</div>
@ -425,7 +433,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-reyes">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Reyes</div>
@ -437,7 +445,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-rise">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Rise</div>
@ -449,7 +457,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-sierra">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Sierra</div>
@ -461,7 +469,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-skyline">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Skyline</div>
@ -473,7 +481,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-slumber">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Slumber</div>
@ -485,7 +493,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-stinson">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Stinson</div>
@ -497,7 +505,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-sutro">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Sutro</div>
@ -509,7 +517,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-toaster">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Toaster</div>
@ -521,7 +529,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-valencia">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Valencia</div>
@ -533,7 +541,7 @@
<div class="column col-3 col-md-6 col-sm-12">
<div class="card">
<div class="card-image filter-vesper">
<img src="assets/img/instagram.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Vesper</div>
@ -545,7 +553,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Walden</div>
@ -557,7 +565,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">Willow</div>
@ -569,7 +577,7 @@
<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.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive" alt="Instagram.css - Pure CSS Instagram filter">
</div>
<div class="card-header">
<div class="h5">X-Pro II</div>