CSS Devices: iPhone 5
http://lenticular.attasi.com/
HTML
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://lenticular.attasi.com/js/lenticular.min.js"></script>
<div style="height:auto;border:1px solid #000;padding:0px;border-radius: 10px;display:block;">
<table class="mytable" width="100%" >
<tr>
<td style="text-align:center;border-right: 2px solid #ddd;">
<img style='float: left; margin: 0px 0px 0px 0px;' src='news/kklogo.jpg' width='145px' height='67px'><b><u>TAX INVOICE</u></b><br/>(Under Rule 11 of Central Excise Rules 2002)<br/><span style='font-size:22px;'><B>KONKRETE PRODUCTS CO.</B><br/></span>Factory: PLOT No. 90, SECTOR-25,<br/>FARIDABAD-121004, Ph: 0129-2230060, 0129-2440509<br/>Email: [email protected], [email protected]<br/>website: www.kkindia.com<br/>
</td>
<td style="font-size:12px;">
<B>TIN:06151311264 dt. 9.6.1992</B><br/><table width='100%'><tr><td style='font-size:12px;'>C. Ex. Regn No:</td><td style='font-size:12px;'>AAAFK6104FXM001</td></tr><tr><td style='font-size:12px;'>C. Ex. Range:</td><td style='font-size:12px;'>VII</td></tr><tr><td style='font-size:12px;'>C. Ex. Div.:</td><td style='font-size:12px;'>II</td></tr><tr><td style='font-size:12px;'>Address:</td><td style='font-size:12px;'>New CGO Complex, NH-IV, Faridabad</td></tr><tr><td style='font-size:12px;'>Commissionerate:</td><td style='font-size:12px;'>Faridabad-I</td></tr></table>
</td>
</tr>
</table>
</div>
<br/>
<div style="display:block;height:auto;border:1px solid #000;padding:0px;border-radius: 10px;">
<table width="100%">
<tr>
<td width="50%" style="text-align:center;border-right: 2px solid #ddd;">
<table>
<tr>
<td>
BUYER:
</td>
<td>
Cash,<br/>New Delhi
</td>
</tr>
<tr>
<td>
PO No.
</td>
<td>
By Phone
</td>
</tr>
<tr>
<td>
Contact Name
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="#/"...
CSS
a {
text-decoration: none;
}
body {
background: white;
width:100%;
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{
.mytable {font-size:16px;display: none;}
.mytable tr {display: block;border: 1px solid #ccc;}
.mytable td {display: block;border: 1px;border-bottom: 1px solid #eee; }
}
background:cadetblue center center no-repeat;
background-image: -ms-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-size: cover;
-webkit-perspective: 600;
-moz-perspective: 600;
-ms-perspective: 600;
-o-perspective: 600;
perspective: 600;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* iPhone 5 */
.iphone {
width:230px;
height:475px;
border:1px solid #a5a7a9;
margin-left:-105px;
position:absolute;
left:50%;
background:#f4f5ed;
border-radius:20px;
}
.iphone-body,
.iphone-depth {
width:210px;
height:375px;
padding:50px 10px;
position:absolute;
z-index:2;
background:#f4f5ed;
border-radius:20px;
}
.iphone-depth {
z-index:1;
background:#a5a7a9;
border-radius:23px;
}
.iphone-content {
width:210px;
height:375px;
overflow:hidden;
position:relative;
background:#262631;
}
.iphone-camera,
.iphone-speaker,
.iphone-sensor {
width: 7px;
height: 7px;
margin-left: -4px;
position: absolute;
top: 12px;
left: 50%;
z-index: 2;
background: rgba(0, 0, 0, .3);
border-radius: 3px;
box-shadow: inset 2px 2px 5px rgba(0, 0, 0,...