288 lines
14 KiB
Plaintext
288 lines
14 KiB
Plaintext
<div class="container">
|
|
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center show-dots-hover dots-light nav-style-1 nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0 mt-3 mt-md-5"
|
|
data-plugin-options="{'autoplayTimeout': 7000}" style="height: calc(100vh - 220px);">
|
|
<div class="owl-stage-outer">
|
|
<div class="owl-stage">
|
|
|
|
<!-- Carousel Slide 1 -->
|
|
<div class="owl-item position-relative overlay overlay-show overlay-op-7"
|
|
style="background-image: url(/img/dlh/banner/hero-1.jpg); background-size: cover; background-position: center;">
|
|
<div class="container position-relative z-index-3 h-100">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-lg-7 text-center">
|
|
<div class="d-flex flex-column align-items-center justify-content-center h-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carousel Slide 2 -->
|
|
<div class="owl-item position-relative overlay overlay-show overlay-op-7"
|
|
style="background-image: url(/img/dlh/banner/hero-2.jpg); background-size: cover; background-position: center;">
|
|
<div class="container position-relative z-index-3 h-100">
|
|
<div class="row justify-content-center align-items-center h-100">
|
|
<div class="col-lg-7 text-center">
|
|
<div class="d-flex flex-column align-items-center justify-content-center h-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="owl-dots mb-5">
|
|
<button role="button" class="owl-dot active"><span></span></button>
|
|
<button role="button" class="owl-dot"><span></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 py-3" id="main">
|
|
<div class="row pt-4">
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
|
|
data-appear-animation-delay="200">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-user-following icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Customer Support</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum
|
|
pellentesque imperdiet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeIn">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-layers icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Sliders</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
|
|
data-appear-animation-delay="200">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-calculator icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">HTML5</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-lg-3">
|
|
<div class="col-lg-4">
|
|
<div class="feature-box feature-box-style-2 appear-animation" data-appear-animation="fadeInLeftShorter"
|
|
data-appear-animation-delay="300">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-star icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Icons</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum
|
|
pellentesque imperdiet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="feature-box feature-box-style-2 appear-animation" data-appear-animation="fadeIn"
|
|
data-appear-animation-delay="100">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-drop icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Colors</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
|
|
data-appear-animation-delay="300">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-mouse icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Buttons</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-lg-3">
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
|
|
data-appear-animation-delay="400">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-screen-desktop icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Lightboxes</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum
|
|
pellentesque imperdiet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-energy icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Elements</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
|
|
data-appear-animation-delay="400">
|
|
<div class="feature-box feature-box-style-2">
|
|
<div class="feature-box-icon">
|
|
<i class="icon-social-youtube icons"></i>
|
|
</div>
|
|
<div class="feature-box-info">
|
|
<h4 class="font-weight-bold mb-2">Videos</h4>
|
|
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque
|
|
imperdiet. Nulla lacinia iaculis nulla.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5">
|
|
<div class="row">
|
|
<h2 class="font-weight-bold text-center text-10 pt-3 mb-5">Ikuti Kegiatan Kami</h2>
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-1.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">Amazing
|
|
Mountain</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter"
|
|
data-appear-animation-delay="300">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-2.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">Creative
|
|
Business</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter"
|
|
data-appear-animation-delay="600">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-3.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">Unlimited
|
|
Ways</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-4.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">Developer
|
|
Life</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter"
|
|
data-appear-animation-delay="300">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-5.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">The Blue
|
|
Sky</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5 appear-animation" data-appear-animation="fadeInUpShorter"
|
|
data-appear-animation-delay="600">
|
|
<div class="post-image">
|
|
<a href="blog-post.html">
|
|
<img src="/img/blog/medium/blog-6.jpg"
|
|
class="img-fluid img-thumbnail img-thumbnail-no-borders rounded-4" alt="" />
|
|
</a>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html">Night
|
|
Life</a></h2>
|
|
<p>Euismod atras vulputate iltricies etri elit. Class aptent taciti sociosqu ad litora torquent per
|
|
conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div> |