<!DOCTYPE html>
<html lang="zxx">
<head>
<title>IT Host - Hosting Template</title>
<meta charset="UTF-8">
<meta name="description" content="Cloud 83 - hosting template ">
<meta name="keywords" content="cloud, hosting, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="img/favicon.ico" rel="shortcut icon"/>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/flaticon.css"/>
<link rel="stylesheet" href="css/owl.carousel.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Header section -->
<header class="header-section">
<a href="./index.html" class="site-logo"><img src="./img/logo.png" alt=""></a>
<div class="nav-switch">
<i class="fa fa-bars"></i>
</div>
<div class="nav-warp">
<div class="user-panel">
<a href="#">Login</a> /
<a href="#">Register</a>
</div>
<ul class="main-menu">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About us</a></li>
<li><a href="./service.html">Services</a></li>
<li><a href="./blog.html">News</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</header>
<!-- Header section end -->
<!-- Page Top section -->
<section class="page-top-section set-bg" data-setbg="img/page-top-bg.jpg">
<div class="container">
<h2>Elements</h2>
<div class="site-breadcrumb">
<a href="home">Home</a> / <span>Elements</span>
</div>
</div>
</section>
<!-- Page Top section end -->
<!-- Elements section -->
<section class="elements-section">
<div class="container">
<!-- element -->
<div class="element">
<h3 class="el-title">Buttons</h3>
<a href="" class="site-btn mr-4 mb-4">Read More</a>
<a href="" class="site-btn sb-gradient mr-4 mb-4">Read More</a>
<a href="" class="site-btn sb-line mr-4 mb-4">Read More</a>
</div>
<!-- element -->
<div class="element">
<h3 class="el-title">Accordions & Tabs</h3>
<div class="row">
<div class="col-lg-6">
<!-- Accordions -->
<div id="accordion" class="accordion-area">
<div class="panel">
<div class="panel-header" id="headingOne">
<button class="panel-link" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">Etiam pretium turpis eget nibh laoreet iaculis. </button>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>Free Support</h4>
<p>Nullam lacinia ex eleifend orci porttitor, suscipit interdum augue condimentum. Etiam pretium turpis eget nibh laoreet iaculis.Nullam lacinia ex eleifend orciporttitor, suscip-it interdum augue condimentum. Etiam pretium turpis eget eleifend orci porttitornibh laoreet iaculis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header" id="headingTwo">
<button class="panel-link" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Vivamus auctor mi eget odio feugiat. </button>
</div>
<div id="collapse2" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>Free Support</h4>
<p>Nullam lacinia ex eleifend orci porttitor, suscipit interdum augue condimentum. Etiam pretium turpis eget nibh laoreet iaculis.Nullam lacinia ex eleifend orciporttitor, suscip-it interdum augue condimentum. Etiam pretium turpis eget eleifend orci porttitornibh laoreet iaculis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header" id="headingThree">
<button class="panel-link" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Etiam pretium turpis eget nibh laoreet iaculis. </button>
</div>
<div id="collapse3" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>Free Support</h4>
<p>Nullam lacinia ex eleifend orci porttitor, suscipit interdum augue condimentum. Etiam pretium turpis eget nibh laoreet iaculis.Nullam lacinia ex eleifend orciporttitor, suscip-it interdum augue condimentum. Etiam pretium turpis eget eleifend orci porttitornibh laoreet iaculis.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header" id="headingFour">
<button class="panel-link active" data-toggle="collapse" data-target="#collapse4" aria-expanded="true" aria-controls="collapse3">Vivamus auctor mi eget odio feugiat, quis aliquet. </button>
</div>
<div id="collapse4" class="collapse show" aria-labelledby="headingFour" data-parent="#accordion">
<div class="panel-body">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>Free Support</h4>
<p>Nullam lacinia ex eleifend orci porttitor, suscipit interdum augue condimentum. Etiam pretium turpis eget nibh laoreet iaculis.Nullam lacinia ex eleifend orciporttitor, suscip-it interdum augue condimentum. Etiam pretium turpis eget eleifend orci porttitornibh laoreet iaculis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- Tabs -->
<div class="tab-element">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">Etiam pretium</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Vivamus auc</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#tab-3" role="tab" aria-controls="tab-3" aria-selected="false">Eget odio</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- single tab content -->
<div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>Free Support</h4>
<p>Nullam lacinia ex eleifend orci porttitor, suscipit interdum augue condimentum. Etiam pretium turpis eget nibh laoreet iaculis.Nullam lacinia ex eleifend orciporttitor, suscip-it interdum augue condimentum. Etiam pretium turpis eget eleifend orci porttitornibh laoreet iaculis.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h4>
课设&大作业&毕设-IT主机产品展示响应式网站模板-适配移动端-HTML源码.zip （61个子文件） 
课设&大作业&毕设-IT主机产品展示响应式网站模板-适配移动端-HTML源码 html icon-fonts 
Flaticon.eot 22KB fontawesome-webfont.eot 162KB Flaticon.woff 12KB fontawesome-webfont.woff 96KB fontawesome-webfont.woff2 75KB
Flaticon.svg 175KB fontawesome-webfont.svg 434KB Flaticon.ttf 22KB Source 
jquery-circle-progress-1.2.2.tar.gz 23KB
OwlCarousel2-2.3.4_2.zip 774KB Flaticon.zip 95KB font-awesome-4.7.0.zip 654KB sass style.scss 27KB bootstrap-4.1.3-dist.zip 609KB js bootstrap.min.js 50KB main.js 3KB map.js 741B circle-progress.min.js 4KB owl.carousel.min.js 43KB jquery-3.2.1.min.js 85KB
service.html 14KB img 
milestones-bg.jpg 20KB footer-thumb 2.jpg 11KB 1.jpg 9KB 3.jpg 10KB
service.png 104KB map-marker.png 7KB team 2.jpg 50KB 1.jpg 36KB 3.jpg 34KB 4.jpg 22KB review 1.jpg 15KB client-logo.png 2KB page-top-bg.jpg 16KB about.jpg 66KB domain-bg.jpg 16KB faq.jpg 28KB logo.png 5KB banner-bg.jpg 21KB rocket.png 77KB bg.jpg 47KB blog 2.jpg 38KB 1.jpg 39KB 3.jpg 29KB favicon.ico 17KB icons 3.png 1KB 1.png 1KB 2.png 2KB add.jpg 33KB section-title-icon.png 4KB css style.css 29KB bootstrap.min.css 138KB animate.css 73KB font-awesome.min.css 30KB owl.carousel.min.css 3KB flaticon.css 3KB index.html 14KB elements.html 15KB contact.html 7KB about.html 11KB blog.html 10KB资源评论
