iphone
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>iPhone | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type='text/css'>
/* @override http://templates.jonnotie.nl/iphone/stylesheets/main.css */
* {
margin: 0;
padding: 0;
}
html, body {
background-image: url(iphone-images/basics/bg.png);
background-color: #262b2f;
}
body {
color: #a7abb0;
font: 12px/18px "Lucida Grande", Lucida, "Lucida Grande Unicode", Verdana, sans-serif;
text-shadow: rgba(0,0,0,0.41) 0 -1px 1px;
}
p {
margin-bottom: 18px;
}
img {
border-style: none;
border-width: 0;
vertical-align: bottom;
}
ul, ol {
}
h1, h2, h3, h4 {
font-size: 12px;
line-height: 18px;
font-style: normal;
font-weight: normal;
}
a:link, a:visited {
text-decoration: underline;
outline: 0;
color: #a7abb0;
}
a:link:hover, a:visited:hover {
text-decoration: none;
color: #fff;
}
a:link:active, a:visited:active {
text-decoration: none;
}
/* @group basics */
#wrapper {
width: 894px;
margin: 0 auto;
}
/* @group columns */
.row {
overflow: hidden;
width: 480px;
margin-bottom: 18px;
}
.column {
float: left;
margin-right: 26px;
width: 454px;
overflow: hidden;
position: relative;
}
.column.six {
width: 454px;
}
.column.six .row {
width: 480px;
}
.column.three {
width: 214px;
}
.column.three .row {
width: 240px;
}
.column.four {
width: 294px;
}
.column.four .row {
width: 324px;
}
.column.two {
width: 134px;
}
.column.two .row {
width: 160px;
}
.column.oneandahalf {
width: 94px;
}
.column.oneandahalf .row {
width: 120px;
}
/* @end */
/* @group links */
.link {
position: relative;
width: 94px;
height: 95px;
display: block;
text-indent: -9999px;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.link.left {
float: left;
margin-right: 14px;
margin-bottom: 18px;
}
.link.right {
float: right;
margin-bottom: 18px;
margin-left: 14px;
}
.link .img {
display: block;
width: 94px;
height: 95px;
overflow: hidden;
position: absolute;
z-index: 1;
top: 0;
right: 0;
background-image: url(iphone-images/basics/links/link-oneandahalf.png);
cursor: pointer;
}
.link img {
position: absolute;
top: 4px;
left: 4px;
width: 86px;
}
/* --- */
.link:hover .img {
background-position: 0 -95px;
}
.link:active .img {
background-position: 0 -190px;
}
/* --- */
.link.wide {
width: 214px;
cursor: pointer;
}
.link.wide .img {
width: 214px;
background-image: url(iphone-images/basics/links/link-three.png);
cursor: pointer;
}
.link.wide img {
width: 206px;
}
/* @end */
/* @group appstore */
.appstore {
width: 214px;
height: 95px;
display: block;
background-image: url(iphone-images/basics/links/appstore.png);
text-indent: -9999px;
background-color: #363e45;
}
.appstore:hover {
background-position: 0 -95px;
}
.appstore:active {
background-position: 0 -190px;
}
.appstore-soon {
width: 214px;
height: 95px;
display: block;
background-image: url(iphone-images/basics/links/appstore-soon.png);
text-indent: -9999px;
background-color: #363e45;
cursor: default;
}
/* @end */
/* @group form */
form {
}
form p {
margin-bottom: 0;
}
form label {
cursor: pointer;
}
form input {
width: 186px;
border-width: 0;
border-style: none;
height: 22px;
outline: 0;
color: #747a80;
font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
padding: 5px 14px 0;
background: #2c343c url(iphone-images/basics/input.png) 100% 0;
display: block;
margin-top: 5px;
}
form input:focus {
color: #95999e;
background-position: 0 -27px;
}
form textarea {
width: 426px;
border-width: 0;
border-style: none;
height: 142px;
outline: 0;
color: #747a80;
font: 12px/18px "Lucida Grande", Lucida, Verdana, sans-serif;
padding: 10px 14px 3px;
background: #2c343c url(iphone-images/basics/textarea.png) 100% -1px;
overflow: auto;
margin-top: 5px;
margin-bottom: 14px;
}
form textarea:focus {
background-position: 100% -156px;
color: #95999e;
}
form button {
margin-bottom: 18px;
margin-left: auto;
border-width: 0;
border-style: none;
background-image: url(iphone-images/basics/button.png);
width: 56px;
height: 27px;
display: block;
text-indent: -9999px;
cursor: pointer;
background-color: #559b37;
}
form button:hover {
background-position: 0 -27px;
}
form button:active {
background-position: 0 -54px;
}
/* --- */
form p.error big {
float: right;
font-size: 12px;
line-height: 18px;
color: #fff;
font-style: italic;
}
/* @end */
/* @end */
/* @group essentials */
/* @group header */
#header {
height: 125px;
padding-top: 122px;
position: relative;
}
/* @group title */
#title {
height: 99px;
padding: 26px 52px 0 381px;
position: relative;
background: url(iphone-images/essentials/header/title/bg.png) no-repeat 0 bottom;
width: 461px;
}
#title h1 {
font-size: 24px;
padding-top: 35px;
background: url(iphone-images/essentials/header/title/icon.png) no-repeat 0 21px;
height: 63px;
padding-left: 82px;
line-height: 30px;
color: #fff;
}
#title a {
height: 41px;
position: absolute;
top: 60px;
right: 52px;
background-image: url(iphone-images/essentials/header/title/price-left.png);
font-size: 18px;
text-decoration: none;
font-weight: bold;
display: block;
padding-left: 10px;
line-height: 40px;
background-color: #4e9430;
color: #fff;
margin-right: 3px;
}
#title a span {
height: 41px;
background: url(iphone-images/essentials/header/title/price-right.png) no-repeat right 0;
display: inline-block;
cursor: pointer;
padding-right: 10px;
}
#title a:hover {
background-position: 0 -41px;
}
#title a:hover span {
background-position: right -41px;
}
#title a:active {
background-position: 0 -82px;
}
#title a:active span {
background-position: right -82px;
}
/* --- */
.mirror #title {
background: url(iphone-images/essentials/header/title/bg-mirrored.png) no-repeat 0 bottom;
padding: 26px 50px 0 51px;
width: 793px;
}
.mirror #title a {
right: 381px;
top: 60px;
position: absolute;
display: block;
}
/* @end */
/* @group navigation */
#navigation {
height: 31px;
list-style-type: none;
position: absolute;
z-index: 1;
overflow: hidden;
left: 383px;
top: 122px;
padding-right: 50px;
}
#navigation li {
height: 31px;
float: left;
margin-right: -11px;
}
#navigation li a {
float: left;
text-decoration: none;
background: url(iphone-images/essentials/header/navigation/left.png) no-repeat 3px 0;
height: 29px;
padding-left: 15px;
margin-right: 22px;
display: inline;
}
#navigation li a span {
height: 23px;
background: url(iphone-images/essentials/header/navigation/right.png) no-repeat right 0;
margin-right: -25px;
padding-right: 25px;
position: relative;
z-index: 1;
cursor: pointer;
display: block;
float: left;
padding-top: 6px;
white-space: nowrap;
}
/* --- */
#navigation li a:hover {
position: relative;
z-index: 1;
background: url(iphone-images/essentials/header/navigation/left-current.png) no-repeat 0 0;
height: 29px;
}
#navigation li a:hover span {
height: 23px;
background-image: url(iphone-images/essentials/header/navigation/right-current.png);
}
/* --- */
#navigation li a:active {
position: relative;
z-index: 1;
background: url(iphone-images/essentials/header/navigation/left-current.png) no-repeat 0 1px;
height: 29px;
}
#navigation li a:active span {
height: 22px;
background: url(iphone-images/essentials/header/navigation/right-current.png) no-repeat right 1px;
padding-top: 7px;
}
/* --- */
#navigation li.current a {
position: relative;
z-index: 2;
height: 31px;
background: url(iphone-images/essentials/header/navigation/left-current.png) 0 0;
color: #fff;
}
#navigation li.current a span {
height: 25px;
background: url(iphone-images/essentials/header/navigation/right-current.png) no-repeat right 0;
padding-top: 6px;
}
#navigation li.current a:hover {
background-position: 0 0;
height: 31px;
}
#navigation li.current a:hover span {
height: 25px;
}
/* --- */
.mirror #navigation {
right: 383px;
top: 122px;
left: 52px;
}
/* @end */
/* @end */
/* @group main */
#main {
background-image: url(iphone-images/essentials/main/bg.png);
position: relative;
min-height:390px;
height:auto !important;
height:390px;
}
/* @group iphone */
#iphone {
width: 230px;
height: 346px;
background-image: url(iphone-images/essentials/main/iphone/bg.png);
position: absolute;
top: -237px;
padding: 122px 76px 197px;
right: 509px;
left: 3px;
}
#iphone .img {
width: 230px;
height: 346px;
overflow: hidden;
position: relative;
}
#iphone a {
height: 57px;
width: 179px;
display: block;
position: absolute;
top: 150px;
z-index: 1;
background-image: url(iphone-images/basics/links/clicktoplay.png);
text-indent: -9999px;
left: 26px;
}
#iphone img {
filter: alpha(opacity = 30);
width: 230px;
}
#iphone .hvlog img {
opacity: 0.3;
filter:alpha(opacity=50);
}
#iphone a:hover {
background-position: 0 -57px;
}
#iphone a:active {
background-position: 0 -114px;
}
#iphone object {
width: 230px;
height: 346px;
}
#iphone embed {
width: 230px;
height: 346px;
}
/* --- */
.mirror #iphone {
left: 509px;
right: 3px;
}
/* @end */
/* @group content */
#content {
background: url(iphone-images/essentials/main/content/bg.png) repeat-x;
width: 454px;
overflow: hidden;
padding: 27px 55px 1px 385px;
margin-bottom: -20px;
}
#content abbr {
border-bottom: 1px dotted #656c73;
cursor: help;
}
#content abbr:hover {
color: #fff;
}
#content h2 {
margin-bottom: 9px;
color: #fff;
font-weight: bold;
}
#content ul {
margin-bottom: 18px;
width: 100%;
}
#content ol {
margin-bottom: 18px;
width: 100%;
}
#content ul li {
list-style-type: none;
background: url(iphone-images/basics/li.png) no-repeat 0 8px;
padding-left: 15px;
}
#content ol li {
list-style-type: none;
background: url(iphone-images/basics/li.png) no-repeat 0 8px;
padding-left: 15px;
}
/* --- */
.mirror #content {
padding: 30px 385px 1px 55px;
}
/* @end */
/* @end */
/* @group footer */
#footer {
padding-top: 30px;
background: url(iphone-images/essentials/footer/bg.png) no-repeat;
text-align: center;
position: relative;
z-index: 1;
}
/* @end */
/* @end */
</style>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/fancybox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.embedquicktime.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.fancybox.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
jQuery.embedquicktime({
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
plugin: 'javascripts/jquery.embedquicktime.js'
});
});
$(document).ready(function () {
$("a.link").fancybox({
'zoomOpacity': true,
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
});
});
</script>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/main-IE6.css" />
<script src="javascripts/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('#iphone, #iphone a, h1, .link .img');</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="navigation">
<li><a href="index.html"><span>Home</span></a></li>
<li class="current"><a href="about.html"><span>About</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
<div id="title">
<h1>iPhone application</h1>
<a href="#"><span>$1.99</span></a> </div>
</div>
<div id="main">
<div id="iphone">
<div class="img">
<div class="hvlog {width: '230', height: '346', controller: 'false', loop: 'true', pluginspage: 'http://www.apple.com/quicktime/download/'}"> <a href="media/example.mov" rel="enclosure">click to play</a> <img src="media/screenshot-2.png" alt="" /> </div>
</div>
</div>
<div id="content">
<div class="row">
<div class="column three">
<p><a href="media/screenshot-1.png" class="link wide" rel="group"><img src="media/screenshot-1-thumb-2.png" alt="" /><span class="img">open image</span></a></p>
</div>
<div class="column three">
<p><a href="media/screenshot-2.png" class="link wide" rel="group"><img src="media/screenshot-2-thumb-2.png" alt="" /><span class="img">open image</span></a></p>
</div>
</div>
<div class="row">
<div class="column oneandahalf">
<p><a href="media/screenshot-1.png" class="link" rel="group2"><img src="media/screenshot-1-thumb.png" alt="" /><span class="img">open image</span></a></p>
</div>
<div class="column oneandahalf">
<p><a href="media/screenshot-2.png" class="link" rel="group2"><img src="media/screenshot-2-thumb.png" alt="" /><span class="img">open image</span></a></p>
</div>
<div class="column three">
<p><a href="media/screenshot-3.png" class="link wide" rel="group2"><img src="media/screenshot-3-thumb.png" alt="" /><span class="img">open image</span></a></p>
</div>
</div>
<div class="row">
<div class="column six">
<h2>A normal h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<p>Wuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row">
<div class="column three">
<h2>A h2 in</h2>
<p>Wuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="column three">
<h2>each column</h2>
<p>Wuis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <a href="#">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="row">
<h2>Or above two columns</h2>
<div class="column three">
<ul>
<li>Duis aute irure dolor in reprehenderit</li>
<li>Sunt in culpa qui officia deserunt</li>
<li>Ut enim ad minim <abbr>veniam</abbr></li>
</ul>
</div>
<div class="column three">
<ul>
<li>Esse cillum dolore eu fugiat nulla.</li>
<li>nisi ut aliquip ex ea commodo</li>
<li>Soccaecat cupidatat non proident</li>
</ul>
</div>
</div>
</div>
</div>
<div id="footer">
<p><strong>Copyright © 2009</strong> by <a href="#">Yourcompany</a>. Design by <a href="http://jonnotie.nl">Jonnotie</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category