蓝色简洁形式html创意企业官网网页模板代码



4 12 5



模板描述:html创意企业官网,蓝色简洁形式html创意企业官网网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
<link rel="stylesheet" href="assets/css/icofont.min.css" />
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="assets/css/featherlight.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />

2. 引入JS

<script src="assets/js/jquery-3.3.1.slim.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/featherlight.min.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

    <!-- Preloader -->
    <div id="preloader">
      <div class="pre-container">
        <div class="spinner">
          <div class="double-bounce1"></div>
          <div class="double-bounce2"></div>
        </div>
      </div>
    </div>
    <!-- Start nav section -->
    <header class="nav-section" id="nav-section">
      <div class="container">
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col-md-2 col-6">
            <a href="index.html" class="logo">
              <img src="assets/img/logo.png" alt="logo" />
            </a>
          </div>
          <div class="col-md-10 col-6 main-menu">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html">Contact Us</a></li>
            </ul>
            <div class="mobile-menu-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                width="24px"
                height="24px"
              >
                <path
                  style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal"
                  d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </header>
    <nav class="mobile-menu-wrap">
      <div class="close-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="24px"
          height="24px"
        >
          <path
            d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"
          />
        </svg>
      </div>
      <div id="mobile-menu"></div>
    </nav>
    <!-- End nav section -->
    <!-- Start header section -->
    <section class="header-section">
      <div class="container">
        <div class="row d-flex align-items-center">
          <div class="col-lg-6 header-left order-lg-1 order-md-2 order-2">
            <h1>
              Esto is <span>diffrent</span> <br />
              creative agency.
            </h1>
            <p>
              Better off than with most other themes since options are right
              from within the making super easy to configure your site compared
              to most of the surprised simple from anything from streamlined.
            </p>
            <a class="btn-style" href="#">See Services</a>
          </div>
          <div class="col-lg-6 header-right order-lg-2 order-md-1 order-1">
            <img
              class="img-fluid"
              src="assets/img/header-right-img.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </section>
    <!-- End header section -->
    <!-- Start brand-logo section -->
    <section class="brand-logo-section">
      <div class="container">
        <div class="row">
          <div class="brand-logo-carousel owl-carousel owl-theme">
            <div class="single-brand-logo">
              <a href="#"
                ><img class="mx-auto" src="assets/img/brand-logo1.png" alt=""
              /></a>
            </div>
            <div class="single-brand-logo">
              <a href="#"
                ><img class="mx-auto" src="assets/img/brand-logo2.png" alt=""
              /></a>
            </div>
            <div class="single-brand-logo">
              <a href="#"
                ><img class="mx-auto" src="assets/img/brand-logo3.png" alt=""
              /></a>
            </div>
            <div class="single-brand-logo">
              <a href="#"
                ><img class="mx-auto" src="assets/img/brand-logo4.png" alt=""
              /></a>
            </div>
            <div class="single-brand-logo">
              <a href="#"
                ><img class="mx-auto" src="assets/img/brand-logo5.png" alt=""
              /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End brand-logo section -->
    <!-- Start about section -->
    <section class="about-section section-gap">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-lg-8 col-md-10 section-title-wrap">
            <h1>
              Get connected and take control <br />
              of your
              <span>agency success.</span>
            </h1>
            <p>
              Easily activate one page navigation on any page throughout and
              your site with the selection of one simple.
            </p>
          </div>
        </div>
        <div class="row d-flex align-items-center">
          <div class="col-lg-6 col-md-12 about-left">
            <img class="about-img" src="assets/img/about-left-img.png" alt="" />
          </div>
          <div class="col-lg-6 col-md-12 about-right">
            <p class="title">About Us</p>
            <h4>Great creative agency</h4>
            <p>
              Activate one page navigation on any page throughout your with the
              selection one simple option in the admin area. Doing this, you can
              create anything from simple streamlined homepages to unque and
              engaging informational.
            </p>
            <p>
              Activate one page navigation on any page throughout your with the
              selection one simple option in the admin area. Doing this, you can
              create.
            </p>
            <a class="btn-style" href="#">See Service</a>
          </div>
        </div>
      </div>
    </section>
    <!-- End about section -->
    <!-- Start service section -->
    <section class="service-section section-gap">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-lg-8 col-md-10 section-title-wrap">
            <p class="title">Our Services</p>
            <h1>
              Exclusive services for the next <br />
              honourable customer
            </h1>
            <p>
              Activate one page navigation on any page throughout your with the
              selection and your site.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="service-carousel owl-carousel owl-theme">
            <div class="single-service">
              <div class="icon-wrap">
                <i class="icofont-chart-bar-graph"></i>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div class="service-details">
                <h4>Market Analysis</h4>
                <p>
                  Activate page navigation any page throughout your the
                  selection one simple option the admin area doing this.
                </p>
                <a href="#">Details Here</a>
              </div>
            </div>
            <div class="single-service">
              <div class="icon-wrap">
                <i class="icofont-ui-network"></i>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div class="service-details">
                <h4>Network Analysis</h4>
                <p>
                  Activate page navigation any page throughout your the
                  selection one simple option the admin area doing this.
                </p>
                <a href="#">Details Here</a>
              </div>
            </div>
            <div class="single-service">
              <div class="icon-wrap">
                <i class="icofont-multimedia"></i>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div class="service-details">
                <h4>Media Marketing</h4>
                <p>
                  Activate page navigation any page throughout your the
                  selection one simple option the admin area doing this.
                </p>
                <a href="#">Details Here</a>
              </div>
            </div>
            <div class="single-service">
              <div class="icon-wrap">
                <i class="icofont-users-social"></i>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div class="service-details">
                <h4>Social Marketing</h4>
                <p>
                  Activate page navigation any page throughout your the
                  selection one simple option the admin area doing this.
                </p>
                <a href="#">Details Here</a>
              </div>
            </div>
            <div class="single-service">
              <div class="icon-wrap">
                <i class="icofont-dashboard-web"></i>
                <svg
                  viewBox="0 0 384 307"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g fill="#e6effc" fill-rule="nonzero">
                    <path
                      d="M307.5,14 C349.3,37.1 386.4,93.1 383.1,152.9 C379.8,212.7 336.1,276.2 279.3,297.9 C222.5,319.6 152.6,299.5 95.5,266.7 C38.4,233.9 -5.9,188.4 0.8,150.6 C7.5,112.7 65.2,82.4 102.4,60.4 C139.6,38.4 156.3,24.7 187.9,12.9 C219.4,1 265.8,-9 307.5,14 Z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div class="service-details">
                <h4>Software Development</h4>
                <p>
                  Activate page navigation any page throughout your the
                  selection one simple option the admin area doing this.
                </p>
                <a href="#">Details Here</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End service section -->
    <!-- Start testimonial section -->
    <section class="testimonial-section section-gap">
      <div class="container">
        <div class="row d-flex align-items-center">
          <div class="col-lg-6 testimonial-left">
            <p class="title">Testimonial</p>
            <h4>Our customers says <br />somethings about us.</h4>
            <p>
              Activate one page navigation on any page throughout your with the
              selection one simple option in the admin area. Doing this.
            </p>
            <div class="t-img">
              <ul>
                <li class="t1 active" data="0">
                  <img src="assets/img/t1.png" alt="" />
                </li>
                <li class="t2" data="1">
                  <img src="assets/img/t2.png" alt="" />
                </li>
                <li class="t3" data="2">
                  <img src="assets/img/t3.png" alt="" />
                </li>
                <li class="t4" data="3">
                  <img src="assets/img/t4.png" alt="" />
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6 testimonial-right">
            <div class="owl-carousel owlExample">
              <div class="item single-testimonial" id="t1">
                <p>
                  Selection one page navigation on any page through with the
                  selection one simple option the admin area doin this, you can
                  create anything fromen simple streamlin homepages engag easily
                  activate one page navigat any page throughout your site.
                </p>
                <div class="details">
                  <h5>Jhon Smith</h5>
                  <p>Techsmith</p>
                </div>
              </div>
              <div class="item single-testimonial" id="t2">
                <p>
                  Selection one page navigation on any page through with the
                  selection one simple option the admin area doin this, you can
                  create anything fromen simple streamlin homepages engag easily
                  activate one page navigat any page throughout your site.
                </p>
                <div class="details">
                  <h5>Jen Doe</h5>
                  <p>Uber</p>
                </div>
              </div>
              <div class="item single-testimonial" id="t3">
                <p>
                  Selection one page navigation on any page through with the
                  selection one simple option the admin area doin this, you can
                  create anything fromen simple streamlin homepages engag easily
                  activate one page navigat any page throughout your site.
                </p>
                <div class="details">
                  <h5>Lew Shan</h5>
                  <p>Apple</p>
                </div>
              </div>
              <div class="item single-testimonial" id="t4">
                <p>
                  Selection one page navigation on any page through with the
                  selection one simple option the admin area doin this, you can
                  create anything fromen simple streamlin homepages engag easily
                  activate one page navigat any page throughout your site.
                </p>
                <div class="details">
                  <h5>Sophia Lee</h5>
                  <p>Orangeberg</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End testimonial section -->
    <!-- Start portfolio section -->
    <section class="portfolio-section section-gap">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-lg-10 col-md-10 section-title-wrap">
            <p class="title">Our Portfolio</p>
            <h1>
              Awesome & exclusive project <br />
              that we worked.
            </h1>
            <p>
              Activate one page navigation on any page throughout your with the
              selection and your site.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="single-portfolio">
              <img class="img-fluid" src="assets/img/p1.jpg" alt="" />
              <div class="portfolio-details">
                <a href="#"><h4>Consumer Consulting</h4></a>
                <p>Consulting <i class="icofont-link"></i></p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="single-portfolio">
              <img class="img-fluid" src="assets/img/p2.jpg" alt="" />
              <div class="portfolio-details">
                <a href="#"><h4>Market Analysis</h4></a>
                <p>Management <i class="icofont-link"></i></p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="single-portfolio">
              <img class="img-fluid" src="assets/img/p3.jpg" alt="" />
              <div class="portfolio-details">
                <a href="#"><h4>Accounting and Tax</h4></a>
                <p>Finance<i class="icofont-link"></i></p>
              </div>
            </div>
          </div>
          <a class="mx-auto btn-style" href="#">See More</a>
        </div>
      </div>
    </section>
    <!-- End portfolio section -->
    <!-- Start price section -->
    <section class="price-section section-gap">
      <div class="container">
        <div class="row d-flex align-items-center">
          <div class="col-lg-6 price-left">
            <p class="title">Price & Plan</p>
            <h4>Get started with awesome <br />price & planning table.</h4>
            <p>
              Activate one page navigation on any page throughout your with the
              selection one simple option in the admin area. Doing this you can
              create anything homepages engaging.
            </p>
            <a href="#" class="btn-style">Know More Details</a>
          </div>
          <div class="col-lg-6 price-right">
            <div class="row price-wrap">
              <div class="col-md-6">
                <div class="single-plan buiness-plan">
                  <div class="title">
                    <h4>Business Plan</h4>
                    <i class="icofont-plus"></i>
                  </div>
                  <h2>$820<span>/mo</span></h2>
                  <ul>
                    <li>150 MB Disk Space</li>
                    <li>100 Subdomains</li>
                    <li>100 Email Accounts</li>
                    <li>Support 24/7</li>
                  </ul>
                  <p><span>Note: </span>No hidden Charge</p>
                  <span class="plan-border"></span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="single-plan">
                  <div class="title">
                    <h4>Individual Plan</h4>
                    <i class="icofont-plus"></i>
                  </div>
                  <h2>$120<span>/mo</span></h2>
                  <ul>
                    <li>20 MB Disk Space</li>
                    <li>2 Subdomains</li>
                    <li>5 Email Accounts</li>
                    <li>Support 24/7</li>
                  </ul>
                  <p><span>Note: </span>No hidden Charge</p>
                  <span class="plan-border"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End price section -->
    <!-- Start news section -->
    <section class="news-section">
      <div class="container">
        <div class="row d-flex justify-content-center">
          <div class="col-lg-8 col-md-10 section-title-wrap">
            <p class="title">News Post</p>
            <h1>
              Check our latest news we are here!
            </h1>
            <p>
              Activate one page navigation on any page throughout your with the
              selection and your site.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="single-news">
              <div class="news-thumb">
                <img class="img-fluid" src="assets/img/n1.jpg" alt="" />
              </div>
              <div class="news-details">
                <p class="meta">22 March, 2019</p>
                <h4>
                  <a href="#">Contented direction septem but end excellent.</a>
                </h4>
                <p>
                  Activate navigation page throughoue your them selection one
                  simple option the admin area doing design sentiments.
                </p>
                <a class="read-more" href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="single-news">
              <div class="news-thumb">
                <img class="img-fluid" src="assets/img/n2.jpg" alt="" />
              </div>
              <div class="news-details">
                <p class="meta">02 April, 2019</p>
                <h4>
                  <a href="#"
                    >Ed ut perspiciatis unde omnis iste natus error.</a
                  >
                </h4>
                <p>
                  Far far away, behind the word mountains, far from the
                  countries Vokalia and Consonantia there live out effect desire
                  way.
                </p>
                <a class="read-more" href="#">Read More</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="single-news">
              <div class="news-thumb">
                <img class="img-fluid" src="assets/img/n3.jpg" alt="" />
              </div>
              <div class="news-details">
                <p class="meta">12 June, 2019</p>
                <h4>
                  <a href="#">One morning, when Gregor Samsa woke from.</a>
                </h4>
                <p>
                  A wonderful serenity has taken possession of my entire soul,
                  like these sweet mornings of spring which I enjoy.
                </p>
                <a class="read-more" href="#">Read More</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End news section -->
    <!-- Start footer section -->
    <footer class="footer-section">
      <div class="container">
        <div class="row footer-widget-wrap">
          <div class="col-md-4 footer-widget-col footer-left">
            <a href="#">
              <img src="assets/img/logo.png" alt="" />
            </a>
            <p>
              Activate one page navigation on any page throughout your with the
              selection one simple option in the admin area.
            </p>
            <ul class="social-links">
              <li>
                <a href="#"><i class="icofont-facebook"></i></a>
              </li>
              <li>
                <a href="#"><i class="icofont-dribbble"></i></a>
              </li>
              <li>
                <a href="#"><i class="icofont-skype"></i></a>
              </li>
            </ul>
          </div>
          <div class="col-md-3 footer-widget-col footer-bottom">
            <h4 class="widget-title">Who can help!</h4>
            <ul>
              <li><a href="#">Price & Planning</a></li>
              <li><a href="#">Privacy & Condation</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Sitemap</a></li>
            </ul>
          </div>
          <div class="col-md-4 footer-widget-col footer-right">
            <h4 class="widget-title">Subscribe To Our Newsletter</h4>
            <p>
              There spok happy or you are out effect desire way design
              sentiments.
            </p>
            <form class="input-group subscribe-wrap">
              <input
                class="form-control"
                placeholder="Enter Your Email"
                type="text"
                required
              />
              <div class="input-group-append">
                <button class="form-btn-style" type="submit">
                  <i class="icofont-paper-plane"></i>
                </button>
              </div>
            </form>
          </div>
        </div>
        <p class="copyright-txt text-center">
          Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
        </p>
      </div>
    </footer>
    <!-- End footer section -->
    <!-- Scroll Top -->
    <div class="scroll-top">
      <i class="icofont-rounded-up"></i>
    </div>
    <script src="assets/js/jquery-3.3.1.slim.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/featherlight.min.js"></script>
    <script src="assets/js/main.js"></script>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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