Các phần còn lại của dự án Landing Page “Intense”, gồm: Chức năng, Dịch vụ, Khách hàng và Footer.
Chức năng
HTML
<section class="featured-container">
<div class="container">
<div class="row featured-block">
<div class="col-md-7 col-md-push-5 text-center"><img class="featured-img img-responsive" src="img/slide-01.gif" alt="Featured 1" data-tilt></div>
<div class="col-md-5 col-md-pull-7">
<h2 class="featured-heading">Create a Stunning Website for Your Business</h2>
<p class="featured-desc">Today people use the Internet to search for the information they are interested in. We can help you create a proper representation of your company on the Net.</p>
</div>
</div>
<div class="row featured-block">
<div class="col-md-7 text-center"><img class="featured-img img-responsive" src="img/slide-02.png" alt="Featured 2" data-tilt></div>
<div class="col-md-5">
<h2 class="featured-heading">Start with a Beautiful Design</h2>
<p class="featured-desc">Whether you’re a real estate agent, florist, event planner, store owner, educator or consultant, we have the right template for you.</p>
</div>
</div>
<div class="row featured-block">
<div class="col-md-7 col-md-push-5 text-center"><img class="featured-img img-responsive" src="img/slide-03.png" alt="Featured 3" data-tilt></div>
<div class="col-md-5 col-md-pull-7">
<h2 class="featured-heading">Easily Build a Professional Website</h2>
<p class="featured-desc">Do it yourself - it’s easy! Fully customizable templates, intuitive drag and drop, domains, secure hosting, easy invoicing, online bookings, contact forms and more.</p>
</div>
</div>
</div>
</section>
<!-- /featured -->Với col-md-push-* là class thay đổi thứ tự của 2 thẻ div, tham khảo tại đây.
CSS
/* Featured */
.featured-container {
padding-top: 100px;
padding-bottom: 50px;
}
.featured-block {
margin-bottom: 80px;
}
.featured-block .featured-heading {
font-size: 36px;
line-height: 1.2;
color: #191919;
font-weight: 700;
margin-top: 50px;
margin-bottom: 30px;
}
.featured-block .featured-img {
max-width: 60%;
margin: 0 auto;
}Dịch vụ
HTML
<section class="service-container">
<div class="container">
<div class="row heading-block text-center">
<div class="col-lg-8 col-lg-offset-2">
<h2 class="block-heading">The Possibilities Are Endless</h2>
<p class="block-desc">With over 200 Apps and services, grow your business in ways you never imagined. Intense powers millions of websites across hundreds of industries for people just like you.</p>
</div>
</div>
<div class="services">
<div class="row">
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-server"></span></div>
<div class="media-body">
<h4 class="media-heading">Powerful Servers</h4>
<p class="media-desc">All our products are located on high performance servers that are also reliable and available 24/7 for your convenience.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-lock"></span></div>
<div class="media-body">
<h4 class="media-heading">Protect Your Data</h4>
<p class="media-desc">We use advanced security technologies to protect the data of your company so you can be sure it is in good hands.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-mobile-phone"></span></div>
<div class="media-body">
<h4 class="media-heading">Edit From Mobile Phone</h4>
<p class="media-desc">All our templates and apps are equipped with easy-to-use mobile editor, with which your website can be edited on the go.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-paint-brush"></span></div>
<div class="media-body">
<h4 class="media-heading">Easy To Customize</h4>
<p class="media-desc">We create our designs with the end user in mind, and that’s why our templates can be easily customized according to your needs.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-briefcase"></span></div>
<div class="media-body">
<h4 class="media-heading">Prepared For Business</h4>
<p class="media-desc">Our products are mostly business-oriented because we believe any modern business needs an attractive website to be successful.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left"><span class="fa fa-money"></span></div>
<div class="media-body">
<h4 class="media-heading">Affordable Prices</h4>
<p class="media-desc">We believe that design and development services can be reasonably priced, and the cost of our products proves it.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /service -->Sử dụng Media Object cho mỗi dịch vụ.
CSS
/* Service */
.service-container {
padding-top: 30px;
padding-bottom: 60px;
}
.heading-block {
margin-bottom: 50px;
}
.heading-block .block-heading {
font-size: 36px;
line-height: 1.2;
color: #191919;
font-weight: 700;
margin-top: 50px;
}
.heading-block .block-desc {}
.services .media {
margin-bottom: 35px;
}
.services .media .media-heading {
font-size: 18px;
color: #191919;
line-height: 1.2;
font-weight: 700;
margin-bottom: 10px;
}
.services .media .media-desc {
font-size: 14px;
}
.services .media span.fa {
font-size: 48px;
width: 60px;
color: #ff1654;
text-align: center;
}Call-to-Action
HTML
<section class="get-started-container" data-parallax="scroll" data-image-src="img/bg-02.jpg">
<div class="container">
<div class="row">
<div class="col-lg-4">
<h2 class="get-started-heading">Get Your Business Online Today</h2>
<p class="get-started-desc">With solutions desined by Intense, you can easily get your business online in no time.</p>
<a class="main-btn" href="#">Get Started</a>
</div>
</div>
</div>
</section>
<!-- /get-started -->CSS
/* Get Started */
.get-started-container {
color: #fff;
padding-top: 250px;
padding-bottom: 250px;
}
.get-started-container .get-started-heading {
line-height: 1.2;
font-size: 36px;
font-weight: 700;
margin-bottom: 30px;
}
.get-started-container .get-started-desc {
margin-bottom: 50px;
}Khách hàng
HTML
<section class="client-container">
<div class="container">
<div class="row heading-block text-center">
<div class="col-lg-8 col-lg-offset-2">
<h2 class="block-heading">Clients Trust Us</h2>
<p class="block-desc">We cooperate with renowned businesses and international companies all over the world. Some of our partners and loyal customers are listed below.</p>
</div>
</div>
<div class="row clients">
<div class="col-md-3 text-center"><img src="img/partners/partner-01.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-02.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-03.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-04.png" alt="Client"></div>
</div>
<div class="row clients">
<div class="col-md-3 text-center"><img src="img/partners/partner-05.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-06.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-07.png" alt="Client"></div>
<div class="col-md-3 text-center"><img src="img/partners/partner-08.png" alt="Client"></div>
</div>
</div>
</section>
<!-- /client -->CSS
/* Client */
.client-container {
padding-top: 50px;
padding-bottom: 100px;
}
.clients .col-md-3 {
margin-bottom: 35px;
}
.clients img {
transition: .35s all ease;
max-width: 100%;
}
.clients img:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}Footer
HTML
<footer class="footer-container">
<div class="container">
<div class="row">
<div class="col-md-3"><a href="#"><img class="footer-logo img-responsive" src="img/logo-light.png" alt="Footer Logo"></a></div>
<div class="col-md-9">
<div class="row">
<div class="col-md-3">
<h3 class="footer-heading">Products</h3>
<ul class="footer-list">
<li><a href="#">Domains</a></li>
<li><a href="#">Websites</a></li>
<li><a href="#">Online Stores</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Logos</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="footer-heading">Company</h3>
<ul class="footer-list">
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Press & Media</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="footer-heading">Community</h3>
<ul class="footer-list">
<li><a href="#">Help & Support</a></li>
<li><a href="#">Answers</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Specialists</a></li>
<li><a href="#">Developers</a></li>
</ul>
</div>
<div class="col-md-3">
<h3 class="footer-heading">Follow Us</h3>
<ul class="footer-list">
<li><a href="#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- /footer -->CSS
/* Footer */
.footer-container {
background: #212121;
padding-top: 60px;
padding-bottom: 30px;
}
.footer-logo {
margin-bottom: 50px;
}
.footer-heading {
color: #fff;
line-height: 1.2;
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid #434345;
padding-bottom: 8px;
margin-top: 0;
}
.footer-list {
margin-left: 0;
padding-left: 0;
margin-bottom: 35px;
list-style: none;
}
.footer-list li a {
color: #9b9b9b;
line-height: 1.9;
}
.footer-list li a:hover, .footer-list li a:focus {
color: #ff1654;
text-decoration: none;
}Tới đây, cơ bản chúng ta đã hoàn thành dự án này.
