绿色简洁风格响应式企业业务网页模板代码



6 20 7



模板描述:响应式企业业务,绿色简洁风格响应式企业业务网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

2. HTML代码

  <div class="main-top" id="home">
    <!-- header -->
    <div class="headder-top d-lg-flex justify-content-between align-items-center py-3 px-sm-3">
      <!-- logo -->
      <div id="logo">
        <h1>
          <a href="index.html">Pro-Market</a>
        </h1>
      </div>
      <!-- //logo -->
      <!-- nav -->
      <nav>
        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
        <ul class="menu">
          <li>
            <a href="index.html" class="active">Home</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
          <li>
            <a href="service.html">Services</a>
          </li>
          <li>
            <!-- First Tier Drop Down -->
            <label for="drop-2" class="toggle toogle-2">Dropdown
              <span class="fa fa-angle-down" aria-hidden="true"></span>
            </label>
            <a href="#">Dropdown
              <span class="fa fa-angle-down" aria-hidden="true"></span>
            </a>
            <input type="checkbox" id="drop-2" />
            <ul>
              <li>
                <a href="gallery.html" class="drop-text">Projects</a>
              </li>
              <li>
                <a href="error_page.html" class="drop-text">404</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>
      <!-- //nav -->
      <div class="d-flex mt-lg-1 mt-sm-2 mt-3 justify-content-center">
        <!-- search -->
        <div class="search-w3layouts">
          <form action="#" method="post" class="search-bottom-wthree d-flex">
            <input class="search" type="search" placeholder="Search Here..." required="">
            <button class="form-control btn" type="submit">
              <span class="fa fa-search"></span>
            </button>
          </form>
        </div>
        <!-- //search -->
      </div>
    </div>
    <!-- //header -->
    <!-- banner -->
    <div class="container">
      <div class="slider-info">
        <div class="row">
          <div class="col-lg-6 col-md-6 ">
            <h5>Make Your Business
              <br> More Faster</h5>
            <p class="mt-2">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
              Lorem ipsum dolor</p>
            <div class="outs_more-buttn mt-md-4 mt-3">
              <a href="about.html">Read More</a>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 banner-two-grid ">
            <img src="images/b1.png" alt="" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- banner -->
  <!-- about -->
  <section class="about py-lg-4 py-md-3 py-sm-3 py-3">
    <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6 my-3 about-grid-gried">
          <div class="about-fashion-grid ">
            <div class="about-icon text-center">
              <span class="fa fa-line-chart" aria-hidden="true"></span>
            </div>
            <div class="about-wthree-grid mb-3 mt-lg-4 mt-3">
              <h4>Grow Business</h4>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem </p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 my-3 about-grid-gried">
          <div class="about-fashion-grid ">
            <div class="about-icon text-center">
              <span class="fa fa-users" aria-hidden="true"></span>
            </div>
            <div class="about-wthree-grid mb-3 mt-lg-4 mt-3">
              <h4>Great Support</h4>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem </p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 my-3 about-grid-gried">
          <div class="about-fashion-grid ">
            <div class="about-icon text-center">
              <span class="fa fa-briefcase" aria-hidden="true"></span>
            </div>
            <div class="about-wthree-grid mb-3 mt-lg-4 mt-3">
              <h4>Marketing</h4>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-6 my-3 about-grid-gried">
          <div class="about-fashion-grid ">
            <div class="about-icon text-center">
              <span class="fa fa-cubes" aria-hidden="true"></span>
            </div>
            <div class="about-wthree-grid mb-3 mt-lg-4 mt-3">
              <h4>Consultancy</h4>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem</p>
          </div>
        </div>
      </div>
      <div class="row mt-lg-5 mt-md-4 mt-3 ">
        <div class="col-lg-6 col-md-6 my-3">
          <img src="images/s1.png" alt="news image" class="img-fluid">
        </div>
        <div class="col-lg-6 col-md-6 my-3">
          <h3 class="title">Why Choose Us?</h3>
          <p class="sub-w3layouts-title mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Vestibulum nibh urna Lorem</p>
          <div class="wthree-about-list mt-md-4 mt-3">
            <ul>
              <li class="mt-2">
                <span class="fa fa-arrow-circle-right pr-2" aria-hidden="true"></span>
                <p>
                  Lorem ipsum dolor</p>
              </li>
              <li class="mt-2">
                <span class="fa fa-arrow-circle-right pr-2" aria-hidden="true"></span>
                <p>
                  Vestibulum nibh urna</p>
              </li>
              <li class="mt-2">
                <span class="fa fa-arrow-circle-right pr-2" aria-hidden="true"></span>
                <p>
                  consectetur adipiscing</p>
              </li>
              <li class="mt-2">
                <span class="fa fa-arrow-circle-right pr-2" aria-hidden="true"></span>
                <p>
                  Lorem ipsum dolor</p>
              </li>
            </ul>
          </div>
          <div class="outs_more-buttn mt-lg-5 mt-md-4 mt-3">
            <a href="about.html">Read More</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--//about -->
  <!-- service -->
  <section class="service py-lg-4 py-md-3 py-sm-3 py-3">
    <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
      <h3 class="title mb-3">What We Provide </h3>
      <div class="row">
        <div class="col-lg-6 col-md-7">
          <div class="service-grid-wthree mt-lg-5 mt-md-4 my-3">
            <div class="row mt-lg-4 mt-md-4 mt-sm-3 mt-2">
              <div class="col-lg-2 col-md-3 col-sm-2 service-jst-icon">
                <div class="service-icon text-center ">
                  <span class="fa fa-money" aria-hidden="true"></span>
                </div>
              </div>
              <div class="ser-sevice-grid col-lg-10 col-md-9 col-sm-10">
                <h4>Financial Services</h4>
                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem ipsum </p>
              </div>
            </div>
          </div>
          <div class="service-grid-wthree mt-lg-5 mt-md-4 my-3">
            <div class="row mt-lg-4 mt-md-4 mt-sm-3 mt-2">
              <div class="col-lg-2 col-md-3 col-sm-2">
                <div class="service-icon text-center ">
                  <span class="fa fa-commenting" aria-hidden="true"></span>
                </div>
              </div>
              <div class="ser-sevice-grid col-lg-10 col-md-9 col-sm-10">
                <h4>Expert Advisers</h4>
                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem ipsum </p>
              </div>
            </div>
          </div>
          <div class="service-grid-wthree mt-lg-5 mt-md-4 my-3">
            <div class="row mt-lg-4 mt-md-4 mt-sm-3 mt-2">
              <div class="col-lg-2 col-md-3 col-sm-2">
                <div class="service-icon text-center ">
                  <span class="fa fa-clock-o" aria-hidden="true"></span>
                </div>
              </div>
              <div class="ser-sevice-grid col-lg-10 col-md-9 col-sm-10">
                <h4>24/7 Customer Support</h4>
                <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem ipsum </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6 col-md-5 text-center">
          <img src="images/s2.png" alt="news image" class="img-fluid">
        </div>
      </div>
    </div>
  </section>
  <!--//service -->
  <!-- price -->
  <section class="price py-lg-4 py-md-3 py-sm-3 py-3">
    <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
      <div class="row">
        <div class="col-lg-6">
          <h3 class="title">Select Your Pricing Plans</h3>
          <p class="sub-w3layouts-title mt-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna Lorem Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Vestibulum nibh urna Lorem</p>
          <img src="images/s3.png" alt="news image" class="img-fluid">
        </div>
        <div class="col-lg-6 table-chat-list">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 my-3 price-price">
              <div class="table-wthree-price py-lg-5 py-md-4 py-3">
                <div class="table-mid-head text-center">
                  <h4>Package 1</h4>
                </div>
                <div class="table-sub-title text-center">
                  <h5 class="pt-lg-4 pt-md-4 pt-3">
                    <span>$</span>50</h5>
                  <h6 class="pt-1">Per Month</h6>
                  <ul class="mt-lg-4 mt-md-3 mt-2">
                    <li class="pb-1">
                      consectetur
                    </li>
                    <li class="pb-1">
                      eiusmod
                    </li>
                    <li class="pb-1">
                      incididunt
                    </li>
                    <li>
                      dolor sit
                    </li>
                  </ul>
                </div>
                <div class="outs_more-buttn mt-md-4 mt-3 text-center">
                  <a href="contact.html">Book Now</a>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 my-3 price-price">
              <div class="table-wthree-price py-lg-5 py-md-4 py-3">
                <div class="table-mid-head text-center">
                  <h4>Package 2</h4>
                </div>
                <div class="table-sub-title text-center">
                  <h5 class="pt-lg-4 pt-md-4 pt-3">
                    <span>$</span>70</h5>
                  <h6 class="pt-1">Per Month</h6>
                  <ul class="mt-lg-4 mt-md-3 mt-2">
                    <li class="pb-1">
                      consectetur
                    </li>
                    <li class="pb-1">
                      eiusmod
                    </li>
                    <li class="pb-1">
                      incididunt
                    </li>
                    <li>
                      dolor sit
                    </li>
                  </ul>
                </div>
                <div class="outs_more-buttn mt-md-4 mt-3 text-center">
                  <a href="contact.html">Book Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--//price -->
  <!-- footer -->
  <section class="footer-w3layouts-bottem py-lg-4 py-md-3 py-sm-3 py-3">
    <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
      <div class="row mt-lg-4 mt-3">
        <div class="col-lg-5 col-md-4 footer-titles my-3">
          <h2>
            <a href="index.html">Pro-Market</a>
          </h2>
          <p class="pt-3">
            Melbourne St,South Birbane
            <br>4101 Austraila.</p>
          <p class="pt-3">
            +(000) 123 4565 32</p>
          <p class="pt-3">
            <a href="https://www.51qianduan.com/">51前端</a>
          </p>
        </div>
        <div class="col-lg-3 col-md-4 footer-titles my-3">
          <h4 class="mb-lg-4 mb-3">Quick links</h4>
          <ul class="bottom-menu ">
            <li class="pb-sm-2 pb-1">
              <a href="index.html">Home</a>
            </li>
            <li class="py-sm-2 py-1">
              <a href="about.html">About</a>
            </li>
            <li class="py-sm-2 py-1">
              <a href="gallery.html">Projects</a>
            </li>
            <li class="py-sm-2 py-1">
              <a href="contact.html">Contact</a>
            </li>
          </ul>
        </div>
        <div class="footer-titles col-lg-4 col-md-4 my-3">
          <h4 class="mb-lg-4 mb-3">Newsletter</h4>
          <p>Get Subscribe Here</p>
          <form action="#" method="post" class="d-flex">
            <div class="newsletter d-flex mt-lg-4 mt-3">
              <input type="email" name="Your Email" class="form-control" placeholder="Your Email" required="">
              <button class="btn1">
                <span class="fa fa-envelope" aria-hidden="true"></span>
              </button>
            </div>
          </form>
          <div class="social-icons mt-3">
            <ul>
              <li class="facebook">
                <a href="#">
                  <span class="fa fa-facebook"></span>
                </a>
              </li>
              <li class="twitter">
                <a href="#">
                  <span class="fa fa-twitter"></span>
                </a>
              </li>
              <li class="rss">
                <a href="#">
                  <span class="fa fa-rss"></span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- move icon -->
      <div class="text-center mt-lg-5 mt-md-4 mt-3">
        <a href="https://www.51qianduan.com/">51前端</a>
      </div>
      <!--//move icon -->
    </div>
  </section>
  <!--//footer -->
  <!-- copy right -->
  <footer>
    <div class="bottom-footer text-center py-md-4 py-3">
      <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
    </div>
  </footer>
  <!-- copy right -->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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