295 lines
15 KiB
HTML
295 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/html">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Take Mobile App</title>
|
|||
|
|
<link rel="stylesheet" href="css/bootstrap.css" >
|
|||
|
|
<link rel="stylesheet" href="css/styles.css" >
|
|||
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!--Masthead-->
|
|||
|
|
<div class="row-masthead" class="parallax-window" data-parallax="scroll" data-image-src="assets/masthead.jpg">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-2">
|
|||
|
|
<img src="assets/logo.svg" class="logo"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-8"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-8 col-sm-12 col-lg-6 masthead-text">
|
|||
|
|
<h1><b>Adamita</b> · CZ</h1>
|
|||
|
|
<h1><small><small><small><small>Jsem <b>Ašským Nudistou</b> Online</small></small></small></small></h1>
|
|||
|
|
<p class="sub-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
|
|||
|
|
<a href="#">Read More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-4 hidden-sm-down">
|
|||
|
|
<img src="assets/iPhone.png" class="iPhone"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Two Col-->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<!--Left Col-->
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<h2>Nudista · Online</h2>
|
|||
|
|
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</h4>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem.</p>
|
|||
|
|
</div>
|
|||
|
|
<!--Right Col-->
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<h2>Adamita · CZ</h2>
|
|||
|
|
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utadipisicing elit</h4>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Grid Row-->
|
|||
|
|
<div class="row-grid hidden-md-down">
|
|||
|
|
<div class="container container-full">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="grid col-md-4 pink">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid col-md-4 purple">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid col-md-4 image01">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid col-md-4 light-purple">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="grid col-md-8 image02">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid col-md-4 green">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid col-md-4 image01">
|
|||
|
|
<h2>Design Quality</h2>
|
|||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
|
|||
|
|
<br/>
|
|||
|
|
<a href="#">Find Out More →</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Four Col-->
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="verticle-text">nahej.cz</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<h2>Film 'NAHEJ'</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-sm-6 col-lg-3">
|
|||
|
|
<h3>Web based</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-sm-6 col-lg-3">
|
|||
|
|
<h3>Performance</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-sm-6 col-lg-3">
|
|||
|
|
<h3>Community</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 col-sm-6 col-lg-3">
|
|||
|
|
<h3>Cultral</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row-spacer"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Full Width Image-->
|
|||
|
|
<div class="row-full-image" class="parallax-window" data-parallax="scroll" data-image-src="assets/fullimage.jpg">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-5 col-lg-5 col-sm-12 masthead-text">
|
|||
|
|
<h1>More power behind every pixel.</h1>
|
|||
|
|
<p class="sub-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|||
|
|
<a href="#">Buying Options →</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Green Row-->
|
|||
|
|
<div class="row-green">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="verticle-text white">talkapp.com</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<h2>Reasons to get onboard</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-4">
|
|||
|
|
<h3>Web based</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-4">
|
|||
|
|
<h3>Open Source</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-4">
|
|||
|
|
<h3>Community</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Buying Row-->
|
|||
|
|
<div class="row-buying">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="verticle-text white">talkapp.com</div>
|
|||
|
|
<div class="col-md-6 inactive">
|
|||
|
|
<span class="badge">Legacy</span>
|
|||
|
|
<h2>Go it Solo</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, quis nostrud exercitation</p>
|
|||
|
|
<a href="#" class="btn-green">Buy Now $12</a>
|
|||
|
|
<img src="assets/fa-apple.svg" class="icon"/>
|
|||
|
|
<img src="assets/fa-windows.svg"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 active">
|
|||
|
|
<span class="badge purple">Most Popular</span>
|
|||
|
|
<h2>Team Plan</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, quis nostrud exercitation</p>
|
|||
|
|
<a href="#" class="btn-green">Buy Now $18</a>
|
|||
|
|
<img src="assets/fa-apple.svg" class="icon"/>
|
|||
|
|
<img src="assets/fa-windows.svg"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--Footer Row-->
|
|||
|
|
<div class="row-footer">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<h3>Get in touch</h3>
|
|||
|
|
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
|
|||
|
|
<br/><br/>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-3 col-xs-6">
|
|||
|
|
<h3>Resources</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Tour</li>
|
|||
|
|
<li>Customers</li>
|
|||
|
|
<li>Pricing and Plans</li>
|
|||
|
|
<li>New Features</li>
|
|||
|
|
<li>Education</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3 col-xs-6">
|
|||
|
|
<h3>Features</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Tour</li>
|
|||
|
|
<li>Customers</li>
|
|||
|
|
<li>Pricing and Plans</li>
|
|||
|
|
<li>New Features</li>
|
|||
|
|
<li>Education</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-3 col-xs-6">
|
|||
|
|
<h3>How To's</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>Tour</li>
|
|||
|
|
<li>Customers</li>
|
|||
|
|
<li>Pricing and Plans</li>
|
|||
|
|
<li>New Features</li>
|
|||
|
|
<li>Education</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row-spacer"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-5 col-md-offset-1 col-sm-6">
|
|||
|
|
<h3>Stay in touch</h3>
|
|||
|
|
<input class="email" placeholder="Enter your email"/>
|
|||
|
|
<button type="submit" class="submit">
|
|||
|
|
<img src="assets/tick.svg"/>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<label class="label-text">We don’t send spam. Actually, who are we kiding, we’ll spam
|
|||
|
|
the shit out of you’r inbox</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--Scripts-->
|
|||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
|||
|
|
<script src="js/parallax.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
(function($){
|
|||
|
|
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
|
|||
|
|
var $gridRow = $('.row-grid');
|
|||
|
|
if ($gridRow.length) {
|
|||
|
|
|
|||
|
|
var $mainContainer = $('body > .container:first .row:first');
|
|||
|
|
var pad = $mainContainer.position().left + 15;
|
|||
|
|
|
|||
|
|
$gridRow.each(function(){
|
|||
|
|
var $container = $(this).find('.container');
|
|||
|
|
var $rows = $container.find('.row');
|
|||
|
|
var containerWidth = 0;
|
|||
|
|
$rows.each(function(){
|
|||
|
|
var $cols = $(this).find('.grid');
|
|||
|
|
var totalWidth = 0;
|
|||
|
|
$cols.each(function(){
|
|||
|
|
totalWidth += $(this).outerWidth();
|
|||
|
|
});
|
|||
|
|
if (totalWidth > containerWidth) {
|
|||
|
|
containerWidth = totalWidth;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
containerWidth -= 30;
|
|||
|
|
containerWidth += (pad * 2);
|
|||
|
|
$container.width(containerWidth).css('padding', '0 '+pad+'px');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
})(jQuery);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|