Σήμερα θα δημιουργήσουμε με jquery. Δημιουργήστε ένα post που θα κάνει τους επισκέπτες σας να κολλήσουν με τις ώρες....
Το αρχείο με όλες τις εικόνες και τον κώδικα μπορείτε να το κατεβάσετε από το εξής link
Διαδικασία
Πάμε στην Διάταξη-> Δημιουργία νέου widget -> Προσθήκη HTML/JAVASCRIPT και κάνουμε αντιγραφή-επικόλληση τον παρακάτω κώδικα
Κώδικας
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<title>JQuery Memory Game</title>
<script type="text/javascript">
var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function shuffle() {
var children = $("#boxcard").children();
var child = $("#boxcard div:first-child");
var array_img = new Array();
for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}
var child = $("#boxcard div:first-child");
for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);
// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);
child = child.next();
}
}
function resetGame() {
shuffle();
$("img").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}
$(document).ready(function() {
$("img").hide();
$("#boxcard div").click(openCard);
shuffle();
function openCard() {
id = $(this).attr("id");
if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);
$("#"+id+" img").slideDown('fast');
if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 300);
} else {
currentopened = $("#"+id+" img").attr("src");
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideUp('fast');
$("#"+boxopened+" img").slideUp('fast');
boxopened = "";
imgopened = "";
}, 400);
} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 400);
}
count++;
$("#count").html("" + count);
if (found == 10) {
msg = '<span id="msg">Congrats ! You Found All Sushi With </span>';
$("span.link").prepend(msg);
}
}
}
});
</script>
<style type="text/css">
* {
font-family: Arial, "Free Sans";
}
#boxcard {
margin: 0 auto;
width: 625px;
z-index: 1;
}
#boxcard div {
float: left;
width: 100px;
height: 100px;
background: #d9d9d9;
margin: 5px;
padding: 5px;
border: 1px solid #999;
cursor: pointer;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
z-index: 2;
}
#boxcard div img {
border: none;
z-index: 3;
}
.opacity {
opacity: .6;
filter: alpha(opacity=60);
}
#boxbutton {
text-align: center;
padding: 20px;
}
.link {
font-size: 18px;
color: #ffffff;
text-decoration: none;
background: #0066cc;
padding: 5px 10px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.link:hover {
background: #999;
}
</style>
<div id="boxbutton">
<span class="link">
<span id="count">0</span>
Click
</span>
<a href="javascript:" class="link" onclick="resetGame();">Reset</a>
</div>
<div id="boxcard">
<div id="card1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe0ezAxgOcw7qLCQz8mxZ-IMDJ1IYbMMFgp-mEqe1nS81ojr5zDrPrHeJqY22zt8eK0q8jfmf97UJlN566ZufvxfpYhhmeFLixFsAcB5akdOk876gG4kZzilMJi9X9wAOGdQowKBz0vk/s1600/01.jpg" /></div>
<div id="card2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiQu-iJz5Zu_ZAuE9hJC3R-PJhW0XSRXb6-OHLHGCOtym2VkccP7eSDlAtmM7PvPU2XVBU9zafoihtydsGD6SmUhzGdzUwYPQYXH2WWro-C2oYbdMxgQXmazwLGcrzwcLQxzRA7jI1EI/s1600/02.jpg" /></div>
<div id="card3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJzazoE_PsWcwnVd68sJStwB3W_g-SJO-ck39jgEHQ5zx0bS7Mr54OeSxRDe2g2E5ItKuj98bTG5Os4mJNygT5o4J2bd8lXwCt7wc8NCpR2QITI6Ec6XgIesrp_I9o6BmsTsvpQbBr_I/s1600/03.jpg" /></div>
<div id="card4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZjRNYtgvNKW8VuC2Y5y8DsW9Q_LRBSDUPHD6mk3pFPe_egjfnoa-VhJEJLGoNOyVg6k_mppvmntApWUQrehrG-VZGCFYWQY2FIjtdZrXS87TXXKDqAJdq_WqdHlmpvHUiby4PCdS4_M/s1600/04.jpg" /></div>
<div id="card5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBAhw3Pg_MyOO6KdFLJcjZDoV8kVkDZiSRQu8v6SNc5uo-35F9clMlHvStgxljAMAFzfZqUQZfmqJFrRi709XcAfqiBB7cDR9PBNU50PkqxYiwSy986NuVxAPhO5kN4maIOZTL7KbGxv0/s1600/05.jpg" /></div>
<div id="card6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOff15H58Q3Hy7XlAEiud1dP6LyiLJIgsKy8Dhbs-Oje3Igg_Rh26eA1tcc5m_a0WX0oJa5foH0eTu2SBaXkmDjnI_eGfPyiJERHuyuSJy25gfTtoiNBZCfah4QoEIt2qeX981yp4JtT8/s1600/06.jpg" /></div>
<div id="card7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UT_gKFOOEY7iuKjQlHTPo0wVJ3Zlk0KLTkqN6acq1GI6TfZHq9KvJKixZva_oaMFNglSFa16Fw-CTwTQnoFvsMQF-3LQxB0btPKFcY39rUoqOgHREKQG2TnPAk3X2_sf72dFQ1MemBw/s1600/07.jpg" /></div>
<div id="card8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwHNbV2yaBcmySLA9t8TWqSzEtb21OTyHrOFaBRwPIdlLK0DXbP6L7I8Tg8hp2pb7ClmPoZKqP_-v3jV3DA8tMn9r2EJ3KciFdDildcF669Z5x0Zm5O58O-XIxvqpDA56qm4pFBZBxcM/s1600/08.jpg" /></div>
<div id="card9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyR7ImmLJw1W9bVoObLEC-YxmqwCjz6jyWDPJN4poNK0xw0qTMohsIzQS1aEX9PPXXq-5rsZbtzr3eHZeZJs6VGjqOj3fgyNcQ26-mgQ77Y3UQo6WavFkB5BHI_xjk1ihzbf_Q09S13qg/s1600/09.jpg" /></div>
<div id="card10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_UjESLrKjxhsh6NYVHcb8DRWwF_9CZQLxp8KjpPMQvX2uTzMPWnH8pQoi3Rz3q8c7GR_prPgJEvw2DvP8wg0GMw2odEGgMw55eIOWlNlGzxHuHTFApJBETULtEpceBM0YeW4FNI5WTg/s1600/10.jpg" /></div>
<div id="card11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe0ezAxgOcw7qLCQz8mxZ-IMDJ1IYbMMFgp-mEqe1nS81ojr5zDrPrHeJqY22zt8eK0q8jfmf97UJlN566ZufvxfpYhhmeFLixFsAcB5akdOk876gG4kZzilMJi9X9wAOGdQowKBz0vk/s1600/01.jpg" /></div>
<div id="card12"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiQu-iJz5Zu_ZAuE9hJC3R-PJhW0XSRXb6-OHLHGCOtym2VkccP7eSDlAtmM7PvPU2XVBU9zafoihtydsGD6SmUhzGdzUwYPQYXH2WWro-C2oYbdMxgQXmazwLGcrzwcLQxzRA7jI1EI/s1600/02.jpg" /></div>
<div id="card13"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJzazoE_PsWcwnVd68sJStwB3W_g-SJO-ck39jgEHQ5zx0bS7Mr54OeSxRDe2g2E5ItKuj98bTG5Os4mJNygT5o4J2bd8lXwCt7wc8NCpR2QITI6Ec6XgIesrp_I9o6BmsTsvpQbBr_I/s1600/03.jpg" /></div>
<div id="card14"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZjRNYtgvNKW8VuC2Y5y8DsW9Q_LRBSDUPHD6mk3pFPe_egjfnoa-VhJEJLGoNOyVg6k_mppvmntApWUQrehrG-VZGCFYWQY2FIjtdZrXS87TXXKDqAJdq_WqdHlmpvHUiby4PCdS4_M/s1600/04.jpg" /></div>
<div id="card15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBAhw3Pg_MyOO6KdFLJcjZDoV8kVkDZiSRQu8v6SNc5uo-35F9clMlHvStgxljAMAFzfZqUQZfmqJFrRi709XcAfqiBB7cDR9PBNU50PkqxYiwSy986NuVxAPhO5kN4maIOZTL7KbGxv0/s1600/05.jpg" /></div>
<div id="card16"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOff15H58Q3Hy7XlAEiud1dP6LyiLJIgsKy8Dhbs-Oje3Igg_Rh26eA1tcc5m_a0WX0oJa5foH0eTu2SBaXkmDjnI_eGfPyiJERHuyuSJy25gfTtoiNBZCfah4QoEIt2qeX981yp4JtT8/s1600/06.jpg" /></div>
<div id="card17"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UT_gKFOOEY7iuKjQlHTPo0wVJ3Zlk0KLTkqN6acq1GI6TfZHq9KvJKixZva_oaMFNglSFa16Fw-CTwTQnoFvsMQF-3LQxB0btPKFcY39rUoqOgHREKQG2TnPAk3X2_sf72dFQ1MemBw/s1600/07.jpg" /></div>
<div id="card18"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwHNbV2yaBcmySLA9t8TWqSzEtb21OTyHrOFaBRwPIdlLK0DXbP6L7I8Tg8hp2pb7ClmPoZKqP_-v3jV3DA8tMn9r2EJ3KciFdDildcF669Z5x0Zm5O58O-XIxvqpDA56qm4pFBZBxcM/s1600/08.jpg" /></div>
<div id="card19"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyR7ImmLJw1W9bVoObLEC-YxmqwCjz6jyWDPJN4poNK0xw0qTMohsIzQS1aEX9PPXXq-5rsZbtzr3eHZeZJs6VGjqOj3fgyNcQ26-mgQ77Y3UQo6WavFkB5BHI_xjk1ihzbf_Q09S13qg/s1600/09.jpg" /></div>
<div id="card20"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_UjESLrKjxhsh6NYVHcb8DRWwF_9CZQLxp8KjpPMQvX2uTzMPWnH8pQoi3Rz3q8c7GR_prPgJEvw2DvP8wg0GMw2odEGgMw55eIOWlNlGzxHuHTFApJBETULtEpceBM0YeW4FNI5WTg/s1600/10.jpg" /></div>
</div>
Κώδικας
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<title>JQuery Memory Game</title>
<script type="text/javascript">
var boxopened = "";
var imgopened = "";
var count = 0;
var found = 0;
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function shuffle() {
var children = $("#boxcard").children();
var child = $("#boxcard div:first-child");
var array_img = new Array();
for (i=0; i<children.length; i++) {
array_img[i] = $("#"+child.attr("id")+" img").attr("src");
child = child.next();
}
var child = $("#boxcard div:first-child");
for (z=0; z<children.length; z++) {
randIndex = randomFromTo(0, array_img.length - 1);
// set new image
$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
array_img.splice(randIndex, 1);
child = child.next();
}
}
function resetGame() {
shuffle();
$("img").hide();
$("img").removeClass("opacity");
count = 0;
$("#msg").remove();
$("#count").html("" + count);
boxopened = "";
imgopened = "";
found = 0;
return false;
}
$(document).ready(function() {
$("img").hide();
$("#boxcard div").click(openCard);
shuffle();
function openCard() {
id = $(this).attr("id");
if ($("#"+id+" img").is(":hidden")) {
$("#boxcard div").unbind("click", openCard);
$("#"+id+" img").slideDown('fast');
if (imgopened == "") {
boxopened = id;
imgopened = $("#"+id+" img").attr("src");
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 300);
} else {
currentopened = $("#"+id+" img").attr("src");
if (imgopened != currentopened) {
// close again
setTimeout(function() {
$("#"+id+" img").slideUp('fast');
$("#"+boxopened+" img").slideUp('fast');
boxopened = "";
imgopened = "";
}, 400);
} else {
// found
$("#"+id+" img").addClass("opacity");
$("#"+boxopened+" img").addClass("opacity");
found++;
boxopened = "";
imgopened = "";
}
setTimeout(function() {
$("#boxcard div").bind("click", openCard)
}, 400);
}
count++;
$("#count").html("" + count);
if (found == 10) {
msg = '<span id="msg">Congrats ! You Found All Sushi With </span>';
$("span.link").prepend(msg);
}
}
}
});
</script>
<style type="text/css">
* {
font-family: Arial, "Free Sans";
}
#boxcard {
margin: 0 auto;
width: 625px;
z-index: 1;
}
#boxcard div {
float: left;
width: 100px;
height: 100px;
background: #d9d9d9;
margin: 5px;
padding: 5px;
border: 1px solid #999;
cursor: pointer;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
z-index: 2;
}
#boxcard div img {
border: none;
z-index: 3;
}
.opacity {
opacity: .6;
filter: alpha(opacity=60);
}
#boxbutton {
text-align: center;
padding: 20px;
}
.link {
font-size: 18px;
color: #ffffff;
text-decoration: none;
background: #0066cc;
padding: 5px 10px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.link:hover {
background: #999;
}
</style>
<div id="boxbutton">
<span class="link">
<span id="count">0</span>
Click
</span>
<a href="javascript:" class="link" onclick="resetGame();">Reset</a>
</div>
<div id="boxcard">
<div id="card1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe0ezAxgOcw7qLCQz8mxZ-IMDJ1IYbMMFgp-mEqe1nS81ojr5zDrPrHeJqY22zt8eK0q8jfmf97UJlN566ZufvxfpYhhmeFLixFsAcB5akdOk876gG4kZzilMJi9X9wAOGdQowKBz0vk/s1600/01.jpg" /></div>
<div id="card2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiQu-iJz5Zu_ZAuE9hJC3R-PJhW0XSRXb6-OHLHGCOtym2VkccP7eSDlAtmM7PvPU2XVBU9zafoihtydsGD6SmUhzGdzUwYPQYXH2WWro-C2oYbdMxgQXmazwLGcrzwcLQxzRA7jI1EI/s1600/02.jpg" /></div>
<div id="card3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJzazoE_PsWcwnVd68sJStwB3W_g-SJO-ck39jgEHQ5zx0bS7Mr54OeSxRDe2g2E5ItKuj98bTG5Os4mJNygT5o4J2bd8lXwCt7wc8NCpR2QITI6Ec6XgIesrp_I9o6BmsTsvpQbBr_I/s1600/03.jpg" /></div>
<div id="card4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZjRNYtgvNKW8VuC2Y5y8DsW9Q_LRBSDUPHD6mk3pFPe_egjfnoa-VhJEJLGoNOyVg6k_mppvmntApWUQrehrG-VZGCFYWQY2FIjtdZrXS87TXXKDqAJdq_WqdHlmpvHUiby4PCdS4_M/s1600/04.jpg" /></div>
<div id="card5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBAhw3Pg_MyOO6KdFLJcjZDoV8kVkDZiSRQu8v6SNc5uo-35F9clMlHvStgxljAMAFzfZqUQZfmqJFrRi709XcAfqiBB7cDR9PBNU50PkqxYiwSy986NuVxAPhO5kN4maIOZTL7KbGxv0/s1600/05.jpg" /></div>
<div id="card6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOff15H58Q3Hy7XlAEiud1dP6LyiLJIgsKy8Dhbs-Oje3Igg_Rh26eA1tcc5m_a0WX0oJa5foH0eTu2SBaXkmDjnI_eGfPyiJERHuyuSJy25gfTtoiNBZCfah4QoEIt2qeX981yp4JtT8/s1600/06.jpg" /></div>
<div id="card7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UT_gKFOOEY7iuKjQlHTPo0wVJ3Zlk0KLTkqN6acq1GI6TfZHq9KvJKixZva_oaMFNglSFa16Fw-CTwTQnoFvsMQF-3LQxB0btPKFcY39rUoqOgHREKQG2TnPAk3X2_sf72dFQ1MemBw/s1600/07.jpg" /></div>
<div id="card8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwHNbV2yaBcmySLA9t8TWqSzEtb21OTyHrOFaBRwPIdlLK0DXbP6L7I8Tg8hp2pb7ClmPoZKqP_-v3jV3DA8tMn9r2EJ3KciFdDildcF669Z5x0Zm5O58O-XIxvqpDA56qm4pFBZBxcM/s1600/08.jpg" /></div>
<div id="card9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyR7ImmLJw1W9bVoObLEC-YxmqwCjz6jyWDPJN4poNK0xw0qTMohsIzQS1aEX9PPXXq-5rsZbtzr3eHZeZJs6VGjqOj3fgyNcQ26-mgQ77Y3UQo6WavFkB5BHI_xjk1ihzbf_Q09S13qg/s1600/09.jpg" /></div>
<div id="card10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_UjESLrKjxhsh6NYVHcb8DRWwF_9CZQLxp8KjpPMQvX2uTzMPWnH8pQoi3Rz3q8c7GR_prPgJEvw2DvP8wg0GMw2odEGgMw55eIOWlNlGzxHuHTFApJBETULtEpceBM0YeW4FNI5WTg/s1600/10.jpg" /></div>
<div id="card11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe0ezAxgOcw7qLCQz8mxZ-IMDJ1IYbMMFgp-mEqe1nS81ojr5zDrPrHeJqY22zt8eK0q8jfmf97UJlN566ZufvxfpYhhmeFLixFsAcB5akdOk876gG4kZzilMJi9X9wAOGdQowKBz0vk/s1600/01.jpg" /></div>
<div id="card12"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiQu-iJz5Zu_ZAuE9hJC3R-PJhW0XSRXb6-OHLHGCOtym2VkccP7eSDlAtmM7PvPU2XVBU9zafoihtydsGD6SmUhzGdzUwYPQYXH2WWro-C2oYbdMxgQXmazwLGcrzwcLQxzRA7jI1EI/s1600/02.jpg" /></div>
<div id="card13"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJzazoE_PsWcwnVd68sJStwB3W_g-SJO-ck39jgEHQ5zx0bS7Mr54OeSxRDe2g2E5ItKuj98bTG5Os4mJNygT5o4J2bd8lXwCt7wc8NCpR2QITI6Ec6XgIesrp_I9o6BmsTsvpQbBr_I/s1600/03.jpg" /></div>
<div id="card14"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZjRNYtgvNKW8VuC2Y5y8DsW9Q_LRBSDUPHD6mk3pFPe_egjfnoa-VhJEJLGoNOyVg6k_mppvmntApWUQrehrG-VZGCFYWQY2FIjtdZrXS87TXXKDqAJdq_WqdHlmpvHUiby4PCdS4_M/s1600/04.jpg" /></div>
<div id="card15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBAhw3Pg_MyOO6KdFLJcjZDoV8kVkDZiSRQu8v6SNc5uo-35F9clMlHvStgxljAMAFzfZqUQZfmqJFrRi709XcAfqiBB7cDR9PBNU50PkqxYiwSy986NuVxAPhO5kN4maIOZTL7KbGxv0/s1600/05.jpg" /></div>
<div id="card16"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOff15H58Q3Hy7XlAEiud1dP6LyiLJIgsKy8Dhbs-Oje3Igg_Rh26eA1tcc5m_a0WX0oJa5foH0eTu2SBaXkmDjnI_eGfPyiJERHuyuSJy25gfTtoiNBZCfah4QoEIt2qeX981yp4JtT8/s1600/06.jpg" /></div>
<div id="card17"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2UT_gKFOOEY7iuKjQlHTPo0wVJ3Zlk0KLTkqN6acq1GI6TfZHq9KvJKixZva_oaMFNglSFa16Fw-CTwTQnoFvsMQF-3LQxB0btPKFcY39rUoqOgHREKQG2TnPAk3X2_sf72dFQ1MemBw/s1600/07.jpg" /></div>
<div id="card18"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwHNbV2yaBcmySLA9t8TWqSzEtb21OTyHrOFaBRwPIdlLK0DXbP6L7I8Tg8hp2pb7ClmPoZKqP_-v3jV3DA8tMn9r2EJ3KciFdDildcF669Z5x0Zm5O58O-XIxvqpDA56qm4pFBZBxcM/s1600/08.jpg" /></div>
<div id="card19"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyR7ImmLJw1W9bVoObLEC-YxmqwCjz6jyWDPJN4poNK0xw0qTMohsIzQS1aEX9PPXXq-5rsZbtzr3eHZeZJs6VGjqOj3fgyNcQ26-mgQ77Y3UQo6WavFkB5BHI_xjk1ihzbf_Q09S13qg/s1600/09.jpg" /></div>
<div id="card20"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_UjESLrKjxhsh6NYVHcb8DRWwF_9CZQLxp8KjpPMQvX2uTzMPWnH8pQoi3Rz3q8c7GR_prPgJEvw2DvP8wg0GMw2odEGgMw55eIOWlNlGzxHuHTFApJBETULtEpceBM0YeW4FNI5WTg/s1600/10.jpg" /></div>
</div>
Post a Comment