<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/icontwo.png">
<link rel="apple-touch-startup-image" href="images/startup.png" />
<title>Esepina WebApp</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/buttons.css" rel="stylesheet" type="text/css">
<link href="css/type.css" rel="stylesheet" type="text/css">
<link href="css/add2home.css" rel="stylesheet" type="text/css">
<link href="css/flexslider.css" rel="stylesheet" type="text/css">
<link href="css/photoswipe.css" rel="stylesheet" type="text/css">
<!-- Do not move the bellow script to custom.js! It must stay here to load properly! -->
<script type="text/javascript">
function loadImages() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}else {
if (document.layers) { // Netscape 4
document.hidepage.visibility = 'hidden';
}else { // IE 4
document.all.hidepage.style.visibility = 'hidden';
}
}
}
</script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/contact.js"></script>
<script type="text/javascript" src="scripts/jquery.flexslider-min.js"/></script>
<script type="text/javascript" src="scripts/tweetable.js"></script>
<script type="text/javascript" src="scripts/add2home.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.html"></script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
<body OnLoad="loadImages()">
<p class="no-mobile">Please visit from your mobile phone!<br/> This site is designed for mobiles you know! </p>
<div class="site">
<div id="hidepage">
<p class="center-text">Loading depends on mobile bandwidth speed!<br/><img src="images/background/130.gif" alt="load"></p>
</div>
<div class="navigation">
<a id="home" class="selected" href="#"><img src="images/nav/item1ns.png" alt="img"><em class="under-icon-text">Home</em></a>
<a id="about" href="#"><img src="images/nav/item2ns.png" alt="img"><em class="under-icon-text">About</em></a>
<a id="portfolio" href="#"><img src="images/nav/item3ns.png" alt="img"><em class="under-icon-text">Portfolio</em></a>
<a id="blog" href="#"><img src="images/nav/item5ns.png" alt="img"><em class="under-icon-text">Blog</em></a>
<a id="contact" href="#"><img src="images/nav/item4ns.png" alt="img"><em class="under-icon-text">Contact</em></a>
</div>
<div class="header-deco"></div>
<div class="header">
<img class="logo" src="images/logo.png" alt="img">
<div class="social-icons">
<a href="#"><img src="images/social-icons/facebook.png" alt="img"></a>
<a href="#"><img src="images/social-icons/twitter.png" alt="img"></a>
<a href="#"><img src="images/social-icons/rss.png" alt="img"></a>
<a href="#"><img src="images/social-icons/mail.png" alt="img"></a>
</div>
</div>
<div class="decoration"></div>
<div class="home">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/1.jpg" />
<p class="flex-caption">Swipe this picture, left or right!</p>
</li>
<li>
<img src="images/slider/2.jpg" />
<p class="flex-caption">Come on! Swipe the picture!</p>
</li>
<li>
<img src="images/slider/3.jpg" />
<p class="flex-caption">Really! Please swipe the picture</p>
</li>
<li>
<img src="images/slider/4.jpg" />
<p class="flex-caption">Well? Are you gonna swipe?!</p>
</li>
</ul>
</div>
<p class="under-slider-heading shadow">We like you! That's why we made Esepina!</p>
<p class="under-slider-description shadow">
Everything about this template is mobile developed.
It works on most mobile devices, and it provides an
awesome mobile iPhone WebApp with custom splash screen and home-screen icon!
</p>
<div class="decoration"></div>
<div class="column">
<p class="column-text shadow">
<strong>Works on iPhones!</strong>
<img class="round-icon" src="images/icon/iphone.png" alt="img">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<div class="clear"></div>
<p class="column-text shadow">
<strong>Works on Androids!</strong>
<img class="round-icon" src="images/icon/android.png" alt="img">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<div class="clear"></div>
<p class="column-text last-item shadow">
<strong>Works on BlackBerry</strong>
<img class="round-icon" src="images/icon/bberry.png" alt="img">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<div class="clear"></div>
</div>
<div class="decoration"></div>
</div>
<div class="about">
<div class="column">
<img class="image-width image-deco" src="images/about-images/1.jpg" alt="img">
<h4 class="image-heading shadow">An awesome image maybe?</h4>
<p class="shadow">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
<div class="clear"></div>
</div>
<div class="decoration"></div>
<div class="full-width">
<h4 class="shadow">Lists? Sure thing </h4>
<ul class="icon-list shadow">
<li class="list-info">Lorem ipsum dolor sit amet adipiscing.</li>
<li class="list-heart">Donec faucibus nisi vel libero.</li>
<li class="list-attention">Nullam volutpat nunc sed odio ultrices.</li>
<li class="list-cross">Quisque vel mi eu lectus lobortis.</li>
<li class="list-arrow">Donec sed sem eu justo tempus.</li>
<li class="list-plus">Maecenas vitae mauris mi, id egestas.</li>
<li class="list-warning">Maecenas at lectus nunc, non lobortis.</li>
<li class="list-tick last-item">Maecenas at lectus nunc, non lobortis.</li>
</ul>
</div>
<div class="decoration"></div>
<div class="demo-buttons">
<a href="#" class="button grey">Button</a>
<a href="#" class="button yellow">Button</a>
<a href="#" class="button green">Button</a>
<a href="#" class="button black">Button</a>
<a href="#" class="button red">Button</a>
<a href="#" class="button blue">Button</a>
<a href="#" class="button gblue">Button</a>
<a href="#" class="button purple">Button</a>
</div>
<div class="decoration"></div>
<div class="full-width">
<h4 class="shadow">What about notification boxes?</h4>
<div class="notification-box-green">
<a href="#" class="notification-quit-green">x</a>
<img class="notification-icon" src="images/lists/list-tick.png" alt="">
<p class="notification-text">Yes, green is good! You can download stuff!</p>
</div>
<div class="notification-box-yellow">
<a href="#" class="notification-quit-yellow">x</a>
<im