-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (89 loc) · 6.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tribute Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a Free Code Camp Project called Tribute Page">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Edward Njoroge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<!--Title-->
<h2 class="text-center">Muhammad Ali</h2>
<h3 class="text-center">The Greatest of All Time</h3>
</div>
<div class="col-xs-12 center-block img-responsive">
<!--Image-->
<img style="width: 100%" src="img/Ali.png" alt="Muhammad Ali" />
<h4 class="text-center">Muhammad Ali in 1966</h4>
</div>
<div class="col-xs-12">
<!--Life history-->
<h3 class="text-center">The life of Muhammad Ali</h3>
<ul>
<li><strong>1942</strong>: Born Cassius Marcellus Clay, Jr., on Jan. 17, in Louisville, Ky., to Odessa and Cassius, Sr.</li>
<li><strong>1954</strong>: After having his bike stolen, a 12-year-old Clay promises to "whup whoever stole it." In an attempt to channel his aggression, the policeman he reported the crime to takes him under his wing and eventually directs him
to boxing trainer Fred Stoner. Over the next six years, Clay would win six Kentucky Golden Gloves championships, two national Golden Gloves titles, and two AAU (Amateur Athletic Union) crowns.</li>
<li><strong>1960</strong>: Wins the lightheavyweight gold medal in the Summer Olympics. After being kicked out of a white restaurant, Ali throws his gold medal in the river out of anger that he was still discriminated against despite representing
Ameria.He turns professional several months later.</li>
<li><strong>1964</strong>: Ali defeats Sonny Liston and becomes World Heavyweight Champion.</li>
<li><strong>1967</strong>: In April, Ali refuses induction into the U.S. Army due to his religious convicitions. He is stripped of his championship and boxing license. Later the court finds him guilty of draft evasion and he is sentenced to five
years in prison. He begins to appeal the ruling.</li>
<li><strong>1970</strong>: Ali gains a boxing license and returns to the ring where he knocks out Jerry Quarry.</li>
<li><strong>1971</strong>: Unsuccessfully challenges Joe Frazier for the World Heavyweight Championship in the "Fight of The Century". Three months later, the Supreme Court rules in his favor, reversing the 1967 draft-evasion conviction.</li>
<li><strong>1974</strong>: Ali knocks out George Foreman to regain the World Heavyweight Championship in the "Rumble in the Jungle" in Zaire.</li>
<li><strong>1975</strong>: Ali defeats Frazier for the third time at the "Thrilla in Manila" in the Philippines.</li>
<li><strong>1978</strong>: After losing the title to Leon Spinks, Ali defeats him in a rematch to become the first ever three-time World Heavyweight Champion.</li>
<li><strong>1984</strong>: Ali is diagnosed with Parkinson's disease.</li>
<li><strong>1996</strong>: Ali carries the Olympic torch and ignites the cauldron to signal the beginning of the Summer Olympics in Atlanta. He is also given a gold medal to replace the medal he threw in the river in 1960.</li>
<li><strong>2001</strong>: Receives the Presidentia Citizens Award from President Bill Clinton.</li>
<li><strong>2005</strong>: Receives the Presidential Medal of Freedom from President George W. Bush.</li>
<li><strong>2016</strong>: Muhammad Ali dies at the age of 74.</li>
</ul>
</div>
<div class="col-xs-12">
<!--Video clip-->
<h1 style="font-family: Times" class="text-center text-info"><strong>Greatest Quote</strong></h1>
<h2 style="color: purple">"<em>Float like a butterfly and sting like a bee. His hands can't hit what his eyes can't see.</em>"</h2>
<div class="videoContainer">
<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/uSFQrPzSAnE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-xs-12">
<!--More information-->
<h3 class="text-center">More Information on Muhammad Ali</h3>
<a style="text-decoration: none; text-info" href="http://muhammadali.com/"><button style="background-color: black" class="btn btn-block text-center">Muhammad Ali's Website</button></a>
<div class="row">
<div class="col-xs-3">
<a href="https://en.wikipedia.org/wiki/Muhammad_Ali"><button class="web-buttons btn text-center text-info center-block"><i class="fa fa-wikipedia-w"></i></button></a>
</div>
<div class="col-xs-3">
<a href="https://www.facebook.com/MuhammadAliVerified/"><button class="web-buttons btn text-info center-block"><i class="fa fa-facebook"></i></button></a>
</div>
<div class="col-xs-3">
<a href="https://twitter.com/muhammadali?lang=en"><button class="web-buttons btn text-center text-info center-block"><i class="fa fa-twitter"></i></button></a>
</div>
<div class="col-xs-3">
<a href="https://www.instagram.com/muhammadali/?hl=en"><button class="web-buttons btn text-center text-info center-block"><i class="fa fa-instagram"></i></button></a>
</div>
</div>
</div>
</div>
</div>
<div id="footerContainer">
<!--Creator-->
<p class="text-primary text-center" style="font-size: 20px">Written and Coded by <a style="text-decoration: none" href="https://codepen.io/edkahara/" target="_blank"><strong>Edward</strong></a></p>
</div>
</div>
</body>
</html>