灰色简洁样式响应式国际外贸网页模板代码



4 12 5



模板描述:响应式国际外贸,灰色简洁样式响应式国际外贸网页模板代码html模板下载

代码结构

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. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/bootstrap.min.js"></script>

3. HTML代码

    <div class="container-fluid">
      <div class="row tm-brand-row">
        <div class="col-lg-4 col-10">
          <div class="tm-brand-container">
            <div class="tm-brand-texts">
              <h1 class="text-uppercase tm-brand-name">Next Level</h1>
            </div>
          </div>
        </div>
        <div class="col-lg-8 col-2 tm-nav-col">
          <div class="tm-nav">
            <nav class="navbar navbar-expand-lg navbar-light tm-navbar">
              <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-0">
                  <li class="nav-item active">
                    <div class="tm-nav-link-highlight"></div>
                    <a class="nav-link" href="#"
                      >Home <span class="sr-only">(current)</span></a
                    >
                  </li>
                  <li class="nav-item">
                    <div class="tm-nav-link-highlight"></div>
                    <a class="nav-link" href="about.html">About</a>
                  </li>
                  <li class="nav-item">
                    <div class="tm-nav-link-highlight"></div>
                    <a class="nav-link" href="gallery.html">Gallery</a>
                  </li>
                  <li class="nav-item">
                    <div class="tm-nav-link-highlight"></div>
                    <a class="nav-link" href="contact.html">Contact</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="row tm-welcome-row">
        <div class="col-12 tm-page-cols-container">
          <div class="tm-page-col-left tm-welcome-box tm-bg-primary">
            <p class="tm-welcome-text">
              <em>"Hello, this is a clean layout. left side is the text and right
                side is a parallax image."</em>
            </p>
          </div>
          <div class="tm-page-col-right">
            <div
              class="tm-welcome-parallax"
              data-parallax="scroll"
              data-image-src="img/blue-contem-girl.jpg"
            ></div>
          </div>
        </div>
      </div>
      <section class="row tm-pt-4 tm-pb-6">
        <div class="col-12 tm-page-cols-container">
          <div class="tm-page-col-right">
            <h2 class="tm-text-secondary tm-mb-5">
              Nunc tristique velit ut semper
            </h2>
            <p class="tm-mb-6">
              Homepage main photo is provided by <strong>Moose Photos</strong> from <strong>Pexels</strong>. Next Level CSS Template is brought to you by Template Mo website. You can feel free to adapt it for your websites. No need to put a footer credit link. Please kindly spread a word about us. Thank you. If you have any question, feel free to contact us on Facebook page.
            </p>
            <p class="mb-0">
           	  Nullam nec dictum dolor. Sed ultricies purus nec suscipit vulputate. Fusce a massa eu orci
              vulputate varius. Praesent id felis ac erat elementum condimentum. Pellentesque a
              libero vitae nisi vestibulum tempor vitae vitae nulla. Praesent ut
              eleifend ligula, nec pretium erat.
            </p>
          </div>
        </div>
      </section>
      <div class="tm-page-col-right">
        <div class="row tm-pt-7 tm-pb-6">
          <div class="col-md-6 tm-home-section-2-left">
            <div
              class="img-fluid tm-mb-4 tm-small-parallax"
              data-parallax="scroll"
              data-image-src="img/image-1.jpg"></div>
            <div>
              <h3 class="tm-text-secondary tm-mb-4">
                Quisque at rutrum felis
              </h3>
              <p class="tm-mb-5">
                Photo by CoWomen from Pexels. Morbi sollicitudin nibh eu
                dignissim mollis. Etiam turpis tortor, ultricies sit amet
                placerat suscipit, auctor eu diam.
              </p>
              <ul class="tm-list-plus">
                <li>Vestibulum finibus consectetur nulla</li>
                <li>Eget imperdiet eros interdum sit amet</li>
                <li>Sed a lacinia lorem, sed luctus enim</li>
                <li>2 small images has a parallax effect</li>
              </ul>
            </div>
          </div>
          <div class="col-md-6 tm-home-section-2-right">
            <div
              class="img-fluid tm-mb-4 tm-small-parallax"
              data-parallax="scroll"
              data-image-src="img/image-2.jpg"></div>
            <div>
              <h3 class="tm-text-secondary tm-mb-4">
                Sed ultricies tortor vitae
              </h3>
              <p class="tm-section-2-text">
                Photo by <strong>CoWomen</strong> from <strong>Pexels</strong>. Quisque tortor justo, pharetra in
                eros sed, accumsan dapibus dolor. In luctus sed ante a
                tristique.
              </p>
              <p>
                You cannot re-distribute our template on your website for download. Ut ornare pulvinar lorem a elementum. Cras sollicitudin ante velit, eget facilisis sem viverra nex. Etiam quis mattis urna.
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- row -->
      <!-- Call to Action -->
      <section class="row" id="tmCallToAction">
        <div class="col-12 tm-page-cols-container tm-call-to-action-col">
          <div class="tm-page-col-right">
            <div class="tm-call-to-action-box">
              <i class="fas fa-3x fa-rss-square tm-call-to-action-icon"></i>
              <div class="tm-call-to-action-text">
                <h3 class="tm-call-to-action-title">
                  Vivamus sollicitudin tellus
                </h3>
                <p class="tm-call-to-action-description">
                  Maecenas maximus tellus in dolor auctor tristique. Nam
                  hendrerit posuere laoreet. Aliquam erat volutpat. Nulla eros
                  est, imperdiet vel feugiat non, ullamcorper mattis nulla.
                </p>
                <form action="#" method="GET" class="tm-call-to-action-form">
                  <input type="email" name="email" placeholder="Email" class="tm-email-input" required />
                  <button type="submit" class="btn btn-primary">
                    Subscribe
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Page footer -->
      <footer class="row tm-page-footer">
        <p class="col-12 tm-copyright-text mb-0">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
      </footer>
    </div>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 灰色 大气 霸气 外贸 对外贸易 外贸公司 对外贸易公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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