"Fixed"
Bootstrap 4.1.1 Snippet by harunpehlivan

<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 name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Fixed</title> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="styles.css"> </head> <body> <nav id="navigation"> <a href="#facebook">Facebook</a> <a href="#instagram">Instagram</a> <a href="#linkedin">Linkedin</a> <a href="#github">Github</a> <a href="#gmail">Gmail</a> </nav> <!-- End of Navigation --> <!-- Wrappers --> <div id="facebook" class="wrapper facebook-wrapper"> <div class="left-side"></div> <!-- End of Left Side --> <div class="right-side"> <p> <a href="https://www.facebook.com/harunpehlivanitgrouptebimtebitagem" class="link">Here you can check my Facebook Profile!</a> </p> </div> <!-- End of Right Side --> </div> <!-- End of Facebook Wrapper --> <div id="instagram" class="wrapper instagram-wrapper"> <div class="left-side"></div> <!-- End of Left Side --> <div class="right-side"> <p> <a href="https://www.instagram.com/harunpehlivantebimtebitagem" class="link">Here you can check my Instagram Profile!</a> </p> </div> <!-- End of Right Side --> </div> <!-- End of Instagram Wrapper --> <div id="linkedin" class="wrapper linkedin-wrapper"> <div class="left-side"></div> <!-- End of Left Side --> <div class="right-side"> <p> <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="link">Here you can check my Linkedin Profile!</a> </p> </div> <!-- End of Right Side --> </div> <!-- End of Instagram Wrapper --> <div id="github" class="wrapper github-wrapper"> <div class="left-side"></div> <!-- End of Left Side --> <div class="right-side"> <p> <a href="https://github.com/harunpehlivan" class="link">Here you can check my Github Profile!</a> </p> </div> <!-- End of Right Side --> </div> <!-- End of Github Wrapper --> <div id="gmail" class="wrapper gmail-wrapper"> <div class="left-side"></div> <!-- End of Left Side --> <div class="right-side"> <p>Here you can contact me with Gmails!</p> <p> <a href="mailto:tercumanbilisimmerkizi@gmail.com" class="link">tercumanbilisimmerkizi@gmail.com</a> </p> </div> <!-- End of Right Side --> </div> <!-- End of Github Wrapper --> <!-- jQuery Functions --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Smooth Scroll --> <script> $(document).on('click', 'a[href^="#"]', function (event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1500); }); </script> </body> </html>

Related: See More


Questions / Comments: