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

              
                <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/ali.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:700' rel='stylesheet' type='text/css'>
<div class="jumbotron">
	<div class="container">
		<h1 class="text-center">Muhammad Ali: The greatest</h1>

		<h2 class="text-center">January 17 1942 - June 3 2016</h2>

		<p class="text-center">Muhammad Ali was a fighter all his life. Initially he found fame as a champion boxer, celebrated for his unorthodox ring style and witty talk before, during and after fights.</p>
	</div>
</div>

<div class="container main">

	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-young.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">17 January 1942</h3>

					<p class="timeline-subtitle">A star is born</p>

					<p>Muhammad Ali was born Cassius Clay Jr in Louisville, Kentucky.</p>

					<p>His father was a sign painter and his mother a part-time cook and cleaner for wealthy families. Although they lived in a middle-class black neighbourhood, Kentucky law enforced a code of racial segregation that precluded black people from using many
						of the same public facilities as their white neighbours. The indignities forced on Clay and his family, as well as national outrages such as the racially-motivated murder of 14-year-old Emmett Till in 1955, deeply troubled Clay from an early age.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z9cfg82" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						I'm not the greatest. I'm the double greatest. Not only do I knock 'em out, I pick the round. I'm the boldest, the prettiest, the most superior, most scientific, most skillfullest fighter in the ring today.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						He who is not courageous enough to take risks will accomplish nothing in life.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-age-12.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">17 January 1954</h3>

					<p class="timeline-subtitle">A Stolen Gift</p>

					<p>When Clay was 12 years old, his parents bought him a bike for his birthday. It was stolen while he was at a local fair.</p>

					<p>Clay went to report the theft to a local policeman named Joe Martin. Martin was a boxing instructor as well as an officer. As Clay threatened to find and beat up the thief, Martin suggested he learn how to fight before dishing out threats. Martin
						became Clay’s first trainer. Clay soon won an array of titles on the amateur boxing circuit under Martin's guidance.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z34yrdm" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded  img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-olympics.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">5 September 1960</h3>

					<p class="timeline-subtitle">Clay Wins Gold</p>

					<p>At 18, Clay qualified for the Olympics in Rome. He charmed the world media and proved popular among his fellow athletes.</p>

					<p>He proved himself in the ring too, winning gold as a light-heavyweight. Clay was famously proud of his medal, wearing it constantly during his stay in Italy and on his return to the United States. He was honoured with a victory parade in his home
						town of Louisville but was later refused service in a whites-only diner and other public facilities. The segregation laws still applied to him – Olympic champion or not.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z2hq6fr" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						Ali's got a left, Ali's got a right - when he knocks you down, you'll sleep for the night; and when you lie on the floor and the ref counts to ten, hope and pray that you never meet me again.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						When I won the Golden Gloves in 1960, that made me realize I had a chance. And when I won at the Olympics, that sealed it: I was the champ.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-float.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">29 October 1960</h3>

					<p class="timeline-subtitle">Turning professional</p>

					<p>Eight weeks after his victory in Rome, Clay won his first professional bout. All the trademarks of his unorthodox style were on display.</p>

					<p>Clay had immense confidence in his speed and agility, often leaving his guard down and leaning back to avoid punches. Clay's showmanship was also evident in early bouts, as he dazzled media and fans with his bravado and predicted the round in which
						his fights would end. He faced tough opponents, including popular Englishman Henry Cooper, who knocked him down with a powerful left hook. But Clay maintained an unblemished ring record. He would soon prove himself against his toughest opponent
						yet.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zpvtfrd" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/clay-ali.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">6 March 1964</h3>

					<p class="timeline-subtitle">Muhammad Ali is born</p>

					<p>Speculation about Clay's religious beliefs had been fuelled by his relationship with black civil rights leader and Nation of Islam member Malcolm X.</p>

					<p>After defeating Liston, Clay publicly acknowledged he was a member of the religious movement. In March, he was given the name Muhammad Ali by his spiritual mentor, Elijah Muhammad. Ali accepted the group's controversial doctrine, including a call
						for apartheid between the races. It made him a pariah in some circles but, for many, he was a symbol of black pride, refusing to play the role of the 'compliant negro' in order to gain acceptance from the white establishment.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zg2kqty" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						Cassius Clay is a name that white people gave to my slave master. Now that I am free, that I don't belong anymore to anyone, that I'm not a slave anymore, I gave back their white name, and I chose a beautiful African one.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						My principles are more important than the money or my title.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-vs-us.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">28 April 1967</h3>

					<p class="timeline-subtitle">Ali vs US government</p>

					<p>As war unfolded in Vietnam, Ali received a notice drafting him into the US Army. His next fight would be in a courtroom, rather than a boxing ring.</p>

					<p>Ali objected to serving in the military because of his religious beliefs. He also referenced the mistreatment of black Americans, saying he refused to co-operate with the US government in oppressing another race of people. He was stripped of his
						championship, indicted for draft evasion, fined $10,000 and sentenced to five years in prison. Three years later, his conviction was overturned. Away from the ring, Ali toured colleges and spoke out on a variety of social and political issues.
					</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z9tjxsg" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-century.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">8 March 1971</h3>

					<p class="timeline-subtitle">'The Fight of the Century'</p>

					<p>In 1970, Ali returned to boxing, knocking out Jerry Quarry and Oscar Bonavena. Next up was Joe Frazier, who had become the heavyweight champion.</p>

					<p>Frazier and Ali clashed over more than just the title. To Frazier’s dismay, the two men became symbols and proxy warriors for opposing social, political, and religious beliefs. Ali, an outspoken advocate of black self-realisation, dismissed Fraizer
						in pre-fight interviews as an 'Uncle Tom'. Their fight at Madison Square Garden was watched by millions of people in America and around the world. Frazier won a unanimous 15-round decision – it was Ali’s first professional loss.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zqy6sg8" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						I always bring out the best in men I fight, but Joe Frazier, I'll tell the world right now, brings out the best in me. I'm gonna tell ya, that's one helluva man, and God bless him.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						I should be a postage stamp, because that's the only way I'll ever get licked. I'm beautiful. I'm fast. I'm so mean I make medicine sick. I can't possibly be beat.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-jungle.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">30 October 1974</h3>

					<p class="timeline-subtitle">'The Rumble in the Jungle'</p>

					<p>Ali had a chance to reclaim his title in Zaire against a new world champion: the hard-hitting heavyweight George Foreman.</p>

					<p>Again, Ali entered the ring as a 3-to-1 underdog. But in front of 80,000 fans, he unveiled a new tactic – the ‘rope-a-dope’. Leaning back against the ropes, Ali avoided most punches to the head and absorbed punishing body blows before counter-attacking
						with straight right hands. In the middle rounds, Foreman tired. In round eight, Ali launched a powerful combination that knocked the champion to the canvas. "Oh my God," said BBC commentator Harry Carpenter, "he's won the world title back at 32.”</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z23hycw" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-1974.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">10 December 1974</h3>

					<p class="timeline-subtitle">A global superstar</p>

					<p>Ali’s victory over Foreman reinforced his position as the most recognisable person on the planet.
					</p>

					<p>His famous fans included Elvis, Bertrand Russell and Nelson Mandela. In an effort to heal rifts caused by the war in Vietnam and racial divisions within the United States, President Gerald Ford invited him to the White House in December 1974. Then,
						in 1975, Ali abandoned Nation of Islam teachings in favour of orthodox Islam. He has since declared, “Colour doesn’t make a man a devil. It’s the heart and soul and mind that count."</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zw4vcwx" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						He who is not courageous enough to take risks will accomplish nothing in life.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						If you even dream of beating me you'd better wake up and apologize.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/Ali-Manilla.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">1 October 1975</h3>

					<p class="timeline-subtitle">Thrilla in Manilla</p>

					<p>It had been 21 months since Ali won a low-key rematch against Joe Frazier in New York. Their rivalry stood at one win each.</p>

					<p>IAli's womanizing became a sub-plot to the bout after he brought his mistress to a reception at the presidential palace in Manila. Meanwhile, tensions between Ali and Frazier were running higher than ever, as Ali continued to goad his opponent in
						public. He branded Frazier ‘a gorilla’. The fight lasted a punishing 14 rounds. Ali prevailed when Frazier’s corner halted the brutal back-and-forth carnage. Ali later described the fight as “the closest thing to death” he’d ever experienced.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#ztcfg82" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center  hidden-xs hidden-sm">
			<div class="panel">
				<div class="panel-heading">
					<iframe width="560" height="315" src="https://www.youtube.com/embed/6igy7hmildM" frameborder="0" allowfullscreen></iframe>
				</div>

				<div class="panel-body">
					<h3 class="date">15 September 1978</h3>

					<p class="timeline-subtitle">The later years</p>

					<p>After Manila, Ali defended his championship six times before his loss to Leon Spinks, a largely untested fighter with seven pro fights to his credit.</p>

					<p>Seven months later, in September 1978, he defeated Spinks in a rematch to claim the heavyweight crown for an unprecedented third time. After a brief retirement, Ali made an ill-advised comeback against Larry Holmes. Ali failed to go the distance
						and was pulled out of the fight by his trainer after the tenth round. He retired permanently at age 40 with a ring record of 56 wins and five losses.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z379j6f" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						Only a man who knows what it is like to be defeated can reach down to the bottom of his soul and come up with the extra ounce of power it takes to win when the match is even.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						A man who views the world the same at fifty as he did at twenty has wasted thirty years of his life.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-iraq.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">5 February 1980</h3>

					<p class="timeline-subtitle">On the world stage</p>

					<p>Ali was not a diplomat but he was enlisted into diplomatic causes by the US government due to his popularity at home and abroad.</p>

					<p>AIn 1980, President Carter sent Ali to Africa to gather support for a US-led boycott of the Moscow Olympics. But the mission offended many African leaders and was widely considered to be a diplomatic failure. In 1990, Ali went to Iraq on his own
						accord to help negotiate the release of American hostages captured after Saddam Hussein's invasion of Kuwait. Fifteen hostages were released, aided by Ali's profile.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zcnmp39" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center hidden-xs hidden-sm">
			<div class="panel">
				<div class="panel-heading">
					<iframe width="560" height="315" src="https://www.youtube.com/embed/IlB-NRQv3OY" frameborder="0" allowfullscreen></iframe>
				</div>

				<div class="panel-body">
					<h3 class="date">1984</h3>

					<p class="timeline-subtitle">A new fight</p>

					<p>In the early 1980s, Ali developed noticeable tremors and slurs in his speech. In 1984, he was diagnosed with Parkinson's.</p>

					<p>Ali's physicians linked his condition to the repeated blows to the head sustained during his boxing career. Ali, however, has stated that he does not believe his condition is caused by boxing. In the ensuing years, Ali became a visible symbol of
						courage in the face of physical disability and helped raise millions of dollars for the Muhammad Ali Parkinson's Center.</p>
					<h3>If you like this page please consider donating to Parkinsons UK <a href="https://www.justgiving.com/fundraising/muhammad-ali-tribute">here</a>
					</h3>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z9hq6fr" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						Maybe my Parkinson's is God's way of reminding me what is important. It slowed me down and caused me to listen rather than talk. Actually, people pay more attention to me now because I don't talk as much.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						To be able to give away riches is mandatory if you wish to possess them. This is the only way that you will be truly rich.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-charity.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">29 June 1990</h3>

					<p class="timeline-subtitle">Fighter turned philanthropist</p>

					<p>Throughout his retirement, Ali has devoted himself to humanitarian work and charitable causes.
					</p>

					<p>Many of Ali's most high profile fights were staged in developing countries, partly in a bid to shine a global spotlight on them. He continued to make trips as a goodwill ambassador to troubled nations, such as North Korea and Afghanistan, and delivered
						$1m of medical supplies to Cuba. In 1990, Ali met Nelson Mandela in Los Angeles, paying his respects to a fellow advocate of civil rights and political freedom.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zw8cdmn" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center hidden-xs hidden-sm">
			<div class="panel">
				<div class="panel-heading">
					<iframe width="auto" height="auto" src="https://www.youtube.com/embed/gmzr3tZSHxU" frameborder="0" allowfullscreen></iframe>
				</div>

				<div class="panel-body">
					<h3 class="date">19 July 1996</h3>

					<p class="timeline-subtitle">An emotional return</p>

					<p>In the summer of 1996, a trembling Muhammad Ali lit the Olympic flame in Atlanta.</p>

					<p>His appearance generated a worldwide outpouring of love, reaffirming his status as an iconic symbol of tolerance, understanding and courage. In 1999, in acknowledgement of his humanitarian work in impoverished countries, Ali was named a United Nations
						Goodwill Ambassador. A Hollywood movie starring Will Smith dramatising his life and career was released in 2001. Ali made a number of public appearances to promote the film.</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zwfxnbk" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						I am an ordinary man who worked hard to develop the talent I was given. I believed in myself, and I believe in the goodness of others.
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						Hating people because of their color is wrong. And it doesn't matter which color does the hating. It's just plain wrong.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-medal.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">14 Nov 2005</h3>

					<p class="timeline-subtitle">The champion honoured</p>

					<p>Ali has been the recipient of a myriad of honours, in appreciation of his lifelong fight for civil rights and religious freedoms.</p>

					<p>In 2005, Ali was awarded the Presidential Medal of Freedom, the highest honour that can be bestowed on a civilian in America. Although he did not speak, Ali's sense of humour was still on full display. When President Bush threw a mock punch at the
						former champion, Ali twirled a finger round his head to indicate he would be crazy to take him on in a fight. That same year saw the opening of the Muhammad Ali Center in Louisville, a non-profit museum celebrating Ali's life and achievements.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zy9gk7h" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Right  -->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-6 text-center">
			<div class="panel">
				<div class="panel-heading">
					<img class="timeline-image img-rounded img-responsive" src="http://mattdorey.info/codepen/images/tribute/ali-london.jpg" />
				</div>

				<div class="panel-body">
					<h3 class="date">27 July 2012</h3>

					<p class="timeline-subtitle">A legend in his lifetime</p>

					<p>Over 50 years after his first attendance at the Olympic Games in Rome, Ali made a poignant return to the world stage.</p>

					<p>At the 2012 Olympics in London, Ali was designated as an honorary flag bearer. Although his frail physical condition prevented him from carrying the flag, he stood for part of the ceremony with the support of his wife, Lonnie. Ali's appearance was
						rapturously received by fans in the packed stadium and around the world. It was a fitting tribute to one of the greats of sporting history whose remarkable life transcended the ropes of the boxing ring.
					</p>
				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#z867tyc" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
		<div class="col-md-4 text-center col-md-offset-2">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						I never thought of losing, but now that it's happened, the only thing is to do it right. That's my obligation to all the people who believe in me. We all have to take defeats in life
					</blockquote>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<!--  Quote Left-->
	<div class="row row-eq-height timeline-row">
		<div class="col-md-4 text-center">
			<div class="panel">
				<div class="panel-heading"></div>
				<div class="panel-body">
					<blockquote>
						People don't realize what they had till it's gone. Like President Kennedy, there was no one like him, the Beatles, and my man Elvis Presley. I was the Elvis of boxing.
					</blockquote>
				</div>
			</div>
		</div>
		<div class="col-md-6 text-center col-md-offset-2 hidden-xs hidden-sm">
			<div class="panel">
				<div class="panel-heading">
					<iframe class="timeline-image" width="auto" height="auto" src="https://www.youtube.com/embed/jxZkWUXWxww" frameborder="0" allowfullscreen></iframe>
				</div>

				<div class="panel-body">
					<h3 class="date">3 June 2016</h3>

					<p class="timeline-subtitle">Muhammad Ali dies</p>

					<p>Muhammad Ali was a legendary boxer and one of the greats of sporting history. His impact was felt far beyond the confines of the boxing ring.</p>

					<p>He lost some of the best years of his sporting career after refusing, on principle, to fight for America in the Vietnam War. Beyond the ring, he will be remembered for his belief in social justice and support for Black civil rights. Truly a cultural
						icon, Ali’s passion, skill, intelligence and wit gave him a global appeal unmatched by few, if any, other sporting figures and inspired millions.</p>

				</div>
				<div class="panel-footer none">
					<p class="source">Source:<a href="https://www.bbc.co.uk/timelines/zy3hycw#zsgstyc" target="_blank"> BBC</a> </p>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<div class="row text-center">
		<button class="btn btn-primary text-center" onclick="location.href='https://en.wikipedia.org/wiki/Muhammad_Ali'">Read More About Muhammad Ali on Wikipedia</button>
	</div>
	<hr>
	<footer>
		<div class="row">
			<h3 class="text-center">
				If you like this page please consider donating to Parkinsons UK 
				<a href="https://www.justgiving.com/fundraising/muhammad-ali-tribute">here</a>
			</h3>
		</div>
		<div class="row">
			<p class="text-center">Coded by <a href="http://mattdorey.info" target="_blank">Matt Dorey</a></p>
		</div>
	</footer>

</div>
              
            
!

CSS

              
                .jumbotron {
    position: relative;
    background: #000 url("http://mattdorey.info/codepen/images/tribute/ali-cover.jpg") center center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
		min-width: 100vw;
    background-size: cover;
/*     overflow: hidden; */
    color: white !important;
    text-shadow: 2px 2px #000;
    padding-top: 350px !important;
}

.date {
    font-size: 20px;
    font-family: 'Roboto Slab', serif;
}

.timeline-subtitle {
    font-size: 40px;
    font-family: 'Titillium Web', sans-serif;
    color: #333333;
}

.timeline-subtitle:first-letter {
    text-transform: uppercase;
}


/* Override the bootstrap default styles*/
.panel-footer {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Override the bootstrap default styles*/
blockquote {
    border-left: none !important;
    font-size: 30px !important;
    font-family: 'Roboto Slab', serif !important;
}

/* Add FontAwesome Quotation Marks */
blockquote:before {
    content: "\f10d";
    font-family: FontAwesome;
    float: left;
    margin-right: 10px;
}

blockquote:after {
    content: "\f10e";
    font-family: FontAwesome;
    float: right;
    margin-left: 10px;
}

.timeline-image {
	float: none;
	margin: 0 auto;
}
              
            
!

JS

              
                
              
            
!
999px

Console