"Elegant Beautiful Footer"
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> <title>AntenaGames | Fun Mobile Games</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Indie game studio, Mobile games"> <meta name="author" content="A.K."> <link rel="stylesheet" href="bootstrap-4/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> --> <link rel="stylesheet" href="fontawesome-free-5.8.2/css/all.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Mali|Patrick+Hand" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body id="pagecontent"> <div class="container-fluid cont cont-footer" style="margin-top:50px;"> <div class="row"> <div class="col-sm-4 bluespc foot-3"> <h5>AntenaGames</h5> <hr class="foot-hr"> <p> AntenaGames is small indie game studio based in Croatia. Founded in 2020, on a mission to make beautiful, fun and popular mobile games. </p> <a href="https://www.facebook.com/AntenaGames-110509330561115" target="_blank"><i class='fa fa-facebook' style='font-size:24px; color:white'></i></a> <a href="https://www.pinterest.com/antenagames10/" target="_blank"><i class='fa fa-pinterest' style='font-size:24px; color:white'></i></a> </div> <div class="col-sm-4 games foot-3"> <h5>Games</h5> <hr class="foot-hr"> <p>Visit us on:</p> <div class="g-bool d-flex in_p"> <a href="https://play.google.com/store/apps/developer?id=AntenaGames" target="_blank"><p>Google Play</p></a> <div class="play-game ml-auto"> <a href="https://play.google.com/store/apps/developer?id=AntenaGames" target="_blank" class="googleplay" title="GooglePlay(Android)"> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689824/google-p_xrmgb1.png" class="googleplay-img" style="height:30px; width: 90px"> </a> </div> </div> <div class="g-bool-up d-flex in_p"> <!-- <a href="ios.html"><p>App Store</p></a> <div class="play-game ml-auto"> <a href="ios.html" class="appstore" title="AppStore(iOS)"> <img src="https://res.cloudinary.com/daa09eu5f/image/upload/v1583689849/appstore_eq85ic.png" class="appstore-img" style="height:30px; width: 90px"> </a> </div> --> </div> </div> <div class="col-sm-4 contact-us foot-3"> <h5>Contact us</h5> <hr class="foot-hr"> <p>Help & Support: <br /><span>support@company.com</span></p> </div> </div> <a class="to-top" href="#pagecontent" title="toTop"> <i class="fa fa-chevron-up"></i> </a> </div> <div class="footer-copyright"> <p>&copy 2020 Copyright by antenagames.com</p> </div> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <script src="script.js"></script> </body> </html>
/********************************************************* GENERAL *********************************************************/ * { font-family: 'Mali', cursive; /* font-family: 'Roboto', sans-serif; */ } a:hover, a:focus { text-decoration: none; } h2 { text-transform: uppercase; text-align: center; font-weight: 700; font-size: 40px; color: #22aaee; } h3 { text-align: center; font-weight: 700; color: #55aaee; } p { color: #444; } hr { width: 10%; height: 5px; background-color: yellow; color: yellow; padding: 0 auto; margin: 0 auto 30px auto; } /* .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%); } } */ .cont { padding: 60px; } .navbar { background-color: #55aaee; } .navbar-nav { padding-left: 10%; } .navbar-nav li a { font-size: 20px; font-weight: 700; color: #fff; margin: auto 20px; } .navbar-nav li a:hover { color: yellow; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .nav-social a { padding-right: 30px; } .nav-social i{ color: white; } .nav-social i:hover { color: yellow; } .navbar a.active{ color: yellow; } .navbar.scrolled { box-shadow: 0 3px 3px rgba(0,0,0,0.1); padding: 5px 0; opacity: 0.9; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .cont-small { background-color: #ddeeff; } .carousel-inner img { width: 100%; } .fa-bars { color: white; } .fa-bars:hover, .fa-bars.active { color: yellow; } /********************************************************** FOOTER **********************************************************/ .cont-footer { background-color: #55aaee; color: #353535; } .cont-footer h5 { color: #fff; font-size: 24px; padding-bottom: 10px; } .cont-footer p { font-size: 16px; color: white; } .cont-footer .games .play-game { padding-right: 30px; } .cont-footer .games .in_p p { padding: 5px; color: white; border: 1px solid white; } .cont-footer .games p:hover { color: yellow; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .cont-footer .fab { padding-right: 10px; color: white; } .cont-footer .fa:hover { color: yellow; border: yellow; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .cont-footer .contact-us p { color: white; font-size: 16px; } .cont-footer .contact-us span{ color: yellow; } .foot-hr { width: 50%; height: 1px; background-color: #eee; padding: 0 auto; margin: 0 auto 20px 0; } .cont-footer .contact-us span:hover{ color: yellow; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .footer-copyright { background-color: #225577; margin: 0; padding: 0; } .footer-copyright p { text-align: center; color: white; font-size: 15px; padding: 5px 0; margin-bottom: 0; } .to-top { color: #fff; font-size: 30px; position: fixed; right: 12px; bottom: 20px; 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; } .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; }
$(document).ready(function(){ //Check to see if the window is top if not then display button $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.to-top').fadeIn(); } else { $('.to-top').fadeOut(); } }); //Click event to scroll to top $('.to-top').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); }); /***** Bootstrap JS Scrollspy *****/ $(document).ready(function(){ $('body').scrollspy({target: ".navbar", offset: 50}); }); /***** Navbar smaller scroll *****/ $(document).ready(function(){ var nav = $('.navbar'), doc = $(document), win = $(window); win.scroll(function() { if (doc.scrollTop() > 50) { nav.addClass('scrolled'); } else { nav.removeClass('scrolled'); } }); win.scroll(); }); /***** Smooth Scrolling *****/ $(document).ready(function(){ // Add smooth scrolling to navbar a $(".navbar a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); });

Related: See More


Questions / Comments:

Beautiful Elagant Footer.

antgms (12) - 4 years ago - Reply 1