FreeCodeCamp : Build a Tribute Page

Developer
Markku Lehmonen
Size
5,015 Kb
Views
18,216
  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

How do I make an 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 28 November 2022, Monday.

FreeCodeCamp : Build a Tribute Page Previews
IQ Test

FreeCodeCamp : Build a Tribute Page - Script Codes 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 - Script Codes 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 - Script Codes 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 });
}
FreeCodeCamp : Build a Tribute Page - Script Codes
FreeCodeCamp : Build a Tribute Page - Script Codes
Home Page Home
Developer Markku Lehmonen
Username SharpDal
Uploaded November 28, 2022
Rating 3
Size 5,015 Kb
Views 18,216
Do you need developer help for FreeCodeCamp : Build a Tribute Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Markku Lehmonen (SharpDal) Script Codes
Name
A Pen by Markku Lehmonen
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!