<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <footer> <div class="row row-foot"> <div class="foot-sect col-12 col-lg-3 col-md-6 col-sm-12"> <div class="foot-div"> <h5 class="foot-subt">Start</h5> </div> <a class="foot-link" href="index.php" title="footer_Home">Home</a> </div> <div class="foot-sect col-12 col-lg-3 col-md-6 col-sm-12"> <div class="foot-div"> <h5 class="foot-subt">Skills</h5> </div> <a class="foot-link" href="skills.php" title="HTML" onclick="location.reload()">HTML</a> <a class="foot-link" href="skills.php#css" title="CSS" onclick="location.reload()">CSS</a> <a class="foot-link" href="skills.php#animations" title="Animations" onclick="location.reload()">Animations (CSS 3.0)</a> <a class="foot-link" href="skills.php#design" title="Design" onclick="location.reload()">Design</a> </div> <div class="foot-sect col-12 col-lg-3 col-md-6 col-sm-12"> <div class="foot-div"> <h5 class="foot-subt">About me</h5> </div> <a class="foot-link" href="about.php" title="footer_About">About</a> <a class="foot-link" href="pp.php" title="footer_Past_Projects">Past Projects</a> <a class="foot-link" href="blog.php" title="footer_Blog">Blog</a> </div> <div class="foot-sect col-12 col-lg-3 col-md-6 col-sm-12"> <div class="foot-div"> <h5 class="foot-subt">Other</h5> </div><!-- Contact Me --> <a class="foot-link" href="contact.php" title="footer_Contact">Contact Me</a> <a class="foot-link" href="indexfr.php" title="footer_French">Français</a> </div> </div> <center> <p class="credits">Design by<span class="name">Jacob Alfahad</span>. </p> </center> </footer> <!--Code by Jacob Alfahad. Please accredit me in the source code-->

.credits { font-size: 12px; text-align: center; color: grey; margin-top: 20px; font-family: arial; border-top: white 1px solid; width: 80%; padding-top: 20px; } .foot-sect { width: 100%; margin-top: 30px; white-space: nowrap; } .foot-sect-current { padding-right: 10px; padding-left: 10px; padding-top: 10px; margin-top: 30px; width: 100%; white-space: nowrap; border-left: double #a9a9a9 4px; padding-bottom: 5px; } .foot-sect-current > .foot-link { color: white; border-bottom: solid 1px white; display: block; padding: 12px; font-size: 14px; } .foot-sect-current > .foot-link:hover { color: blue; text-decoration: none; border-bottom: none; } .foot-link { color: grey; text-decoration: none; margin-right: 2px; margin-left: 8px; border-bottom: blue 1px solid; display: block; padding: 10px; font-size: 14px; } .foot-link:hover { background-color: #efefef; text-decoration: none; color: black; } .foot-link-current { color: #efefef; text-decoration: none; margin-right: 2px; margin-left: 8px; border-bottom: #ED2939 1px solid; display: block; padding: 10px; font-size: 14px; } .foot-link-current:hover { color: #efefef; text-decoration: none; } .foot-link-current:active { color: #efefef; text-decoration: none; } .foot-subt { font-weight: 600; color: #efefef; margin-left: 3px; } .foot-subt-current { font-weight: 600; color: red; } footer { width: 100%; background-color: #111111; bottom: 0; left: 0; padding-bottom: 30px; right: 0; z-index: 1 !important; margin-top: 10px; position: relative; } /*Code by Jacob Alfahad. Please accredit me in the source code*/