Build a Tribute Page

Developer
Tyler Moeller
Size
4,756 Kb
Views
20,240
  1. Build a Tribute Page Previews
  2. Build a Tribute Page HTML Codes
  3. Build a Tribute Page CSS Codes
  4. Build a Tribute Page JS Codes

How do I make an build a tribute page?

FreeCodeCamp, Basic Front End Development Project. Build a Tribute Page. Details at: http://www.freecodecamp.com/challenges/build-a-tribute-page. What is a build a tribute page? How do you make a build a tribute page? This script and codes were developed by Tyler Moeller on 06 November 2022, Sunday.

Build a Tribute Page Previews
IQ Test

Build a Tribute Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Build a Tribute Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **** *** *** *** *** **** * Copyright (C) 2016 Tyler Moeller. All rights reserved. * * All trademarks, product names, and logos on this site * * are the property of their respective owners. * **** *** *** *** *** ****
Assignment Details: - Developed for the freeCodeCamp basic front-end development project: Build a Tribute Page. - Details: https://www.freecodecamp.com/challenges/build-a-tribute-page
Requirements for this assignment: - Reverse engineer this without looking at the code: https://codepen.io/FreeCodeCamp/full/wMQrXV - I can view a tribute page with an image and text. - I can click on a link that will take me to an external website with further information on the topic.
Assignment Completed. v1.0 02/22/2016: - Mobile-friendly design using HTML5, CSS, and Bootstrap 3. - As required: - users can view a tribute page with an image and text. - users can click on a link that will take them to an external website for more information.
-->
<div id="wrapper" class="container-fluid"> <div class="jumbotron"> <div class="row text-center"> <h1>Robin Williams</h1> </div> <div class="row text-center subtitle"> <em><h2>1951-2014</h2></em> </div> <div class="row"> <div class="col-xs-8 col-xs-offset-2 caption"> <img class="img-responsive" src="https://farm2.staticflickr.com/1515/24721074384_ef1b8298e7_o.jpg"> <div class="text-center caption-text">Robin Williams: American actor and comedian.</div> </div> </div> <div class="row"> <div class="col-xs-10 col-xs-offset-1"> <h3 class="subtitle">Here's a timeline of Robin Williams' life:</h3> <ul> <li><span class="list-title">1951: </span>July 21. Robin Williams is born in Chicago. </li> <li><span class="list-title">1969: </span>After high school, he attends the Julliard Academy to study acting before pursuing comedy.</li> <li><span class="list-title">1978: </span>Williams marries his first wife, Valerie Valardi. The TV show, Mork and Mindy, airs for the first time.</li> <li><span class="list-title">1982: </span>After partying with John Belushi, the former Saturday Night Live star dies of a drug overdoes. Williams later says his friend's death, along with the impending birth of his first child, caused him to kick drugs and alcohol.</li> <li><span class="list-title">1987: </span>Nominated for an Academy Award for best actor in his role as disc jockey, Adrian Cronauer, in the movie Good Morning Vietnam.</li> <li><span class="list-title">1989: </span>Nominated second time for Academy Award for best actor in “Dead Poets Society.” He also marries his second wife, Marsha Garces, who worked as a nanny for his son. They divorce 19 years later.</li> <li><span class="list-title">1991: </span>Nominated third time for Academy Award for best actor in “The Fisher King.”</li> <li><span class="list-title">1997: </span>Wins Academy Award for Best Supporting Actor in the movie “Good Will Hunting.”</li> <li><span class="list-title">2003: </span>Wins Grammy award for Best Spoken Comedy Album, “Robin Williams — Live 2002.”</li> <li><span class="list-title">2006: </span>After twenty years of sobriety, Williams seeks treatment for alcoholism.</li> <li><span class="list-title">2009: </span>Williams undergoes heart surgery to repair an aortic valve.</li> <li><span class="list-title">2011: </span>Marries his third wife, graphic designer Susan Schneider.</li> <li><span class="list-title">2013: </span>Williams returns to network TV with the CBS sitcom “The Crazy Ones.” The show is cancelled after one season.</li> <li><span class="list-title">2014: </span>August 11. Williams is found dead in his northern California home of an apparent suicide at age 63.</li> </ul> <blockquote>“No matter what people tell you, words and ideas can change the world.” <footer>Robin Williams, Dead Poets Society (1989)</footer> </blockquote> <p><strong>Read more about Robin Williams on <a href="https://en.wikipedia.org/wiki/Robin_Williams">Wikipedia</a>.</strong></p> </div> </div> </div>
</div>
<footer class="footer"> <div class="container-fluid text-center"> <div class="footer-text text-muted row">Copyright &copy; <script> document.write(new Date().getFullYear()); </script> Tyler Moeller. All rights reserved. Developed for the freeCodeCamp Project: <a href="https://www.freecodecamp.com/challenges/build-a-tribute-page" target="_blank">Build a Tribute Page</a></div> <div class="footer-logos row"> <a href="https://twitter.com/Tyler_Moeller" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://www.linkedin.com/in/tylermoeller" target="_blank"><i class="fa fa-linkedin"></i></a> <a href="https://github.com/TylerMoeller" target="_blank"><i class="fa fa-github"></i></a> <a href="https://freecodecamp.com/tylermoeller" target="_blank"><i class="fa fa-fire"></i></a> <a href="https://codepen.io/TylerMoeller/pens/public" target="_blank"><i class="fa fa-codepen"></i></a> <a href="https://tylermoeller.net" target="_blank"><i class="fa fa-wordpress"></i></a> </div> </div>
</footer>
<div id="warning-message"> Rotate your device for a better viewing experience in landscape mode. <br> <input type=button id="warning-btn" class="btn btn-lg btn-primary" id='portrait' onclick="portraitView()" style="white-space: normal" value="No thanks, Just show me the page">
</div>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

Build a Tribute Page - Script Codes CSS Codes

html { position: relative; margin: 0 auto; min-width: 300px; min-height: 100%;
}
body { margin-top: 2em; font-size: 18px; background-color: #222; /* buffer for footer */ margin-bottom: 120px; color: #222;
}
/* jumbotron and subtitle CSS below prevents
text from touching the edge of the screen on
some device resolutions */
.jumbotron { word-wrap: break-word; max-width: 1200px; margin: 0 auto;
}
.subtitle { margin-bottom: 1em;
}
.caption { background-color: white; padding: .5em; border-radius: .25em; border: 1px solid #cccccc; margin-bottom: 1em;
}
.caption-text { margin: 1em; font-size: .8em;
}
/* hanging indentation */
li { padding-left: 3em; text-indent: -3.1em; margin-bottom: .25em;
}
.list-title { font-weight: bold; margin-right: .25em;
}
blockquote { margin: 1.5em 0; background-color: #e5e5e5; border-radius: 15px; font-size: 24px;
}
/* footer formatting */
.footer { font-size: 12px; position: absolute; border-top: 1px solid black; bottom: 0; width: 100%; padding: 1em 1em 0 1em;
}
.footer-logos { margin-top: -1em; font-size: 14px;
}
.footer-logos a { text-decoration: none;
}
.footer-logos i { text-align: center; color: #777777; margin: 0 0 1em 1em; padding-top: .25em; border: 1px solid rgba(100, 100, 100, .3); border-radius: 25%; vertical-align: -1.5em;
}
.footer-logos .fa { width: 1.75em; height: 1.75em;
}
.footer .container-fluid { max-width: 480px;
}
/* tell users that page looks better in landscape mode */
#warning-message { display: none; color: white; text-align: center; font-size: 48px;
}
@media only screen and (orientation:portrait) and (max-width: 480px) { #wrapper { display:none; } #warning-message { display:block; margin: 1em; font-size: 22px!important; }
}
@media only screen and (orientation:landscape){ #warning-message { display:none; }
}
#warning-btn { margin-top: 2em; box-shadow: 0 0 20px #000000; border-style: groove;
}

Build a Tribute Page - Script Codes JS Codes

function portraitView() { $("#wrapper").removeAttr( "id" ); $("#warning-message").hide();
}
Build a Tribute Page - Script Codes
Build a Tribute Page - Script Codes
Home Page Home
Developer Tyler Moeller
Username TylerMoeller
Uploaded November 06, 2022
Rating 3
Size 4,756 Kb
Views 20,240
Do you need developer help for 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!

Tyler Moeller (TylerMoeller) Script Codes
Name
Navigator.geolocation fallback to ip-based location
CSS Waves
Local Weather App v1.0
Tylermoeller.github.io
IslandJS - Bootstrap
Material Design Weather Widget
Cheesy Motivational Posters
NodeSchool Survey Example
Basic Website - Materialize
Wikipedia Search Engine
Create amazing art & images 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!