MocNa - Responsive Landing Template là một Template được thiết kế dành cho những bạn có như cầu giới thiệu Công ty, dịch vụ hay sản phẩm của mình.

Template được thiết kế theo phong cách thiết kế phẳng, tốc độ nhanh và tương thích với mọi thiết bị di động.

Hướng dẫn dùng Template

1. Thông tin trên Header

<div class='dia-chi'>
<span class='info_icon icon-nha'><i aria-hidden='true' class='fa fa-home'/></i></span>
<span class='dia-chi-lien-he'><b>123 Address Street</b><br/>Hà Nội, VN</span> </div>
<div class='dien-thoai'>
<span class='info_icon icon-dien-thoai'><i aria-hidden='true' class='fa fa-phone'/></i></span>
<span class='so-dien-thoai'><b>123-456-7890</b><br/>info@yoursite.com</span> </div>

2. Menu

<nav id="navigation">
<button class="nav-toggle">
<div class="icon-menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>
</div>
</button>
<div class="nav-container">
<ul class="nav-menu menu">
<li class="menu-item has-dropdown">
<a href="#!" class="menu-link">Menu Link</a>
<ul class="nav-dropdown menu">
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
<li class="menu-item">
<a href="#!" class="menu-link">Menu Link</a>
</li>
</ul>
</div>
<ul id="main-menu">
<li class="current-menu-item"><a href="/">Home</a></li>
<li><a href="#du-an">Dự án</a></li>
<li><a href="#tai-sao">Lý do</a></li>
<li><a href="#danh-gia">Đánh giá</a></li>
<li><a href="#tin-tuc">Tin tức</a></li>
<li><a href="#lien-he">Liên hệ</a></li>
<li><a href="#dia-chi">Địa chỉ</a></li>
</ul>
<button class="menu-di-dong"><i class="fa fa-bars" aria-hidden="true"></i></button>
</nav>

3. Sildeshows

<ol class="slides">
<li class="current">
<div class="description">
<h2>Tilted Content Slideshow</h2>
<p>This slider, as seen on the landing page of the <a href="/">FWA</a>, plays with 3D perspective and performs some interesting animations on the right-hand side images.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/1_screen.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/2_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>CSS Animations</h2>
<p>We are using 12 different animations for showing and hiding the items of a slide. The animations are defined by randomly adding data-attributes called <code>data-effect-in</code> and <code>data-effect-out</code> for every slide. </p>
</div>
<div class="tiltview row">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/3_mobile.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/4_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Tilted Items</h2>
<p>The perspective view is achieved by adding a perspective value to the slide list item and tilting a division that contains the two screenshots.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/5_screen.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/6_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Column or Row</h2>
<p>The items in the tilted container are either laid out in a column or in a row. For some directions we need to adjust the animation delays for the items, since we don't want the items to overlap each other when they move in or out.</p>
</div>
<div class="tiltview row">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/1_mobile.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/2_mobile.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Responsiveness</h2>
<p>For smaller screens, the items on the right hand side will become less opaque and serve as decoration only. The focus will be on the description which will occupy all the width.</p>
</div>
<div class="tiltview col">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/3_screen.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/4_screen.jpg"/></a>
</div>
</li>
<li>
<div class="description">
<h2>Navigation</h2>
<p>For the "line" navigation we use a little trick to make the clickable area a bit bigger: we add a thick white border to the top and bottom of the span. Since the border is part of the element, it will be part of the clickable zone.</p>
</div>
<div class="tiltview row">
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/5_mobile.jpg"/></a>
<a href="#"><img src="http://doiguocmoc.com/demo/slide/img/6_mobile.jpg"/></a>
</div>
</li>
</ol>

4. Dự án mới

Các bạn nhập tên Label vào trong widget

5. Tại sao chọn chúng tôi

<div class="ly-do-chon">
<div class="title-tin-tuc"><h3><span>Tại sao?</span></h3></div>
<div class="ly-do-left" style="margin-bottom:20px !important;"> Extensive upgrades and thorough maintenance have kept this home in prime condition. Hardwood floors and new carpets create a very comfortable living space. </div>
<div class="columns1">
<div class="number">1.</div>
<div class="sc_content"><span class="sc_highlight" style="color:#F88C00;"><b>Quiet Neighbourhood</b></span>
</div>
<div class="sc_content" style="margin-bottom:20px !important;">Enjoy tranquil and relaxed atmosphere of the place</div>
<div class="number">2.</div>
<div class="sc_content"><span class="sc_highlight" style="color:#F88C00;"><b>Fabulous views</b></span>
</div>
<div class="sc_content" style="margin-bottom:20px !important;">Get yourself surrounded by the stunning view opening</div>
</div>
<div class="columns1">
<div class="number">3.</div>
<div class="sc_content"><span class="sc_highlight" style="color:#F88C00;"><b>Quiet Neighbourhood</b></span>
</div>
<div class="sc_content" style="margin-bottom:20px !important;">Enjoy tranquil and relaxed atmosphere of the place</div>
<div class="number">4.</div>
<div class="sc_content"><span class="sc_highlight" style="color:#F88C00;"><b>Fabulous views</b></span>
</div>
<div class="sc_content" style="margin-bottom:20px !important;">Get yourself surrounded by the stunning view opening</div>
</div>
</div>
<div class="anh-minh-hoa">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQVgiQC9s_SNRsNLcFyCdyA8u1D5KMviyOh2IuscMwOFQSLc4dz1TkfSmqC4R2cxhxnEhBs33J6Aym8ZuJ_l1fUjjCTVrcPrld60RcL2XVbBWP9_azEljVFamuvJDD2HTc_hSE1tgEmg/s1600/About-Agent.jpg" alt="" />
</div>

6. Khách hàng nói gì

<article>
<div id="owl">
<div class="column row">
<div class="large-12 columns testimonial">
<div class="quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
</div>
<div class="student">
<div class="photo round-image"> </div>
<p>Don Know</p>
<p>Important person, some Company</p>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns testimonial">
<div class="quote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
</div>
<div class="student">
<div class="photo"> </div>
<p>Pablo Napp</p>
<p>Important person, some Company</p>
</div>
</div>
</div>
</div>
</article>

7. Liên hệ ngay

8. Khung liên hệ

9. Map

10. Về chúng tôi

11. Learn more

12. Khung theo dõi qua email

13. Social Button

<ul class="social">
<li><a href="" class="a-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="a-twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="a-google-plus"><i class="fa fa-google-plus"></i></a></li>
</ul>

14. Copyright

<div class="col-left"> <small> © 2016 Archer. All rights reserved.</small> </div>
<div class="col-right">
<ul class="terms-privacy">
<li><a href="" data-toggle="modal" data-target="#modal-terms">Terms</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-terms">Privacy</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-terms">Cookies</a></li>
</ul>
</div>