Footer Area Development

Markup

<div class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="footer-wid">
                    <h3>Jharu</h3>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan</p>
                    <div class="social-link">
                        <a href="" target="_blank"><i class="fa fa-facebook"></i></a>
                        <a href="" target="_blank"><i class="fa fa-twitter"></i></a>
                        <a href="" target="_blank"><i class="fa fa-google-plus"></i></a>
                        <a href="" target="_blank"><i class="fa fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer-wid">
                    <h3>Quick Links</h3>
                        <ul>
                            <li><a href="">Home</a></li>
                            <li><a href="">About Us</a></li>
                            <li><a href="">Our Services</a></li>
                            <li><a href="">Porfolio</a></li>
                            <li><a href="">Our Blog</a></li>
                            <li><a href="">Shop</a></li>
                            <li><a href="">Contact Us</a></li>
                        </ul>
                    </div>
            </div>
            
            <div class="col-md-3">
                <div class="footer-wid">
                    <h3>iServices</h3>
                        <ul>
                            <li><a href="">Aparment Cleaning</a></li>
                            <li><a href="">Bulding Cleaning</a></li>
                            <li><a href="">Wooden Floor Cleaning</a></li>
                            <li><a href="">Glass Cleaning</a></li>
                            <li><a href="">Office Cleaning</a></li>
                            <li><a href="">Vehicle Cleaning</a></li>
                        </ul>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer-wid">
                    <p class="contact-info"><i class="fa fa-map-marker"></i> 2123/1, Mazar, College Taltola, UK</p>
                    <p class="contact-info"><i class="fa fa-envelope"></i> <a href="mailto:codexcafe@email.com">codexcafe@email.com</a></p>
                    <p class="contact-info"><i class="fa fa-phone"></i> <a href="tel:8801911235233">(880) 1911 235233 </a></p>
                    <div class="footer-subscription-form">
                        <h4>subscribe our newsletter</h4>
                        <form action="">
                            <input type="email" placeholder="Your mail">
                            <input type="submit" value="Send">
                        </form>
                        <p>We don’t share your info with anyone</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="copyright-area">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                jharu © 2017 / All Rights Reserved design by CrazyCafe
            </div>
            <div class="col-md-6 text-right">
                <ul>
                    <li><a href="">Private Policy</a></li>
                    <li><a href="">Terms & Conditions</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Style

/* Base CSS */
.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus, input:focus, textarea:focus, button:focus { 
    outline: 0 solid 
}
img {
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}
body {
    
}
a:hover { text-decoration: none }


.footer-area {
    background: #14adf3 none repeat scroll 0 0;
    padding: 50px 0;
}
.footer-area, .footer-area a {
    color: #fff;
}
.footer-wid h3 {
    margin-bottom: 20px;
    text-transform: uppercase;
}
.social-link a {
    display: inline-block;
    font-size: 20px;
    margin-top: 10px;
    padding-right: 20px;
}
.footer-wid ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.contact-info {
    padding-left: 30px;
    position: relative;
}
.contact-info i.fa {
    left: 0;
    position: absolute;
    top: 3px;
}
.footer-subscription-form h4 {
    text-transform: uppercase;
}
.footer-subscription-form {
    margin-top: 30px;
}



.footer-subscription-form input[type="email"] {
    border: medium none;
    color: #000;
    padding: 10px;
    width: 73%;
}
.footer-subscription-form input[type="submit"] {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    color: #14adf3;
    font-weight: 700;
    padding: 10px;
    text-transform: uppercase;
    width: 25%;
}
.footer-subscription-form form {
    margin-bottom: 10px;
}
.footer-subscription-form p {
    font-size: 90%;
}
.copyright-area, .copyright-area a {
    color: #b5b5b5;
}
.copyright-area ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.copyright-area li {
    display: inline-block;
}
.copyright-area li::after {
    content: "|";
    padding-left: 10px;
    padding-right: 3px;
}
.copyright-area li:last-child::after {
    display: none;
}
.copyright-area {
    padding: 10px 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.