Home / css / Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome

Even though Footer is located at the bottom of the website but its position cannot be undermined in any way. It Provide the key information to the end user and enhances the user experience by providing the social media accounts and contact information.

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

        <link rel="stylesheet" href="style.css" >
    </head>
<body>
  <div class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="footer-width">
                    <h5 class="sz">Company</h5>
                    <ul>
                        <li><a href="">Sell on Amazon</a></li>
                        <li><a href="">Become an affiliate</a></li>
                        <li><a href="">Fulfillment</a></li>
                        <li><a href="">Advertise</a></li>
                        <li><a href="">Pay</a></li>
                        
                    </ul>
                    <div class="footer-social-link">
                        <a href="" target="_blank"><i class="fab fa-facebook "></i></a>
                        <a href="" target="_blank"><i class="fab fa-twitter "></i></a>
                        <a href="" target="_blank"><i class="fab fa-linkedin "></i></a>
                        <a href="" target="_blank"><i class="fab fa-youtube "></i></a>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer-width">
                    <h5 class="sz">Links</h5>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Services</a></li>
                        <li><a href="">Videos</a></li>
                        <li><a href="">Blogs</a></li>
                        <li><a href="">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer-width">
                    <h5 class="sz" >Shop</h5>
                    <ul>
                        <li><a href="">Books</a></li>
                        <li><a href="">Cloths</a></li>
                        <li><a href="">Cards</a></li>
                        <li><a href="">Extras</a></li>
                        <li><a href="">Support</a></li>
                        <li><a href="">Further</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3">
                <div class="footer-width">
                    <p class="contact-info"><i class="fa fa-map-marker"></i> This is our Address.</p>
                    <p class="contact-info"><i class="fa fa-envelope"></i> <a href="mailto:info@ourdomain.com">info@ourdomain.com</a></p>
                    <p class="contact-info"><i class="fa fa-phone"></i> <a href="tel:89898989">89898989</a></p>
                    
                    <div class="footer-subscription-form">
                        <h4>Subscribe Our Newsletter</h4>
                        <form action="">
                            <input type="email" placeholder="Your Email" required>
                            <input type="submit" value="Send">
                        </form>
                        <p>We don't share your info with anyone</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

   
</div>
</body>
</html>

 

body{
    font-family: 'Montserrat';
    }
a:hover { 
    text-decoration: none; opacity: .65; 
}
a{
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}

.footer-area {
    background: #012d50;
    background: linear-gradient(45deg, #FF4E50  0%, #f9d423  100%);
    background: -moz-linear-gradient(45deg, #FF4E50 0%, #f9d423  36a4 100%);
    background: -webkit-linear-gradient(45deg, #FF4E50 0%, #f9d423  100%);
    
    color: #fff;
    padding: 35px 0;
}

.footer-area a {
    color: #fff;
}

.footer-width h5 {
    text-transform: uppercase;
    margin: 0 0 20px;
}

.footer-social-link a {
    display: inline-block;
    font-size: 20px;
    padding-right: 9px;
    margin-top: 14px;
}

.footer-width ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 24px;
}
p.contact-info {
    position: relative;
    padding-left: 40px;
}

p.contact-info i.fa {
    position: absolute;
    left: 0;
    font-size: 18px;
    top: 5px;
}

.footer-subscription-form h4 {
    text-transform: uppercase;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

input[type=email] {
    border: none;
    padding: 8px;
}

.footer-subscription-form p {
    margin-top: 10px;
}
p.contact-info {
    position: relative;
    padding-left: 40px;
}

p.contact-info i.fa {
    position: absolute;
    left: 0;
    font-size: 18px;
    top: 5px;
}

.footer-subscription-form h4 {
    text-transform: uppercase;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

input[type=email] {
    border: none;
    padding: 8px;
    width: 100%;
}

input[type=submit], button[type=submit] {
    border: none;
    background: #FF4E50  ;
    padding: 8px 15px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 10px;
}
.sz{
    color: #fff ;
    font-size: 18px;
    font-weight: bold;
}

 

Check Also

MaterialDesignRegLoginAnimation

Login & Registration using Materialize CSS with cool animation

Single form for Login & Registration using Materialize css with cool animation Login and Registration …

Leave a Reply

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