Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main class="pagewrap" id="main">
		<div class="intro-container" id="intro-section">
			<div class="intro-top" id="profile-main-heading">
				<div class="title-div">
					<h1 id="title">Isaac Newton</h1>
					<p>Scientist, Mathematician, Philoshper</p>
				</div>
			</div>
			<div class="intro-middle">
				<figure id="img-div">
					<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/newtonimage.png" alt="Isaac Newton's Photo" id="image">
					<figcaption id="img-caption">Portrait of Newton at Age 46 by Godfrey Kneller, 1689
					</figcaption>
				</figure>
				<div class="intro-middle-right">
					<p id="sub-heading">Born: 1643 - Died: 1727</p>
					<p class="profile-desc">One of the distinguished mathematician and physicist of all time and among the most influential scientists of the 17th Century. His book Principia Mathematica established classical mechanics. Also notable contributions to Optics, and shares credit with German mathematician Gottfried Wilhelm Leibniz for developing infinitesimal calculus.
					</p>
				</div>
			</div>
			<div class="intro-bottom" id="signature-img">
				<figure class="img-box">
					<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/newtonsignature.png" alt="Isaac Newton's Signature">
				</figure>
			</div>
		</div>
		<div class="container" id="tribute-info">
			<div class="timeline-title">
				<h2>Isaac Newton's Life Timeline</h2>
				<h3>Early Life</h3>
			</div>
			<div class="timeline-content">
				<ul>
					<li>Isaac Newton was born on 4 January 1643 at Woolsthorpe Manor in Woolsthorpe-by-Colsterworth, a hamlet in the county of Lincolnshire.
					</li>
					<li>His father, also named Isaac Newton, had died three months before his birth. His mother Hannah Ayscough, remarried when Newton was three and went to live with her new husband, the Reverend Barnabas Smith, leaving her son in the care of his maternal grandmother, Margery Ayscough (née Blythe).
					</li>
					<li>Newton's mother had three children (Mary, Benjamin and Hannah) from her second marriage.
					</li>
				</ul>
			</div>
			<div class="timeline-title">
				<h3>Education</h3>
			</div>
			<div class="timeline-content">
				<ul>
					<li>From the age of about twelve until he was seventeen, Newton was educated at The King's School, Grantham, which taught Latin and Ancient Greek and probably imparted a significant foundation of mathematics.
					</li>
					<li>He was removed from school and returned to Woolsthorpe-by-Colsterworth by October 1659. His mother, widowed for the second time, attempted to make him a farmer, an occupation he hated.
					</li>
					<li>Henry Stokes, master at The King's School, however persuaded his mother to send him back to school. Motivated partly by a desire for revenge against a schoolyard bully, he became the top-ranked student, distinguishing himself mainly by building sundials and models of windmills.
					</li>
					<li>In June 1661, he was admitted to Trinity College, Cambridge, on the recommendation of his uncle Rev William Ayscough, who had studied there. He started as a subsizar - paying his way by performing valet's duties - until he was awarded a scholarship in 1664, guaranteeing him four more years until he could get his Masters in Arts.
					</li>
					<li>In April 1667, he returned to Cambridge and in October was elected as a fellow of Trinity.
					</li>
				</ul>
			</div>
		</div>
		<div class="container" id="quote-box">
			<blockquote>
				<p>"My powers are ordinary. Only my application brings me success."</p>
				<p>- Isaac Newton</p>
			</blockquote>
		</div>
		<div class="container" id="timeline-contribution-middle-life">
			<div class="timeline-title">
				<h2>Contributions</h2><h3>Middle Life</h3>
			</div>
			<div class="timeline-content">
				<h3>Optics</h3>
				<ul>
					<li>Newton made various observations regarding the phenomenon of light, it's properties and interactions with other objects. He observed that colour is the result of objects interacting with already-coloured light rather than objects generating the colour themselves. This is known as Newton's theory of colour.</li>
					<li>From this work, he concluded that the lens of any refracting telescope would suffer from the dispersion of light into colours (chromatic aberration).</li>
					<li>As a proof of the concept, he constructed a telescope using reflective mirrors instead of lenses as the objective to bypass that problem.</li>
					<li>In late 1668, he was able to produce this first reflecting telescope</li>
				</ul>
			</div>
			<div class="timeline-content">
				<h3>Calculus</h3>
				<ul>
					<li>Newton's work has been said "to distinctly advance every branch of mathematics then studied". His work on the subject, usually referred to as fluxions or calculus, seen in a manuscript of October 1666, is now published among Newton's mathematical papers.</li>
					<li>Newton later became involved in a dispute with Leibniz over priority in the development of calculus (the Leibniz-Newton calculus controversy). Most modern historians believe that Newton and Leibniz developed calculus independently, although with very different mathematical notations.
					</li>
					<li>Occasionally it has been suggested that Newton published almost nothing about it until 1693, and did not give a full account until 1704, while Leibniz began publishing a full account of his methods in 1684.
					</li>
					<li>Leibniz's notation and "differential Method", nowadays recognised as much more convenient notations, were adopted by continental European mathematicians, and after 1820 or so, also by British mathematicians.
					</li>
				</ul>
			</div>
			<div class="timeline-content">
				<h3>Classical Mechanics</h3>
				<ul>
					<li>In 1679, Newton returned to his work on celestial mechanics by considering gravitation and its effect on the orbits of planets with reference to Kepler's laws of planetary motion</li>
					<li>The Principia was published on 5 July 1687 with encouragement and financial help from Edmond Halley. In this work, Newton stated the three universal laws of motion.</li>
					<li>Together, these laws describe the relationship between any object, the forces acting upon it and the resulting motion, laying the foundation for classical mechanics.</li>
					<li>With the Principia, Newton became internationally recognised.</li>
				</ul>
			</div>
		</div>
		<div class="container" id="laws-of-motion">
			<h2>Three Laws of Motion</h2>
			<div class="law-container">
				<div class="law-card">
					<h3>1st Law: Law of Inertia</h3>
					<p>An object at rest remains at rest, a moving object remains in motion at constant speed, and in a straight line unless acted upon by an unbalanced external force
					</p>
				</div>
				<div class="law-card">
					<h3>2nd Law: Force</h3>
					<p>Acelleration of an object is directly proportonal to the force applied on it</p>
					<p id="eq">F=ma</p>
				</div>
				<div class="law-card">
					<h3>3rd Law: Action and Reaction</h3>
					<p>For every Action, there's an equal and opposite Reaction</p>
				</div>
			</div>
		</div>
		<div class="container" id="apple-story">
			<h2>Newton, Apple and Gravity</h2>
			<div class="story-container">
				<h3 class="storyh1">
					an<span> Apple </span>that fell from the tree ...
				</h3>
				<div class="story-desc">
					<p>One of the popular story going around says an it was an Apple that helped Newton to form his theory about gravity. The story goes like this,
					</p>
					<blockquote>
					"One day, Newton was resting beneath the apple tree in his Manor. An apple happened to fall upon his head, waking him up. Suddenly a question crossed his mind "Why did the apple fall  downwards perpendicularly? Not fall upwards or sideways?" And the thought eventually led him formulate his theory of gravitation."
					</blockquote>
				</div>
				<h3 class="storyh2">
					... in search of <span>Gravity</span>
				</h3>
				<div class="story-desc">
					<p>Newton surmised that, this could be the work of an unknown force, which keeps pulling things toward the center of the earth, and the same is also responsible for preventing the Sun Earth, Moon, all of these from crashing into each other. From this inspiration Newton formulated his Theory of Gravitation, and the Earth's unknown force of attraction later to be known as Gravity.</p>
			
					<p>The story is believed to have widespread from the writings of French historian Voltaire, who wrote in his Essay on Epic Poetry (1727) which says,
					</p>
					<blockquote>"Sir Isaac Newton walking in his gardens, had the first thought of his system of gravitation, upon seeing an apple falling from a tree."
					</blockquote>
				</div>
				<h3 class="storyh1">
					... and rolled towards the light of<span> Truth</span>
				</h3>
				<div class="story-desc">
					<p>Whether the Apple had any divine intervention into Newton's discoveries or not, the actual incident is described in a manuscript provided by one of Newton's acquaintance, William Stukeley who recorded in his "Memoirs of Sir Isaac Newton's Life", a conversation with Newton, in Kensington on 15 April 1726. The incident is described as,</p>
					<blockquote>"After dinner, the weather being warm, we went into the garden and drank thea, under the shade of some apple trees…he told me, he was just in the same situation, as when formerly, the notion of gravitation came into his mind. It was occasion’d by the fall of an apple, as he sat in contemplative mood. Why should that apple always descend perpendicularly to the ground, thought he to himself…”
					</blockquote>
					<p>The Royal Society has made the manuscript available today for the first time in a fully interactive digital form on their website at <a href="https://royalsociety.org/blog/2012/02/newtons-apple-tree/" id="linkstyle" target="_blank">Royal Society's Official Page</a></p>
				</div>
			</div>
		</div>
		<div class="container" id="publications">
			<h2>Written Publications</h2>
			<div class="publication-container">
				<div class="publish-time" id="publish-left">
					<h3>Published during his lifetime</h3>
					<div class="book-container">
						<div class="book">
							<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/book1.png" alt="Book-cover-Philosophiæ Naturalis Principia Mathematica (1687)">
						</div>
						<div class="book">
							<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/book2.jpg" alt="Book-cover-Opticks (1704)">
						</div>
						<div class="book">
							<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/book3.jpg" alt="Book-cover-Arithmetica Universalis (1707)">
						</div>
					</div>
				</div>
				<div class="publish-time" id="publish-right">
					<h3>Published after his lifetime</h3>
					<div class="book-container">
						<div class="book">
							<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/book4.png" alt="Book-cover-The Chronology of Ancient Kingdoms Amended (1728)">
						</div>
						<div class="book">
							<img src="https://raw.githubusercontent.com/LevelZeroCoder/fcc_project_01_TributePage/main/book5.jpg" alt="Book-cover-Method of Fluxions (1671, published 1736)">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container" id="timeline-later-life">
			<div class="timeline-title">
				<h3>Later Life</h3>
			</div>
			<div class="timeline-content">
				<ul>
					<li>Newton was also a member of the Parliament of England for Cambridge University in 1689 and 1701
					</li>
					<li>Newton moved to London to take up the post of warden of the Royal Mint in 1696, a position that he had obtained through the patronage of Charles Montagu, 1st Earl of Halifax, then Chancellor of the Exchequer.
					</li>
					<li>Newton was made President of the Royal Society in 1703 and an associate of the French Académie des Sciences.
					</li>
					<li>In April 1705, Queen Anne knighted Newton during a royal visit to Trinity College, Cambridge.
					</li>
					<li>The knighthood is likely to have been motivated by political considerations connected with the parliamentary election in May 1705, rather than any recognition of Newton's scientific work or services as Master of the Mint. Newton was the second scientist to be knighted, after Francis Bacon
					</li>
				</ul>
			</div>
		</div>
		<div class="container" id="quote-box2">
			<blockquote>
				<p>"That which goes up must come down."</p>
				<p>- Isaac Newton</p>
			</blockquote>
		</div>
		<div class="container" id="newtons-death">
			<div class="timeline-content">
				<h3>Newton's Death</h3>
				<ul>
					<li>On 20th March 1727 Newton died at the age of 84 in his sleep. He was given a ceremonial funeral, attended by nobles, scientists, philosophers and was buried with full honours in Westminster Abbey, among kings and queens. He is also the first scientist to be buried in the Abbey.
					</li>
					<li>Newton never married. A bachelor, he had divested much of his estate to relatives during his last years, and died intestate.
					</li>
				</ul>
			</div>
		</div>
		<div class="container" id="quote-box3">
			<blockquote>
				<p>"Live your Life as an Exclamation rather than an Explanation"</p>
				<p>- Isaac Newton</p>
			</blockquote>
		</div>
		<div class="container" id="reference">
			<h2>Reference</h2>
			<div class="reference-list">
				<ul>
					<li><a href="https://en.wikipedia.org/wiki/Isaac_Newton" id="tribute-link" target="_blank">Wikipedia - Isaac Newton</a></li>			
					<li><a href="https://www.newscientist.com/article/2170052-newtons-apple-the-real-story/" target="_blank">New Scientist - Apple: The real story</a></li>
					<li><a href="https://www.britannica.com/biography/Isaac-Newton" target="_blank">Encyclopedia of Britannica - Isaac Newton</a></li>			
					<li><a href="https://www.bbc.co.uk/teach/isaac-newton-the-man-who-discovered-gravity/zh8792p" target="_blank">BBC - Isaac Newton: The man who discovered gravity</a></li>			
					<li><a href="https://www1.grc.nasa.gov/beginners-guide-to-aeronautics/newtons-laws-of-motion/" target="_blank">GRC NASA - Newton's Laws of motion</a></li>
					<li><a href="https://www.brainyquote.com/authors/isaac-newton-quotes" target="_blank">BrainyQuote - Isaac Newton Quotes</a></li>
					<li><a href="https://wallpaperaccess.com/isaac-newton" target="_blank">Wallpaperaccess - Isaac Newton Wallpapers</a></li>
					<li><a href="https://wallpapercave.com/isaac-newton-wallpapers" target="_blank">Wallpapercave - Isaac Newton Wallpapers</a></li>
				</ul>
			</div>
		</div>
		<footer class="footerstyle">
			<p>Made by @LevelZeroCoder</p>
			<p class="footertext1">find me on <a href="https://twitter.com/LevelZeroCoder" target="_blank">Twitter</a></p>
		</footer>
	</main>
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                html{
	font-size: 1rem;
	font-family: "Roboto", Open sans;
	font-weight: 800;
}

body{
	background-color: #ddcd81;
	color: #000;
	margin: 0;
	box-sizing: border-box;
}

h1{
	font-size: 2.1rem;
	font-weight: 1000;
	font-family: "Merriweather", Open sans;
}

p{
	font-family: "Roboto", Open sans;
	font-weight: 800;
}

strong{
	font-weight: 1200;
}

.pagewrap{
	width: 100%;
	height: auto;
	margin: 0;
}

.container{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

footer{
	width: 100%;
	padding: 0.5rem;
	background: #000;
	color: #fff;
	text-align: center;
}

.intro-container{
	width: 100%;
	height: auto;
}

.intro-container .intro-top{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.title-div{
	display: block;
	padding-bottom: 1rem;
}

.intro-top h1{
	margin: 0 auto;
	font-size: 3.75rem;
	color: #5a4583;
	padding: 0 2em;
	display: block;
}

.intro-top p{
	margin: 0 auto;
	font-size: 1.25rem;
	padding: 0 1.5rem;
	display: block;
	text-align: center;
}

.intro-middle{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;	
}

.intro-middle #img-div{
	width: 100%;
	margin: 0 auto;
}

.intro-middle #img-div img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

.intro-middle figure figcaption{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
}

.intro-middle-right{
	width: 50%;
	height: auto;
	margin: 0 auto;
	border: 1px solid yellow;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem;
	border: 2px solid yellow;
}


.intro-middle-right #subheading{
	font-size: 1.75em;
	font-weight: 1000;
	padding: 0.2rem;
	font-family: "Merriweather", Open sans;
	color: #121212;
	margin: 0 auto;
}

.intro-middle-right .profile-desc{
	width: 90%;
	height: 100%;
	border: 1px solid yellow;
	padding: 0.5rem;
	margin: 0 0.2rem; 
}

.intro-middle .intro-middle-right .profile-desc p{
	font-size: 1.5rem;
	margin: 0 2rem;
	padding: 0.3rem;
}

.intro-bottom{
	width: 100%;
	height: auto;
	padding: 1rem;
}

.intro-bottom .img-box{
	width: 45%;
	height: 100%;
	margin: 0 auto;
}

.intro-bottom .img-box img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}

.container .timeline-title h2{
	font-size: 1.9rem;
	font-family: "Merriweather", Open sans;
	color: #2c2c2c;
	padding-left: 1.25rem;
}

.container .timeline-title h3{
	font-size: 1.5rem;
	font-family: "Merriweather", Open sans;
	color: #56356a;
	display: flex;
	justify-content: flex-end;
	padding: 0 0.5rem;
}

.container .timeline-content{
	width: 90%;
	display: flex;
	justify-content: center;
	padding: 0.75em;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.container h2{
	font-size: 1.75rem;
	margin-left: 2rem;
}

.container .timeline-content h3{
	font-size: 1.5rem;
	font-family: "Merriweather", Open sans;
}

.container .timeline-content ul li{
	font-size: 1.25rem;
}

blockquote{
	width: 70%;
	margin: auto;
	font-style: italic;
	border: 1px dotted #2d2d2d;
	display: flex;
	flex-direction: column;
	background-color: #d5c291;
	padding: 1rem;
}

blockquote p{
	font-size: 1.25rem;
	display: flex;
	justify-content: center;
}

.container .law-container{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.container .law-container .law-card{
	width: 30%;
	border: 1px dotted #2d2d2d;
	display: flex;
	flex-direction: column;
	padding: 5px 10px 10px 5px;
}
.container h2{
	font-family: "Merriweather", Open sans;
	padding: 0.5rem;
	color: #2c2c2c;
}

.container .law-container .law-card h3{
	font-size: 1.4rem;
	font-weight: 900;
	color: #56356a;
	font-family: "Merriweather", Open sans;
	text-align: center;
}

.container .law-container .law-card p{
	font-size: 1.25rem;
	margin: auto;
}

#eq{
	font-size: 1.9rem;
	font-family: "Californian FB", Open sans;
}

.story-container{
	width: 90%;
	height: auto;
	margin: 0 auto;
}

.story-container h3{
	font-size: 1.5rem;
	font-family: "Merriweather", Open sans;
	padding: 0 0.5rem;
}

.storyh1{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.storyh2{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.story-container h3 span{
	font-size: 1.9rem;
	color: #463550;
	margin: 0 0.5rem;
}

.story-container .story-desc{
	width: 90%;
	height: auto;
	margin: 0 auto;
}

#linkstyle{
	font-size: 1.125rem;
}

.story-container .story-desc a{
	color: #220f46;
	font-size: 1.3rem;
	font-weight: 900;
}

.story-container .story-desc a:hover{
	color: #505050;
}

.container .publication-container{
	width: 100%
	height: auto;
	display: flex;
}

.publication-container .publish-time{
	width: 90%;
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
}

.publication-container .publish-time h3{
	font-size: 1.25rem;
	font-family: "Merriweather", Open sans;
	display: flex;
	justify-content: flex-start;
}

.publication-container .publish-time .book-container{
	width: 75%;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.publication-container .publish-time .book-container .book{
	width: 100px;
	height: 130px;
	padding: 0.2rem;
	border: 2px solid #621a1a;
	background-color: #ad751f;
	margin: 0.2rem;
	border-radius: 5px;
}

.publication-container .publish-time .book-container .book img{
	width: 100%;
	height: 100%;
	box-shadow: 5px 5px 7px #523919;
	border-radius: 5px;
}

.publication-container .publish-time .book-container .book img:hover{
	transform: scale(1.1);
	transition: 0.3s;
	box-shadow: 7px 7px 7px #562c09;
}

.container .reference-list{
	width: 75%;
	height: auto;
	margin: 0.5rem auto;
	border: 1px solid #2d2d2d;
	display: flex;
	justify-content: center;
}

.container .reference-list ul{
	width: 100%;
	height: auto;
	list-style-type: none;
}

.container .reference-list ul li{
	padding: 0.325rem;
	display: flex;
	justify-content: center;
}

.container .reference-list ul li a{
	color: #6e1d0b;
	display: flex;
}

.reference-list ul li a:hover{
	color: #fd6060;
}

.footerstyle{
	width: 100%;
	padding: 0.5rem;
	background: #000;
	color: #fff;
	text-align: center;
}

.footerstyle a{
	color: #33a9fd;
}

.footerstyle .footertext1{
	font-size: 0.95rem;
}


@media (max-width: 740px){
	.pagewrap{
		min-width: 340px;
	}

	.intro-middle{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}

	.intro-top{
		width: 100%;
		min-width: 320px;
		margin: 0.2rem;
		height: auto;
	}

	.title-div{
	display: block;
	margin: 0 auto;
	}

	.intro-top h1{
		font-size: 1.75rem;
	}
	.intro-top p{
		font-size: 1rem;
	}

	.intro-middle #img-div{
	width: 70%;
	margin: 0 auto;
	}

	.container{
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	.container .law-container{
		width: 100%;
		height:auto;
		display: flex;
		flex-direction: column;
	}

	.law-container .law-card{
		min-width: 75vw;
		height: auto;
		margin: 0.5rem auto;
		padding: 0.3rem; 
	}

	.publication-container{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
	}
} 

              
            
!

JS

              
                
              
            
!
999px

Console