374 lines
13 KiB
HTML
374 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-TW">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta
|
||
|
|
name="viewport"
|
||
|
|
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||
|
|
/>
|
||
|
|
<script src="js/destruct.js"></script>
|
||
|
|
<title>Atlas Business</title>
|
||
|
|
<meta name="description" content="Free bootstrap template Atlas" />
|
||
|
|
<link rel="icon" href="img/favicon.png" sizes="32x32" type="image/png" />
|
||
|
|
<!-- custom.css -->
|
||
|
|
<link rel="stylesheet" href="css/custom.css" />
|
||
|
|
<!-- bootstrap.min.css -->
|
||
|
|
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||
|
|
<!-- font-awesome -->
|
||
|
|
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
|
||
|
|
|
||
|
|
<!-- AOS -->
|
||
|
|
<link rel="stylesheet" href="css/aos.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- banner -->
|
||
|
|
<div
|
||
|
|
class="jumbotron jumbotron-fluid"
|
||
|
|
id="banner"
|
||
|
|
style="background-image: url(img/banner-bk.jpg)"
|
||
|
|
>
|
||
|
|
<div class="container text-center text-md-left">
|
||
|
|
<header>
|
||
|
|
<div class="row justify-content-between">
|
||
|
|
<div class="col-2">
|
||
|
|
<img src="img/logo.png" alt="logo" />
|
||
|
|
</div>
|
||
|
|
<div class="col-6 align-self-center text-right">
|
||
|
|
<a href="#" class="text-white lead">Get Early Access</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<h1
|
||
|
|
data-aos="fade"
|
||
|
|
data-aos-easing="linear"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="display-3 text-white font-weight-bold my-5"
|
||
|
|
>
|
||
|
|
A New Way<br />
|
||
|
|
To Start Business
|
||
|
|
</h1>
|
||
|
|
<p
|
||
|
|
data-aos="fade"
|
||
|
|
data-aos-easing="linear"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="lead text-white my-4"
|
||
|
|
>
|
||
|
|
Lorem ipsum dolor sit amet, id nec enim autem oblique, ei dico
|
||
|
|
mentitum duo.
|
||
|
|
<br />
|
||
|
|
Illum iusto laoreet his te. Lorem partiendo mel ex. Ad vitae admodum
|
||
|
|
voluptatum per.
|
||
|
|
</p>
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
data-aos="fade"
|
||
|
|
data-aos-easing="linear"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="btn my-4 font-weight-bold atlas-cta cta-green"
|
||
|
|
>Get Started</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- three-blcok -->
|
||
|
|
<div class="container my-5 py-2">
|
||
|
|
<h2 class="text-center font-weight-bold my-5">
|
||
|
|
Smartest protection for your site
|
||
|
|
</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
data-aos="fade-up"
|
||
|
|
data-aos-delay="0"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center"
|
||
|
|
>
|
||
|
|
<img src="img/smart-protect-1.jpg" alt="Anti-spam" class="mx-auto" />
|
||
|
|
<h4>Anti-spam</h4>
|
||
|
|
<p>Lorem ipsum dolor sit amet porro his no his deleniti</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-up"
|
||
|
|
data-aos-delay="200"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="img/smart-protect-2.jpg"
|
||
|
|
alt="Phishing Detect"
|
||
|
|
class="mx-auto"
|
||
|
|
/>
|
||
|
|
<h4>Phishing Detect</h4>
|
||
|
|
<p>Ne error antiopam usu. Sed vocen concludaturque ea</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-up"
|
||
|
|
data-aos-delay="400"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center"
|
||
|
|
>
|
||
|
|
<img src="img/smart-protect-3.jpg" alt="Smart Scan" class="mx-auto" />
|
||
|
|
<h4>Smart Scan</h4>
|
||
|
|
<p>Et usu ocurreret elaboraret doctus prodesse assueverit.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- feature (skew background) -->
|
||
|
|
<div class="jumbotron jumbotron-fluid feature" id="feature-first">
|
||
|
|
<div class="container my-5">
|
||
|
|
<div class="row justify-content-between text-center text-md-left">
|
||
|
|
<div
|
||
|
|
data-aos="fade-right"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-6"
|
||
|
|
>
|
||
|
|
<h2 class="font-weight-bold">Take a look inside</h2>
|
||
|
|
<p class="my-4">
|
||
|
|
Te iisque labitur eos, nec sale argumentum scribentur no, <br />
|
||
|
|
augue disputando in vim. Erat fugit sit at, ius lorem deserunt
|
||
|
|
deterruisset no.
|
||
|
|
</p>
|
||
|
|
<a href="#" class="btn my-4 font-weight-bold atlas-cta cta-blue"
|
||
|
|
>Learn More</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-left"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-6 align-self-center"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="img/feature-1.png"
|
||
|
|
alt="Take a look inside"
|
||
|
|
class="mx-auto d-block"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- feature (green background) -->
|
||
|
|
<div class="jumbotron jumbotron-fluid feature" id="feature-last">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-between text-center text-md-left">
|
||
|
|
<div
|
||
|
|
data-aos="fade-left"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-6 flex-md-last"
|
||
|
|
>
|
||
|
|
<h2 class="font-weight-bold">Safe and reliable</h2>
|
||
|
|
<p class="my-4">
|
||
|
|
Duo suas detracto maiestatis ad, commodo lucilius invenire nec ad,
|
||
|
|
<br />
|
||
|
|
eum et oratio disputationi. Falli lobortis his ad
|
||
|
|
</p>
|
||
|
|
<a href="#" class="btn my-4 font-weight-bold atlas-cta cta-blue"
|
||
|
|
>Learn More</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-right"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-6 align-self-center flex-md-first"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="img/feature-2.png"
|
||
|
|
alt="Safe and reliable"
|
||
|
|
class="mx-auto d-block"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- price table -->
|
||
|
|
<div class="container my-5 py-2" id="price-table">
|
||
|
|
<h2 class="text-center font-weight-bold d-block mb-3">
|
||
|
|
Check our pricing
|
||
|
|
</h2>
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
data-aos="fade-right"
|
||
|
|
data-aos-delay="200"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center py-4 mt-5"
|
||
|
|
>
|
||
|
|
<h4 class="my-4">STARTUP</h4>
|
||
|
|
<p class="font-weight-bold">
|
||
|
|
$ <span class="display-2 font-weight-bold">0</span> / MO.
|
||
|
|
</p>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Up to 5 Documents</li>
|
||
|
|
<li>Up to 3 Reviews</li>
|
||
|
|
<li>5 team Members</li>
|
||
|
|
<li>Limited Support</li>
|
||
|
|
</ul>
|
||
|
|
<a href="#" class="btn my-4 font-weight-bold atlas-cta cta-ghost"
|
||
|
|
>Get Free</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-up"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center py-4 mt-5 rounded"
|
||
|
|
id="price-table__premium"
|
||
|
|
>
|
||
|
|
<h4 class="my-4">PREMIUM</h4>
|
||
|
|
<p class="font-weight-bold">
|
||
|
|
$ <span class="display-2 font-weight-bold">10</span> / MO.
|
||
|
|
</p>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Up to 15 Documents</li>
|
||
|
|
<li>Up to 10 Reviews</li>
|
||
|
|
<li>25 team Members</li>
|
||
|
|
<li>Limited Support</li>
|
||
|
|
</ul>
|
||
|
|
<a href="#" class="btn my-4 font-weight-bold atlas-cta cta-green"
|
||
|
|
>Get Free</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-aos="fade-left"
|
||
|
|
data-aos-delay="200"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
data-aos-once="true"
|
||
|
|
class="col-md-4 text-center py-4 mt-5"
|
||
|
|
>
|
||
|
|
<h4 class="my-4">PROFESSIONAL</h4>
|
||
|
|
<p class="font-weight-bold">
|
||
|
|
$ <span class="display-2 font-weight-bold">30</span> / MO.
|
||
|
|
</p>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Unlimited Documents</li>
|
||
|
|
<li>Unlimited Reviews</li>
|
||
|
|
<li>Unlimited Members</li>
|
||
|
|
<li>Unlimited Support</li>
|
||
|
|
</ul>
|
||
|
|
<a href="#" class="btn my-4 font-weight-bold atlas-cta cta-ghost"
|
||
|
|
>Get Free</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- client -->
|
||
|
|
<div class="jumbotron jumbotron-fluid">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-1.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-2.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-3.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-4.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-5.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-4 col-md-2 py-2 align-self-center">
|
||
|
|
<img src="img/client-6.png" class="mx-auto d-block" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- contact -->
|
||
|
|
<div
|
||
|
|
class="jumbotron jumbotron-fluid"
|
||
|
|
id="contact"
|
||
|
|
style="background-image: url(img/contact-bk.jpg)"
|
||
|
|
>
|
||
|
|
<div class="container my-5">
|
||
|
|
<div class="row justify-content-between">
|
||
|
|
<div class="col-md-6 text-white">
|
||
|
|
<h2 class="font-weight-bold">Contact Us</h2>
|
||
|
|
<p class="my-4">
|
||
|
|
Te iisque labitur eos, nec sale argumentum scribentur,
|
||
|
|
<br />
|
||
|
|
augue disputando in vim. Erat fugit sit at, ius lorem.
|
||
|
|
</p>
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Email : company_email@com</li>
|
||
|
|
<li>Phone : 361-688-5824</li>
|
||
|
|
<li>Address : 4826 White Avenue, Corpus Christi, Texas</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<form>
|
||
|
|
<div class="row">
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<label for="name">Your Name</label>
|
||
|
|
<input type="name" class="form-control" id="name" />
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<label for="Email">Your Email</label>
|
||
|
|
<input type="email" class="form-control" id="Email" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="message">Message</label>
|
||
|
|
<textarea class="form-control" id="message" rows="3"></textarea>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="btn font-weight-bold atlas-cta atlas-cta-wide cta-green my-3"
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- copyright -->
|
||
|
|
<div class="jumbotron jumbotron-fluid" id="copyright">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-between">
|
||
|
|
<div
|
||
|
|
class="col-md-6 text-white align-self-center text-center text-md-left my-2"
|
||
|
|
>
|
||
|
|
Copyright © 2018 Chen, Yi-Ya.
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="col-md-6 align-self-center text-center text-md-right my-2"
|
||
|
|
id="social-media"
|
||
|
|
>
|
||
|
|
<a href="#" class="d-inline-block text-center ml-2">
|
||
|
|
<i class="fa fa-facebook" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="d-inline-block text-center ml-2">
|
||
|
|
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="d-inline-block text-center ml-2">
|
||
|
|
<i class="fa fa-medium" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="d-inline-block text-center ml-2">
|
||
|
|
<i class="fa fa-linkedin" aria-hidden="true"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AOS -->
|
||
|
|
<script src="js/aos.js"></script>
|
||
|
|
<script>
|
||
|
|
AOS.init({});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|