<!--HTML--><link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<center>
<div style="width: 580px; background: #ebeeee; padding: 20px; box-shadow:3px 3px 5px #888888; -moz-box-shadow: 3px 3px 5px #888888; -webkit-box-shadow: 0px 0px 0px #888888; -o-box-shadow:3px 3px 5px #888888;">
<div style="font-family: lily script one; font-size: 35px; color: #5b99c1; margin-left: 163px; line-height: 70%;">fruit ninja</div>
<div style="width: 220px; height: 8px; background: #bcd6ec; border-left: 80px solid #bcd6ec; border-right: 150px solid #bcd6ec;"></div>

<!--HTML--><style>.fc-grid {
padding: 0;
list-style: none;
display: block;
text-align: left;
width: 500px;
background: none;
}

.fc-grid:after,
.fc-item:before {
content: '';
  display: table;
}

.fc-grid:after {
clear: both;
}

.fc-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 5px;
}

.fc-item {
width: 100%;
height: 100%;
position: relative;
cursor: default;
}

.fc-info-wrap{
position: absolute;
width: 110px;
height: 110px;

-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

top: 20px;
left: 20px;
background: #f9f9f9;
box-shadow: 
0 0 0 20px rgba(255,255,255,0.2), 
inset 0 0 3px rgba(115,114, 23, 0.8);

}

.fc-info{
position: absolute;
width: 110px;
height: 110px;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.fc-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.fc-info .fc-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);

background: #0663b1;
}

.fc-img-1 { 
background-image: url(http://funkyimg.com/i/ZsxW.png);
}

.fc-img-2 { 
background-image: url(http://funkyimg.com/i/ZsxX.png);
}

.fc-img-3 { 
background-image: url(http://funkyimg.com/i/ZsxY.png);
}

.fc-img-4 { 
background-image: url(http://funkyimg.com/i/ZsxZ.png);
}

.fc-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 12px;
margin: 0 0px;
padding: 5px 0 0 0;
font-family: arial black;

}

.fc-info i {
color: #fff;
font-size: 10px;
}

.fc-info p {
margin-top: 5px;
color: #fff;
font-size: 10px;
line-height: 10px;
font-family: calibri;
text-transform: uppercase;
}

.fc-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}

.fc-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.fc-item:hover .fc-info-wrap {
box-shadow: 
0 0 0 0 rgba(255,255,255,0.8), 
inset 0 0 3px rgba(115,114, 23, 0.8);
}

.fc-item:hover .fc-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

hr {
width: 90%;
border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(57, 57, 57, 0.75), rgba(0, 0, 0, 0));
}
</style>

<center>
<div style="background: #0663b1; width: 330px; padding: 20px;">
<ul class="fc-grid">
<li>
<div class="fc-item fc-img-1">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-1"></div>
<div class="fc-info-back">
<h3>Помидор</h3>
<i>"just vegetable"</i>
<p>
выдается за<br>
100 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-2">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-2"></div>
<div class="fc-info-back">
<h3>Яблоко</h3>
<i>"Hey, apple"</i>
<p>
Выдается за<br>
500 сообщений.<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>

<ul class="fc-grid">
<li>
<div class="fc-item fc-img-3">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-3"></div>
<div class="fc-info-back">
<h3>Апельсин</h3>
<i>"orange caramel"</i>
<p>
выдается за<br>
1 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-4">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-4"></div>
<div class="fc-info-back">
<h3>Манго</h3>
<i>"exo-tic"</i>
<p>
выдается за<br>
2 000 сообщений<br>
</p>
<hr>
<p>

</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>
</div>
<style>.fc-grid {
padding: 0;
list-style: none;
display: block;
text-align: left;
width: 500px;
background: none;
}

.fc-grid:after,
.fc-item:before {
content: '';
  display: table;
}

.fc-grid:after {
clear: both;
}

.fc-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 5px;
}

.fc-item {
width: 100%;
height: 100%;
position: relative;
cursor: default;
}

.fc-info-wrap{
position: absolute;
width: 110px;
height: 110px;

-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

top: 20px;
left: 20px;
background: #f9f9f9;
box-shadow: 
0 0 0 20px rgba(255,255,255,0.2), 
inset 0 0 3px rgba(115,114, 23, 0.8);

}

.fc-info{
position: absolute;
width: 110px;
height: 110px;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.fc-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.fc-info .fc-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);

background: #0663b1;
}

.fc-img-5 { 
background-image: url(http://funkyimg.com/i/ZsJL.png);
}

.fc-img-6 { 
background-image: url(http://funkyimg.com/i/ZsJM.png);
}

.fc-img-7 { 
background-image: url(http://funkyimg.com/i/ZsJN.png);
}

.fc-img-8 { 
background-image: url(http://funkyimg.com/i/ZsJP.png);
}

.fc-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 12px;
margin: 0 0px;
padding: 5px 0 0 0;
font-family: arial black;

}

.fc-info i {
color: #fff;
font-size: 10px;
}

.fc-info p {
margin-top: 5px;
color: #fff;
font-size: 10px;
line-height: 10px;
font-family: calibri;
text-transform: uppercase;
}

.fc-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}

.fc-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.fc-item:hover .fc-info-wrap {
box-shadow: 
0 0 0 0 rgba(255,255,255,0.8), 
inset 0 0 3px rgba(115,114, 23, 0.8);
}

.fc-item:hover .fc-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

hr {
width: 90%;
border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(57, 57, 57, 0.75), rgba(0, 0, 0, 0));
}
</style>

<center>
<div style="background: #0663b1; width: 330px; padding: 20px;">
<ul class="fc-grid">
<li>
<div class="fc-item fc-img-5">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-5"></div>
<div class="fc-info-back">
<h3>Лимон</h3>
<i>"so sweeeet~"</i>
<p>
выдается за<br>
4 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-6">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-6"></div>
<div class="fc-info-back">
<h3>абрикос</h3>
<i>"i'm not peachy!"</i>
<p>
Выдается за<br>
7 000 сообщений.<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>

<ul class="fc-grid">
<li>
<div class="fc-item fc-img-7">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-7"></div>
<div class="fc-info-back">
<h3>груша</h3>
<i>"pear disappear"</i>
<p>
выдается за<br>
11 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-8">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-8"></div>
<div class="fc-info-back">
<h3>Киви</h3>
<i>"little bird"</i>
<p>
выдается за<br>
16 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>
</div>


<style>.fc-grid {
padding: 0;
list-style: none;
display: block;
text-align: left;
width: 500px;
background: none;
}

.fc-grid:after,
.fc-item:before {
content: '';
  display: table;
}

.fc-grid:after {
clear: both;
}

.fc-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 5px;
}

.fc-item {
width: 100%;
height: 100%;
position: relative;
cursor: default;
}

.fc-info-wrap{
position: absolute;
width: 110px;
height: 110px;

-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

top: 20px;
left: 20px;
background: #f9f9f9;
box-shadow: 
0 0 0 20px rgba(255,255,255,0.2), 
inset 0 0 3px rgba(115,114, 23, 0.8);

}

.fc-info{
position: absolute;
width: 110px;
height: 110px;
text-align: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.fc-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}

.fc-info .fc-info-back {
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);

background: #0663b1;
}

.fc-img-9 { 
background-image: url(http://funkyimg.com/i/ZsLP.png);
}

.fc-img-10 { 
background-image: url(http://funkyimg.com/i/ZsLQ.png);
}

.fc-img-11 { 
background-image: url(http://funkyimg.com/i/ZsLR.png);
}

.fc-img-12 { 
background-image: url(http://funkyimg.com/i/ZsLS.png);
}

.fc-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 12px;
margin: 0 0px;
padding: 5px 0 0 0;
font-family: arial black;

}

.fc-info i {
color: #fff;
font-size: 10px;
}

.fc-info p {
margin-top: 5px;
color: #fff;
font-size: 10px;
line-height: 10px;
font-family: calibri;
text-transform: uppercase;
}

.fc-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}

.fc-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.fc-item:hover .fc-info-wrap {
box-shadow: 
0 0 0 0 rgba(255,255,255,0.8), 
inset 0 0 3px rgba(115,114, 23, 0.8);
}

.fc-item:hover .fc-info {
-webkit-transform: rotate3d(0,1,0,-180deg);
-moz-transform: rotate3d(0,1,0,-180deg);
-o-transform: rotate3d(0,1,0,-180deg);
-ms-transform: rotate3d(0,1,0,-180deg);
transform: rotate3d(0,1,0,-180deg);
}

hr {
width: 90%;
border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(57, 57, 57, 0.75), rgba(0, 0, 0, 0));
}
</style>

<center>
<div style="background: #0663b1; width: 330px; padding: 20px;">
<ul class="fc-grid">
<li>
<div class="fc-item fc-img-9">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-9"></div>
<div class="fc-info-back">
<h3>банан</h3>
<i>"you want me"</i>
<p>
выдается за<br>
22 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-10">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-10"></div>
<div class="fc-info-back">
<h3>клубника</h3>
<i>"so delicious"</i>
<p>
Выдается за<br>
29 000 сообщений.<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>

<ul class="fc-grid">
<li>
<div class="fc-item fc-img-11">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-11"></div>
<div class="fc-info-back">
<h3>вишня</h3>
<i>"chu chu cerry"</i>
<p>
выдается за<br>
42 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>

<li>
<div class="fc-item fc-img-12">    
<div class="fc-info-wrap">
<div class="fc-info">
<div class="fc-info-front fc-img-12"></div>
<div class="fc-info-back">
<h3>Персик</h3>
<i>"rich peach bitch"</i>
<p>
выдается за<br>
50 000 сообщений<br>
</p>
<hr>
<p>
<br>
</p>
</div>	
</div>
</div>
</div>
</li>  	
</ul>
</div>