<!doctype html
>
<html lang
="en">
<head>
<!-- programb
-->
<meta charset
="utf-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home
</title
>
<meta name
="description" content
="" />
<!--programb
-->
<link href
="programb" rel
="stylesheet">
<!--vendors styles
-->
<link rel
="stylesheet" href
="css/font-awesome.min.css">
<!-- Bootstrap CSS
/ Color Scheme
-->
<link rel
="stylesheet" href
="css/default.css" id
="theme-color">
</head
>
<body>
<!--navigation
-->
<nav
class="navbar navbar-expand-md navbar-light bg-white fixed-top sticky-navigation">
<a
class="navbar-brand mx-auto" href
="index.html">
Union
</a
>
<button
class="navbar-toggler navbar-toggler-right border-0" type
="button" data
-toggle
="collapse"
data
-target
="#navbarCollapse" aria
-controls
="navbarCollapse" aria
-expanded
="false" aria
-label
="Toggle navigation">
<span data
-feather
="grid"></span
>
</button
>
<div
class="collapse navbar-collapse" id
="navbarCollapse">
<ul
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link page-scroll" href
="#about">About
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link page-scroll" href
="#services">Services
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link page-scroll" href
="#process">Process
</a
>
</li
>
<li
class="nav-item">
<a
class="nav-link page-scroll" href
="#blog">Blog
</a
>
</li
>
</ul
>
<form
class="form-inline">
<p
class="mb-0 mx-3"><a
class="page-scroll font-weight-bold" href
="#contact">Work with us
</a
></p
>
</form
>
</div
>
</nav
>
<!--hero header
-->
<section
class="pt-7 pt-md-8" id
="home">
<div
class="container">
<div
class="row">
<div
class="col-md-8 mx-auto my-auto text-center">
<h1>Products
& services to help you grow business
.<
/h1
>
<p
class="lead mt-4 mb-5">
Trusted by
<b>10,000+</b
> customers
, Union themes
& apps help you create beautiful responsive
HTML sites
, faster and easier
.
</p
>
<p><img
class="img-fluid" src
="img/mockup.png" alt
="Mockup" /></p
>
</div
>
</div
>
</div
>
</section
>
<!-- about section
-->
<section
class="pb-7" id
="about">
<div
class="container">
<hr
class="my-6"/>
<div
class="row">
<div
class="col-md-6 mx-auto text-center">
<h4
class="dot-circle font-weight-normal">We work with world's top companies to create
beautiful products
& apps
.<
/h4
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-md-6 order-2 order-md-1 my-md-auto">
<h3>Google Design
</h3
>
<p
class="text-muted lead">
Lorem ipsum dolor sit amet
, consectetur adipiscing elit
. Integer id ante posuere
, vestibulum mauris eget
, efficitur felis
. Vestibulum tincidunt sit amet odio at gravida
. Cras mollis dapibus orci
, in interdum odio scelerisque rhoncus
.
</p
>
<a href
="#" class="btn btn-primary">View project
</a
>
</div
>
<div
class="col-md-6 order-1 order-md-2">
<img src
="img/google-design.jpeg" class="img-fluid d-block mx-auto" alt
="Google Design"/>
</div
>
<div
class="col-md-6 order-3 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
<div
class="review text-center">
<p
class="quote">Praesent vulputate dolor velit
, in condimentum odio pellentesin condimentum odio pellentesque libero
.<
/p
>
<div
class="mt-4 d-flex flex-row align-items-center justify-content-center">
<img src
="img/client-1.jpg" class="img-review rounded-circle mr-2" alt
="Client 1"/>
<span
class="text-muted">Ryan Siddle
, Google Design
</span
>
</div
>
</div
>
</div
>
</div
>
<div
class="row">
<div
class="col-md-6">
<img src
="img/facebook-messenger.jpeg" class="img-fluid d-block mx-auto" alt
="Facebook Messenger"/>
</div
>
<div
class="col-md-6 my-md-auto">
<h3>Facebook Messenger
</h3
>
<p
class="text-muted lead">
Lorem ipsum dolor sit amet
, consectetur adipiscing elit
. Integer id ante posuere
, vestibulum mauris eget
, efficitur felis
. Vestibulum tincidunt sit amet odio at gravida
. Cras mollis dapibus orci
, in interdum odio scelerisque rhoncus
.
</p
>
<a href
="#" class="btn btn-primary">View project
</a
>
</div
>
<div
class="col-md-6 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
<div
class="review text-center">
<p
class="quote">Integer id ante posuere
, vestibulum mauris eget
, efficitur felis
.<
/p
>
<div
class="mt-4 d-flex flex-row align-items-center justify-content-center">
<img src
="img/client-2.jpg" class="img-review rounded-circle mr-2" alt
="Client 2"/>
<span
class="text-muted">Ameli Mao
, VP Facebook
</span
>
</div
>
</div
>
</div
>
</div
>
<div
class="row">
<div
class="col-md-6 order-2 order-md-1 my-md-auto">
<h3>Twitter Mobile
</h3
>
<p
class="text-muted lead">
Lorem ipsum dolor sit amet
, consectetur adipiscing elit
. Integer id ante posuere
, vestibulum mauris eget
, efficitur felis
. Vestibulum tincidunt sit amet odio at gravida
. Cras mollis dapibus orci
, in interdum odio scelerisque rhoncus
.
</p
>
<a href
="#" class="btn btn-primary">View project
</a
>
</div
>
<div
class="col-md-6 order-1 order-md-2">
<img src
="img/twitter-mobile.jpeg" class="img-fluid d-block mx-auto" alt
="Twitter Mobile"/>
</div
>
<div
class="col-md-6 order-3 mx-auto border-top border-bottom mt-5 mt-md-0 py-4">
<div
class="review text-center">
<p
class="quote">Praesent vulputate dolor velit
, pellentesin condimentum odio pellentesque libero
.<
/p
>
<div
class="mt-4 d-flex flex-row align-items-center justify-content-center">
<img src
="img/client-3.jpg" class="img-review rounded-circle mr-2" alt
="Client 3"/>
<span
class="text-muted">Kathrine Jones
, Twitter
</span
>
</div
>
</div
>
</div
>
</div
>
<div
class="row mt-6">
<div
class="col-md-6 mx-auto text-center">
<h4>Want to work with us
?</h4
>
<p
class="lead text-muted">Ready to launch your awesome project
? We'd be happy to help you
.<
/p
>
<a href
="#" class="btn btn-primary">Get in touch
</a
>
</div
>
</div
>
</div
>
</section
>
<!--services section
-->
<section
class="bg-light py-7" id
="services">
<div
class="container">
<div
class="row">
<div
class="col-md-7 mx-auto">
<h2
class="dot-circle">Services we offer
</h2
>
<p
class="text-muted lead">Lorem ipsum dolor sit amet
, consectetur adipiscing elit
. Vestibulum in nisi commodo
, tempus odio a
, vestibulum nibh
.<
/p
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-md-10 mx-auto">
<div
class="row card-services">
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="crop" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Web design
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="monitor" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Web development
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="briefcase" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Branding
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="smartphone" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Mobile apps
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="message-square" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Social media
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-3">
<div
class="card">
<div
class="card-body text-center">
<div
class="icon-box border-box">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="headphones" width
="30" height
="30"></span
>
</div
>
</div
>
<h5
class="mt-0 mb-3">Coaching
</h5
>
Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.
</div
>
</div
>
</div
>
<div
class="col-md-6 mx-auto text-center">
<hr
class="my-5"/>
<h4>Need a custom theme or app
?</h4
>
<a href
="#contact" class="btn btn-primary">Work with us
</a
>
</div
>
</div
>
</div
>
</div
>
</div
>
</section
>
<!--call to action
-->
<section
class="bg-hero py-8" style
="background-image: url(img/parallex.jpg)">
<div
class="container">
<div
class="row">
<div
class="col-md-7 mx-auto text-center">
<h2
class="text-white">We help the world's top companies to create amazing products
.<
/h2
>
<p
class="lead text-white my-4">Ready to launch your awesome website
?</p
>
<button
class="btn btn-primary">Request a free quote
</button
>
</div
>
</div
>
</div
>
</section
>
<!--process
-->
<section
class="py-7" id
="process">
<div
class="container">
<div
class="row">
<div
class="col-md-7 mx-auto text-center">
<h2>How we work
</h2
>
<p
class="lead text-muted">
Donec lacus enim
, ullamcorper nec lectus id
, ornare finibus nunc
.
Eleifend option congue nihil imper
.
</p
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-md-7 mx-auto timeline">
<div
class="media pb-5">
<div
class="icon-box mt-1">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="disc"></span
>
</div
>
</div
>
<div
class="media-body">
<h5>Discovery
</h5
>
<p
class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.<
/p
>
</div
>
</div
>
<div
class="media pb-5">
<div
class="icon-box mt-1">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="copy"></span
>
</div
>
</div
>
<div
class="media-body">
<h5>UI
/UX Design
</h5
>
<p
class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.<
/p
>
</div
>
</div
>
<div
class="media pb-5">
<div
class="icon-box mt-1">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="box"></span
>
</div
>
</div
>
<div
class="media-body">
<h5>QA
& Testing
</h5
>
<p
class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.<
/p
>
</div
>
</div
>
<div
class="media">
<div
class="icon-box mt-1">
<div
class="icon-box-inner small-xs text-primary">
<span data
-feather
="server"></span
>
</div
>
</div
>
<div
class="media-body">
<h5>Deployment
</h5
>
<p
class="text-muted">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
.<
/p
>
</div
>
</div
>
</div
>
</div
>
<div
class="row mt-7">
<div
class="col-md-6 mx-auto text-center">
<h3
class="dot-circle dot-lg">90-day satisfaction guarantee
.<
/h3
>
<p
class="lead text-muted mb-4">We know you're gonna love our professional services
, but let us prove it
.
If our service hasn
't exceeded your expectations after 90 days, you'll get a full
refund
. Simple as that
.
</p
>
<a
class="btn btn-primary page-scroll" href
="#contact">Get started risk free
</a
>
</div
>
</div
>
</div
>
</section
>
<!--blog section
-->
<section
class="py-7 bg-light" id
="blog">
<div
class="container">
<div
class="row">
<div
class="col-md-10 mx-auto">
<h2
class="dot-circle">From our blog
</h2
>
<p
class="text-muted lead">Lorem ipsum dolor sit amet
, consectetur adipiscing elit
. Vestibulum in nisi commodo
, tempus odio a
, vestibulum nibh
.<
/p
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-md-6 mb-5">
<div
class="card">
<a href
="#">
<img
class="card-img-top" src
="img/parallex.jpg" alt
="Blog 1">
</a
>
<div
class="card-body">
<a href
="#">
<h5
class="card-title">How to create a Bootstrap
4 template
</h5
>
<p
class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
, consectetur adipiscing elit
.<
/p
>
</a
>
</div
>
</div
>
</div
>
<div
class="col-md-6 mb-5">
<div
class="card">
<a href
="#">
<img
class="card-img-top" src
="img/parallex2.jpg" alt
="Blog 2">
</a
>
<div
class="card-body">
<a href
="#">
<h5
class="card-title">How to use social icons in Angular
4</h5
>
<p
class="card-text">Nam liber tempor cum soluta nobis eleifend option congue nihil imper
, consectetur adipiscing elit
.<
/p
>
</a
>
</div
>
</div
>
</div
>
<div
class="col-md-6 mx-auto text-center mt-5">
<a href
="#" class="btn btn-primary">Explore more posts
</a
>
</div
>
</div
>
</div
>
</section
>
<!--contact section
-->
<section
class="py-7" id
="contact">
<div
class="container">
<div
class="row">
<div
class="col-md-6 mx-auto text-center">
<h2>Want to work with us
?</h2
>
<div
class="divider bg-primary mx-auto"></div
>
<p
class="text-muted lead">
Are you working on something great
? We'd love to help make it happen
.
</p
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-md-8 mx-auto">
<form>
<div
class="row">
<div
class="col-md-6">
<div
class="form-group">
<input type
="text" class="form-control" placeholder
="Your name">
</div
>
</div
>
<div
class="col-md-6">
<div
class="form-group">
<input type
="email" class="form-control" placeholder
="Your email address">
</div
>
</div
>
<div
class="col-md-6">
<div
class="form-group">
<input type
="tel" class="form-control" placeholder
="Phone number">
</div
>
</div
>
<div
class="col-md-6">
<div
class="form-group">
<input type
="url" class="form-control" placeholder
="Your website">
</div
>
</div
>
<div
class="col-12">
<div
class="form-group">
<textarea rows
="5" class="form-control" placeholder
="What are you looking for?"></textarea
>
</div
>
</div
>
</div
>
<div
class="text-center mt-3">
<button
class="btn btn-primary">Send your message
</button
>
</div
>
</form
>
</div
>
</div
>
</div
>
</section
>
<!--footer
/ contact
-->
<footer
class="py-6 bg-light">
<div
class="container">
<div
class="row">
<div
class="col-md-6 mx-auto text-center">
<ul
class="list-inline">
<li
class="list-inline-item"><a href
="#">Privacy
</a
></li
>
<li
class="list-inline-item"><a href
="#">Terms
</a
></li
>
<li
class="list-inline-item"><a href
="#">Affiliates
</a
></li
>
<li
class="list-inline-item"><a href
="#">Support
</a
></li
>
<li
class="list-inline-item"><a href
="#">Blog
</a
></li
>
</ul
>
<p
class="text-muted small text-uppercase mt-4">
Follow us on social media
</p
>
<ul
class="list-inline social social-dark social-sm">
<li
class="list-inline-item">
<a href
=""><i
class="fa fa-facebook"></i
></a
>
</li
>
<li
class="list-inline-item">
<a href
=""><i
class="fa fa-twitter"></i
></a
>
</li
>
<li
class="list-inline-item">
<a href
=""><i
class="fa fa-google-plus"></i
></a
>
</li
>
<li
class="list-inline-item">
<a href
=""><i
class="fa fa-dribbble"></i
></a
>
</li
>
</ul
>
</div
>
</div
>
<div
class="row mt-5">
<div
class="col-12 text-muted text-center small-xl">Copyright
©
; 2019.Company name All rights reserved
.<a target
="_blank" href
="http://www.programb.com/">网
;页
;模
;板
;</a
></div
>
</div
>
</div
>
</footer
>
<!--scroll to top
-->
<div
class="scroll-top">
<i
class="fa fa-angle-up" aria
-hidden
="true"></i
>
</div
>
<!-- theme switcher
(FOR DEMO ONLY
- REMOVE FROM PRODUCTION
)-->
<div
class="switcher-wrap">
<div
class="switcher-trigger">
<span
class="fa fa-gear"></span
>
</div
>
<div
class="color-switcher">
<h6>Color Switcher
</h6
>
<ul
class="mt-3 clearfix">
<li
class="bg-green active" data
-color
="default" title
="Default Green"></li
>
<li
class="bg-blue" data
-color
="blue" title
="Blue"></li
>
<li
class="bg-red" data
-color
="red" title
="Red"></li
>
<li
class="bg-indigo" data
-color
="indigo" title
="Indigo"></li
>
<li
class="bg-orange" data
-color
="orange" title
="Orange"></li
>
<li
class="bg-black" data
-color
="black" title
="Black"></li
>
<li
class="bg-teal" data
-color
="teal" title
="Teal"></li
>
<li
class="bg-cyan" data
-color
="cyan" title
="Cyan"></li
>
<li
class="bg-purple" data
-color
="purple" title
="Purple"></li
>
<li
class="bg-pink" data
-color
="pink" title
="Pink"></li
>
</ul
>
<p>These are just demo colors
. You can
<b>easily
</b
> create your own color scheme
.<
/p
>
</div
>
</div
>
<!-- jQuery first
, then Popper
.js
, then Bootstrap JS
-->
<script src
="js/jquery-3.2.1.min.js"></script
>
<script src
="js/popper.min.js"></script
>
<script src
="js/bootstrap.min.js"></script
>
<script src
="js/feather.min.js"></script
>
<script src
="js/scripts.js"></script
>
</body
>
</html
>
