Skip to content

Instantly share code, notes, and snippets.

@Tejas163
Last active October 30, 2018 19:03
Show Gist options
  • Save Tejas163/fad5e0646a90a12f871e011cb3bd26a3 to your computer and use it in GitHub Desktop.
Save Tejas163/fad5e0646a90a12f871e011cb3bd26a3 to your computer and use it in GitHub Desktop.
Fork Me! FCC: Tribute Page Newton
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<head>
<body>
<h1 id="title">Tribute Page</h1>
<main id="main">
<h2>Isaac Newton</h2>
<div id="img-div" class="px">
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/3/39/GodfreyKneller-IsaacNewton-1689.jpg" alt="Newton" class="responsive">
</img>
<h3 id="img-caption">
Isaac Newton </h3> </div>
<h4 id="tribute-info" type="text">Isaac Newton-Mathematician,Scientist </h4>
<div class="p">
<p><strong> English mathematician, astronomer, theologian, author and physicist (described in his own day as a "natural philosopher") who is widely recognised as one of the most influential scientists of all time, and a key figure in the scientific revolution. His book Philosophiæ Naturalis Principia Mathematica ("Mathematical Principles of Natural Philosophy"), first published in 1687, laid the foundations of classical mechanics. Newton also made seminal contributions to optics, and shares credit with Gottfried Wilhelm Leibniz for developing the infinitesimal calculus.
</strong></p></div>
<a id="tribute-link"
target="_blank" href="https://en.wikipedia.org/wiki/Isaac_Newton" alt="mathematician">More information on Newton</a>
<footer> work by Tejas </footer>
</main>
</body>
</head>
// !! 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.
h1 {
text-align: left;
font-size: 50px;
font-type: sans-serif;
}
.main {
align-self: left;
}
.responsive {
max-width: 100%;
width: 100%;
height: auto;
display: block;
}
.p {
text-align: left;
}
.px {
margin: auto;
max-width: 559px;
width: 407px;
padding-bottom: 80px;
opacity: 0.9;
filter: alpha(opacity=50);
}
img {
max-width: 100%;
}
@Tejas163
Copy link
Author

A Tribute page using HTML and CSS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment