<!doctype html
>
<html lang
="en">
<head>
<title>Home
</title
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS
-->
<link rel
="stylesheet" href
="css/style.css">
<!-- Font Awesome
-->
<link href
="css/font-awesome.min.css" rel
="stylesheet">
</head
>
<body>
<!-- Header
-->
<div
class="container">
<div
class="header-wrap d-none d-md-block">
<div
class="row">
<!-- Left header box
-->
<header
class="col-6 text-left">
<h1><span>website
</span
>name
</h1
>
</header
>
<!-- Right header box
-->
<div
class="col-6 text-right">
<p
class="header-social-icons social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- Main navigation
-->
<div
class="container navbar-container">
<nav
class="navbar navbar-expand-md navbar-light">
<!-- Company name shown on mobile
-->
<a
class="navbar-brand d-md-none d-lg-none d-xl-none" href
="#"><span>website
</span
>name
</a
>
<!-- Mobile menu toggle
-->
<button
class="navbar-toggler" type
="button" data
-toggle
="collapse" data
-target
="#mainNavbar" aria
-controls
="mainNavbar" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span
class="navbar-toggler-icon"></span
>
</button
>
<!-- Main navigation items
-->
<div
class="collapse navbar-collapse" id
="mainNavbar">
<ul
class="navbar-nav mr-auto">
<li
class="nav-item">
<a
class="nav-link" href
="index.html">Home
<span
class="sr-only">(current
)</span
></a
>
</li
>
<li
class="nav-item dropdown active">
<a
class="nav-link dropdown-toggle" data
-toggle
="dropdown" href
="#" role
="button" aria
-haspopup
="true" aria
-expanded
="false">Examples
&
; Pages
</a
>
<div
class="dropdown-menu navbar-dark bg-primary">
<a
class="dropdown-item active" href
="examples.html">Style Examples
</a
>
<a
class="dropdown-item" href
="three-column.html">Three Column
</a
>
<a
class="dropdown-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="dropdown-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Products
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Contact
</a
>
</li
>
</ul
>
<form
class="form-inline header-search-form my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" size
="10" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-primary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
</nav
>
</div
>
<!-- Jumbtron
/ Slider
-->
<div
class="jumbotron-wrap">
<div
class="container">
<div
class="jumbotron jumbotron-narrow static-slider">
<h1
class="text-center">Style examples
</h1
>
</div
>
</div
>
</div
>
<!-- Main content area
-->
<main
class="container">
<div
class="row">
<!-- Main content
-->
<div
class="col-sm-8">
<article>
<h2
class="article-title">Examples
</h2
>
<p>Here are some examples based on basic HTML mark up and Bootstrap's built in components
.<
/p
>
<p>Consult the
<a href
="#">Bootstrap documentation
</a
> for more information
.<
/p
>
<h1>Heading H1
</h1
>
<h2>Heading H2
</h2
>
<h3>Heading H3
</h3
>
<h4>Heading H4
</h4
>
<h5>Heading H5
</h5
>
<p> 
;</p
>
<h3>Lists
</h3
>
<ul>
<li>List item
</li
>
<li>List item
</li
>
<li>List item
</li
>
</ul
>
<ol>
<li>List item
</li
>
<li>List item
</li
>
<li>List item
</li
>
</ol
>
<p> 
;</p
>
<h3>Code and blockquote
</h3
>
<p>Here is an example of some
<code><
;? echo('Hello world'); ?>
;</code
> inline code
.<
/p
>
<pre><code><
;p
>
;This code block
...<
;/p
>
;
<
;p
>
;Covers multiple lines
...<
;/p
>
;
</code
></pre
>
<blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam
. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
</p
></blockquote
>
<p> 
;</p
>
<h3>Table
</h3
>
<table
class="table">
<tr>
<th>ID
</th
>
<th>Name
</th
>
<th>Age
</th
>
</tr
>
<tr>
<td>1</td
>
<td>John Smith
</td
>
<td>28</td
>
</tr
>
<tr>
<td>2</td
>
<td>Fred James
</td
>
<td>49</td
>
</tr
>
<tr>
<td>3</td
>
<td>Rachel Johnson
</td
>
<td>19</td
>
</tr
>
</table
>
<p> 
;</p
>
<h3>Form
</h3
>
<fieldset>
<legend>Form legend
</legend
>
<div
class="form-group">
<label
for="exampleInputName">Your name
</label
>
<input type
="text" class="form-control" id
="exampleInputName">
</div
>
<div
class="form-group">
<label
for="exampleInputEmail">Email address
</label
>
<input type
="email" class="form-control" id
="exampleInputEmail" aria
-describedby
="emailHelp">
<small id
="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.<
/small
>
</div
>
<div
class="form-group">
<label
for="exampleInputMessage">Message
</label
>
<textarea
class="form-control" id
="exampleInputMessage" rows
="3"></textarea
>
</div
>
<button type
="submit" class="btn btn-primary">Submit
</button
>
</fieldset
>
<h3>Alerts
</h3
>
<div
class="alert alert-primary" role
="alert">
This is a primary alert—check it out
!
</div
>
<div
class="alert alert-secondary" role
="alert">
This is a secondary alert—check it out
!
</div
>
<div
class="alert alert-success" role
="alert">
This is a success alert—check it out
!
</div
>
<div
class="alert alert-danger" role
="alert">
This is a danger alert—check it out
!
</div
>
<div
class="alert alert-warning" role
="alert">
This is a warning alert—check it out
!
</div
>
<div
class="alert alert-info" role
="alert">
This is a info alert—check it out
!
</div
>
<div
class="alert alert-light" role
="alert">
This is a light alert—check it out
!
</div
>
<div
class="alert alert-dark" role
="alert">
This is a dark alert—check it out
!
</div
>
<p> 
;</p
>
<h3>Badges
</h3
>
<span
class="badge badge-primary">Primary
</span
>
<span
class="badge badge-secondary">Secondary
</span
>
<span
class="badge badge-success">Success
</span
>
<span
class="badge badge-danger">Danger
</span
>
<span
class="badge badge-warning">Warning
</span
>
<span
class="badge badge-info">Info
</span
>
<span
class="badge badge-light">Light
</span
>
<span
class="badge badge-dark">Dark
</span
>
<p> 
;</p
>
<h3>Buttons
</h3
>
<button type
="button" class="btn btn-primary">Primary
</button
>
<button type
="button" class="btn btn-secondary">Secondary
</button
>
<button type
="button" class="btn btn-success">Success
</button
>
<button type
="button" class="btn btn-danger">Danger
</button
>
<button type
="button" class="btn btn-warning">Warning
</button
>
<button type
="button" class="btn btn-info">Info
</button
>
<button type
="button" class="btn btn-light">Light
</button
>
<button type
="button" class="btn btn-dark">Dark
</button
>
<button type
="button" class="btn btn-link">Link
</button
>
<p> 
;</p
>
<h3>Tabs
</h3
>
<ul
class="nav nav-tabs">
<li
class="nav-item">
<a
class="nav-link active" href
="#">Active
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Link
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Link
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link disabled" href
="#">Disabled
</a
>
</li
>
</ul
>
</article
>
</div
>
<!-- Sidebar
-->
<aside
class="col-sm-4">
<div
class="sidebar-box">
<h4>Categories
</h4
>
<div
class="list-group list-group-root">
<a
class="list-group-item" href
="index.html">Home Page
</a
>
<a
class="list-group-item active" href
="examples.html">Style Examples
</a
>
<div
class="list-group">
<a
class="list-group-item" href
="three-column.html">Three Column
</a
>
<a
class="list-group-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="list-group-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
<a
class="list-group-item" href
="three-column.html">Three column layout example
</a
>
<a
class="list-group-item" href
="#">Sed aliquam libero ut velit bibendum
</a
>
<a
class="list-group-item" href
="#">Maecenas condimentum velit vitae
</a
>
</div
>
</div
>
<div
class="sidebar-box sidebar-box-bg">
<h4>About us
</h4
>
<p>Aenean nec massa a tortor auctor sodales sed a dolor
. Duis vitae lorem sem
. Proin at velit vel arcu pretium luctus
. <a href
="#" class="readmore">Read More
»
;</a
></p
>
</div
>
<div
class="sidebar-box">
<h4>Search site
</h4
>
<form
class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-secondary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
<div
class="sidebar-box">
<h4>Helpful Links
</h4
>
<ul>
<li><a href
="#" title
="premium templates">Premium HTML web templates from $
10</a
></li
>
<li><a href
="#" title
="web hosting">Cheap web hosting from Dreamhost
</a
></li
>
<li><a href
="#" title
="Tux Themes">Premium WordPress themes
</a
></li
>
</ul
>
</div
>
</aside
>
</div
>
</main
>
<!-- Footer
-->
<div
class="container footer-container">
<footer
class="footer">
<div
class="footer-lists">
<div
class="row">
<div
class="col-sm">
<ul>
<li><h4>Proin accumsan
</h4
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Blandit elementum
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Condimentum
</h4
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Cras dictum
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Suspendisse
</h4
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Donec in ligula nisl
.<
/a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<h4>Suspendisse
</h4
>
<p>Integer mattis blandit turpis
, quis rutrum est
. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula
. Nunc dignissim porttitor dolor eget porta
.<
/p
>
<p
class="social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
<div
class="footer-bottom">
<p
class="text-center">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.aspku.com/moban/">网
;页
;模
;板
;</a
>
</p
>
<p
class="text-center"><a href
="#">Back to top
</a
></p
>
</div
>
</footer
>
</div
>
<!-- Bootcamp JavaScript
-->
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.slim.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
<!doctype html
>
<html lang
="en">
<head>
<title>programb
</title
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS
-->
<link rel
="stylesheet" href
="css/style.css">
<!-- Font Awesome
-->
<link href
="css/font-awesome.min.css" rel
="stylesheet">
</head
>
<body>
<!-- Header
-->
<div
class="container">
<div
class="header-wrap d-none d-md-block">
<div
class="row">
<!-- Left header box
-->
<header
class="col-6 text-left">
<h1><span>website
</span
>name
</h1
>
</header
>
<!-- Right header box
-->
<div
class="col-6 text-right">
<p
class="header-social-icons social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- Main navigation
-->
<div
class="container navbar-container">
<nav
class="navbar navbar-expand-md navbar-light">
<!-- Company name shown on mobile
-->
<a
class="navbar-brand d-md-none d-lg-none d-xl-none" href
="#"><span>website
</span
>name
</a
>
<!-- Mobile menu toggle
-->
<button
class="navbar-toggler" type
="button" data
-toggle
="collapse" data
-target
="#mainNavbar" aria
-controls
="mainNavbar" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span
class="navbar-toggler-icon"></span
>
</button
>
<!-- Main navigation items
-->
<div
class="collapse navbar-collapse" id
="mainNavbar">
<ul
class="navbar-nav mr-auto">
<li
class="nav-item active">
<a
class="nav-link" href
="index.html">Home
<span
class="sr-only">(current
)</span
></a
>
</li
>
<li
class="nav-item dropdown">
<a
class="nav-link dropdown-toggle" data
-toggle
="dropdown" href
="#" role
="button" aria
-haspopup
="true" aria
-expanded
="false">Examples
&
; Pages
</a
>
<div
class="dropdown-menu navbar-dark bg-primary">
<a
class="dropdown-item" href
="examples.html">Style Examples
</a
>
<a
class="dropdown-item" href
="three-column.html">Three Column
</a
>
<a
class="dropdown-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="dropdown-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Products
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Contact
</a
>
</li
>
</ul
>
<form
class="form-inline header-search-form my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" size
="10" placeholder
="Search" aria
-label
="Search">
<button
class="btn my-2 my-sm-0 btn-primary" type
="submit">Search
</button
>
</form
>
</div
>
</nav
>
</div
>
<!-- Jumbtron
/ Slider
-->
<div
class="jumbotron-wrap">
<div
class="container">
<div id
="mainCarousel" class="carousel slide" data
-ride
="carousel">
<div
class="carousel-inner">
<div
class="carousel-item active">
<div
class="jumbotron">
<h1
class="text-center">Tristique sem vitae metus ornare
</h1
>
<p
class="lead text-center">Lorem ipsum dolor sit amet
, consectetuer adipiscing elit
.<
/p
>
<p
class="lead text-center">
<a
class="btn btn-primary btn-lg" href
="#" role
="button"><i
class="fa fa-info"></i
>  
; Learn more
</a
>
<a
class="btn btn-secondary btn-lg" href
="#" role
="button"><i
class="fa fa-gbp"></i
>  
; Buy now
</a
>
</p
>
</div
>
</div
>
<div
class="carousel-item">
<div
class="jumbotron">
<h1
class="text-center">Cras sit amet nibh libero
, in gravida nulla
</h1
>
<p
class="lead text-center">Nulla vel metus scelerisque ante sollicitudin
. Cras purus odio
.<
/p
>
<p
class="lead text-center">
<a
class="btn btn-outline-primary btn-lg" href
="#" role
="button"><i
class="fa fa-info"></i
>  
; Learn more
</a
>
<a
class="btn btn-outline-secondary btn-lg" href
="#" role
="button"><i
class="fa fa-gbp"></i
>  
; Buy now
</a
>
</p
>
</div
>
</div
>
</div
>
<a
class="carousel-control-prev" href
="#mainCarousel" role
="button" data
-slide
="prev">
<span
class="carousel-control-prev-icon" aria
-hidden
="true"></span
>
<span
class="sr-only">Previous
</span
>
</a
>
<a
class="carousel-control-next" href
="#mainCarousel" role
="button" data
-slide
="next">
<span
class="carousel-control-next-icon" aria
-hidden
="true"></span
>
<span
class="sr-only">Next
</span
>
</a
>
</div
>
</div
>
</div
>
<!-- Main content area
-->
<main
class="container">
<div
class="row">
<!-- Main content
-->
<div
class="col-md-8">
<article>
<h2
class="article-title">Introduction to portal
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Welcome to portal
, a free CSS3
&
; HTML5 responsive web template from
<a href
="#" title
="ZyPOP">ZyPOP
</a
>. This template is completely
<strong>free
</strong
> to use permitting a link remains back to
<a href
="#" title
="ZyPOP">ZyPOP
</a
>.<
/p
>
<p> Should you wish to use
this template unbranded you can buy a template license from our website
for 8.00 GBP
, this will allow you remove all branding related to our site
, for more information about
this see below
.<
/p
>
<p>This template has been tested in
:</p
>
<ul>
<li>Firefox
</li
>
<li>IE
/ Edge
</li
>
<li>Chrome
</li
>
<li>Safari
</li
>
<li>iOS
/ Android
</li
>
</ul
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<article>
<h2
class="article-title">Buy unbranded
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2013-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Purchasing a template license
for 8.00 GBP
(at time of writing around
12 USD
) gives you the right to remove any branding including links
, logos and source tags relating to ZyPOP
. As well as waiving the attribution requirement
, your payment will also help us provide continued support
for users as well as creating
new web templates
. Find out more about how to buy at the licensing page on our website which can be accessed at
<a href
="#licensing" title
="template license">#licensing
</a
></p
>
<h3>Lorem lipsum
</h3
>
<p>Morbi fermentum condimentum felis
, commodo vestibulum sem mattis sed
. Aliquam magna ante
, mollis vitae tincidunt in
, malesuada vitae turpis
. Sed aliquam libero ut velit bibendum consectetur
. Quisque sagittis
, est in laoreet semper
, enim dui consequat felis
, faucibus ornare urna velit nec leo
. Maecenas condimentum velit vitae est lobortis fermentum
. In tristique sem vitae metus ornare luctus tempus nisl volutpat
. Integer et est id nisi tempus pharetra sagittis et libero
.<
/p
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<!-- Example pagination Bootstrap component
-->
<nav>
<ul
class="pagination">
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Previous">
<span aria
-hidden
="true">«
;</span
>
<span
class="sr-only">Previous
</span
>
</a
>
</li
>
<li
class="page-item"><a
class="page-link" href
="#">1</a
></li
>
<li
class="page-item active"><a
class="page-link" href
="#">2</a
></li
>
<li
class="page-item"><a
class="page-link" href
="#">3</a
></li
>
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Next">
<span aria
-hidden
="true">»
;</span
>
<span
class="sr-only">Next
</span
>
</a
>
</li
>
</ul
>
</nav
>
</div
>
<!-- Sidebar
-->
<aside
class="col-md-4">
<div
class="sidebar-box">
<h4>Categories
</h4
>
<div
class="list-group list-group-root">
<a
class="list-group-item active" href
="index.html">Home Page
</a
>
<a
class="list-group-item" href
="examples.html">Style Examples
</a
>
<div
class="list-group">
<a
class="list-group-item" href
="three-column.html">Three Column
</a
>
<a
class="list-group-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="list-group-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
<a
class="list-group-item" href
="three-column.html">Three column layout example
</a
>
<a
class="list-group-item" href
="#">Sed aliquam libero ut velit bibendum
</a
>
<a
class="list-group-item" href
="#">Maecenas condimentum velit vitae
</a
>
</div
>
</div
>
<div
class="sidebar-box sidebar-box-bg">
<h4>About us
</h4
>
<p>Aenean nec massa a tortor auctor sodales sed a dolor
. Duis vitae lorem sem
. Proin at velit vel arcu pretium luctus
. <a href
="#" class="readmore">Read More
»
;</a
></p
>
</div
>
<div
class="sidebar-box">
<h4>Search site
</h4
>
<form
class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-secondary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
<div
class="sidebar-box">
<h4>Helpful Links
</h4
>
<ul>
<li><a href
="#" title
="premium templates">Premium HTML web templates from $
10</a
></li
>
<li><a href
="#" title
="web hosting">Cheap web hosting from Dreamhost
</a
></li
>
<li><a href
="#" title
="Tux Themes">Premium WordPress themes
</a
></li
>
</ul
>
</div
>
</aside
>
</div
>
</main
>
<!-- Footer
-->
<div
class="container footer-container">
<footer
class="footer">
<div
class="footer-lists">
<div
class="row">
<div
class="col-sm">
<ul>
<li><h4>Proin accumsan
</h4
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Blandit elementum
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Condimentum
</h4
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Cras dictum
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Suspendisse
</h4
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Donec in ligula nisl
.<
/a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<h4>Suspendisse
</h4
>
<p>Integer mattis blandit turpis
, quis rutrum est
. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula
. Nunc dignissim porttitor dolor eget porta
.<
/p
>
<p
class="social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
<div
class="footer-bottom">
<p
class="text-center">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.aspku.com/moban/">网
;页
;模
;板
;</a
>
</p
>
<p
class="text-center"><a href
="#">Back to top
</a
></p
>
</div
>
</footer
>
</div
>
<!-- Bootcamp JavaScript
-->
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.slim.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
<!doctype html
>
<html lang
="en">
<head>
<title>programb
</title
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS
-->
<link rel
="stylesheet" href
="css/style.css">
<!-- Font Awesome
-->
<link href
="css/font-awesome.min.css" rel
="stylesheet">
</head
>
<body>
<!-- Header
-->
<div
class="container">
<div
class="header-wrap d-none d-md-block">
<div
class="row">
<!-- Left header box
-->
<header
class="col-6 text-left">
<h1><span>website
</span
>name
</h1
>
</header
>
<!-- Right header box
-->
<div
class="col-6 text-right">
<p
class="header-social-icons social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- Main navigation
-->
<div
class="container navbar-container">
<nav
class="navbar navbar-expand-md navbar-light">
<!-- Company name shown on mobile
-->
<a
class="navbar-brand d-md-none d-lg-none d-xl-none" href
="#"><span>website
</span
>name
</a
>
<!-- Mobile menu toggle
-->
<button
class="navbar-toggler" type
="button" data
-toggle
="collapse" data
-target
="#mainNavbar" aria
-controls
="mainNavbar" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span
class="navbar-toggler-icon"></span
>
</button
>
<!-- Main navigation items
-->
<div
class="collapse navbar-collapse" id
="mainNavbar">
<ul
class="navbar-nav mr-auto">
<li
class="nav-item">
<a
class="nav-link" href
="index.html">Home
<span
class="sr-only">(current
)</span
></a
>
</li
>
<li
class="nav-item dropdown active">
<a
class="nav-link dropdown-toggle" data
-toggle
="dropdown" href
="#" role
="button" aria
-haspopup
="true" aria
-expanded
="false">Examples
&
; Pages
</a
>
<div
class="dropdown-menu navbar-dark bg-primary">
<a
class="dropdown-item" href
="examples.html">Style Examples
</a
>
<a
class="dropdown-item" href
="three-column.html">Three Column
</a
>
<a
class="dropdown-item active" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="dropdown-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Products
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Contact
</a
>
</li
>
</ul
>
<form
class="form-inline header-search-form my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" size
="10" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-primary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
</nav
>
</div
>
<!-- Jumbtron
/ Slider
-->
<div
class="jumbotron-wrap">
<div
class="container">
<div
class="jumbotron static-slider">
<h1
class="text-center">One column layout
</h1
>
<p
class="lead text-center">With a
static slider
.<
/p
>
</div
>
</div
>
</div
>
<!-- Main content area
-->
<main
class="container">
<div
class="row">
<!-- Main content
-->
<div
class="col">
<article>
<h2
class="article-title">Introduction to portal
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Welcome to portal
, a free CSS3
&
; HTML5 responsive web template from
<a href
="#" title
="ZyPOP">ZyPOP
</a
>. This template is completely
<strong>free
</strong
> to use permitting a link remains back to
<a href
="#" title
="ZyPOP">ZyPOP
</a
>.<
/p
>
<p> Should you wish to use
this template unbranded you can buy a template license from our website
for 8.00 GBP
, this will allow you remove all branding related to our site
, for more information about
this see below
.<
/p
>
<p>This template has been tested in
:</p
>
<ul>
<li>Firefox
</li
>
<li>IE
/ Edge
</li
>
<li>Chrome
</li
>
<li>Safari
</li
>
<li>iOS
/ Android
</li
>
</ul
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<article>
<h2
class="article-title">Buy unbranded
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Purchasing a template license
for 8.00 GBP
(at time of writing around
10 USD
) gives you the right to remove any branding including links
, logos and source tags relating to ZyPOP
. As well as waiving the attribution requirement
, your payment will also help us provide continued support
for users as well as creating
new web templates
. Find out more about how to buy at the licensing page on our website which can be accessed at
<a href
="#licensing" title
="template license">#licensing
</a
></p
>
<h3>Lorem lipsum
</h3
>
<p>Morbi fermentum condimentum felis
, commodo vestibulum sem mattis sed
. Aliquam magna ante
, mollis vitae tincidunt in
, malesuada vitae turpis
. Sed aliquam libero ut velit bibendum consectetur
. Quisque sagittis
, est in laoreet semper
, enim dui consequat felis
, faucibus ornare urna velit nec leo
. Maecenas condimentum velit vitae est lobortis fermentum
. In tristique sem vitae metus ornare luctus tempus nisl volutpat
. Integer et est id nisi tempus pharetra sagittis et libero
.<
/p
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<!-- Example pagination Bootstrap component
-->
<nav>
<ul
class="pagination">
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Previous">
<span aria
-hidden
="true">«
;</span
>
<span
class="sr-only">Previous
</span
>
</a
>
</li
>
<li
class="page-item"><a
class="page-link" href
="#">1</a
></li
>
<li
class="page-item active"><a
class="page-link" href
="#">2</a
></li
>
<li
class="page-item"><a
class="page-link" href
="#">3</a
></li
>
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Next">
<span aria
-hidden
="true">»
;</span
>
<span
class="sr-only">Next
</span
>
</a
>
</li
>
</ul
>
</nav
>
</div
>
</div
>
</main
>
<!-- Footer
-->
<div
class="container footer-container">
<footer
class="footer">
<div
class="footer-lists">
<div
class="row">
<div
class="col-sm">
<ul>
<li><h4>Proin accumsan
</h4
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Blandit elementum
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Condimentum
</h4
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Cras dictum
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Suspendisse
</h4
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Donec in ligula nisl
.<
/a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<h4>Suspendisse
</h4
>
<p>Integer mattis blandit turpis
, quis rutrum est
. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula
. Nunc dignissim porttitor dolor eget porta
.<
/p
>
<p
class="social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
<div
class="footer-bottom">
<p
class="text-center">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.aspku.com/moban/">网
;页
;模
;板
;</a
>
</p
>
<p
class="text-center"><a href
="#">Back to top
</a
></p
>
</div
>
</footer
>
</div
>
<!-- Bootcamp JavaScript
-->
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.slim.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
<!doctype html
>
<html lang
="en">
<head>
<title>Home
</title
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS
-->
<link rel
="stylesheet" href
="css/style.css">
<!-- Font Awesome
-->
<link href
="css/font-awesome.min.css" rel
="stylesheet">
</head
>
<body>
<!-- Header
-->
<div
class="container">
<div
class="header-wrap d-none d-md-block">
<div
class="row">
<!-- Left header box
-->
<header
class="col-6 text-left">
<h1><span>website
</span
>name
</h1
>
</header
>
<!-- Right header box
-->
<div
class="col-6 text-right">
<p
class="header-social-icons social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- Main navigation
-->
<div
class="container navbar-container">
<nav
class="navbar navbar-expand-md navbar-light">
<!-- Company name shown on mobile
-->
<a
class="navbar-brand d-md-none d-lg-none d-xl-none" href
="#"><span>website
</span
>name
</a
>
<!-- Mobile menu toggle
-->
<button
class="navbar-toggler" type
="button" data
-toggle
="collapse" data
-target
="#mainNavbar" aria
-controls
="mainNavbar" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span
class="navbar-toggler-icon"></span
>
</button
>
<!-- Main navigation items
-->
<div
class="collapse navbar-collapse" id
="mainNavbar">
<ul
class="navbar-nav mr-auto">
<li
class="nav-item">
<a
class="nav-link" href
="index.html">Home
<span
class="sr-only">(current
)</span
></a
>
</li
>
<li
class="nav-item dropdown active">
<a
class="nav-link dropdown-toggle" data
-toggle
="dropdown" href
="#" role
="button" aria
-haspopup
="true" aria
-expanded
="false">Examples
&
; Pages
</a
>
<div
class="dropdown-menu navbar-dark bg-primary">
<a
class="dropdown-item" href
="examples.html">Style Examples
</a
>
<a
class="dropdown-item" href
="three-column.html">Three Column
</a
>
<a
class="dropdown-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="dropdown-item active" href
="text.html">Text
/ left sidebar
</a
>
</div
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Products
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Contact
</a
>
</li
>
</ul
>
<form
class="form-inline header-search-form my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" size
="10" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-primary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
</nav
>
</div
>
<!-- Main content area
-->
<main
class="container">
<div
class="row">
<!-- Sidebar
-->
<aside
class="col-md-4">
<div
class="sidebar-box">
<h4>Categories
</h4
>
<div
class="list-group list-group-root">
<a
class="list-group-item" href
="index.html">Home Page
</a
>
<a
class="list-group-item" href
="examples.html">Style Examples
</a
>
<div
class="list-group">
<a
class="list-group-item" href
="three-column.html">Three Column
</a
>
<a
class="list-group-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="list-group-item active" href
="text.html">Text
/ left sidebar
</a
>
</div
>
<a
class="list-group-item" href
="three-column.html">Three column layout example
</a
>
<a
class="list-group-item" href
="#">Sed aliquam libero ut velit bibendum
</a
>
<a
class="list-group-item" href
="#">Maecenas condimentum velit vitae
</a
>
</div
>
</div
>
<div
class="sidebar-box sidebar-box-bg">
<h4>About us
</h4
>
<p>Aenean nec massa a tortor auctor sodales sed a dolor
. Duis vitae lorem sem
. Proin at velit vel arcu pretium luctus
. <a href
="#" class="readmore">Read More
»
;</a
></p
>
</div
>
<div
class="sidebar-box">
<h4>Search site
</h4
>
<form
class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-secondary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
<div
class="sidebar-box">
<h4>Helpful Links
</h4
>
<ul>
<li><a href
="#" title
="premium templates">Premium HTML web templates from $
10</a
></li
>
<li><a href
="#" title
="web hosting">Cheap web hosting from Dreamhost
</a
></li
>
<li><a href
="#" title
="Tux Themes">Premium WordPress themes
</a
></li
>
</ul
>
</div
>
</aside
>
<!-- Main content
-->
<div
class="col-md-8">
<article>
<h2
class="article-title">Introduction to portal
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Welcome to portal
, a free CSS3
&
; HTML5 responsive web template from
<a href
="#" title
="ZyPOP">ZyPOP
</a
>. This template is completely
<strong>free
</strong
> to use permitting a link remains back to
<a href
="#" title
="ZyPOP">zyPop
</a
>.<
/p
>
<p> Should you wish to use
this template unbranded you can buy a template license from our website
for 8.00 GBP
, this will allow you remove all branding related to our site
, for more information about
this see below
.<
/p
>
<p>This template has been tested in
:</p
>
<ul>
<li>Firefox
</li
>
<li>IE
/ Edge
</li
>
<li>Chrome
</li
>
<li>Safari
</li
>
<li>iOS
/ Android
</li
>
</ul
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<article>
<h2
class="article-title">Buy unbranded
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Purchasing a template license
for 8.00 GBP
(at time of writing around
10 USD
) gives you the right to remove any branding including links
, logos and source tags relating to ZyPOP
. As well as waiving the attribution requirement
, your payment will also help us provide continued support
for users as well as creating
new web templates
. Find out more about how to buy at the licensing page on our website which can be accessed at
<a href
="#licensing" title
="template license">#licensing
</a
></p
>
<h3>Lorem lipsum
</h3
>
<p>Morbi fermentum condimentum felis
, commodo vestibulum sem mattis sed
. Aliquam magna ante
, mollis vitae tincidunt in
, malesuada vitae turpis
. Sed aliquam libero ut velit bibendum consectetur
. Quisque sagittis
, est in laoreet semper
, enim dui consequat felis
, faucibus ornare urna velit nec leo
. Maecenas condimentum velit vitae est lobortis fermentum
. In tristique sem vitae metus ornare luctus tempus nisl volutpat
. Integer et est id nisi tempus pharetra sagittis et libero
.<
/p
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<!-- Example pagination Bootstrap component
-->
<nav>
<ul
class="pagination">
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Previous">
<span aria
-hidden
="true">«
;</span
>
<span
class="sr-only">Previous
</span
>
</a
>
</li
>
<li
class="page-item"><a
class="page-link" href
="#">1</a
></li
>
<li
class="page-item active"><a
class="page-link" href
="#">2</a
></li
>
<li
class="page-item"><a
class="page-link" href
="#">3</a
></li
>
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Next">
<span aria
-hidden
="true">»
;</span
>
<span
class="sr-only">Next
</span
>
</a
>
</li
>
</ul
>
</nav
>
</div
>
</div
>
</main
>
<!-- Footer
-->
<div
class="container footer-container">
<footer
class="footer">
<div
class="footer-lists">
<div
class="row">
<div
class="col-sm">
<ul>
<li><h4>Proin accumsan
</h4
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Blandit elementum
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Condimentum
</h4
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Cras dictum
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Suspendisse
</h4
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Donec in ligula nisl
.<
/a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<h4>Suspendisse
</h4
>
<p>Integer mattis blandit turpis
, quis rutrum est
. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula
. Nunc dignissim porttitor dolor eget porta
.<
/p
>
<p
class="social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
<div
class="footer-bottom"><p
class="text-center">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.aspku.com/moban/">网
;页
;模
;板
;</a
>
</p
>
<p
class="text-center"><a href
="#">Back to top
</a
></p
>
</div
>
</footer
>
</div
>
<!-- Bootcamp JavaScript
-->
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.slim.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
<!doctype html
>
<html lang
="en">
<head>
<title>Home
</title
>
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS
-->
<link rel
="stylesheet" href
="css/style.css">
<!-- Font Awesome
-->
<link href
="css/font-awesome.min.css" rel
="stylesheet">
</head
>
<body>
<!-- Header
-->
<div
class="container">
<div
class="header-wrap d-none d-md-block">
<div
class="row">
<!-- Left header box
-->
<header
class="col-6 text-left">
<h1><span>website
</span
>name
</h1
>
</header
>
<!-- Right header box
-->
<div
class="col-6 text-right">
<p
class="header-social-icons social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
</div
>
<!-- Main navigation
-->
<div
class="container navbar-container">
<nav
class="navbar navbar-expand-md navbar-light">
<!-- Company name shown on mobile
-->
<a
class="navbar-brand d-md-none d-lg-none d-xl-none" href
="#"><span>website
</span
>name
</a
>
<!-- Mobile menu toggle
-->
<button
class="navbar-toggler" type
="button" data
-toggle
="collapse" data
-target
="#mainNavbar" aria
-controls
="mainNavbar" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span
class="navbar-toggler-icon"></span
>
</button
>
<!-- Main navigation items
-->
<div
class="collapse navbar-collapse" id
="mainNavbar">
<ul
class="navbar-nav mr-auto">
<li
class="nav-item">
<a
class="nav-link" href
="index.html">Home
<span
class="sr-only">(current
)</span
></a
>
</li
>
<li
class="nav-item dropdown active">
<a
class="nav-link dropdown-toggle" data
-toggle
="dropdown" href
="#" role
="button" aria
-haspopup
="true" aria
-expanded
="false">Examples
&
; Pages
</a
>
<div
class="dropdown-menu navbar-dark bg-primary">
<a
class="dropdown-item" href
="examples.html">Style Examples
</a
>
<a
class="dropdown-item active" href
="three-column.html">Three Column
</a
>
<a
class="dropdown-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="dropdown-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Products
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link" href
="#">Contact
</a
>
</li
>
</ul
>
<form
class="form-inline header-search-form my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" size
="10" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-primary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
</nav
>
</div
>
<!-- Main content area
-->
<main
class="container">
<div
class="row">
<!-- Left sidebar
-->
<aside
class="col-md-3">
<div
class="sidebar-box">
<h4>Categories
</h4
>
<div
class="list-group list-group-root">
<a
class="list-group-item" href
="index.html">Home Page
</a
>
<a
class="list-group-item" href
="examples.html">Style Examples
</a
>
<div
class="list-group">
<a
class="list-group-item active" href
="three-column.html">Three Column
</a
>
<a
class="list-group-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="list-group-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
<a
class="list-group-item" href
="three-column.html">Three column layout example
</a
>
<a
class="list-group-item" href
="#">Sed aliquam libero ut velit bibendum
</a
>
<a
class="list-group-item" href
="#">Maecenas condimentum velit vitae
</a
>
</div
>
</div
>
<div
class="sidebar-box sidebar-box-bg">
<h4>About us
</h4
>
<p>Aenean nec massa a tortor auctor sodales sed a dolor
. Duis vitae lorem sem
. Proin at velit vel arcu pretium luctus
. <a href
="#" class="readmore">Read More
»
;</a
></p
>
</div
>
<div
class="sidebar-box">
<h4>Search site
</h4
>
<form
class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-secondary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
<div
class="sidebar-box">
<h4>Helpful Links
</h4
>
<ul>
<li><a href
="#" title
="premium templates">Premium HTML web templates from $
10</a
></li
>
<li><a href
="#" title
="web hosting">Cheap web hosting from Dreamhost
</a
></li
>
<li><a href
="#" title
="Tux Themes">Premium WordPress themes
</a
></li
>
</ul
>
</div
>
</aside
>
<!-- Main content
-->
<div
class="col-md-6">
<article>
<h2
class="article-title">Introduction to portal
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Welcome to portal
, a free CSS3
&
; HTML5 responsive web template from
<a href
="#" title
="ZyPOP">ZyPOP
</a
>. This template is completely
<strong>free
</strong
> to use permitting a link remains back to
<a href
="#" title
="ZyPOP">zyPop
</a
>.<
/p
>
<p> Should you wish to use
this template unbranded you can buy a template license from our website
for 8.00 GBP
, this will allow you remove all branding related to our site
, for more information about
this see below
.<
/p
>
<p>This template has been tested in
:</p
>
<ul>
<li>Firefox
</li
>
<li>IE
/ Edge
</li
>
<li>Chrome
</li
>
<li>Safari
</li
>
<li>iOS
/ Android
</li
>
</ul
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<article>
<h2
class="article-title">Buy unbranded
</h2
>
<p
class="article-meta">Posted on
<time datetime
="2017-05-14">14 May
</time
> by
<a href
="#" rel
="author">Joe Bloggs
</a
></p
>
<p>Purchasing a template license
for 8.00 GBP
(at time of writing around
10 USD
) gives you the right to remove any branding including links
, logos and source tags relating to ZyPOP
. As well as waiving the attribution requirement
, your payment will also help us provide continued support
for users as well as creating
new web templates
. Find out more about how to buy at the licensing page on our website which can be accessed at
<a href
="#licensing" title
="template license">#licensing
</a
></p
>
<h3>Lorem lipsum
</h3
>
<p>Morbi fermentum condimentum felis
, commodo vestibulum sem mattis sed
. Aliquam magna ante
, mollis vitae tincidunt in
, malesuada vitae turpis
. Sed aliquam libero ut velit bibendum consectetur
. Quisque sagittis
, est in laoreet semper
, enim dui consequat felis
, faucibus ornare urna velit nec leo
. Maecenas condimentum velit vitae est lobortis fermentum
. In tristique sem vitae metus ornare luctus tempus nisl volutpat
. Integer et est id nisi tempus pharetra sagittis et libero
.<
/p
>
<a href
="#" class="btn btn-primary">Read more
</a
>
<a href
="#" class="btn btn-secondary">Comments
</a
>
</article
>
<!-- Example pagination Bootstrap component
-->
<nav>
<ul
class="pagination">
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Previous">
<span aria
-hidden
="true">«
;</span
>
<span
class="sr-only">Previous
</span
>
</a
>
</li
>
<li
class="page-item"><a
class="page-link" href
="#">1</a
></li
>
<li
class="page-item active"><a
class="page-link" href
="#">2</a
></li
>
<li
class="page-item"><a
class="page-link" href
="#">3</a
></li
>
<li
class="page-item">
<a
class="page-link" href
="#" aria
-label
="Next">
<span aria
-hidden
="true">»
;</span
>
<span
class="sr-only">Next
</span
>
</a
>
</li
>
</ul
>
</nav
>
</div
>
<!-- Right Sidebar
-->
<aside
class="col-md-3">
<div
class="sidebar-box">
<h4>Categories
</h4
>
<div
class="list-group list-group-root">
<a
class="list-group-item" href
="index.html">Home Page
</a
>
<a
class="list-group-item" href
="examples.html">Style Examples
</a
>
<div
class="list-group">
<a
class="list-group-item active" href
="three-column.html">Three Column
</a
>
<a
class="list-group-item" href
="one-column.html">One column
/ no sidebar
</a
>
<a
class="list-group-item" href
="text.html">Text
/ left sidebar
</a
>
</div
>
<a
class="list-group-item" href
="three-column.html">Three column layout example
</a
>
<a
class="list-group-item" href
="#">Sed aliquam libero ut velit bibendum
</a
>
<a
class="list-group-item" href
="#">Maecenas condimentum velit vitae
</a
>
</div
>
</div
>
<div
class="sidebar-box sidebar-box-bg">
<h4>About us
</h4
>
<p>Aenean nec massa a tortor auctor sodales sed a dolor
. Duis vitae lorem sem
. Proin at velit vel arcu pretium luctus
. <a href
="#" class="readmore">Read More
»
;</a
></p
>
</div
>
<div
class="sidebar-box">
<h4>Search site
</h4
>
<form
class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2" type
="text" placeholder
="Search" aria
-label
="Search">
<button
class="btn btn-secondary my-2 my-sm-0" type
="submit">Search
</button
>
</form
>
</div
>
<div
class="sidebar-box">
<h4>Helpful Links
</h4
>
<ul>
<li><a href
="#" title
="premium templates">Premium HTML web templates from $
10</a
></li
>
<li><a href
="#" title
="web hosting">Cheap web hosting from Dreamhost
</a
></li
>
<li><a href
="#" title
="Tux Themes">Premium WordPress themes
</a
></li
>
</ul
>
</div
>
</aside
>
</div
>
</main
>
<!-- Footer
-->
<div
class="container footer-container">
<footer
class="footer">
<div
class="footer-lists">
<div
class="row">
<div
class="col-sm">
<ul>
<li><h4>Proin accumsan
</h4
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Blandit elementum
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Condimentum
</h4
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Cras dictum
</a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<ul>
<li><h4>Suspendisse
</h4
></li
>
<li><a href
="#">Morbi hendrerit libero
</a
></li
>
<li><a href
="#">Proin placerat accumsan
</a
></li
>
<li><a href
="#">Rutrum nulla a ultrices
</a
></li
>
<li><a href
="#">Curabitur sit amet tellus
</a
></li
>
<li><a href
="#">Donec in ligula nisl
.<
/a
></li
>
</ul
>
</div
>
<div
class="col-sm">
<h4>Suspendisse
</h4
>
<p>Integer mattis blandit turpis
, quis rutrum est
. Maecenas quis arcu vel felis lobortis iaculis fringilla at ligula
. Nunc dignissim porttitor dolor eget porta
.<
/p
>
<p
class="social-icons">
<a href
="#"><i
class="fa fa-facebook fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-twitter fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-youtube fa-2x"></i
></a
>
<a href
="#"><i
class="fa fa-instagram fa-2x"></i
></a
>
</p
>
</div
>
</div
>
</div
>
<div
class="footer-bottom">
<p
class="text-center">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.aspku.com/moban/">网
;页
;模
;板
;</a
>
</p
>
<p
class="text-center"><a href
="#">Back to top
</a
></p
>
</div
>
</footer
>
</div
>
<!-- Bootcamp JavaScript
-->
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.slim.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
</body
>
</html
>
