<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
    <header id="title">
        <h1>Kobe 'Bean' Bryant</h1>
        <h2>The Black Mamba</h2>
        <date>1978-2020</date>
    </header>
	
   	<div id="img-div">
        <img id="image" src="https://i.postimg.cc/g0bbZ4wZ/Sports-Illustrated.jpg" alt="a picture of kobe smiling">
		<figcaption id="img-caption">a rookie kobe smiling </figcaption>
    </div>
    
    

<div id="tribute-info">
        <h3 class="timeline-header">Career Timeline</h3>
	<ul>
    	<li><strong>August 23, 1978</strong>
		    <p>Born in Philadelphia, PA.</p>
		</li>
    	<li><strong>June 26, 1996</strong>
		    <p>Bryant is selected 13th overall in the NBA draft by the Charlotte Hornets. As part of a pre-agreed deal his rights are traded to the Los Angeles Lakers five days later.</p>
		</li>
        <li><strong>November 3, 1996</strong>
            <p>At 18 years and 72 days, Bryant becomes at the time the youngest player ever to play in an NBA game</p>
        </li>
		<li><strong>February 8, 1998</strong>
            <p>Voted in by fans, Bryant becomes the youngest All-Star in league history and scores a team-high 18 points for the Western Conference.</p>
        </li>
		<li><strong>June 14, 2000</strong>
            <p>Returning from an ankle injury suffered in Game 2 of the Finals, Kobe hits three clutch shots in Game 4, including the go-ahead put back layup to seal an overtime win over the Pacers and a 3–1 series lead. Bryant wins his first championship five days later.</p>
        </li>
		<li><strong>2001</strong>
            <p>The Lakers beat the Philadelphia 76ers in five games for a second straight title.</p>
        </li>
		<li><strong>2002</strong>
            <p>L.A. returns to the Finals and completes a three-peat with a clean sweep of the New Jersey Nets.</p>
        </li>
		<li><strong>February 2003</strong>
            <p>Bryant averages 40.6 points per game for the month of February.</p>
        </li>
		<li><strong>2004</strong>
            <p>The Lakers return to the Finals for the fourth time in five years, but fall to the Pistons in five games.</p>
        </li>
		<li><strong>January 22, 2006</strong>
            <p>Bryant scores a career-high 81 points in a win over the Toronto Raptors.</p>
        </li>
		<li><strong>2008</strong>
            <p>Bryant is named league MVP after leading the Lakers to the best record in the West, battling through a serious finger injury in his shooting hand. He becomes the Lakers’ all-time leading scorer in the process. The Lakers fall to the Celtics in the Finals in six games.<p>
        </li>
		<li><strong>June 2008</strong>
            <p>Bryant and Team USA’s “Redeem Team” secure a gold medal in Beijing.</p>
        </li>
		<li><strong>2009</strong>
            <p>The Lakers roll to another NBA championship in five games against the Orlando Magic. Bryant is named Finals MVP.</p>
        </li>
		<li><strong>2010</strong>
            <p>At the end of an epic series, Bryant pockets his fifth championship and second Finals MVP award, getting revenge over the Celtics and helping the Lakers back from a 13-point second-half deficit in Game 7 to seal the title.</p>
        </li>
		<li><strong>April 12, 2013</strong>
            <p>Bryant tears his Achilles tendon in a game against the Warriors</p>
        </li>
		<li><strong>December 14, 2014</strong>
            <p>Bryant takes his place as the NBA’s third all-time leading scorer, surpassing Michael Jordan’s 32,292-point mark.</p>
        </li>
		<li><strong>November 29, 2015</strong>
            <p>Kobe announces his forthcoming retirement at the end of the season.</p>
        </li>
		<li><strong>April 13, 2016</strong>
            <p>In the final game of his career, Bryant scores a remarkable 60 points on the road in Utah, including 23 fourth-quarter points to ice a five-point win over the Jazz.</p>
        </li>
		<li><strong>December 18, 2017</strong>
            <p>In 2017, the Lakers decided to retire both Kobe's Jersey and Kobe became the only man in NBA history to "have two numbers retired by the same team."</p>
        </li>
		<li><strong>March, 2018</strong>
            <p>Bryant won his Academy Award for <i>Dear Basketball,</i> an animated short based around a poem he wrote to announce his retirement. The animated short film also won a Sports Emmy and an Annie Award.</p>
        </li>
		<li><strong>January 26, 2020</strong>
            <p>Kobe, 41 is among nine people who die in a helicopter crash in Calabasas. One of his daughters, 13-year-old Gianna 'Gigi' Bryant, was among those to perish in the crash as well.</p>
        </li>
    </ul>
</div>
	
<footer>
<blockquote cite="https://www.amazon.com/Mamba-Mentality-How-Play/dp/0374201234">   
    <i>I remember when, as a kid, I got my first real basketball.</i><br> <i>I loved the feel of it in my hands. I was so enamored with the ball that I didn’t actually want to bounce it or use it, because I didn’t want to ruin the pebbled leather grains or the perfect grooves. I didn’t want to ruin the feel.</i><br> <i>Those are some of the elements that I loved about the ball, about the game. They were at the core and root of my process and craft.They were the reasons I went through all that I went through, put in all that I put in, dug as deep as I dug.</i><br> <i>It all came back to that special tap, tap, tap that I first grew infatuated with as a boy.</i> 
        
    <p><strong>Kobe Bryant</strong> <cite> Mamba Mentality: How I Play</cite></p>
</blockquote>
    <h3 class="reference">
        To read up more on Kobe Bryant's incredible twenty-year career in the NBA, you should check out his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Kobe_Bryant" target="_blank">Wikipedia Page</a>
    </h3>
</footer>
		
</main>

@import url('https://fonts.googleapis.com/css2?family=Rajdhani&display=swap');

*{
	box-sizing: border-box;
}

a{
	color: #eeeeee;
}

a:visited{
	color: #74638f;
}

a:hover{
	color: hsla(46, 87%, 54%, 0.705);
}

html{
	font-size: 10px;
}

body{
	font-size: 1.5rem;
	margin: 0;
	line-height: 1.5;
	color: #333333;
	font-family: Rajdhani,Helvetica,Sans-serif;
}

#main{
	display: flex;
	flex-direction: column;
	align-content: center;
	background: #eeeeee;
	margin: 30px 8px;
	border-radius: 5px;
}


#title {
  background: #111111;
  color: #cccccc;
  text-align: center;
  padding: 70px;
  border-bottom: solid 5px hsla(46, 87%, 54%, 0.705);
  text-transform: uppercase;
  text-shadow: 1px 1px 2px hsla(46, 87%, 54%, 0.705);
  }


#title header{
	display: table-cell;
	vertical-align: middle;
}

#img-div{
	background-color: white;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

#img-caption{
	background-color: #eeeeee;
	font-size: 14px;
	margin: 0;
	padding: 4px;
	text-align: center;
}

#image {
	max-width: 50%;
	display: block;
	height: auto;
	border-radius: 4px;
	border-bottom: 4px solid hsla(46, 87%, 54%, 0.705);
	margin: 0 auto;
}

h1{
  font-weight: 700;
  font-size: 4.5em;
  line-height: 50px;
  letter-spacing: 15px;
  color: #white;
} 


h2 { 
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 10px;
	margin-top: 15px;
} 

date{
	display: block;
/* 	font-size: 2em; */
	font-weight: bold;
	padding: 15px;
} 
	

#tribute-info{
	display: flex;
	max-width: 950px;
	margin:  15px auto;
	flex-direction: column;
	align-items: center;
	font-size: 1.4em;
	padding: 15px;
}


.timeline-header{
	background-color: #eeeeee;
	font-size: 1.4em;
	margin: 0px;
	text-transform: uppercase;
}

strong{
	text-transform: uppercase;
}

ul{
	list-style: none;
}


footer{
	background-color:#111111;
	border-top:solid 5px hsla(46, 87%, 54%, 0.705);
}

footer *{
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer > blockquote{
	background-color: hsla(46, 87%, 54%, 0.705);
	padding: 10px;
	max-width: 700px;
    margin: 5vh auto 5vh auto;
    border: solid hsla(46, 87%, 60%);
	border-radius: 10px;
	color: black;
	line-height: 1.3;
}

.reference{
	color: hsla(46, 87%, 54%, 0.705);
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
	
	@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}
	
@media (max-width: 460px) {
  #tribute-info {
    font-size: 1.4rem;
  }
}
	
	@media (max-width: 460px) {
		footer{
			font-size: 1.4rem;
			margin: 0;
		}
	}