abetoots/index.html

## index.html
<html>

<head>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
  <title> Tribute Page Project by Abe</title>
</head>

<body>
  <div id="main">
    <h1 id="title">Robin Williams</h1>
    <div> A true doctor with laughter as his best medicine</div>
    <div id="img-div">
      <img id="image" src="http://www.gstatic.com/tv/thumb/persons/55875/55875_v9_ba.jpg" alt="Robin Williams Tribute Image">
      <p id="img-caption">American actor and comedian Robin Williams (1951–2014) was featured in many feature films and television series throughout his career.</p>
    </div>
    <div id="tribute-info">
      <h2 class="timeline">A timeline of Robin William's Life</h2>
      <p>Robin McLaurin Williams was born on Saturday, July 21st, 1951, in Chicago, Illinois, a great-great-grandson of Mississippi Governor and Senator, Anselm J. McLaurin.
        <br><br> His mother, Laurie McLaurin (née Janin), was a former model from Mississippi, and his father, Robert Fitzgerald Williams, was a Ford Motor Company executive from Indiana. Williams had English, German, French, Welsh, Irish, and Scottish
        ancestry.
        <br><br> Robin briefly studied political science at Claremont Men's College and theater at College of Marin before enrolling at The Juilliard School to focus on theater. After leaving Juilliard, he performed in nightclubs where he was discovered
        for the role of "Mork, from Ork", in an episode of Happy Days (1974).
        <br><br> The episode, Happy Days: My Favorite Orkan (1978), led to his famous spin-off weekly TV series, Mork & Mindy (1978). He made his feature starring debut playing the title role in Popeye (1980), directed by Robert Altman.
        <br><br> Williams' continuous comedies and wild comic talents involved a great deal of improvisation, following in the footsteps of his idol Jonathan Winters. Williams also proved to be an effective dramatic actor, receiving Academy Award nominations
        for Best Actor in a Leading Role in Good Morning, Vietnam (1987), Dead Poets Society (1989), and The Fisher King (1991), before winning the Academy Award for Best Actor in a Supporting Role in Good Will Hunting (1997).
        <br><br> During the 1990s, Williams became a beloved hero to children the world over for his roles in a string of hit family-oriented films, including Hook (1991), FernGully: The Last Rainforest (1992), Aladdin (1992), Mrs. Doubtfire (1993), Jumanji
        (1995), Flubber (1997), and Bicentennial Man (1999). He continued entertaining children and families into the 21st century with his work in Robots (2005), Happy Feet (2006), Night at the Museum (2006), Night at the Museum: Battle of the Smithsonian
        (2009), Happy Feet Two (2011), and Night at the Museum: Secret of the Tomb (2014). Other more adult-oriented films for which Williams received acclaim include The World According to Garp (1982), Moscow on the Hudson (1984), Awakenings (1990),
        The Birdcage (1996), Insomnia (2002), One Hour Photo (2002), World's Greatest Dad (2009), and Boulevard (2014).
        <br><br> On Monday, August 11th, 2014, Robin Williams was found dead at his home in Tiburon, California USA, the victim of an apparent suicide, according to the Marin County Sheriff's Office. A 911 call was received at 11:55 a.m. PDT, firefighters
        and paramedics arrived at his home at 12:00 p.m. PDT, and he was pronounced dead at 12:02 p.m. PDT.
      </p>
      <div class="italics"> - IMDb Mini Biography By: Ray Hamel and TrekFan1 </div>
    </div>
    <h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Robin_Williams" id="tribute-link" target="_blank">Wikipedia Entry</a>.</h3>
  </div>
</body>

</html>

## script.babel
// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

/***********
INSTRUCTIONS:
  - Select the project you would
    like to complete from the dropdown
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank
    pen.
  - Click the "TESTS" button to see
    the individual test cases.
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go
    from red to green.
  - As you start to build out your
    project, when tests are failing,
    you should get helpful errors
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.

## style.css
*{
  margin: 0;
  padding: 0;
}

:root {
  --mainColor: #ff9800;
}

html, body{
  font-family: Roboto, sans-serif;
  text-align: center;
  min-width: 300px;
  color: white;
  margin: 3px;
  padding: 2px;
  box-sizing: border-box;
}

#main{
  margin: 25px auto;
  border-radius: 5px;
  background-image: linear-gradient(
    to top left,
    #1D1E22,
    #444444 90%
  )
}

#title{
  padding: 30px;
  font-family: "Rock Salt", sans-serif;
}

#image{
  display: block;
  max-width: 100%;
  max-height: 100vh;
  padding: 15px;
  margin: 0 auto;
}

#img-div{
  margin: auto;
  margin-top: 20px;
  border-radius: 5px;
  width: 90%;
  background-color: #B8B8B8;
  padding: 10px 30px;
}

#img-caption{
  color: black;
}

.timeline{
  margin-top: 120px;
  margin-bottom:30px;
}

#tribute-info{
  line-height: 30px;
  text-align: left;
  width: 500px;
  margin: auto;
}

.italics{
  margin-top: 30px;
  padding-left: 40px;
  font-style: italic;
}

h3{
  margin-top: 40px;
  padding-bottom: 40px;
}

a {
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 4px;
  color: white;
  text-decoration: none;
  transition: background-size .2s;
}

a:hover {
  background-size: 4px 50px;
}

## tribute-page-project.markdown

      
    Raw
  

              tribute-page-project.markdown
            
          
    Tribute Page Project

A Pen by Abe Suni M. Caymo on CodePen.
License.
	<html>

	<head>
	<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
	<title> Tribute Page Project by Abe</title>
	</head>

	<body>
	<div id="main">
	<h1 id="title">Robin Williams</h1>
	<div> A true doctor with laughter as his best medicine</div>
	<div id="img-div">
	<img id="image" src="http://www.gstatic.com/tv/thumb/persons/55875/55875_v9_ba.jpg" alt="Robin Williams Tribute Image">
	<p id="img-caption">American actor and comedian Robin Williams (1951–2014) was featured in many feature films and television series throughout his career.</p>
	</div>
	<div id="tribute-info">
	<h2 class="timeline">A timeline of Robin William's Life</h2>
	<p>Robin McLaurin Williams was born on Saturday, July 21st, 1951, in Chicago, Illinois, a great-great-grandson of Mississippi Governor and Senator, Anselm J. McLaurin.
	<br><br> His mother, Laurie McLaurin (née Janin), was a former model from Mississippi, and his father, Robert Fitzgerald Williams, was a Ford Motor Company executive from Indiana. Williams had English, German, French, Welsh, Irish, and Scottish
	ancestry.
	<br><br> Robin briefly studied political science at Claremont Men's College and theater at College of Marin before enrolling at The Juilliard School to focus on theater. After leaving Juilliard, he performed in nightclubs where he was discovered
	for the role of "Mork, from Ork", in an episode of Happy Days (1974).
	<br><br> The episode, Happy Days: My Favorite Orkan (1978), led to his famous spin-off weekly TV series, Mork & Mindy (1978). He made his feature starring debut playing the title role in Popeye (1980), directed by Robert Altman.
	<br><br> Williams' continuous comedies and wild comic talents involved a great deal of improvisation, following in the footsteps of his idol Jonathan Winters. Williams also proved to be an effective dramatic actor, receiving Academy Award nominations
	for Best Actor in a Leading Role in Good Morning, Vietnam (1987), Dead Poets Society (1989), and The Fisher King (1991), before winning the Academy Award for Best Actor in a Supporting Role in Good Will Hunting (1997).
	<br><br> During the 1990s, Williams became a beloved hero to children the world over for his roles in a string of hit family-oriented films, including Hook (1991), FernGully: The Last Rainforest (1992), Aladdin (1992), Mrs. Doubtfire (1993), Jumanji
	(1995), Flubber (1997), and Bicentennial Man (1999). He continued entertaining children and families into the 21st century with his work in Robots (2005), Happy Feet (2006), Night at the Museum (2006), Night at the Museum: Battle of the Smithsonian
	(2009), Happy Feet Two (2011), and Night at the Museum: Secret of the Tomb (2014). Other more adult-oriented films for which Williams received acclaim include The World According to Garp (1982), Moscow on the Hudson (1984), Awakenings (1990),
	The Birdcage (1996), Insomnia (2002), One Hour Photo (2002), World's Greatest Dad (2009), and Boulevard (2014).
	<br><br> On Monday, August 11th, 2014, Robin Williams was found dead at his home in Tiburon, California USA, the victim of an apparent suicide, according to the Marin County Sheriff's Office. A 911 call was received at 11:55 a.m. PDT, firefighters
	and paramedics arrived at his home at 12:00 p.m. PDT, and he was pronounced dead at 12:02 p.m. PDT.
	</p>
	<div class="italics"> - IMDb Mini Biography By: Ray Hamel and TrekFan1 </div>
	</div>
	<h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Robin_Williams" id="tribute-link" target="_blank">Wikipedia Entry</a>.</h3>
	</div>
	</body>

	</html>
	// !! IMPORTANT README:

	// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

	/***********
	INSTRUCTIONS:
	- Select the project you would
	like to complete from the dropdown
	menu.
	- Click the "RUN TESTS" button to
	run the tests against the blank
	pen.
	- Click the "TESTS" button to see
	the individual test cases.
	(should all be failing at first)
	- Start coding! As you fulfill each
	test case, you will see them go
	from red to green.
	- As you start to build out your
	project, when tests are failing,
	you should get helpful errors
	along the way!
	************/

	// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

	// Once you have read the above messages, you can delete all comments.
	*{
	margin: 0;
	padding: 0;
	}

	:root {
	--mainColor: #ff9800;
	}

	html, body{
	font-family: Roboto, sans-serif;
	text-align: center;
	min-width: 300px;
	color: white;
	margin: 3px;
	padding: 2px;
	box-sizing: border-box;
	}

	#main{
	margin: 25px auto;
	border-radius: 5px;
	background-image: linear-gradient(
	to top left,
	#1D1E22,
	#444444 90%
	)
	}

	#title{
	padding: 30px;
	font-family: "Rock Salt", sans-serif;
	}

	#image{
	display: block;
	max-width: 100%;
	max-height: 100vh;
	padding: 15px;
	margin: 0 auto;
	}

	#img-div{
	margin: auto;
	margin-top: 20px;
	border-radius: 5px;
	width: 90%;
	background-color: #B8B8B8;
	padding: 10px 30px;
	}

	#img-caption{
	color: black;
	}

	.timeline{
	margin-top: 120px;
	margin-bottom:30px;
	}

	#tribute-info{
	line-height: 30px;
	text-align: left;
	width: 500px;
	margin: auto;
	}

	.italics{
	margin-top: 30px;
	padding-left: 40px;
	font-style: italic;
	}

	h3{
	margin-top: 40px;
	padding-bottom: 40px;
	}

	a {
	background:
	linear-gradient(
	to bottom, var(--mainColor) 0%,
	var(--mainColor) 100%
	);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 4px 4px;
	color: white;
	text-decoration: none;
	transition: background-size .2s;
	}

	a:hover {
	background-size: 4px 50px;
	}