freeCodeCamp: Build a Tribute Page

freecodecamp-build-a-tribute-page.markdown

freeCodeCamp: Build a Tribute Page

A Pen by Khadija Crawford on CodePen.

License.

index.html

<div class="jumbotron">
	<div class="container">
		<!-- Content
	-->
		<div class="row">
			<div class="col-12 col-md-8">
				<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Sylvia_Plath.jpg/220px-Sylvia_Plath.jpg" class=" float-left" style="width: auto; padding-right: 5px;" alt="Portrait of Sylvia Plath">

				<h1 class="display-4">Sylvia Plath</h1>
				<p class="lead">An American poet, novelist, and short-story writer. Born in Boston, she studied at Smith College and Newnham College at the University of Cambridge before receiving acclaim as a poet and writer. She married fellow poet Ted Hughes in 1956, and they
					lived together in the United States and then in England. They had two children, Frieda and Nicholas, before separating in 1962.</p>

				<p class="lead">Plath was clinically depressed for most of her adult life, and was treated multiple times with electroconvulsive therapy (ECT). She committed suicide in 1963.</p>

				<p class="lead">Plath is credited with advancing the genre of confessional poetry and is best known for two of her published collections, <i>The Colossus</i> and Other Poems and <i>Ariel</i>, and <i>The Bell Jar</i>, a semi-autobiographical novel published shortly
					before her death. In 1982, she won a posthumous Pulitzer Prize for <i>The Collected Poems</i>.</p>
			</div>
			<div class="col-6 col-md-4">
				<h3>The Life of Plath</h3>
				<p>(October 27, 1932 – February 11, 1963)</p>

				<h3>Works of Plath</h3>
				<ul>
					<li><a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Double_Exposure" target="_blank">Double Exposure</a></li>
					<li><a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Themes" target="_blank">Themes</a></li>
					<li><a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Journals_and_letters" target="_blank">Journals and letters</a></li>
					<li><a href="https://en.wikipedia.org/wiki/Sylvia_Plath#The_Bell_Jar" target="">The Bell Jar</a></li>
					<li>..<a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Works_2" target="_blank">And More</a>!</li>
				</ul>
			</div>
		</div>

		<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
		<div class="row" style="max-height: 200px;">
			<div class="col-6 col-md-4">
				<h5>Early Life</h5>
				<p>Born on October 27, 1932, in Boston, Massachusetts. Her mother, Aurelia Schober Plath (1906–1994), was a second-generation American of Austrian descent, and her father, Otto Plath (1885–1940), was from Grabow, Germany... <a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Early_life"
					 target="_blank">Read More</a></p>
			</div>
			<div class="col-6 col-md-4">
				<h5>College Years</h5>
				<p>In 1950, Plath attended Smith College and excelled academically. She wrote to her mother, "The world is splitting open at my feet like a ripe, juicy watermelon".She edited The Smith Review and during the summer after her third year...<a href="https://en.wikipedia.org/wiki/Sylvia_Plath#College_years_and_depression"
					 target="_blank"> Read More</a></p>
			</div>
			<div class="col-6 col-md-4">
				<h5>Career and Marriage</h5>
				<p>Plath first met poet Ted Hughes on February 25, 1956, at a party in Cambridge.In a 1961 BBC interview (now held by the British Library Sound Archive),Plath describes how she met Ted Hughes...<a href="https://en.wikipedia.org/wiki/Sylvia_Plath#Career_and_marriage" target="_blank"> Read More</a>
				</p>
			</div>
		</div>
		<hr class="my-4">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-lg-8">
				<footer>
					<p>Read more about Sylvia Plath on her <a href="https://en.wikipedia.org/wiki/Sylvia_Plath" target="_blank">Wikipedia</a> page.</p>
					<p>A freeCodeCamp Project written and coded by <a href="https://www.freecodecamp.org/crawfordk" target="_blank">Khadija (Andy) Crawford</a></p>
				</footer>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
</div>

style.css

html, body {
	margin-top: 20px;
	padding: 0;
}

.jumbotron {
	margin-left: 25%;
	margin-right: 25%;
}

footer {
	text-align: center;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />