蓝色简洁形式html着陆页网页模板代码下载



4 14 5



模板描述:html着陆页,蓝色简洁形式html着陆页网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" />
<link rel="stylesheet" href="css/all.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/tooplate-style.css" />

2. 引入JS

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/bootstrap.min.js"></script>

3. HTML代码

    <!-- page header -->
    <div class="container" id="home">
      <div class="col-12 text-center">
        <div class="tm-page-header">
          <i class="fas fa-4x fa-chart-bar mr-4"></i>
          <h1 class="d-inline-block text-uppercase">Pro Line</h1>
        </div>
      </div>
    </div>
    <!-- navbar -->
    <div class="tm-nav-section">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <nav class="navbar navbar-expand-md navbar-light">
              <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#tmMainNav"
                aria-controls="tmMainNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="tmMainNav">
                <ul class="navbar-nav mx-auto tm-navbar-nav">
                  <li class="nav-item active">
                    <a class="nav-link" href="#home"
                      >Home <span class="sr-only">(current)</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#features">Features</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#activities">Activities</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#company">Company</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link external" href="#">FB Page</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
    <!-- Video Banner -->
    <section class="tm-banner-section" id="tmVideoSection">
      <div class="container tm-banner-text-container">
        <div class="row">
          <div class="col-12">
            <header>
              <h2 class="tm-banner-title">Pro Line Video</h2>
              <p class="mx-auto tm-banner-subtitle">
                The video background has a parallax effect. This is fluid and
                full-width.
              </p>
            </header>
          </div>
        </div>
      </div>
      <!-- Video -->
      <video id="hero-vid" autoplay loop muted>
        <source src="videos/city-night-blur-01.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </section>
    <!-- Features -->
    <div class="container tm-features-section" id="features">
      <div class="row tm-features-row">
        <section class="col-md-6 col-sm-12 tm-feature-block">
          <header class="tm-feature-header">
            <i class="fas fa-5x fa-anchor tm-feature-icon"></i>
            <h3 class="tm-feature-h">Cras pretium diam ut metus</h3>
          </header>
          <p>
            Pro Line HTML5 Template is brought to you by
            <a rel="nofollow noopener" href="#"
              >Tooplate</a
            >. This layout used Bootstrap v4.1.3 UI kit. You can easily modify
            this template in any HTML editor for your site.
          </p>
          <p>
            Sed interdum, purus vulputate congue luctus, lorem massa dignissim
            nisi, sed condimentum nibh lorem quis lorem. Nulla sed erat
            dignissim, tincidunt ante ac, egestas turpis.
          </p>
        </section>
        <section class="col-md-6 col-sm-12 tm-feature-block">
          <header class="tm-feature-header">
            <i class="fas fa-5x fa-atom tm-feature-icon"></i>
            <h3 class="tm-feature-h">Cras pretium diam ut metus</h3>
          </header>
          <p>
            Phasellus tristique, sapien quis mattis pellentesque, felis turpis
            placerat turpis, nec viverra quam nisl at velit. Pellentesque
            iaculis convallis egestas.
          </p>
          <p>
            Nunc ut elit eget velit mollis sodales. Ut non mauris ut ligula
            mattis consectetur. Aenean augue arcu, rhoncus at nibh nec, lacinia
            blandit nulla.
          </p>
        </section>
      </div>
    </div>
    <!-- Activities -->
    <div class="container" id="activities">
      <div class="row">
        <div class="col-12">
          <div class="tm-parallax">
            <header class="tm-parallax-header">
              <h2 class="">Activities</h2>
            </header>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <div class="tm-activity-block">
            <div class="tm-activity-img-container">
              <img src="img/img-01.jpg" alt="Image" class="tm-activity-img" />
            </div>
            <div class="tm-activity-block-text">
              <h3 class="tm-text-blue">Lorem ipsum dolor sit amet</h3>
              <p>
                Orci varius natoque penatibus et magnis dis parturient montes,
                nascetur ridiculus mus. Sed eu turpis nec sem lacinia
                condimentum et a orci.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="tm-activity-block mr-lg-0 ml-lg-auto">
            <div class="tm-activity-img-container">
              <img src="img/img-02.jpg" alt="Image" class="tm-activity-img" />
            </div>
            <div class="tm-activity-block-text">
              <h3 class="tm-text-blue">Lorem ipsum dolor sit amet</h3>
              <p>
                Orci varius natoque penatibus et magnis dis parturient montes,
                nascetur ridiculus mus. Sed eu turpis nec sem lacinia
                condimentum et a orci.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="tm-activity-block">
            <div class="tm-activity-img-container">
              <img src="img/img-03.jpg" alt="Image" class="tm-activity-img" />
            </div>
            <div class="tm-activity-block-text">
              <h3 class="tm-text-blue">Lorem ipsum dolor sit amet</h3>
              <p>
                Orci varius natoque penatibus et magnis dis parturient montes,
                nascetur ridiculus mus. Sed eu turpis nec sem lacinia
                condimentum et a orci.
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="tm-activity-block mr-lg-0 ml-lg-auto">
            <div class="tm-activity-img-container">
              <img src="img/img-04.jpg" alt="Image" class="tm-activity-img" />
            </div>
            <div class="tm-activity-block-text">
              <h3 class="tm-text-blue">Lorem ipsum dolor sit amet</h3>
              <p>
                Orci varius natoque penatibus et magnis dis parturient montes,
                nascetur ridiculus mus. Sed eu turpis nec sem lacinia
                condimentum et a orci.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <section class="container tm-company-section" id="company">
      <div class="row">
        <div class="col-xl-9 col-lg-8 col-md-12 tm-company-left">
          <div class="tm-company-about">
            <div class="tm-company-img-container">
              <img src="img/img-05.jpg" alt="Image" />
            </div>
            <div class="tm-company-about-text">
              <header>
                <h2 class="tm-company-about-header">Our Company</h2>
              </header>
              <p>
                Phasellus fringilla convallis libero non aliquam. Morbi justo
                lorem, varius ultricies pulvinar ac, aliquet quis ipsum.
              </p>
              <p class="mb-4">
                Suspendisse aliquam pulvinar odio sed rhoncus. Cras pretium diam
                ut metus tristique, a ultricies sapien euismod. Duis dui diam,
                maximus ac ligula a, accumsan cursus ante.
              </p>
              <a href="#" class="btn tm-btn tm-float-right">Read More</a>
            </div>
          </div>
        </div>
        <div
          class="col-xl-9 col-lg-4 col-md-12 tm-company-right  ml-lg-auto mr-lg-0"
        >
          <div class="tm-company-right-inner">
            <ul class="nav nav-tabs" id="tmCompanyTab" role="tablist">
              <li class="nav-item">
                <a href="https://www.51qianduan.com/">51前端</a></p>
        <div class="col-md-2 col-sm-12 scrolltop">
          <div class="scroll icon"><i class="fa fa-4x fa-angle-up"></i></div>
        </div>
      </div>
    </footer>
    <!-- Single Page Nav plugin works with this version of jQuery -->
    <script>
      /**
       * detect IE
       * returns version of IE or false, if browser is not Internet Explorer
       */
      function detectIE() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        if (msie > 0) {
          // IE 10 or older => return version number
          return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
        }
        var trident = ua.indexOf("Trident/");
        if (trident > 0) {
          // IE 11 => return version number
          var rv = ua.indexOf("rv:");
          return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
        }
        // var edge = ua.indexOf('Edge/');
        // if (edge > 0) {
        //     // Edge (IE 12+) => return version number
        //     return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
        // }
        // other browser
        return false;
      }
      function setVideoHeight() {
        const videoRatio = 1920 / 1080;
        const minVideoWidth = 400 * videoRatio;
        let secWidth = 0,
          secHeight = 0;
        secWidth = videoSec.width();
        secHeight = videoSec.height();
        secHeight = secWidth / 2.13;
        if (secHeight > 600) {
          secHeight = 600;
        } else if (secHeight < 400) {
          secHeight = 400;
        }
        if (secWidth > minVideoWidth) {
          $("video").width(secWidth);
        } else {
          $("video").width(minVideoWidth);
        }
        videoSec.height(secHeight);
      }
      // Parallax function
      var background_image_parallax = function($object, multiplier) {
        multiplier = typeof multiplier !== "undefined" ? multiplier : 0.5;
        multiplier = 1 - multiplier;
        var $doc = $(document);
        $object.css({ "background-attatchment": "fixed" });
        $(window).scroll(function() {
          var from_top = $doc.scrollTop(),
            bg_css = "center " + multiplier * from_top + "px";
          $object.css({ "background-position": bg_css });
        });
      };
      $(window).scroll(function() {
        if ($(this).scrollTop() > 50) {
          $(".scrolltop:hidden")
            .stop(true, true)
            .fadeIn();
        } else {
          $(".scrolltop")
            .stop(true, true)
            .fadeOut();
        }
        // Make sticky header
        if ($(this).scrollTop() > 158) {
          $(".tm-nav-section").addClass("sticky");
        } else {
          $(".tm-nav-section").removeClass("sticky");
        }
      });
      let videoSec;
      $(function() {
        if (detectIE()) {
          alert(
            "Please use the latest version of Edge, Chrome, or Firefox for best browsing experience."
          );
        }
        const mainNav = $("#tmMainNav");
        mainNav.singlePageNav({
          filter: ":not(.external)",
          offset: $(".tm-nav-section").outerHeight(),
          updateHash: true,
          beforeStart: function() {
            mainNav.removeClass("show");
          }
        });
        videoSec = $("#tmVideoSection");
        // Adjust height of video when window is resized
        $(window).resize(function() {
          setVideoHeight();
        });
        setVideoHeight();
        $(window).on("load scroll resize", function() {
          var scrolled = $(this).scrollTop();
          var vidHeight = $("#hero-vid").height();
          var offset = vidHeight * 0.6;
          var scrollSpeed = 0.25;
          var windowWidth = window.innerWidth;
          if (windowWidth < 768) {
            scrollSpeed = 0.1;
            offset = vidHeight * 0.5;
          }
          $("#hero-vid").css(
            "transform",
            "translate3d(-50%, " + -(offset + scrolled * scrollSpeed) + "px, 0)"
          ); // parallax (25% scroll rate)
        });
        // Parallax image background
        background_image_parallax($(".tm-parallax"), 0.4);
        // Back to top
        $(".scroll").click(function() {
          $("html,body").animate(
            { scrollTop: $("#home").offset().top },
            "1000"
          );
          return false;
        });
      });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 大气 霸气 引导页 导航页

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到