"Footer Elegant"
Bootstrap 4.1.1 Snippet by antenagames.com

<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 ----------> <!DOCTYPE html> <html lang="en"> <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="description" content="BallBoy Games, Mobile Games, AntenaGames"> <meta name="author" content="A.K."> <title>BallBoy</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- Custom Fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet"> <!-- Custom CSS --> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <footer class="-bg-footer" id="footer"> <div class="container-fluid"> <div class="row footer-align"> <div class="col-md-4 col-sm-4"> <h5>AntenaGames</h5> <hr class="hr-foot"> <div class="footer-items"> <p class="footer"> AntenaGames is small indie game studio based in Croatia. Founded in 2020, on a mission to make beautiful, fun and popular mobile games. </p> <ul class="social-networks"> <a href="https://www.facebook.com/AntenaGamesPlay/" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a> <a href="https://www.pinterest.com/antenagames10/" class="pinterest" target="_blank"><i class="fa fa-pinterest"></i></a> <a href="https://twitter.com/antenagames_com" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a> </ul> </div> </div> <div class="col-md-4 col-sm-4"> <h5>Our contact</h5> <hr class="hr-foot"> <div class="footer-items"> <address> 10 000 Zagreb, Zagreb <br> Zagreb, Zagreb <br> Croatia <br> <i class="fa fa-phone address"></i> www.antenagames.com <br> <i class="fa fa-fax address"></i> www.antenagames.com <br> <i class="fa fa-envelope address"></i> <a href="http://www.antenagames.com" target="_blank">www.antenagames.com</a> </address> </div> </div> <div class="col-md-4 col-sm-4"> <h5>Open hours</h5> <hr class="hr-foot"> <div class="footer-items"> <ul> <li>Mon-Fri: 08:00-16:00</li> <li>Sat : Closed</li> <li>Sun : Closed</li> </ul> </div> </div> </div> </div> <a class="to-top" href="#myPage" title="toTop"> <i class="fa fa-chevron-up"></i> </a> </footer> <div class="footer-copyright"> <p>&copy 2020 Copyright <a href="http://www.antenagames.com" target="blank"> AntenaGames</a></p> </div> <script src="js/script.js"></script> <script> </script> </body> </html>
html, body { overflow-x: hidden; font-family: 'Leckerli One', cursive; width: 100%; } a { text-decoration: none; } ul { list-style-type: none; } a:hover, a:focus { text-decoration: none; } h1, h2, h3, h4, h5, h6 { text-transform: none; font-weight: 600; font-family: 'Leckerli One', cursive; text-align: center; } hr { border-color: #ffc266; border-width: 5px; max-width: 100%; } .container-h1 { text-align: center; font-size: 50px; font-weight: 700; margin: 50px auto; color: #333; font-family: 'Leckerli One', cursive; } .btn, .btn:focus { color: #fff; background-color: #182c39; margin: 20px auto; font-weight: 500; display: table; padding: 10px; border: 1px solid #182c39; margin-left:50%; border-radius: 0; } .btn:hover, .btn:focus { color: #182c39; background-color: transparent; border: 1px solid #182c39; } .hr-h3s { border: 3px solid #E94B3C; width: 70px; margin: 0 auto 35px auto; } textarea { resize: none; } section { align-items: center; padding: 50px 60px; } .bg-section h2 { font-family: 'Leckerli One', cursive; text-transform: none; margin: 50px 0; padding: 25px 20px; border-radius: 50px; } .slideanim { visibility: hidden; } .slide { animation-name: slide; -webkit-animation-name: slide; -moz-animation-name: slide; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; visibility: visible; } @keyframes slide { 0% { opacity: 0; transform: translateX(50%); } 100% { opacity: 1; transform: translateX(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } /* ***** Footer ***** */ #footer { background-color: orange; color: white; font-family: 'Leckerli One', cursive; } #footer ul { list-style-type: none; padding-left: 0; line-height: 2.2; } #footer h5 { font-size: 18px; color: white; margin-top: 40px; margin-bottom: 10px; text-transform: uppercase; } #footer a { color: #aaa; } #footer a:hover, #footer a:focus { text-decoration: none; color: white; } #footer .social-networks { padding-top: 20px; padding-bottom: 25px; } #footer .footer-items .fa { font-size: 17px; margin-bottom: 5px; background-color: white; color: #182c39; border-radius: 50%; padding-bottom: 25px; height: 30px; width: 30px; text-align: center; line-height: 31px; text-decoration: none; transition: color 1s; } #footer .footer-items { margin: auto; padding-left: 50px; font-size: 15px; } #footer .fa-facebook:hover, #footer .fa-instagram:hover { border: 1px solid #fff; color: #fff; background-color: #182c39; } .footer-copyright { background-color: #e67300; } .footer-copyright p { text-align: center; color: #fff; font-size: 15px; padding: 10px 0; margin-bottom: 0; font-family: 'Leckerli One', cursive; } #footer .hr-foot { width: 80%; margin: 10px auto; border: 1px solid #fff; } #footer .to-top { color: #fff; font-size: 30px; position: fixed; right: 12px; bottom: 12px; height: 40px; width: 40px; text-decoration: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; background: rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-position: center; } #footer .to-top:hover { background-color: #222; color: #fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

Related: See More


Questions / Comments:

Elegant Footer.

antgms (12) - 4 years ago - Reply 1