deblan-mirror/instagram.css
1
0
Fork 0
mirror of https://github.com/picturepan2/instagram.css synced 2024-05-19 13:56:37 +02:00
Code Issues Projects Releases Wiki Activity

Update example photo name.

Browse source
This commit is contained in:
Yan Zhu 2018-01-03 14:45:32 +08:00
parent 876d4073ad
commit 19a73ee928
3 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -16,7 +16,7 @@ Go to [Demo page](https://picturepan2.github.io/instagram.css/) to copy the HTML
```
<figure class="filter-[filter-name]">
<img src="assets/img/instagram-example.jpg">
<img src="assets/img/instagram.jpg">
</figure>
```

0
assets/img/instagram-example.jpg → assets/img/instagram.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 187 KiB

84
index.html
View file

@ -54,7 +54,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Normal</span>
@ -65,7 +65,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-1977">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">1977</span>
@ -76,7 +76,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Aden</span>
@ -87,7 +87,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Amaro</span>
@ -98,7 +98,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Ashby</span>
@ -109,7 +109,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Brannan</span>
@ -120,7 +120,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-brooklyn">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Brooklyn</span>
@ -131,7 +131,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Charmes</span>
@ -142,7 +142,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-clarendon">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Clarendon</span>
@ -153,7 +153,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Crema</span>
@ -164,7 +164,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Dogpatch</span>
@ -175,7 +175,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Earlybird</span>
@ -186,7 +186,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-gingham">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Gingham</span>
@ -197,7 +197,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Ginza</span>
@ -208,7 +208,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Hefe</span>
@ -219,7 +219,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Helena</span>
@ -230,7 +230,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-hudson">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Hudson</span>
@ -241,7 +241,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Inkwell</span>
@ -252,7 +252,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Kelvin</span>
@ -263,7 +263,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Juno</span>
@ -274,7 +274,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Lark</span>
@ -285,7 +285,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Lo-Fi</span>
@ -296,7 +296,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Ludwig</span>
@ -307,7 +307,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Maven</span>
@ -318,7 +318,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Mayfair</span>
@ -329,7 +329,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-moon">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Moon</span>
@ -340,7 +340,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Nashville</span>
@ -351,7 +351,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Perpetua</span>
@ -362,7 +362,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-poprocket">
<img src="assets/img/instagram-example.jpg" class="img-responsive"/>
<img src="assets/img/instagram.jpg" class="img-responsive"/>
</div>
<div class="card-header">
<span class="h6">Poprocket</span>
@ -373,7 +373,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-reyes">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Reyes</span>
@ -384,7 +384,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Rise</span>
@ -395,7 +395,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Sierra</span>
@ -406,7 +406,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Skyline</span>
@ -417,7 +417,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Slumber</span>
@ -428,7 +428,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Stinson</span>
@ -439,7 +439,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Sutro</span>
@ -450,7 +450,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Toaster</span>
@ -461,7 +461,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Valencia</span>
@ -472,7 +472,7 @@
<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">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Vesper</span>
@ -483,7 +483,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-walden">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Walden</span>
@ -494,7 +494,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-willow">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">Willow</span>
@ -505,7 +505,7 @@
<div class="column col-2 col-md-3 col-sm-6 col-xs-12">
<div class="card">
<div class="card-image filter-xpro-ii">
<img src="assets/img/instagram-example.jpg" class="img-responsive">
<img src="assets/img/instagram.jpg" class="img-responsive">
</div>
<div class="card-header">
<span class="h6">X-Pro II</span>