На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Как поставить музыкальный плеер на блок в одностраничнике?, Верстка html, css
    ExpandedWrap disabled
      <!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 (95,82 Кбайт, скачиваний: 62)
    Сообщение отредактировано: Serj12 -
    1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
    0 пользователей:


    Рейтинг@Mail.ru
    [ Script Execution time: 0,0930 ]   [ 16 queries used ]   [ Generated: 6.03.21, 01:27 GMT ]