FreeCodeCamp : Build a Tribute Page

What is a freecodecamp : build a tribute page How do you make a freecodecamp : build a tribute page? This script and codes were developed by Markku Lehmonen on 01 February 2022, Tuesday.

How do I make an freecodecamp : build a tribute page?
  1. FreeCodeCamp : Build a Tribute Page Previews
  2. FreeCodeCamp : Build a Tribute Page HTML Codes
  3. FreeCodeCamp : Build a Tribute Page CSS Codes
  4. FreeCodeCamp : Build a Tribute Page JS Codes
FreeCodeCamp : Build a Tribute Page Previews

FreeCodeCamp : Build a Tribute Page HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp : Build a Tribute Page</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!--<div class="quote-box">
<p class="quote-text">" To get mad, or not to get mad - that is the question! "</p>
<p class="quote-author">- Donald Duck</p>
</div>-->

<!--<div class="center-line"></div>-->

<nav class="page-indicator">
  <ul class="nav" id="myNavbar">
    <li><a href="#section1"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#section2"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#section3"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#section4"><div class="page-indicator-dot"></div></a></li>
    <!--<li><a href="#section1"></a></li>
    <li><a href="#section2"></a></li>
    <li><a href="#section3"></a></li>
    <li><a href="#section4"></a></li>-->
  </ul>
</nav>  


<!--<div class="page-indicator">
  <ul>
    <li><a href="#" onclick="scrollToSection('page1')"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#" onclick="scrollToSection('page2')"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#" onclick="scrollToSection('page3')"><div class="page-indicator-dot"></div></a></li>
    <li><a href="#" onclick="scrollToSection('page4')"><div class="page-indicator-dot"></div></a></li>
  </ul>
</div>-->

<div class="background"></div>
<div class="container-fluid">
  <header id="section1" class="row text-center">
    <header-1>Carl</header-1>
    <header-2>Barks</header-2>
    <divider></divider>
    <header-3>The man who made</header-3>
    <header-4>The Duck</header-4>
  </header>
  <section id="section2" class="row">
    <div class="loremIpsum col-xs-12 col-md-4"></div>
    <div class="loremIpsum col-xs-12 col-md-4"></div>
    <div class="loremIpsum col-xs-12 col-md-4"></div>
  </section>
  <section id="section3" class="row">
    <div class="col-xs-12">
      <h3>Timeline of Barks's life:</h3>
      <ul class="timeline">
        <li class="row vertical-center">
          <div class="col-xs-1"><div class="year">1901</div></div>
          <div class="col-xs-11 event-description">
            <h4>Birth</h4>
            <p>Born in mear Merrill, Oregon, US.</p>
          </div>
        </li>
        <li class="row vertical-center">
          <div class="col-xs-1"><div class="year">1935</div></div>
          <div class="col-xs-11 event-description">
            <h4>Hired by Disney</h4>
            <p>Hired by Disney Studio as an inbetweener.</p>
          </div>
        </li>
        <li class="row vertical-center">
          <div class="col-xs-1"><div class="year">1942</div></div>
          <div class="col-xs-11 event-description">
            <h4>The Beginning of Comic book career</h4>
            <p>Quits working at Disney Studio and starts a career as a comic book artist.</p>
          </div>
        </li>
        <li class="row vertical-center">
          <div class="col-xs-1"><div class="year">1966</div></div>
          <div class="col-xs-11 event-description">
            <h4>Retirement</h4>
            <p>Retires at the age of 65.</p>
          </div>
        </li>
        <li class="row vertical-center">
          <div class="col-xs-1"><div class="year">2000</div></div>
          <div class="col-xs-11 event-description">
            <h4>DEATH</h4>
            <p>Dies at the age of 99.</p>
          </div>
        </li>
      </ul>
    </div>
  </section>
  <section id="section4" class="row">
    <div class="col-xs-10 col-xs-offset-2">
      <p>If you have time, you should read more about this incredible human being on his
      <a href="https://en.wikipedia.org/wiki/Carl_Barks" target="_blank">Wikipedia entry</a>.</p>
    </div>
  </section>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

FreeCodeCamp : Build a Tribute Page CSS Codes

::-webkit-scrollbar { display: none; }
::-webkit-scrollbar-button { display: none; }
body { -ms-overflow-style:none; }

.vertical-center {
  display: flex;
  align-items: center;
}


.center-line {
  position: fixed;
  height: 100%;
  width: 1px;
  left: 50%;
  right: 0;
  background-color: white;
}


.page-indicator {
  color:red;
  text-align: center;
  position: fixed;
  bottom: 5%;
  left: 0;
  right: 0;
  z-index:10;
}

.page-indicator ul {
  margin: 0;
  padding: 0;
}

.page-indicator li {
  color:red;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}


.page-indicator-dot {
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  box-shadow: 0px 0px 15px #000000;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 7px;
}
.page-indicator-dot:hover {
  box-shadow: 0px 0px 15px #ffffff;
}


.page-indicator { background-color: blue; padding-left: 25%; padding-right: 25%; }
.nav { background-color: green; }
.nav li { background-color: purple; padding:0px; }

/*.nav li:hover {
  box-shadow: 0px 0px 15px #ffffff;
}*/

/*li.active a { color: red !important; background-color: red !important; }*/
.nav > li > a:hover, .nav > li > a:focus {
  background-color: transparent;
  text-decoration: none;
}
li.active a .page-indicator-dot{ 
  background-color: #f00 !important;
  /*box-shadow: 0px 0px 15px #ffffff;*/
}


body {
  height: 100%;
  color: #ffffff;
  text-shadow: 0px 0px 15px #000000;
  /*margin-top: 10%;*/
  background-color: black;
  padding-left: 10vw;
  padding-right: 10vw;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://imgur.com/NJ0aW5E.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover;
  opacity: 0.4;
  filter:alpha(opacity=40);
  z-index: -5;
}

header, section {
  /*background-color: red;*/
  min-height: 100vh;
  padding-top: 20%;
}


header {
  margin-left: 15% !important;
  margin-right: 15% !important;
}

header-1, header-2, header-3, header-4 {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin: 0px;
}

header-1 {
  font-size: 7vw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  margin-bottom: -4%;
}

header-2 {
  font-size: 8vw;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

divider {
  background-color: white;
  width: 80%;
  display: block;
  margin-left: 10%;
  margin-right: 10%;
  height: 0.8vw;
  box-shadow: 0px 0px 15px #000000;
}

header-3 {
  font-size: 2.8vw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  margin-top: 4%;
}

header-4 {
  font-size: 4vw;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}





.quote-box{
  width: 50%;
  float: left;
  margin-right: 5%;
  margin-bottom: 2%;
  border: 2px solid #ffffff;
  border-radius: 10px;
  padding: 5%;
  background-color: rgba(20,20,20,0.75);
}

.quote-text {
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}

.quote-author {
  text-align: right;
}

section {
  margin-bottom: 125px;
  margin-top: 125px;
  
}

.loremIpsum {
  /*text-align: justify;
  padding: 20px;*/
}

.loremIpsum h2, .loremIpsum h3, .loremIpsum h4, .loremIpsum h5, .loremIpsum h6 {
  text-transform: uppercase;
  font-weight: bold;
}

.timeline {
  margin-left: 50px;
  border-left: 4px solid #ffffff;
  padding-top: 0px;
}

section li {
  list-style: none;
  margin-bottom: 20px;
}

section li:first-child {
  transform: translateY(-50%);
  margin-bottom: -8px;
}

section li:last-child {
  transform: translateY(50%);
  margin-top: -26px;
}

.year {
  font-weight: bold;
  width: 50px;
  height: 50px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  font-size: 15px;
  line-height: 42px;
  text-align: center;
  margin-left: -68px;
  background-color: #333333;
}

.event-description h4 {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.2em;
  margin: 0%;
}

.event-description {
  margin-left: -5%;
}

h3 {
  margin-bottom: 75px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

FreeCodeCamp : Build a Tribute Page JS Codes

var loremIpsumHeading = "Lorem Ipsum"

var loremIpsumS = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero sapien, aliquam id gravida nec, rutrum quis metus. Donec malesuada est non velit feugiat tincidunt. Donec non justo eget velit suscipit faucibus id vitae nisi. Phasellus blandit ante augue, vulputate placerat augue commodo in.";

var loremIpsumM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur egestas congue. Donec convallis tortor a dolor fringilla, scelerisque malesuada risus iaculis. Fusce sit amet viverra felis. Sed malesuada turpis massa, vitae dictum lectus condimentum sed. Donec mattis mi in elit ullamcorper, eget auctor sem auctor. Quisque a quam commodo, feugiat leo et, malesuada tortor. Proin id massa tristique, sagittis orci eget, molestie urna. Sed elementum ligula vel ultricies consequat. Morbi semper enim tempus, consequat sem porta, rhoncus ligula.";

var loremIpsumL = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis lectus nec sapien eleifend, non ultricies diam elementum. Proin vulputate lectus tellus, quis sagittis massa auctor quis. Sed pretium ultrices ex, vel porttitor nibh aliquet lobortis. Phasellus dapibus, nunc eget maximus tincidunt, dui elit scelerisque justo, eget blandit ligula ex eu nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium metus sit amet diam luctus, at volutpat nulla maximus. Nulla facilisi. Pellentesque dignissim lacus sed porta faucibus. Nunc ipsum erat, laoreet ac elit sit amet, eleifend scelerisque mauris. Sed eu mauris eu elit gravida tempor ac sed odio. Vivamus euismod tellus augue, finibus pellentesque lacus accumsan ut. Maecenas tincidunt leo odio, non dapibus est imperdiet non. Praesent feugiat interdum venenatis. In lacus velit, congue vitae pretium ac, tempus vitae velit.";

$(document).ready( function () {

  // Filling with Lorem Ipsum
  insertHeading(loremIpsumHeading);
  insertParagraph(loremIpsumM);
  
  // Customized scrolling
  document.onwheel = preventScrolling;
  smoothScrolling();
  
});

function insertHeading(text) {
  $(".loremIpsum").append("<h4>" + text + "</h4>");
}

function insertParagraph(text) {
  $(".loremIpsum").append("<p>" + text + "</p>");
}

function preventScrolling() {
  //return false;
}

function smoothScrolling() {
  // Add scrollspy to <body>
  $('body').scrollspy({target: ".page-indicator", offset: 50});   

  // Add smooth scrolling on all links inside the navbar
  $("#myNavbar 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
      }, 400, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    }  // End if
  });
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.