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.

Dự án Landing Page: Các phần còn lại

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.

5/5 (1 bình chọn)
Chia sẻ
Series: Dự án Landing Page