A Tribute to Randall Munroe
FreeCodeCamp: Responsive Web Design Project Assignment
Objective: Create a Tirbute Page CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.
A Pen by janzeteachesit on CodePen.
Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.
A Pen by janzeteachesit on CodePen.
| <div id="main"> | |
| <h1 id="title">Randall Munroe</h1> | |
| <h3>Writer of <a href="https://xkcd.com/">xkcd</a>, <a href="https://what-if.xkcd.com/">What If</a> and <a href="https://xkcd.com/thing-explainer/">Thing Explainer</a></h3> | |
| <div id="img-div"> | |
| <img id="image" src="https://i.ytimg.com/vi/I64CQp6z0Pk/maxresdefault.jpg" alt="Comics that ask 'what if?' | Randall Munroe | TED Talk on YouTube"> | |
| <div id="img-caption">Comics that ask 'what if?' | Randall Munroe | TED Talk on YouTube | source: <a href="https://www.youtube.com/watch?v=I64CQp6z0Pk">https://www.youtube.com/watch?v=I64CQp6z0Pk</a></div> | |
| </div> | |
| <div id="tribute-info"> | |
| <ul> | |
| <h3 id="headline">A brief history of Randall Munroe (so far):</h3> | |
| <li><strong>1984</strong> - born October 17<sup>th</sup>, in Easton, Pennsylvania.</li> | |
| <li><strong>2005</strong> - starts posting his drawings to xkcd.com</li> | |
| <li><strong>2006</strong> - graduates from Christopher Newport University with a degree in physics, but contract for NASA at the Langley Research Center as a programmer and roboticist not renewed. Moves to Boston to write <i>xkck</i> full-time.</li> | |
| <li><strong>2007</strong> - moves to Somerville, Massachusetts. By October, <i>xkcd</i> getting up to 70 million hits a month.</li> | |
| <li><strong>2010</strong> - publishes a collection of the comics. Also tours, giving speeches. The story <i>?</i> published as <i>Machine of Death, Chapter 33</i>.</li> | |
| <li><strong>2011</strong> - is nominated for a Hugo Award for Best Fan Artist in 2011, and again in 2012.</li> | |
| <li><strong>2013</strong> - <i>xkcd</i> readers Lewis Hulbert and Jordan Zhu 2013 submit Munroe's name as a candidate for the renaming of asteroid (4942) 1987 DU<sub>6</sub> to 4942 Munroe. The official naming citation was published on July 22.</li> | |
| <li><strong>2014</strong> - wins the Hugo Award for Best Graphic Story for the xkcd strip <i>Time</i>. Publishes a collection of answers questions sent in by fans of his comics, as well as a few new ones and some rejected ones, in a book entitled <i>What If?: Serious Scientific Answers to Absurd Hypothetical Questions</i>.</li> | |
| <li><strong>2015</strong> - publishes <i>Thing Explainer</i> that explains concepts using only the 1,000 most common English words.</li> | |
| <li><strong>2019</strong> - Munroe announces his upcoming book <i>how to</i> is slated for release in September.</li> | |
| </ul> | |
| <h3>Who are you?</h3> | |
| <blockquote> | |
| <p>I'm just this guy, you know? I'm a CNU graduate with a degree in physics. Before starting xkcd, I worked on robots at NASA's Langley Research Center in Virginia. In my spare time I climb things, open strange doors, and go to goth clubs dressed as | |
| a frat guy so I can stand around and look terribly uncomfortable. At frat parties I do the same thing, but the other way around.</p> | |
| </blockquote> | |
| <h3>What does XKCD stand for?</h3> | |
| <blockquote> | |
| <p>It's not actually an acronym. It's just a word with no phonetic pronunciation -- a treasured and carefully-guarded point in the space of four-character strings.</p> | |
| </blockquote> | |
| <h3>If you have time, you can read more about Randall Munroe on his <a id="tribute-link" href="https://www.wikiwand.com/en/Randall_Munroe" target="_blank">Wikipedia entry</a> or his <a href="https://xkcd.com/">xkcd webcomics</a>.</h3> | |
| </div> | |
| </div> |
| /* | |
| Responsive Web Design Projects - Build a Tribute Page | |
| Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/. | |
| Fulfill the below user stories and get all of the tests to pass. Give it your own personal style. | |
| You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! | |
| User Story #1: My tribute page should have an element with a corresponding id="main", which contains all other elements. | |
| User Story #2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug"). | |
| User Story #3: I should see a div element with a corresponding id="img-div". | |
| User Story #4: Within the img-div element, I should see an img element with a corresponding id="image". | |
| User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div. | |
| User Story #6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page. | |
| User Story #7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank"). | |
| User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size. | |
| User Story #9: The img element should be centered within its parent element. | |
| You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js. | |
| */ |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> |
| html,body,a{ | |
| font-family:"Trebuchet MS", Helvetica, sans-serif; | |
| text-align:center; | |
| min-width:260px; | |
| color:#333; | |
| } | |
| #main{ | |
| margin:30px auto; | |
| padding:15px; | |
| border:0px solid; | |
| border-radius:5px; | |
| background:#eee; | |
| } | |
| img{ | |
| max-width: 100%; | |
| display: block; | |
| height: auto; | |
| margin: auto; | |
| } | |
| #img-div{ | |
| margin:-5px; | |
| margin-top:20px; | |
| width:100%; | |
| border:5px solid white; | |
| background:white; | |
| } | |
| #img-caption{ | |
| margin:15px; | |
| } | |
| #headline{ | |
| margin-top:50px; | |
| text-align:left; | |
| } | |
| ul{ | |
| max-width:550px; | |
| margin:0 auto; | |
| text-align:left; | |
| } | |
| li{ | |
| margin: 10px; | |
| } | |
| blockquote{ | |
| font-style: italic; | |
| } | |
| a:link { | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| a:active { | |
| text-decoration: underline; | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |