moban2669

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Home</title>

  <meta charset="utf-8">
  <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="">
  <!--http://sc.chinaz.com/moban/180122502620.htm-->
  <!-- Css -->
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/font-icons.css" />
  <link rel="stylesheet" href="css/style.css" />

  <!-- Lazyload -->
  <script src="js/lazysizes.min.js"></script>

</head>

<body class="bg-light">

  <!-- Bg Overlay -->
  <div class="content-overlay"></div>

  <!-- Sidenav -->
  <header class="sidenav" id="sidenav">
    <!-- Nav -->
    <nav class="sidenav__menu-container">
      <ul class="sidenav__menu" role="menubar">
        <li>
          <a href="#" class="sidenav__menu-link">热点</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">科技</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">娱乐</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">财经</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">游戏</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">体育</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">国际</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">联系我们</a>
        </li>
      </ul>
    </nav>

  </header> <!-- end sidenav -->

  <main class="main oh" id="main">

    <!-- Navigation -->
    <header class="nav">

      <div class="nav__holder nav--sticky">
        <div class="container relative">
          <div class="flex-parent">

            <!-- Side Menu Button -->
            <button class="nav-icon-toggle" id="nav-icon-toggle" aria-label="Open side menu">
              <span class="nav-icon-toggle__box">
                <span class="nav-icon-toggle__inner"></span>
              </span>
            </button> <!-- end Side menu button -->

            <!-- Nav-wrap -->
            <nav class="flex-child nav__wrap d-none d-lg-block">
              <ul class="nav__menu">

                <li class="active">
                  <a href="index.html">热点</a>
                </li>

                <li>
                  <a href="#">科技</a>
                </li>

                <li>
                  <a href="#">娱乐</a>
                </li>

                <li>
                  <a href="#">财经</a>
                </li>

                <li>
                  <a href="#">游戏</a>
                </li>

                <li>
                  <a href="#">体育</a>
                </li>

                <li>
                  <a href="#">国际</a>
                </li>

                <li>
                  <a href="#">联系我们</a>
                </li>

              </ul> <!-- end menu -->
            </nav> <!-- end nav-wrap -->

          </div> <!-- end flex-parent -->
        </div> <!-- end container -->

      </div>
    </header> <!-- end navigation -->

    <div class="main-container container mt-40" id="main-container">

      <!-- Content -->
      <div class="row">

        <!-- Posts -->
        <div class="col-lg-8 blog__content mb-30">

          <!-- Latest News -->
          <section class="section">
            <div class="title-wrap">
              <h3 class="section-title">热点</h3>
              <a href="#" class="all-posts-url"></a>
            </div>

            <article class="entry post-list">
              <div class="entry__img-holder post-list__img-holder">
                <a href="single-post.html">
                  <div class="thumb-container thumb-75">
                    <img src="img/blog/list_post_img_1.jpg" class="entry__img lazyload" alt="">
                  </div>
                </a>
              </div>

              <div class="entry__body post-list__body">
                <div class="entry__header">
                  <h2 class="entry__title">
                    <a href="single-post.html">Your Business Is Talking. Do You Have the Tools to Listen?</a>
                  </h2>
                </div>
                <div class="entry__excerpt">
                  <p>Point of Sale hardware, the till at a shop check out, has become very complex over the past ten
                    years. Modern POS hardware includes the cash till, bar-code readers...</p>
                </div>
              </div>
            </article>

            <article class="entry post-list">
              <div class="entry__img-holder post-list__img-holder">
                <a href="single-post.html">
                  <div class="thumb-container thumb-75">
                    <img src="img/blog/list_post_img_2.jpg" class="entry__img lazyload" alt="">
                  </div>
                </a>
              </div>

              <div class="entry__body post-list__body">
                <div class="entry__header">
                  <h2 class="entry__title">
                    <a href="single-post.html">Removing Bitcoin payments from Steam is a smart move by Valve</a>
                  </h2>
                </div>
                <div class="entry__excerpt">
                  <p>Point of Sale hardware, the till at a shop check out, has become very complex over the past ten
                    years. Modern POS hardware includes the cash till, bar-code readers...</p>
                </div>
              </div>
            </article>

            <article class="entry post-list">
              <div class="entry__img-holder post-list__img-holder">
                <a href="single-post.html">
                  <div class="thumb-container thumb-75">
                    <img src="img/blog/list_post_img_3.jpg" class="entry__img lazyload" alt="">
                  </div>
                </a>
              </div>

              <div class="entry__body post-list__body">
                <div class="entry__header">
                  <h2 class="entry__title">
                    <a href="single-post.html">This Is the Burberry Bag Every Fashion Girl Wanted 15 Years Ago</a>
                  </h2>
                </div>
                <div class="entry__excerpt">
                  <p>Point of Sale hardware, the till at a shop check out, has become very complex over the past ten
                    years. Modern POS hardware includes the cash till, bar-code readers...</p>
                </div>
              </div>
            </article>

          </section> <!-- end latest news -->

        </div> <!-- end posts -->

      </div> <!-- end content -->
    </div> <!-- end main container -->

    <!-- Footer -->
    <footer class="footer footer--dark">
      <div class="footer__bottom">
        <div class="container">
          <div class="row">
            <div class="col-lg-5 order-lg-1 text-md-center">
              <span class="copyright">
                Copyright &copy; 2020.grebell All rights reserved.
              </span>
            </div>
          </div>
        </div>
      </div> <!-- end bottom footer -->
    </footer> <!-- end footer -->

    <div id="back-to-top">
      <a href="#top" aria-label="Go to top"><i class="ui-arrow-up"></i></a>
    </div>

  </main> <!-- end main-wrapper -->


  <!-- jQuery Scripts -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl-carousel.min.js"></script>
  <script src="js/modernizr.min.js"></script>
  <script src="js/scripts.js"></script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Single Post</title>

  <meta charset="utf-8">
  <!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="description" content="">

  <!-- Css -->
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/font-icons.css" />
  <link rel="stylesheet" href="css/style.css" />

</head>

<body class="bg-light single-post">

  <!-- Bg Overlay -->
  <div class="content-overlay"></div>

  <!-- Sidenav -->
  <header class="sidenav" id="sidenav">
    <!-- Nav -->
    <nav class="sidenav__menu-container">
      <ul class="sidenav__menu" role="menubar">
        <li>
          <a href="#" class="sidenav__menu-link">热点</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">科技</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">娱乐</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">财经</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">游戏</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">体育</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">国际</a>
        </li>

        <li>
          <a href="#" class="sidenav__menu-link">联系我们</a>
        </li>
      </ul>
    </nav>

  </header> <!-- end sidenav -->


  <main class="main oh" id="main">

    <!-- Navigation -->
    <header class="nav">

      <div class="nav__holder nav--sticky">
        <div class="container relative">
          <div class="flex-parent">

            <!-- Side Menu Button -->
            <button class="nav-icon-toggle" id="nav-icon-toggle" aria-label="Open side menu">
              <span class="nav-icon-toggle__box">
                <span class="nav-icon-toggle__inner"></span>
              </span>
            </button> <!-- end Side menu button -->

            <!-- Nav-wrap -->
            <nav class="flex-child nav__wrap d-none d-lg-block">
              <ul class="nav__menu">

                <li class="active">
                  <a href="index.html">热点</a>
                </li>

                <li>
                  <a href="#">科技</a>
                </li>

                <li>
                  <a href="#">娱乐</a>
                </li>

                <li>
                  <a href="#">财经</a>
                </li>

                <li>
                  <a href="#">游戏</a>
                </li>

                <li>
                  <a href="#">体育</a>
                </li>

                <li>
                  <a href="#">国际</a>
                </li>

                <li>
                  <a href="#">联系我们</a>
                </li>

              </ul> <!-- end menu -->
            </nav> <!-- end nav-wrap -->

          </div> <!-- end flex-parent -->
        </div> <!-- end container -->

      </div>
    </header> <!-- end navigation -->

    <div class="main-container container" id="main-container">

      <!-- Content -->
      <div class="row">

        <!-- post content -->
        <div class="col-lg-8 blog__content mb-30">

          <!-- standard post -->
          <article class="entry">

            <div class="single-post__entry-header entry__header">
              <h1 class="single-post__entry-title">
                Myanmar little monk reading book outside monastery
              </h1>
            </div>

            <div class="entry__img-holder">
              <img src="img/blog/single_post_featured_img.jpg" alt="" class="entry__img">
            </div>

            <div class="entry__article">
              <p>Namira is a very slick and clean e-commerce template with endless possibilities. Creating an awesome
                clothes store with this Theme is easy than you can imagine. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. In sed vulputate massa. Fusce ante magna, iaculis ut purus ut. <a href="#">Morbi
                  consequat purus</a> ac ultricies commodo. Integer aliquam ante a mauris gravida, vitae bibendum neque
                pharetra. Nulla rhoncus orci varius purus lobortis euismod. Fusce tincidunt dictum est et rhoncus.
                <strong>Vivamus hendrerit</strong> congue nisi, et nisl tincida vestibulum elit tincidunt eu. Vivamus ac
                pharetra orci, in feugiat massa. Proin congue mauris pretium, ultricies tortor in, aliquam urna. Vivamus
                mi tortor, finibus a interdum ac, ultricies in elit.</p>

              <blockquote>
                <p>“Dreams and dedication are powerful combination.</p>
                <cite>William Longgood</cite>
              </blockquote>

              <h2>Set a bigger goals and chase them everyday</h2>

              <p>Music can help you get into a “flow state” -- losing yourself in the task at hand. Even repetitive
                tasks or mundane assignments seem more bearable, or even fun, when your favorite tunes are in your ears.
                Plus, your eyes won’t be so prone to checking the time. <a href="#">Check out these</a> and more reasons
                to bring your music to work in this Zing Instruments infographic below. A great piece of music is an
                instant mood lifter. Plenty of scientific evidence backs this up - we`re happier bunnies when listening
                to music.</p>

              <figure>
                <img data-src="img/blog/single_post_img.jpg" src="img/empty.png" alt="" class="lazyload">
                <figcaption>The best WordPress theme</figcaption>
              </figure>

              <p>Nulla rhoncus orci varius purus lobortis euismod. Fusce tincidunt dictum est et rhoncus. Vivamus
                hendrerit congue nisi, et nisl tincida vestibulum elit tincidunt eu. Vivamus ac pharetra orci, in
                feugiat massa. Proin congue mauris pretium, ultricies tortor in, aliquam urna. Vivamus mi tortor,
                finibus a interdum ac, ultricies in elit. Vestibulum ante ipsum primis in faucibus orci luctus et
                ultrices posuere hendrerit ex eu scelerisque.</p>

              <h3>Summary</h3>

              <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos. Lorem ipsum dolor sit
                amet, consectetur adipiscing elit. And finally the subconscious is the mechanism through which thought
                impulses which are repeated regularly with feeling and emotion are quickened, charged. And finally the
                subconscious is the mechanism through which thought impulses which are repeated regularly with feeling
                and emotion.</p>

            </div> <!-- end entry article -->

          </article> <!-- end standard post -->

        </div> <!-- end col -->

      </div> <!-- end content -->
    </div> <!-- end main container -->

    <footer class="footer footer--dark">
      <div class="footer__bottom">
        <div class="container">
          <div class="row">
            <div class="col-lg-5 order-lg-1 text-md-center">
              <span class="copyright">
                Copyright &copy; 2020.grebell All rights reserved.
              </span>
            </div>
          </div>
        </div>
      </div> <!-- end bottom footer -->
    </footer> <!-- end footer -->

    <div id="back-to-top">
      <a href="#top" aria-label="Go to top"><i class="ui-arrow-up"></i></a>
    </div>

  </main> <!-- end main-wrapper -->


  <!-- jQuery Scripts -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl-carousel.min.js"></script>
  <script src="js/modernizr.min.js"></script>
  <script src="js/scripts.js"></script>

</body>

</html>
(function($){
  "use strict";

  var $window = $(window);

  $window.on('load', function() {
    $window.trigger("resize");
  });

  // Preloader
  $('.loader').fadeOut();
  $('.loader-mask').delay(350).fadeOut('slow');


  // Init
  initOwlCarousel();
  

  $window.on('resize', function() {
    hideSidenav();
  });


  /* Detect Browser Size
  -------------------------------------------------------*/
  var minWidth;
  if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    minWidth = function (width) {
      return Modernizr.mq('(min-width: ' + width + 'px)');
    };
  }
  else {
    // Fallback for browsers that does not support media queries
    minWidth = function (width) {
      return $window.width() >= width;
    };
  }


  /* Mobile Detect
  -------------------------------------------------------*/
  if (/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent || navigator.vendor || window.opera)) {
     $("html").addClass("mobile");
     $('.dropdown-toggle').attr('data-toggle', 'dropdown');
  }
  else {
    $("html").removeClass("mobile");
  }

  /* IE Detect
  -------------------------------------------------------*/
  if(Function('/*@cc_on return document.documentMode===10@*/')()){ $("html").addClass("ie"); }


  /* Sticky Navigation
  -------------------------------------------------------*/
  $window.scroll(function(){
    scrollToTop();    
    stickyNav(); 
  });

  var $stickyNav = $('.nav--sticky');
  var $nav = $('.nav');

  function stickyNav() {
    if ($window.scrollTop() > 2) {
      $stickyNav.addClass('sticky');
      $nav.addClass('sticky');
    } else {
      $stickyNav.removeClass('sticky');
      $nav.removeClass('sticky');
    }
  }


  /* Mobile Navigation
  -------------------------------------------------------*/
  var $sidenav = $('#sidenav'),
      $mainContainer = $('#main-container'),
      $navIconToggle = $('.nav-icon-toggle'),
      $navHolder = $('.nav__holder'),
      $contentOverlay = $('.content-overlay'),
      $htmlContainer = $('html'),
      $sidenavCloseButton = $('#sidenav__close-button');


  $navIconToggle.on('click', function(e) {
    e.stopPropagation();
    $(this).toggleClass('nav-icon-toggle--is-open');
    $sidenav.toggleClass('sidenav--is-open');   
    $contentOverlay.toggleClass('content-overlay--is-visible');
    // $htmlContainer.toggleClass('oh');
  });

  function resetNav() {
    $navIconToggle.removeClass('nav-icon-toggle--is-open');
    $sidenav.removeClass('sidenav--is-open');
    $contentOverlay.removeClass('content-overlay--is-visible');
    // $htmlContainer.removeClass('oh');
  }

  function hideSidenav() {
    if( minWidth(992) ) {
      resetNav();
    }
  }

  $contentOverlay.on('click', function() {
    resetNav();
  });

  $sidenavCloseButton.on('click', function() {
    resetNav();
  });
  

  var $dropdownTrigger = $('.nav__dropdown-trigger'),
      $navDropdownMenu = $('.nav__dropdown-menu'),
      $navDropdown = $('.nav__dropdown');


  if ( $('html').hasClass('mobile') ) {

    $('body').on('click',function() {
      $navDropdownMenu.addClass('hide-dropdown');
    });

    $navDropdown.on('click', '> a', function(e) {
      e.preventDefault();
    });

    $navDropdown.on('click',function(e) {
      e.stopPropagation();
      $navDropdownMenu.removeClass('hide-dropdown');
    });
  }


  /* Sidenav Menu
  -------------------------------------------------------*/
  $('.sidenav__menu-toggle').on('click', function(e) {
    e.preventDefault();
    
    var $this = $(this);
    
    $this.parent().siblings().removeClass('sidenav__menu--is-open');
    $this.parent().siblings().find('li').removeClass('sidenav__menu--is-open');
    $this.parent().find('li').removeClass('sidenav__menu--is-open');
    $this.parent().toggleClass('sidenav__menu--is-open');       
    
    if ($this.next().hasClass('show')) {
      $this.next().removeClass('show').slideUp(350);    
    } else {
      $this.parent().parent().find('li .sidenav__menu-dropdown').removeClass('show').slideUp(350);
      $this.next().toggleClass('show').slideToggle(350);
    }
  });


  /* Nav Seacrh
  -------------------------------------------------------*/
  (function() {
    var navSearchTrigger = $('.nav__search-trigger'),
        navSearchTriggerIcon = navSearchTrigger.find('i'),
        navSearchBox = $('.nav__search-box'), 
        navSearchInput = $('.nav__search-input'); 

    navSearchTrigger.on('click', function(e){
      e.preventDefault();
      navSearchTriggerIcon.toggleClass('ui-close');
      navSearchBox.slideToggle();      
    });
  })();
  
  /* News Ticker
  -------------------------------------------------------*/
  var $newsTicker = $('.newsticker');

  if($newsTicker.length) {
    $newsTicker.newsTicker({
      row_height: 26,
      max_rows: 1,
      prevButton: $('#newsticker-button--prev'),
      nextButton: $('#newsticker-button--next')
    });
  }  

  /* Progress Bars
  -------------------------------------------------------*/
  var $animatedBars = $('#animated-bars');
  if($animatedBars.length) {
    $('#animated-bars').appear(function() {
      function loadDaBars() {
        $('.progress-bars__base').each(function(index) {
          var $this = $(this),
          bar = $this.find('.progress-bars__bar'),
          barWidth = bar.attr('aria-valuenow');
          setTimeout(function() {
            bar.css({"width": barWidth + '%'});
          }, index * 200);
        });
      };
      loadDaBars();
    });
  }
  

  /* Tabs
  -------------------------------------------------------*/
  $('.tabs__trigger').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');
    $('.tabs__content-trigger ' + currentAttrValue).stop().fadeIn(1000).siblings().hide();
    $(this).parent('li').addClass('tabs__item--active').siblings().removeClass('tabs__item--active');
    e.preventDefault();
  });
  

  /* Owl Carousel
  -------------------------------------------------------*/
  function initOwlCarousel(){

    // Hero
    $("#owl-hero-grid").owlCarousel({
      center: false,
      items: 1,
      loop: true,
      nav: true,
      dots: true,
      margin: 0,
      lazyLoad: true,
      navSpeed: 500,
      navText: ['<i class="ui-arrow-left">','<i class="ui-arrow-right">']
    });

    // Posts Carousel
    $("#owl-posts").owlCarousel({
      center: false,
      items: 2,
      loop: true,
      nav: false,
      dots: false,
      margin: 16,
      lazyLoad: true,
      navSpeed: 500,
      navText: ['<i class="ui-arrow-left">','<i class="ui-arrow-right">'],
      responsive:{
        768:{
          items:3
        }
      }
    });

    // Single Image
    $("#owl-single").owlCarousel({
      items: 1,
      loop: true,
      nav: true,
      dots: false,
      lazyLoad: true,
      navSpeed: 500,
      navText: ['<i class="ui-arrow-left">','<i class="ui-arrow-right">']
    });

    // Single Post Gallery
    $("#owl-single-post-gallery").owlCarousel({
      items: 1,
      loop: true,
      nav: true,
      dots: true,
      lazyLoad: true,
      navSpeed: 500,
      navText: ['<i class="ui-arrow-left">','<i class="ui-arrow-right">']
    });

    // Custom nav
    var owlNav = $('#owl-posts').owlCarousel();
    $(".carousel-nav__btn--prev").on('click', function () {
        owlNav.trigger('prev.owl.carousel');
    });

    $(".carousel-nav__btn--next").on('click', function () {
        owlNav.trigger('next.owl.carousel');
    });    
  };


  /* ---------------------------------------------------------------------- */
  /*  Contact Form
  /* ---------------------------------------------------------------------- */

  var submitContact = $('#submit-message'),
    message = $('#msg');

  submitContact.on('click', function(e){
    e.preventDefault();

    var $this = $(this);
    
    $.ajax({
      type: "POST",
      url: 'contact.php',
      dataType: 'json',
      cache: false,
      data: $('#contact-form').serialize(),
      success: function(data) {

        if(data.info !== 'error'){
          $this.parents('form').find('input[type=text],input[type=email],textarea,select').filter(':visible').val('');
          message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');
        } else {
          message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');
        }
      }
    });
  });


  /* Scroll to Top
  -------------------------------------------------------*/
  function scrollToTop() {
    var scroll = $window.scrollTop();
    var $backToTop = $("#back-to-top");
    if (scroll >= 50) {
      $backToTop.addClass("show");
    } else {
      $backToTop.removeClass("show");
    }
  }

  $('a[href="#top"]').on('click',function(){
    $('html, body').animate({scrollTop: 0}, 1000, "easeInOutQuint");
    return false;
  });

})(jQuery);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值