<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 ----------> <!-- Start Footer Area --> <footer class="pt-100 pb-70"> <span class="shapes"><i class="far fa-square"></i></span> <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-6"> <div class="footer-item"> <h3 class="mb-3">Company Name</h3> <p class="company-info">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique.</p> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="footer-item"> <h3 class="mb-3">Quick Link</h3> <ul> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Our Blog</a></li> <li><a href="#">Features</a></li> </ul> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="footer-item"> <h3 class="mb-3">Help and FAQs</h3> <ul> <li><a href="#">Faq</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Condiitons</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div> <div class="col-lg-3 col-sm-6"> <div class="footer-item"> <h3 class="mb-3">Follow the Best</h3> <div class="mt-4"> <input class="form-control subscribe" type="email" placeholder="email address"> <button type="submit" class="btn btn btn-primary my-3 w-100"> SUBMIT</button> </div> <div class="social-icon"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#"><i class="fab fa-dribbble"></i></a> </div> </div> </div> </div> </div> </footer> <!-- End Footer Area --> <!-- Start Min-Footer Area --> <div class="min-footer"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <p class="text-white">Copyright © 2020 Design by <a class="creator " href="http://top10theme.com/"> Top10theme</a> </div> </div> </div> </div> <!-- End Min-Footer Area -->

/* Section Name: Dark Footer Design Author:top10theme.com*/ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css?family=Philosopher:700&display=swap'); /*------ Tempalte default css ------*/ body { font-family: 'Roboto', sans-serif; position: relative; font-weight: 400; font-size: 15px; color: #8a919c; background-color: #1e252b; line-height: 30px; } ul { padding: 0; margin: 0; } li { list-style: none; } a { color: green; text-decoration: none; } a:hover, a:focus { text-decoration: none; } a:focus { outline: 0; } p { font-size: 15px; line-height: 26px; color: #828282; font-weight: 400; margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Philosopher', sans-serif; margin: 0; padding: 0; font-weight: 600; color: #ffffff; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .ptb-70 { padding-top: 70px; padding-bottom: 70px; } .pt-70 { padding-top: 70px; } .pb-70 { padding-bottom: 70px; } .btn-primary { color: #fff; background-color: #FF5722; border: none; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 20px; min-width: 150px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .btn-primary:hover { -webkit-box-shadow: 0 5px 9px -4px #ff572236; box-shadow: 0 5px 9px -4px #ff572236; background-color: #df4616; } /*------ footer ------*/ footer { background-color: #2c353d; position: relative; } footer .shapes { position: absolute; top: 16%; left: -12%; font-size: 292px; transform: rotate(79deg); color: #ff5722; } footer .footer-item { margin-bottom: 30px; } footer ul li a { color: #828282; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } footer ul li a:hover { color: #828282; letter-spacing: 1px; } footer .company-info { text-align: justify; } footer .social-icon { display: flex; justify-content: space-between; } footer .form-control.subscribe { height: 50px; border: 1px solid transparent; padding-left: 20px; font-size: 15px; text-transform: capitalize; background-color: #ffffff; } footer .social-icon a { display: inline-block; width: 40px; height: 40px; line-height: 43px; text-align: center; background-color: #ffffff; border-radius: 36px; color: #1e252b; font-size: 16px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .min-footer { background-color: #1e252b; padding: 25px 0px; } .min-footer .creator { color: #ff5722; }