"Untitled"
Bootstrap 4.1.1 Snippet by 9717202145

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="footer, address, phone, icons" /> <title>Footer With Address And Phones</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> FOOTER DESIGN IN HTML CSS</div> <footer class="footer-distributed"> <div class="footer-left"> <h3>WebDev<span>Trick</span></h3> <p class="footer-links"> <a href="#">Home</a> · <a href="#">Blog</a> · <a href="#">Pricing</a> · <a href="#">About</a> · <a href="#">Faq</a> · <a href="#">Contact</a> </p> <p class="footer-company-name">webdevtrick © 2019</p> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p><span>21 Revolution Street</span> Delhi, India</p> </div> <div> <i class="fa fa-phone"></i> <p>+1 555 123456</p> </div> <div> <i class="fa fa-envelope"></i> <p><a href="mailto:support@company.com">contact@webdevtrick.com</a></p> </div> </div> <div class="footer-right"> <p class="footer-company-about"> <span>About the company</span> Web Dev Trick is a blog for web designers, graphic designers, web developers & SEO Learner. </p> <div class="footer-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </footer> </body> </html>
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { margin: 0; padding: 0; } .main { max-height: 550px;; background-color: #292c2f; color: white; font-size: 38pt; text-align: center; line-height: 550px; } footer{ position: fixed; bottom: 0; } .footer-distributed{ background-color: #292c2f; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: left; font: bold 16px sans-serif; padding: 55px 50px; margin-top: 80px; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: inline-block; vertical-align: top; } .footer-distributed .footer-left{ width: 40%; } .footer-distributed h3{ color: #ffffff; font: normal 36px 'Cookie', cursive; margin: 0; } .footer-distributed h3 span{ color: #5383d3; } .footer-distributed .footer-links{ color: #ffffff; margin: 20px 0 12px; padding: 0; } .footer-distributed .footer-links a{ display:inline-block; line-height: 1.8; text-decoration: none; color: inherit; } .footer-distributed .footer-company-name{ color: #8f9296; font-size: 14px; font-weight: normal; margin: 0; } .footer-distributed .footer-center{ width: 35%; } .footer-distributed .footer-center i{ background-color: #33383b; color: #ffffff; font-size: 25px; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 42px; margin: 10px 15px; vertical-align: middle; } .footer-distributed .footer-center i.fa-envelope{ font-size: 17px; line-height: 38px; } .footer-distributed .footer-center p{ display: inline-block; color: #ffffff; vertical-align: middle; margin:0; } .footer-distributed .footer-center p span{ display:block; font-weight: normal; font-size:14px; line-height:2; } .footer-distributed .footer-center p a{ color: #5383d3; text-decoration: none;; } .footer-distributed .footer-right{ width: 20%; } .footer-distributed .footer-company-about{ line-height: 20px; color: #92999f; font-size: 13px; font-weight: normal; margin: 0; } .footer-distributed .footer-company-about span{ display: block; color: #ffffff; font-size: 14px; font-weight: bold; margin-bottom: 20px; } .footer-distributed .footer-icons{ margin-top: 25px; } .footer-distributed .footer-icons a{ display: inline-block; width: 35px; height: 35px; cursor: pointer; background-color: #33383b; border-radius: 2px; font-size: 20px; color: #ffffff; text-align: center; line-height: 35px; margin-right: 3px; margin-bottom: 5px; } @media (max-width: 880px) { .footer-distributed{ font: bold 14px sans-serif; } .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right{ display: block; width: 100%; margin-bottom: 40px; text-align: center; } .footer-distributed .footer-center i{ margin-left: 0; } .main { line-height: normal; font-size: auto; } }

Related: See More

Now UI Kit

Questions / Comments: