<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flat - Responsive HTML Template</title>
<!--
Flat Template
<a class='tag-url' href='http://www.templatemo.com/tm-491-flat' target='_blank'>http://www.templatemo.com/tm-491-flat</a>
-->
<!-- load stylesheets -->
<link rel="stylesheet" href="<a class='tag-url' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400">' target='_blank'>https://fonts.googleapis.com/css?family=Ope...0,400"></a> <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css"> <!-- Font awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Bootstrap style -->
<link rel="stylesheet" href="css/hero-slider-style.css"> <!-- Hero slider style (<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/' target='_blank'>https://codyhouse.co/gem/hero-slider/</a>) -->
<link rel="stylesheet" href="css/magnific-popup.css"> <!-- Magnific popup style (<a class='tag-url' href='http://dimsemenov.com/plugins/magnific-popup/' target='_blank'>http://dimsemenov.com/plugins/magnific-popup/</a>) -->
<link rel="stylesheet" href="css/templatemo-style.css"> <!-- Templatemo style -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="<a class='tag-url' href='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>' target='_blank'>https://oss.maxcdn.com/html5shiv/3.7.2/html...</script></a>
<script src="<a class='tag-url' href='https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>' target='_blank'>https://oss.maxcdn.com/respond/1.4.2/respon...</script></a>
<![endif]-->
</head>
<body>
<!-- Content -->
<div class="cd-hero">
<!-- Navigation -->
<div class="cd-slider-nav">
<nav class="navbar">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
☰
</button>
<div class="collapse navbar-toggleable-sm text-xs-center text-uppercase tm-navbar" id="tmNavbar">
<ul class="nav navbar-nav">
<li class="nav-item active selected">
<a class="nav-link" href="#0" data-no="1">Intro <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0" data-no="2">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0" data-no="3">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0" data-no="4">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#0" data-no="5">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<ul class="cd-hero-slider"> <!-- autoplay -->
<li class="selected">
<div class="cd-full-width">
<div class="container-fluid js-tm-page-content tm-page-1" data-page-no="1">
<div class="row">
<div class="col-xs-12">
<i class="fa fa-4x fa-camera tm-icon"></i>
<h2 class="tm-site-name">FLAT design</h2>
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-textbox-1-col">
<p class="tm-text">Flat design used <a rel="nofollow" href="<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/"' target='_blank'>https://codyhouse.co/gem/hero-slider/"</a> target="_blank">Hero Slider</a> for left and right page transitions. Responsiveness is based on <a rel="nofollow" href="<a class='tag-url' href='http://getbootstrap.com/"' target='_blank'>http://getbootstrap.com/"</a> target="_blank">Bootstrap</a> 4 alpha 2. Images are taken from <a rel="nofollow" href="<a class='tag-url' href='https://unsplash.com/"' target='_blank'>https://unsplash.com/"</a> target="_blank">Unsplash</a>. This web template is provided by <a href="<a class='tag-url' href='https://plus.google.com/+templatemo"' target='_blank'>https://plus.google.com/+templatemo"</a> target="_blank">templatemo</a> for free of charge.</p>
<p class="tm-text">Mauris eros lacus, sollicitudin sit amet lacinia et, vehicula bibendum felis. Pellentesque in quam iaculis erat iaculis lacinia. Donec sagittis sapien odio, a sodales velit elementum nec.</p>
</div>
</div>
</div>
</div>
</div> <!-- .cd-full-width -->
</li>
<li>
<div class="cd-full-width">
<div class="container-fluid js-tm-page-content" data-page-no="2">
<div class="row">
<div class="col-xs-12">
<div class="tm-2-col-container">
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox">
<h2 class="tm-text-title">Lorem ipsum dolor</h2>
<p class="tm-text">Quisque sagittis quam tortor, sit amet posuere justo tempor non. Cras tempus, eros vel ultrices aliquam, velit tortor sodales risus, ac facilisis lectus tortor eget neque.</p>
<p class="tm-text">Nam auctor dui ante. Curabitur tristique nec ligula ac semper. Nunc eu leo sit amet elit condimentum consectetur.</p>
</div>
<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox">
<h2 class="tm-text-title">Phasellus rutrum sapien</h2>
<p class="tm-text">
Donec sagittis sapien odio, a sodales velit elementum nec. Donec feugiat purus a bibendum hendrerit.</p>
<p class="tm-text">Fusce ut elit interdum sem consectetur maximus. Mauris eros lacus, sollicitudin sit amet lacinia et, vehicula bibendum felis. Pellentesque in quam iaculis erat iaculis lacinia.</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- .cd-full-width -->
</li>
<!-- Page 3 -->
<li>
<div class="cd-full-width">
<div class="container-fluid js-tm-page-content" data-page-no="3">
<div class="row tm-img-gallery">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-01.jpg">
<img src="img/tm-img-01-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-02.jpg">
<img src="img/tm-img-02-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-03.jpg">
<img src="img/tm-img-03-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-04.jpg">
<img src="img/tm-img-04-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-05.jpg">
<img src="img/tm-img-05-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-06.jpg">
<img src="img/tm-img-06-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
</div>
</div>
</div>
</li>
<li> <!-- class="cd-bg-video" -->
<div class="js-tm-page-content" data-page-no="4">
<div class="cd-bg-video-wrapper" data-video="video/sunset-loop">
<!-- video element will be loaded using jQuery -->
</div> <!-- .cd-bg-video-wrapper -->
</div>
</li>
<li>
<div class="cd-full-width">
<div class="container-fluid js-tm-page-content" data-page-no="5">
<div class="tm-contact-page">
<div class="row">
<div class="col-xs-12">
<h2 class="tm-section-title">Contact Us</h2>
<p class="tm-text tm-font-w-400 m-b-3">Pellentesque in quam iaculis erat iaculis lacinia. Donec sagittis sapien odio, a sodales velit elementum nec. Donec feugiat purus a bibendum hendreit.</p>
</div>
</div>
<!-- contact form -->
<div class="row">
<form action="index.html" method="post" class="tm-contact-form">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<div class="form-group">
<input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Your Name" required/>
</div>
<div class="form-group">
<input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Your Email" required/>
</div>
<div class="form-group">
<input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject" required/>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
<div class="form-group">
<textarea id="contact_message" name="contact_message" class="form-control" rows="5" placeholder="Your message" required></textarea>
</div>
</div>
<div class="col-xs-12">
<button type="submit" class="pull-xs-right tm-submit-btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- .cd-full-width -->
</li>
</ul> <!-- .cd-hero-slider -->
<footer class="tm-footer">
<div class="tm-social-icons-container">
<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>
<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>
</div>
<p class="tm-copyright-text">Copyright © 2016 Your Company - Design: <a href="<a class='tag-url' href='https://plus.google.com/+templatemo"' target='_blank'>https://plus.google.com/+templatemo"</a> target="_blank">Templatemo</a></p>
</footer>
</div> <!-- .cd-hero -->
<!-- Preloader, <a class='tag-url' href='https://ihatetomatoes.net/create-custom-preloading-screen/' target='_blank'>https://ihatetomatoes.net/create-custom-preloading-screen/</a> -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery (<a class='tag-url' href='https://jquery.com/download/' target='_blank'>https://jquery.com/download/</a>) -->
<script src="<a class='tag-url' href='https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>' target='_blank'>https://www.atlasestateagents.co.uk/javascr...</script></a> <!-- Tether for Bootstrap (<a class='tag-url' href='http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h' target='_blank'>http://stackoverflow.com/questions/3456793...r-http-github-h</a>) -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap js (v4-alpha.getbootstrap.com/) -->
<script src="js/hero-slider-main.js"></script> <!-- Hero slider (<a class='tag-url' href='https://codyhouse.co/gem/hero-slider/' target='_blank'>https://codyhouse.co/gem/hero-slider/</a>) -->
<script src="js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (<a class='tag-url' href='http://dimsemenov.com/plugins/magnific-popup/' target='_blank'>http://dimsemenov.com/plugins/magnific-popup/</a>) -->
<script>
function adjustHeightOfPage(pageNo) {
// Get the page height
var totalPageHeight = 15 + $('.cd-slider-nav').height()
+ $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height() + 160
+ $('.tm-footer').height();
// Adjust layout based on page height and window height
if(totalPageHeight > $(window).height())
{
$('.cd-hero-slider').addClass('small-screen');
$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
}
else
{
$('.cd-hero-slider').removeClass('small-screen');
$('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
}
}
/*
Everything is loaded including images.
*/
$(window).load(function(){
adjustHeightOfPage(1); // Adjust page height
/* Gallery pop up
-----------------------------------------*/
$('.tm-img-gallery').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true}
});
/* Collapse menu after click
-----------------------------------------*/
$('#tmNavbar a').click(function(){
$('#tmNavbar').collapse('hide');
adjustHeightOfPage($(this).data("no")); // Adjust page height
});
/* Browser resized
-----------------------------------------*/
$( window ).resize(function() {
var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");
adjustHeightOfPage( currentPageNo );
});
// Remove preloader
// <a class='tag-url' href='https://ihatetomatoes.net/create-custom-preloading-screen/' target='_blank'>https://ihatetomatoes.net/create-custom-preloading-screen/</a>
$('body').addClass('loaded');
});
</script>
</body>
</html>
Плеер: http://zornet.ru/load/audio_pleer_s_plejli...ml5/81-2-0-7883
Сайт: https://templatemo.com/tm-491-flat
У меня не получается, плеер встает как на приложенной картинке.
Clipboard76767.jpg (, : 434)