HTML5蓝色宽屏样式资讯排版网页模板代码下载

HTML5蓝色宽屏样式资讯排版网页模板代码下载

1. 引入CSS

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

2. HTML代码

    <div class="columns-bg">
      <!-- Logo & Intro -->
      <section id="logo" class="tm-section-logo">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-12 offset-sm-0 col-md-6 offset-md-6">
              <div class="tm-site-name-container">
                <div class="tm-site-name-container-inner">
                  <h1 class="text-uppercase tm-text-primary tm-site-name">
                    Sided
                  </h1>
                  <p class="tm-text-primary tm-site-description">
                    new theme just for you
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Intro -->
      <section id="intro" class="tm-p-1-section-1">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-6">
              <div class="tm-section-text-container">
                <i class="tm-text-white">
                  <p class="mb-0">
                    Nullam eget dignissim orci. Donec tincidunt blandit libero iaculis fermentum. Aliquam erat volutpat. Interger suscipit aliquam augue ac rutrum. Phasellus sit amet erat id sapien efficitur euismod.</p>
                </i>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Our Place -->
      <section id="our_place">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-md-12 col-lg-6 tm-section-image-container tm-img-left-container"
            >
              <img src="img/forty_image_01.jpg" alt="Image" class="img-fluid" />
            </div>
            <div class="col-md-12 col-lg-6">
              <div class="tm-section-text-container-2">
                <h2
                  class="tm-text-primary tm-section-title-mb tm-sm-bg-white-alpha"
                >
                  Our Place
                </h2>
                <div class="tm-text-gray">
                  <p class="mb-4">
                  	Sided Bootstrap v4.2.1 template has 3 HTML pages. <a href="index.html">Index</a>, <a href="page-2.html">Page 2</a> and <a href="page-3.html">Page 3</a>.
                    You may share this Sided template or <a href="https://www.51qianduan.com/">51前端</a> to your friends. Pellentesque commodo malesuada est.
                    </p>
                  <p class="mb-0">
                    Suspendisse porttitor sollicitudin nisi et bibendum. Donec
                    ac semper ante, non sagittis sapien. Duis hendrerit tellus
                    sit amet cursus euismod.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Fusce, Section 4 -->
      <section id="section_4" class="tm-section-4">
        <div class="container-fluid">
          <div class="row flex-column-reverse flex-lg-row">
            <div class="col-md-12 col-lg-6 tm-text-left-container">
              <div class="tm-section-text-container-3 tm-bg-white-alpha h-100">
                <h2 class="tm-text-accent tm-section-title-mb">
                  Fusce a porttitor augue
                </h2>
                <p class="mb-0">
                  Quisque rutrum dapibus odio vitae tincidunt. Etiam
                  sollicitudin augue non porta interdum. Pellentesque placerat
                  orci at libero ornare, nec viverra justo lobortis. Phasellus
                  venenatis eros non.
                </p>
              </div>
            </div>
            <div
              class="col-md-12 col-lg-6 tm-section-image-container tm-img-right-container"
            >
              <img
                src="img/forty_image_02.jpg"
                alt="Image"
                class="img-fluid tm-img-right"
              />
            </div>
          </div>
        </div>
      </section>
      <!-- Beautiful Rollovers -->
      <section id="gallery">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12 tm-section-title-mb tm-gallery-title-col">
              <h2 class="tm-section-title-2">Beautiful Rollovers</h2>
              <hr class="tm-section-title-underline" />
            </div>
            <div class="col-12">
              <div class="grid">
                <figure class="effect-duke mb-3">
                  <img
                    src="img/forty_image_11.jpg"
                    alt="Image"
                    class="img-fluid"
                  />
                  <figcaption>
                    <h2>Messy <span>Duke</span></h2>
                    <p>When he looks at the sky, he feels to run.</p>
                    <a href="#">View more</a>
                  </figcaption>
                </figure>
                <figure class="effect-duke">
                  <img
                    src="img/forty_image_12.jpg"
                    alt="Image"
                    class="img-fluid"
                  />
                  <figcaption>
                    <h2>Messy <span>Duke</span></h2>
                    <p>When he looks at the sky, he feels to run.</p>
                    <a href="page-2.html">View more</a>
                  </figcaption>
                </figure>
                <figure class="effect-duke mb-3">
                  <img
                    src="img/forty_image_13.jpg"
                    alt="Image"
                    class="img-fluid"
                  />
                  <figcaption>
                    <h2>Messy <span>Duke</span></h2>
                    <p>When he looks at the sky, he feels to run.</p>
                    <a href="#">View more</a>
                  </figcaption>
                </figure>
                <figure class="effect-duke">
                  <img
                    src="img/forty_image_14.jpg"
                    alt="Image"
                    class="img-fluid"
                  />
                  <figcaption>
                    <h2>Messy <span>Duke</span></h2>
                    <p>When he looks at the sky, he feels to run.</p>
                    <a href="#">View more</a>
                  </figcaption>
                </figure>
              </div>
            </div>
            <div class="col-md-6 tm-section-col-4">
              <div class="tm-section-text-container-4">
                <p class="tm-text-secondary mb-0">
                  Description text for beautiful rollovers using text color code
                  #999 for this line. Quisque pharetra mauris in libero vaius
                  tristique.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Contact -->
      <section id="contact" class="tm-section-contact">
        <div class="row tm-contact-section">
          <div class="col-md-6 px-0">
            <div class="tm-bg-white-alpha tm-contact-left">
              <div class="media mb-5">
                <a href="https://www.51qianduan.com/">51前端</a>
              </div>
              <div class="media mb-5">
                <a href="https://www.51qianduan.com/">51前端</a>
              </div>
              <div class="media">
                <a href="https://www.51qianduan.com/">51前端</a>
              </div>
            </div>
          </div>
          <div class="col-md-6 px-0">
            <div class="tm-contact-form-container">
              <form action="index.html" method="POST" class="tm-contact-form">
                <div class="form-group">
                  <input
                    type="text"
                    id="contact_name"
                    name="contact_name"
                    class="form-control rounded-0 border-top-0 border-right-0 border-left-0"
                    placeholder="Your Name"
                    required
                  />
                </div>
                <div class="form-group">
                  <input
                    type="email"
                    id="contact_email"
                    name="contact_email"
                    class="form-control rounded-0 border-top-0 border-right-0 border-left-0"
                    placeholder="Email"
                    required
                  />
                </div>
                <div class="form-group">
                  <textarea
                    rows="4"
                    id="contact_message"
                    name="contact_message"
                    class="form-control rounded-0 border-top-0 border-right-0 border-left-0"
                    placeholder="Message"
                    required
                  ></textarea>
                </div>
                <div class="text-right">
                  <button type="submit" class="btn tm-btn-submit rounded-0">
                    Send
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
      <section id="outro">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-12 col-md-6">
              <div class="tm-section-text-container-5 tm-text-white">
                <p>
                  Fusce a porttitor augue. Phasellus nec faucibus erat, vitae
                  sagittis arcu. Quisque viverra dui purus, at rutrum nibh
                  suscipit ut.
                </p>
                <i
                  >&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing
                  elit. Duis cursus ac mauris maximus auctor.&rdquo;</i
                >
              </div>
            </div>
            <div class="col-sm-12 col-md-6">
              <div class="tm-section-text-container-6">
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
                <a href="https://www.51qianduan.com/">51前端</a>
              </div>
            </div>
          </div>
          <div class="row">
            <footer class="col-sm-12 col-md-6 offset-md-6 px-md-0">
              <p class="tm-copyright-text mb-0 tm-text-primary">
                Copyright &copy; 2019 Company Name 
                - Design: <a href="https://www.51qianduan.com/">51前端</a>
              </p>
            </footer>
          </div>
        </div>
      </section>
    </div>
    <!-- /.columns-bg -->

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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