<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Beautiful - Responsive HTML5/CSS3 Template by WebVision -->
<!-- ~~~~~~ META & TITLE ~~~~~~ -->
<meta charset="utf-8" />
<title>Beautiful | A Responsive HTML5 Template | Home</title>
<meta name="description" content="Beautiful is a responsive, clean, creative, HTML5 / CSS3 template." />
<meta name="author" content="Roman Polyarush, WebVision" />
<!-- ~~~ MOBILE ~~~ -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- ~~~ HTML5 FOR IE7 & IE8 ~~~ -->
<!-- ~~~~~~ FAVICONS ~~~~~~ -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- ~~~~~~ CSS ~~~~~~ -->
<link rel="stylesheet" href="layout/styles/base.css" />
<link rel="stylesheet" href="layout/styles/skeleton.css" />
<link rel="stylesheet" href="layout/styles/layout.css" />
<!-- Fancybox plugin -->
<link rel="stylesheet" href="layout/scripts/fancybox/styles/jquery.fancybox.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="layout/styles/ie7.css" >
<![endif]-->
<link href="layout/styles/fonts.css" rel="stylesheet" type="text/css" />
<!-- ~~~~~~ COLORS ~~~~~~ -->
<link href="layout/styles/colors.css" rel="stylesheet" type="text/css" />
<!-- Modernizr -->
<script type="text/javascript" src="layout/scripts/lib/modernizr.js"></script>
<script type="text/javascript" src="layout/scripts/lib/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div class="wrapper">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PAGE -->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HEADER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<header id="header-wrapper">
<div class="container upper-container">
<!-- upper part: contact info -->
<div class="header-upper" id="header-upper">
<div class="four columns">
<div class="map-iframe">
<img src="images/map-road.jpg" alt="" />
</div>
</div>
<div class="six columns contact-datails">
<h3 class="font_dosis">Contact details</h3>
<p class="bott-line">Reader will be distracted by the readable content of a page when looking at its layout. The point of using is that it has.</p>
<div class="address-line">30 You Streen Name, Vancouver, BC 58963 Canada</div>
<div class="part-left">
<div class="phone-line">Phone: +1 800 204 21 87</div>
<div class="fax-line">Fax: +1 800 890 00 41</div>
</div>
<div class="part-right">
<div class="email-line">E-mail: <a href="mailto:mail@www.zjf88.com">mail@www.zjf88.com</a></div>
<div class="website-line">Website: <a href="#">http//www.zjf88.com</a></div>
</div>
</div>
<div class="six columns contact-upper-form">
<h3>Contact form</h3>
<form action="#" method="post" />
<input type="text" value="" placeholder="Name*" />
<input type="text" value="" placeholder="Email*" />
<textarea cols="50" rows="3" placeholder="Message*"></textarea>
<input type="submit" value="Send message" class="submit-btn" />
</form>
</div>
<a href="#header-upper" class="toggle-upper close">Toggle Upper</a>
</div>
</div>
<!-- top part: sign / registration -->
<div id="header-top">
<a href="#header-upper" class="toggle-upper">Toggle Upper</a>
<div class="container">
<div class="half-left">
<a href="mailto:info@yourwww.zjf88.com">info@yourwww.zjf88.com</a>
</div>
<div class="half-right">
<a href="#sign-popup" class="toggle-sign">Sign Up</a>
<a href="#" class="left_wrapper">Registration</a>
</div>
<div class="clear"></div>
<div class="sign-popup" id="sign-popup">
<h3>Sign Up</h3>
<form action="#" method="post" class="sign-form" />
<label>Login:</label> <input type="text" value="" />
<div class="clear"></div>
<label>Password:</label> <input type="password" value="" />
<div class="clear"></div>
<p class="al-right"><a href="#">Forgot password?</a>
<input type="submit" value="Sign Up" class="submit-btn" /></p>
</form>
</div>
</div>
</div>
<!-- middle part: logo / tagline / contact info / menu -->
<div id="header-middle">
<div class="container">
<!-- logo / tagline-->
<div class="two-thirds column">
<div class="logo-slogan">
<div class="logo"><a href="index.html"><img src="layout/styles/images/blue/logo.png" alt="" /></a></div>
<!-- text: <div class="logo font_gautami"><a href="index.html"><img src="layout/styles/images/blue/footer-logo.png" alt="BeautyMind"></a></div> -->
<div class="slogan">responcive/minimal/HTML5</div>
</div>
<div class="tagline">
This is a site tagline.
</div>
</div>
<!-- contact info -->
<div class="one-third column info">
<div class="phone">
Call us: <strong>+1 (495) <mark>708-48-39</mark></strong>
</div>
<div class="social_links">
<!-- src -> grey;
data-icon -> colored -->
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico.png" data-icon="layout/styles/images/blue/ico.png" alt="twitter" /></a>
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico-02.png" data-icon="layout/styles/images/blue/ico-02.png" alt="facebook" /></a>
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico-03.png" data-icon="layout/styles/images/blue/ico-03.png" alt="StubleUpon" /></a>
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico-04.png" data-icon="layout/styles/images/blue/ico-04.png" alt="digg" /></a>
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico-05.png" data-icon="layout/styles/images/blue/ico-05.png" alt="vimeo" /></a>
<a href="#"><img src="layout/styles/images/backgrounds/ico/h-ico-06.png" data-icon="layout/styles/images/blue/ico-06.png" alt="youtube" /></a>
</div>
</div>
</div>
</div>
<!-- middle part: logo / tagline / contact info / menu -->
<div id="header-bottom" class="container">
<div class="header-bottom-wrapper">
<nav class="twelve columns alpha" id="main-menu-wrapper">
<ul id="main-menu">
<li><a href="index.html">Home</a></li>
<li><a class="active" href="slider.html">Sliders</a>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a class="active" href="slider.html">Creative Slider</a></li>
<li><a href="home.html">Photos Slider</a></li>
</ul>
</li>
<li><a href="typography.html">Features</a>
<ul>
<li><a href="typography.html">Typography</a></li>
<li><a href="javascript:void(0);">Elements</a>
<ul>
<li><a href="info-boxes.html">Info Boxes</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="tabs.html">Tabs&Toggle</a></li>
<li><a href="pricing.html">Pricing Table</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Template Pages</a>
<ul>