添加了services.html文件，基本完成

钟艺
1 parent e0c31c65
Showing 1 changed file with 283 additions and 0 deletions
services.html
--- a/services.html 0 → 100644
View file @9e495b2
+++ b/services.html 0 → 100644
View file @9e495b2
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="./js/bootstrap.min.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+  <link rel="stylesheet" href="./css/style.css">
+  <title>单页</title>
+</head>
+<body>
+  <div class="page">
+    <button type="button" class="open navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar"><i class="fas fa-bars"></i>
+    </button>
+    <div class="outside-nav collapse navbar-collapse" id="responsive-navbar">
+      <ul class="outside-nav-1 nav navbar-nav">
+        <li>
+          <a href="#">Compare List</a>
+          <a href="#">My Wishlist</a>
+          <a href="#">My Cart</a>
+          <a href="#">Checkout</a>
+          <a href="#">Log In</a>
+        </li>
+      </ul>
+    </div>
+    <div class="top-box nav">
+      <div class="top-box-nav dropdown">
+        <button type="button" class="btn dropdown-toggle lang-1" id="dropdownMenu1" data-toggle="dropdown">Language</button>
+          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+            <li role="presentation"><a href="#" role="presentation" tabindex="-1">English</a></li>
+            <li role="presentation"><a href="#" role="presentation" tabindex="-1">Francais</a></li>
+            <li role="presentation"><a href="#" role="presentation" tabindex="-1">Deutsch</a></li>
+          </ul>
+      </div>
+    </div>
+
+    <div class="header-wrapper">
+      <div class="outside-header collapse navbar-collapse" id="responsive-header">
+        <ul class="nav navbar-nav">
+          <li>
+            <a href="#">Home</a>
+            <a href="#">Pages</a>
+            <a href="#">Shop</a>
+            <a href="#">Mega Menu</a>
+            <a href="#">Elements</a>
+            <a href="#">Bootstrap</a>
+            <a href="#">Buy</a>
+          </li>
+        </ul>
+      </div>
+      <div class="container header-body">
+        <div class="row">
+          <div class="col-xs-6 logo-box">
+            <div class="logo"><img src="http://progressive.nikadevs.com/sites/all/themes/progressive/progressive_sub/logo.png" class="logo-img" alt="图片挂了">
+            </div>
+          </div>
+
+          <div class="col-xs-6">
+            <div class="btn-right-one">
+              <button type="button" class="menu-open navbar-toggle" data-toggle="collapse" data-target="#responsive-header"><i class="fas fa-shopping-basket">Cart 0</i>
+            </div>
+            <div class="btn-right-two">
+              <button type="button" class="menu-open navbar-toggle" data-toggle="collapse" data-target="#responsive-header"><i class="fas fa-bars"> Menu</i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="breadcrumb-box">
+      <div class="container">
+        <ul class="breadcrumb">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Pages</a></li>
+          <li><a href="#">Blog Post View</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="page-title">
+      <div class="container">
+        <h1>Services</h1>
+      </div>
+    </div>
+
+    <div class="services-content container">
+      <p>Proin vel ultrices erat. Etiam et enim libero. Duis sollicitudin auctor faucibus. Duis tristique feugiat velit quis lobortis. Phasellus dignissim lobortis dignissim. Vestibulum aliquet, leo in euismod tempor, lectus erat blandit justo.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec posuere odio. Phasellus odio lectus, ultrices non pretium ac, mollis id elit. Fusce tempor tellus non felis tempus vestibulum. Donec molestie purus sem. Suspendisse a neque quam.</p>
+      <div class="row">
+        <div class="services-con-item service col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-image"></i></span>
+          <h4>Web Design</h4>
+          <div class="text-small">agement systens Virtual shops and ecommerce Presentation websites Online catalogues</div>
+        </div>
+        <div class="services-con-item wrench col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-wrench"></i></span>
+          <h4>Graphic Design</h4>
+          <div class="text-small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste.</div>
+        </div>
+        <div class="services-con-item bug col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-bug"></i></span>
+          <h4>Internet Marketing</h4>
+          <div class="text-small">Content management systens Virtual shops and ecommerce Presentation websites Online catalogues</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="services-con-item setting col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-cogs"></i></span>
+          <h4>Development</h4>
+          <div class="text-small">Content management systens Virtual shops and ecommerce Presentation websites Online catalogues</div>
+        </div>
+        <div class="services-con-item shop col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-shopping-cart"></i></span>
+          <h4>Production</h4>
+          <div class="text-small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste.</div>
+        </div>
+        <div class="services-con-item volume col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-volume-up"></i></span>
+          <h4>Production</h4>
+          <div class="text-small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste.</div>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="services-big-item service-big col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-image"></i></span>
+          <h3>Web Design</h3>
+          <div class="text-small">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+          </div>
+        </div>
+        <div class="services-big-item wrench-big col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-wrench"></i></span>
+          <h3>Graphic Design</h3>
+          <div class="text-small">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+          </div>
+        </div>
+        <div class="services-big-item bug-big col-xs-12 col-sm-4">
+          <span class="circle-img"><i class="fas fa-bug"></i></span>
+          <h3>Internet Marketing</h3>
+          <div class="text-small">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
+        </div>
+        </div>
+      </div>
+      <hr />
+      <div class="services-con-title">
+        <h4>Features</h4>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-sm-4">
+          <div class="text-small title-bg col-sm-12">
+          <h5>Lorem ipsum dolor sit amet</h5>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec posuere odio. Phasellus odio lectus, ultrices non pretium ac, mollis id elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec posuere odio. Phasellus odio lectus, ultrices non pretium ac, mollis id elit.</p>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4">
+          <div class="services-con-item-2">
+            <i class="fas fa-wrench"></i>
+            <h6>Graphic Design</h6>
+            <div>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those intereste. It is a long established fact that a reader.</div>
+          </div>
+          <div class="services-con-item-2">
+            <i class="fas fa-bug"></i>
+            <h6>Internet Marketing</h6>
+            <div>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. It is a long established fact that.</div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4">
+          <div class="services-con-item-2">
+            <i class="fas fa-volume-up"></i>
+            <h6>Color Customization</h6>
+            <div>The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.</div>
+          </div>
+          <div class="services-con-item-2">
+            <i class="fas fa-image"></i>
+            <h6>HTML5 & CSS3</h6>
+            <div>Excepteur sint occaecat cupidatat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
+          </div>
+        </div>
+      </div>
+      <hr />
+
+      <div class="services-con-title">
+        <h4>Other Services</h4>
+      </div>
+      <div class="panel-group" id="accordion">
+        <ul class="nav nav-tabs panel accordion-tab">
+          <li class="active panel-heading panel-titles"><a href="#tab-1" data-toggle="tab">Service 1</a>
+            <div class="tab-pane in active" id="tab-1" style="display: block;">
+              <div>
+                <span class="circle-img"><i class="fas fa-bug"></i></span>
+                <h3>Graphic Design</h3>
+                <p>Suspendisse at placerat turpis. Duis luctus erat vel magna pharetra aliquet. Maecenas tincidunt feugiat ultricies. Phasellus et dui risus. Vestibulum adipiscing, eros quis lobortis dictum. Etiam mollis volutpat odio, id euismod justo gravida a. Aliquam erat volutpat. Phasellus faucibus venenatis lorem, vitae commodo elit pretium et. Duis rhoncus lobortis congue. Vestibulum et purus dui, vel porta lectus.</p>
+              </div>
+            </div>
+          </li>
+          <li><a href="#tab-2" data-toggle="tab">Service 2</a>
+            <div class="tab-pane" id="tab-2" style="display: block;">
+              <div>
+                <span class="circle-img"><i class="fas fa-bug"></i></span>
+                <h3>Internet Marketing</h3>
+                <p>The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.</p>
+              </div>
+            </div>
+          </li>
+          <li><a href="#tab-3" data-toggle="tab">Service 3</a>
+            <div class="tab-pane" id="tab-3" style="display: block;">
+              <div>
+                <span class="circle-img"><i class="fas fa-bug"></i></span>
+                <h3>Web Design</h3>
+                <p>The readable content of a page when looking at its layout. The point of using. Duis aute irure dolor reprehenderit in voluptate velit esse cillum.</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="tab-content hidden"></div>
+      </div>
+
+    </div>
+
+    <footer class="footer">
+      <div class="footer-item-4">
+        <div class="container">
+          <div class="row">
+            <div class="footer-item-4-1 col-xs-12 col-sm-3">
+              <div class="title-box">
+                <h3>FOLLOW US</h3>
+              </div>
+              <div class="footer-item-4-1-1">
+                <p>Follow us insocial media</p>
+                <span><a href=""></a></span>
+                <span><a href=""></a></span>
+                <span><a href=""></a></span>
+                <span><a href=""></a></span>
+              </div>
+            </div>
+            <div class="footer-item-4-2 col-xs-12 col-sm-3">
+              <div class="title-box">
+                <h3>NEWSLETTER SIGNUP</h3>
+              </div>
+              <div class="footer-item-4-2-1">
+                <p>Sign up for newsletter</p>
+                <input type="text">
+              </div>
+            </div>
+            <div class="footer-item-4-3 col-xs-12 col-sm-3">
+              <div class="title-box">
+                <h3>INFORMATION</h3>
+              </div>
+              <div class="footer-item-4-3-1">
+                <ul>
+                  <li>About us</li>
+                  <li>Privacy Policy</li>
+                  <li>Terms & Condotions</li>
+                  <li>Secure payment</li>
+                </ul>
+              </div>
+            </div>
+            <div class="footer-item-4-4 col-xs-12 col-sm-3">
+              <div class="title-box">
+                <h3>MY ACCOUNT</h3>
+              </div>
+              <div class="footer-item-4-4-1">
+                <ul>
+                  <li>My account</li>
+                  <li>Order History</li>
+                  <li>Wish List</li>
+                  <li>Newsletter</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer-item-5">
+        <div class="container"><p>Copyright ◎ Progressive, 2019</p></div>
+      </div>
+    </footer>
+  </div>
+<script src="./js/jquery-3.3.1.min.js"></script>
+<script src="./js/bootstrap.min.js"></script>
+</body>
+</html>