Skip to content

Instantly share code, notes, and snippets.

@MazontheMoon

MazontheMoon/fcc-tribute-project.markdown

Last active February 19, 2019 20:25
Show Gist options
  • Save MazontheMoon/4105b807fb3a7540820002bf04722b9f to your computer and use it in GitHub Desktop.
Save MazontheMoon/4105b807fb3a7540820002bf04722b9f to your computer and use it in GitHub Desktop.
Download ZIP
FCC: Tribute Project Terry Pratchett
Raw
index.html
<!--FreeCodeCamp Responsive Web Design project 1-->
<main class="container" id="main">
<header class="top" id="top">
<!--header includes title with tributes name, image and quote. nav bar not needed for this page but will use jump to top at end of page -->
<div class="top-img" id="img-div">
<figure cite="By Myrmi (Pratchett Himself) [CC BY-SA 2.0 (https://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons">
<img id="image" title="Terry Pratchett" alt="An image of Sir Terry Pratchett wearing his trademark black fedora hat" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Terry_Pratchett_Hat.jpg/800px-Terry_Pratchett_Hat.jpg">
<figcaption id="img-caption">Terry Pratchett</figcaption>
</figure>
</div>
</header>
<div class="top-title">
<h1 id="title">Terry Pratchett and the Discworld</h1>
</div>
<div class="top-quote">
<blockquote cite="https://en.wikiquote.org/wiki/Terry_Pratchett">&quot;Give a man a fire and he's warm for a day, but set fire to him and he's warm for the rest of his life&quot;<br>~ Jingo
</blockquote>
</div>
<!--articles for timeline, life history and book history-->
<article id="tribute-info">
<p>Sir Terence David John Pratchett was an English author of fantasy novels and is best known for his Discworld series and a penchant for wearing large black fedora hats.</p>
<p>More than 85 million books sold worldwide.</p>
<p>Knighted for services to literature.</p>
<p>Received the World Fantasy Award for Life Achievement.</p>
<p>Celebrated in style with a pint of Guinness after receiving an honourary degree from an Irish University</p>
<p>Kept only carnivorous plants in his greenhouse</p>
</article>
<section class="timeline-box">
<ul class="timeline">
<li class="year">1948</li>
<li class="tl_content">A delivery by stork to David and Eileen Pratchett</li>
<li class="year">1968</li>
<li class="tl_content">Married Lyn Purves</li>
<li class="year">1971</li>
<li class="tl_content">First ever novel published – The Carpet People</li>
<li class="year">1976</li>
<li class="tl_content">Daughter Rhianna delivered by stork</li>
<li class="year">1983</li>
<li class="tl_content">A fossil sea-turtle was named Psephophorus terrypratchetti in his honour by the palaeontologist Richard Koehler</li>
<li class="year">1995</li>
<li class="tl_content">First Discworld novel published</li>
<li class="year">2009</li>
<li class="tl_content">Was Knighted.. and later forged his own sword!</li>
<li class="year">2015</li>
<li class="tl_content"><span class="death">DEATH</span> arrives for Sir Terry</li>
<li class="year">2017</li>
<li class="tl_content">The HDD from his PC with all unfinished works was destroyed by a steamroller as per his wishes</li>
</ul>
</section>
<!--list of discworld books and description-->
<section class="discworld-box">
<h3>The Stories of the Discworld</h3>
<div class="discworld">
<div class="book">
<div class="book-title c-wizard"><p>The Colour of Magic</p></div>
<div class="book-info"><p>The Discworld’s first tourist hires a wizard as a travel guide…what could go wrong?</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>The Light Fantastic</p></div>
<div class="book-info"><p>Can the worst wizard in the world really be the only hope to save it?</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Equal Rites</p></div>
<div class="book-info"><p>Can a Witch become a Wizard?</p></div>
</div>
<div class="book">
<div class="book-title c-death"><p>Mort</p></div>
<div class="book-info"><p>Being apprentice to <span class="death">DEATH</span> is never boring…</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>Sourcery</p></div>
<div class="book-info"><p>The 8th son of an 8th son...</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Wyrd Sisters</p></div>
<div class="book-info"><p>A murdered King…a missing Prince….and Witches!</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Pyramids</p></div>
<div class="book-info"><p>An assassin king assumes the throne when his Daddy becomes a Mummy!</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Guards! Guards!</p></div>
<div class="book-info"><p>Who do you call when a dragon is rampaging through the city…</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>Eric</p></div>
<div class="book-info"><p>A Demon, a Wizard and a Boy enter Hell….</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>Moving Pictures</p></div>
<div class="book-info"><p>A Wizard with stars in his eyes….only in Holy Wood!</p></div>
</div>
<div class="book">
<div class="book-title c-death"><p>Reaper Man</p></div>
<div class="book-info"><p>What happens when <span class="death">DEATH</span> has to retire?</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Witches Abroad</p></div>
<div class="book-info"><p>A Witch goes up against a Fairy Godmother…</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Small Gods</p></div>
<div class="book-info"><p>Ever wonder what happens when a God has only 1 believer left…</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Lords and Ladies</p></div>
<div class="book-info"><p>A Midsummers Night Dream on the Discworld…</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Men at Arms</p></div>
<div class="book-info"><p>What could interrupt the wedding of the Commander of the Guard?</p></div>
</div>
<div class="book">
<div class="book-title c-death"><p>Soul Music</p></div>
<div class="book-info"><p>When Music takes on a life of its own</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>Interesting Times</p></div>
<div class="book-info"><p>The Gods cast the die….the Discworld is the gameboard…</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Maskerade</p></div>
<div class="book-info"><p>The Phantom of the Ankh-Morpork Opera!</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Feet of Clay</p></div>
<div class="book-info"><p>Two new Kings are crowned...will there be war?</p></div>
</div>
<div class="book">
<div class="book-title c-death"><p>Hogfather</p></div>
<div class="book-info"><p>What happens when <span class="death">DEATH</span> gets into the Ho Ho Holiday spirit?</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Jingo</p></div>
<div class="book-info"><p>The lost continent did sink…..but what if it rises again?</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>The Last Continent</p></div>
<div class="book-info"><p>Where does a Wizard go on holiday…down under of course mate!</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Carpe Jugulum</p></div>
<div class="book-info"><p>Never invite Vampires into your Kingdom...</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>The Fifth Elephant</p></div>
<div class="book-info"><p>Werewolves and Vampires and Dwarves…all in the City Watch!</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>The Truth</p></div>
<div class="book-info"><p>The printing press means it is time for the world’s first reporter!</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Thief of Time</p></div>
<div class="book-info"><p>What harm could there be in making a really accurate clock?</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>The Last Hero</p></div>
<div class="book-info"><p>Who says Barbarians have to retire when they get old?</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>The Amazing Maurice and his Educated Rodents</p></div>
<div class="book-info"><p>The Pied Piper tale from the point of view of the rats</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Night Watch</p></div>
<div class="book-info"><p>If you could do it all again, would you do the same?</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>The Wee Free Men</p></div>
<div class="book-info"><p>A beginner Witch and warrior Fairies…what could go wrong?</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Monstrous Regiment</p></div>
<div class="book-info"><p>All can join the army…Men, Trolls, Vampires…but not Women!</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>A Hat full of Sky</p></div>
<div class="book-info"><p>A young Witch begins her apprenticeship…</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Going Postal</p></div>
<div class="book-info"><p>What do you do when the post is backed up a decade or so…burn the post office down of course!</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Thud!</p></div>
<div class="book-info"><p>Chess…but with dwarves and trolls!</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>Wintersmith</p></div>
<div class="book-info"><p>What happens when the Spirit of Winter fancies a Witch-in-training?</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Making Money</p></div>
<div class="book-info"><p>A crook and a dog take over the Banking industry… what can go wrong?</p></div>
</div>
<div class="book">
<div class="book-title c-wizard"><p>Unseen Academicals</p></div>
<div class="book-info"><p>College football…..although it is a wizarding college!!</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>I Shall Wear Midnight</p></div>
<div class="book-info"><p>Which Witch will our Witch be?</p></div>
</div>
<div class="book">
<div class="book-title c-watch"><p>Snuff</p></div>
<div class="book-info"><p>What does every copper need on holiday…a murder to solve!</p></div>
</div>
<div class="book">
<div class="book-title c-disc"><p>Raising Steam</p></div>
<div class="book-info"><p>A steam train powered race against time to save the Dwarf kings throne</p></div>
</div>
<div class="book">
<div class="book-title c-witch"><p>The Shepherd’s Crown</p></div>
<div class="book-info"><p>The Witch of Witches is crowned.</p></div>
</div>
</div>
</section>
<!--link to tribute's wikipedia page-->
<div class="links">
<p>To learn more about this creation from the wonderfully twisted mind of Terry follow us to <a id="tribute-link" href="https://en.wikipedia.org/wiki/Discworld" target="_blank"><span id="wiki_link"><i class="fab fa-wikipedia-w"></i></span></a></p></div>
<!--made by me-->
<footer>
<p>This FreeCodeCamp <span class="fab fa-free-code-camp"></span> project designed by Mary Ronan is brought to you by <span class="fab fa-html5"></span> and <span class="fab fa-css3"></span> and the colour octarine.<span class="backtotop"><a class="toplink" href="#top"><i class="far fa-arrow-alt-circle-up"></i></a></span></p>
</footer>
</main>
<!--FCC Test Suite-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Raw
script.babel
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Raw
style.css
/*=========================
Declare variables for page
==========================*/
:root {
--yellow: #F9A825;
--orange: #E65100;
--red: #C62828;
--lGreen: #4CAF50;
--dGreen: #1B5E20;
--lBlue: #0277BD;
--dBlue: #283593;
--cyan: #00E5FF;
--lPurple: #7C4DFF;
--dPurple: #512DA8;
--dGrey: #455A64;
--lGrey: #78909C;
--silver: #E0E0E0;
}
/*=====================
Basic Styles and Layout
======================*/
/*Global styles*/
html {
margin: 0;
padding: 0;
background: linear-gradient(black,white);
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*layout styling*/
.container {
display: grid;
grid-column: 1fr 1fr 1fr 1fr;
grid-template-areas:
'header header header quote'
'header header header quote'
'title title title title'
'timeline timeline article article'
'discworld discworld discworld discworld'
'links links links links'
'footer footer footer footer';
grid-gap: 10px;
margin: 0 auto;
}
.top {
grid-area: header;
border: solid 10px var(--dBlue);
background: black;
}
.top-quote {
grid-area: quote;
margin: 5px auto;
display: flex;
}
.top-title {
grid-area: title;
text-align: center;
}
article {
grid-area: article;
margin-top: auto;
margin-bottom: auto;
}
.timeline-box {
grid-area: timeline;
border: solid 10px var(--orange);
}
.discworld-box {
grid-area: discworld;
border: solid 10px;
}
.links {
grid-area: links;
background-color: var(--orange);
}
footer {
grid-area: footer;
}
/*==============================
header, title , image
===============================*/
header {
display: flex;
justify-content: center;
align-content: center;
}
p, li {
font-family: 'Source Sans Pro', Verdana, sans-serif;
font-size: 1.5em;
}
figcaption {
font-family: 'Source Sans Pro', Verdana, sans-serif;
font-size: 1.5em;
font-weight: 600;
}
h3 {
font-family: 'Chewy', Georgia, cursive;
font-size: 2em;
text-align: center;
}
.top-img {
position: relative;
background: black;
height: 100%;
}
.top-img figure {
margin: auto;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#image{
max-width: 100%;
height: auto;
margin: auto;
border: solid 5px white;
}
/*in case of image not found*/
#image:after {
display: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 5px;
border: 1px dashed var(--dGreen);
background-color: var(--silver);
z-index: 1;
font-family: verdana;
font-size: 0.8em;
content: "" attr(alt) " was not found";
}
figcaption {
text-align: center;
width: 100%;
background-color: white;
border: solid 5px white;
}
.top-title {
width: 100%;
background: var(--dPurple);
border: solid 10px;
}
h1 {
font-family: 'Spicy Rice', Georgia, fantasy;
font-size: 3.5em;
}
blockquote {
font-family: 'Chewy', cursive;
font-size: 1.8em;
color: white;
padding: 30px;
margin: auto 20px;
border: solid 10px var(--red);
text-align: center;
}
/*==================================
articles - timeline, info, booklist
====================================*/
article {
width: 100%;
padding: 0 20px;
}
article p {
padding: 10px 25px;
text-align: center;
background-color: var(--silver);
}
article p:nth-child(1) {
border: solid 10px var(--cyan);
}
article p:nth-child(2) {
border: solid 10px var(--yellow);
margin: 15px 30px 0 30px;
}
article p:nth-child(3) {
border: solid 10px var(--lPurple);
margin: 15px 60px 0 60px;
}
article p:nth-child(4) {
border: solid 10px var(--lBlue);
margin: 15px 90px 0 90px;
}
article p:nth-child(5) {
border: solid 10px var(--dGreen);
margin: 15px 120px 0 120px;
}
article p:nth-child(6) {
border: solid 10px var(--dBlue);
margin: 15px 150px 0 150px;
}
.timeline-box {
background-color: var(--silver);
width: 100%;
max-height: 1000px;
overflow: auto;
padding: 10px;
}
.timeline-box ul {
padding: 0;
margin: 0;
}
.timeline {
list-style: none;
}
.timeline li {
margin: 15px 5px;
}
.year {
width: 20%;
float: left;
padding: 5px;
clear: both;
font-size: 2em;
text-align: center;
font-weight: bold;
border-top: dotted 3px var(--dGrey);
border-left: dotted 3px var(--dGrey);
}
.tl_content {
width: 75%;
padding-right: 5px;
text-align: right;
float: right;
clear: both;
border-bottom: dotted 3px var(--lGrey);
border-right: dotted 3px var(--lGrey);
}
.discworld-box {
padding: 10px;
}
.discworld-box h3 {
width: 100%;
margin: 0;
padding: 5px;
}
.discworld {
margin-top: 0;
padding-top: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.book {
flex: 1 1 300px;
position: relative;
justify-content: center;
align-items: center;
text-align: center;
}
.book-title{
padding: 10px;
margin: 15px;
border: dotted 2px black;
}
/*different background colors based on common character, c-disc to be used for all once-off stories....a little nod to true TP fans who notice this*/
.c-disc {
background-color: var(--lBlue);
background-color: blue;
}
.c-wizard {
background-color: var(--dGreen);
background-color: green;
}
.c-witch {
background-color: var(--lPurple);
background-color: purple;
}
.c-watch {
background-color: var(--orange);
background-color: orange;
}
.c-death {
background-color: var(--lGrey);
background-color: grey;
}
/*book description will appear over book title on hover */
.book-info {
display: none;
}
.book:hover .book-info {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 5px auto;
padding: 0 5px;
font-size: 0.8em;
background-color: var(--lGrey);
border: dotted 2px black;
cursor: pointer;
z-index: 20;
}
/*flashing indicator on first book only to hint that there is hidden content*/
.discworld .book:nth-child(1) .book-title::before {
position: absolute;
content: '';
width: 50%;
height: 5px;
border-radius: 50%;
top: 15%;
left: 25%;
background-color: black;
z-index: 10;
animation: flashdot 2s infinite ease;
-webkit-animation: flashdot 2s infinite ease;
}
@keyframes flashdot{
0% {
background-color: black;
}
50% {
background-color: var(--dGreen);
}
100% {
background-color: black;
}
}
@-webkit-keyframes flashdot{
0% {
background-color: black;
}
50% {
background-color: var(--dGreen);
}
100% {
background-color: black;
}
}
/*=====================
links section
======================*/
.links {
text-align: center;
line-height: 1.4em;
}
.links p {
padding: 5px;
margin: 0;
}
/*style hover states of link*/
.links a {
color: black;
}
.links a:visited {
color: var(--dGreen);
}
.links a:focus {
color: var(--dBlue);
}
.links a:hover {
color: var(--dBlue);
}
.links a:active {
color: var(--dPurple);
}
/*======
footer
=======*/
footer {
position: relative;
}
footer p {
padding-top: 0;
margin-top: 0;
font-size: 1em;
text-align: center;
line-height: 2em;
background-color: var(--dGreen);
color: var(--silver);
}
/*back to top*/
.backtotop {
font-size: 1.8em;
position: relative;
padding: 1px;
margin: auto;
float: right;
clear: both;
}
.toplink {
color: black;
padding: 2px;
}
.toplink:hover {
opacity: 0.5;
}
/*========================================
Media Queries for responsiveness
- all content in one column
=========================================*/
@media screen and (max-width:768px) {
.container {
padding: 0;
background-color: black;
display: grid;
grid-column: 1fr;
grid-gap: 5px;
grid-template-areas:
'title'
'header'
'quote'
'article'
'timeline'
'discworld'
'links'
'footer';
}
.top, .top-img, .top-title, .top-quote, blockquote, #tribute-info, #tribute-info *, .timeline-box, .timeline, .discworld, .discworld-box *, .link, footer p {
margin: 0 auto;
}
article {
padding: 0;
}
.top-title {
border: solid 10px var(--dPurple);
}
.discworld-box {
border: solid 10px var(--dBlue);
}
/*larger font for mobile view*/
h1 {
font-size: 2rem;
}
h3, blockquote, .year{
font-size: 1.6rem;
}
p, li {
font-size: 1.4rem;
}
.link p {
color: white;
font-size: 1.2rem;
}
.timeline-box {
display: flex;
overflow-y: scroll;
max-height: 350px;
}
h3 {
color: black;
}
.discworld-box {
background-color: var(--silver);
overflow-y: scroll;
max-height: 350px;
}
.book {
color: white;
margin: 5px;
}
.book-info p {
font-size: 1rem;
}
}
/*================
Media Queries for
print
=================*/
@media print {
/*Hide unwanted print elements*/
.top-img, #tribute-link i, footer p{
display: none;
}
/*Global reset*/
.container {
font-family: Georgia, serif;
font-size: 14pt;
line-height: 20pt;
background: none;
color: #000;
display: grid;
grid-column: 1fr;
grid-template-areas:
'title'
'quote'
'article'
'timeline'
'discworld'
'link'
'footer';
}
/*Layout reset*/
.container * {
border: none;
margin: 0;
padding: 0;
text-align: left;
width: 100%;
}
.top-title {
margin-top: 30pt;
}
#tribute-info p {
border: none;
margin: 0;
padding: 5pt;
text-align: left;
}
/*Specifics*/
p, li, h1, h3, blockquote, .year {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-align: left;
}
#tribute-info p::before {
content:'- ';
}
.timeline-box {
max-height: 100%;
overflow: visible;
}
.timeline {
padding: 5px;
}
.timeline::before {
content: 'The Life and Times of Terry Pratchett';
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
text-align: center;
}
.timeline .year {
clear: none;
width: 15%;
}
.timeline .tl_content {
clear: none;
width: 85%;
}
.discworld {
display: grid;
grid-gap: 5px;
}
.book-title {
font-style: italic;
}
.book-info {
display: inherit;
}
a:link {
margin: 0;
}
a::after {
content: " [" attr(href) "]";
}
.link a:link,
.link a:visited {
color: #000;
background: none;
padding: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment