HTML:
<main id="main">
<div id="title">
MUHAMMAD ALI
<br>
GREATEST.OF.ALL.TIME
</div>
<div id="img-div"><img id="image"src="https://content.api.news/v3/images/bin/f3e024e0f1063afd90e1c94664862e10?width=768" alt="Muhammad Ali" ;>
<div id="img-caption">
Heavyweight champion Muhammad Ali stands over fallen challenger Sonny Liston, shouting and gesturing shortly after dropping Liston with a short hard right to the jaw on May 25, 1965, in Lewiston, Maine. The bout lasted only one minute into the first round.
</div>
</div>
<div id="tribute-info">
<ul>
<li><span class="date">Jan. 17, 1942 :</span> Cassius Clay is born in Louisville, Kentucky.</li>
<li><span class="date">Sept. 5, 1960 :</span> After winning three bouts in the qualifying round at the Rome 1960 Olympic Games, Cassius Clay defeats Zbigniew Pietrzykowski, of Poland, for the gold medal. Clay was just 18 when he won the gold medal by a decision.</li>
<li><span class="date">Feb. 25, 1964 :</span> At 22, Ali defeats champion Sonny Liston in a technical knockout to win the world heavyweight boxing crown in Miami. </li>
<li><span class="date">March 6, 1964</span>: Cassius Clay officially changes his name to Muhammad Ali. Elijah Muhammad, a leader in the Nation of Islam, made a radio broadcast about the name change. Muhammad means “one worthy of praise.” Ali is the name of a cousin of a prophet. </li>
<li><span class="date">Aug. 14, 1964</span>: Ali married Sonji Roi. The marriage later ends in divorce. </li>
<li><span class="date">April 1967 :</span> Ali refuses to join the U.S. Army citing his opposition to the Vietnam War. He is subsequently barred from boxing and his title was stripped.</li>
<li><span class="date">Aug. 17, 1967 :</span> Ali married Belinda Boyd. After the wedding, she converted to Islam. The marriage later ends in divorce. </li>
<li><span class="date">Oct. 26, 1970 :</span> Ali is reinstated into boxing. </li>
<li><span class="date">March 8, 1971 :</span> “The Fight of the Century” takes place between Ali and Joe Frazier in New York’s Madison Square Garden. Frazier won by a unanimous decision in 15 rounds. The bout marked Ali’s first defeat of his pro career.</li>
<li><span class="date">April 19, 1971 :</span> The legal fight under the case name, Cassius Marsellus Clay, Jr. v. United States was argued before the U.S. Supreme Court.</li>
<li><span class="date">June 28, 1971 :</span> The U.S. Supreme Court reversed Ali’s 1967 conviction. </li>
<li><span class="date">Jan. 28, 1974 :</span> Ali and Frazier have a rematch in Madison Square Garden. This time, Ali won in 12 rounds. </li>
<li><span class="date">Oct. 30, 1974 :</span> The famed “Rumble in the Jungle” fight takes place in Zaire and Ali knocks out George Foreman in the eighth round. Ali famously tires out Foreman using the “rope-a-dope” strategy. </li>
<li><span class="date">Oct. 1, 1975 :</span> Ali took on Frazier for a third (and final) time, this time in the Philippines. Ali beat Frazier in a TKO in the 14th round in what is forever known as “The Thrilla in Manila”.</li>
<li><span class="date">Oct. 1, 1975 :</span> Ali’s biography, “The Greatest: My Own Story,” by Richard Durham, is published. Among the topics is in the book is the mention that Ali threw his Olympic gold medal into the Ohio River. There have been varying reports about Ali losing his medal since. </li>
<li><span class="date">Dec. 30, 1977 :</span> Ali’s daughter, Laila, was born. She is the daughter of Ali and his third wife, Veronica Porsche. Laila went on to become a professional boxer. </li>
<li><span class="date">Feb. 15, 1978 :</span> Ali loses to 1976 Olympic champion Leon Spinks in 15 rounds by a split decision. </li>
<li><span class="date">Sept. 15, 1978 :</span> Ali avenges his loss earlier in the year and became the first three-time world heavyweight champion by defeating Spinks in the Louisiana Superdome. </li>
<li><span class="date">June 27, 1979 :</span> Ali announces his retirement. </li>
<li><span class="date">Oct. 3, 1980 :</span> Ali comes out of retirement to face Larry Holmes in Caesars Palace in Las Vegas. Holmes overmatched Ali, and Ali’s corner stopped the fight after 10 rounds. </li>
<li><span class="date">1984 :</span> Although Ali had shown some signs he might have Parkinson’s disease, a degenerative disease of the brain, leading up to the Holmes fight in 1980, he officially is diagnosed with the ailment. </li>
<li><span class="date">Nov. 19, 1986 :</span> Ali marries his fourth wife, Yolanda “Lonnie” Williams. </li>
<li><span class="date">July 19, 1996 :</span> Ali lights the Olympic cauldron during the Opening Ceremony for the Atlanta 1996 Olympic Games. He also received a replacement gold medal for the one he won in 1960. </li>
<li><span class="date">June 3, 2016 :</span> Ali dies at age 74 in Phoenix, after being hospitalized with respiratory issues.</li>
</ul>
</div>
<div id="bottom">
<div id="bot-content">read more about this incredible human being on his
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Muhammad_Ali" target="_blank">Wikipedia entry</a> .</div>
</div>
</main>
CSS:
body {
background:linear-gradient(260deg, gray, #0f0f0f ,black, gray );
color:white;
}
#title{
width:95vw;
height:80px;
margin:10px;
font-size:30px;
text-align:center;
padding-top:10px;
line-height: 1.6;
padding-bottom:10px;
}
@media only screen and (max-width: 700px) {
#title {
font-size:20px;
overflow:hidden;
}
}
#img-caption{
padding:20px;
text-align:center;
font-size:20px;
line-height: 1.6;
}
@media only screen and (max-width: 700px) {
#img-caption {
font-size:15px;
}
}
#image {
width:700px;
height:auto;
display:block;
margin:auto;
max-width:100%;
border-radius:15px;
}
@media only screen and (max-width: 700px) {
#image {
width:300px;
height:auto;
display:block;
margin:auto;
border-radius:15px;
}
}
#tribute-info{
width:83vw;
height:auto;
margin:auto;
padding-left:5vw;
padding-right:5vw;
padding-top:1vw;
padding-bottom:1vw;
background-color:black;
border-radius:10px;
opacity:0.8;
}
.date{
font-weight:bold;
color:gray;
}
ul li{
margin:40px;
font-size:25px;
}
@media only screen and (max-width: 700px) {
ul li {
font-size:20px;
}
}
#bottom{
width:fill;
height:60px;
margin-top:10px;
padding-left:5vw;
padding-right:5vw;
padding-top:1vw;
padding-bottom:1vw;
background-color:black;
opacity:0.8;
display:block;
border-radius:10px;
}
#bot-content{
text-align:center;
font-size:25px;
padding-top:10px;
padding-bottom:10px;
}
@media only screen and (max-width: 700px) {
#bot-content{
font-size:20px;
overflow:hidden;
}
}
