Dyrits/--Transitions - 20,000 Leagues Under the Sea.md

## --Transitions - 20,000 Leagues Under the Sea.md

      
    Raw
  

              --Transitions - 20,000 Leagues Under the Sea.md
            
          
    Transitions - 20,000 Leagues Under the Sea

In this project you will follow step-by-step instructions to add animations to an existing static web page. The web page is an online reader; it presents the full text of the book “20,000 Leagues Under the Sea” by Jules Verne.
The page for the first chapter is mostly complete. There are a few fancy features:

When you hover over the sidebar on the left, a menu opens which contains the Table of Contents.
When you hover over a highlighted word in the text, a definition appears. See the words “phosphorescent” and “locomotion”.
When you hover over the semi-transparent buttons at the bottom of the page, they turn opaque.
When you hover over any link, it changes color.

These interactions add a level of refinement to an otherwise static page. Your job will be to refine them even more. Currently, all these changes happen in an instant. Add transitions to make the changes smooth.
The website’s existing index.html and style.css files are displayed in the text editor.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>20,000 Leagues Under The Sea</title>
  <link rel="stylesheet" type="text/css" href="resources/css/reset.css">
  <link rel="stylesheet" type="text/css" href="resources/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700,700i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,500,700" rel="stylesheet">
</head>
<body>

  <!-- Navigation Bar -->

  <nav>
    <div class="hover-content">
      <h2>Contents</h2>
      <h3>PART ONE</h3>
      <ol>
        <li><a href="#" class="active">A SHIFTING REEF</a></li>
        <li><a href="#">PRO AND CON</a></li>
        <li><a href="#">I FORM MY RESOLUTION</a></li>
        <li><a href="#">NED LAND</a></li>
        <li><a href="#">AT A VENTURE</a></li>
        <li><a href="#">AT FULL STEAM</a></li>
      </ol>
    </div>
    <div>
      <img src="https://content.codecademy.com/courses/freelance-1/unit-6/triangle.png">
    </div>
  </nav>

  <!-- Header -->

  <header class="banner">
    <h1>Twenty Thousand Leagues Under the Sea</h1>
    <em>by</em>
    <h2>Jules Verne</h2>
  </header>

  <!-- Book Content -->

  <div class="book-content">
    <h3>Part One</h3>
    <div class="chapter">
      <span class="number">CHAPTER I</span>
      <span class="name">A SHIFTING REEF</span>
    </div>
    <div class="prose">The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.</div>

    <div class="prose">For some time past vessels had been met by “an enormous thing,” a long object, spindle-shaped, occasionally
    <div class="definable">
      <span class="word">phosphorescent</span><!-- Trailing comments prevents indentation whitespace from displaying between divs.
     --><div class="definition-container">
        <h4>phosphorescent</h4>
        <span class="information">adjective | phos·pho·res·cent</span>
        <ul class="definitions">
          <li>Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons) and continues for a noticeable time after these radiations have stopped</li>
          <li>Exhibiting an enduring luminescence without sensible heat</li>
        </ul>
      </div><!--
 --></div>, and infinitely larger and more rapid in its movements than a whale.</div>

    <div class="prose">The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of
    <div class="definable">
      <span class="word">locomotion</span><!--
     --><div class="definition-container">
        <h4>locomotion</h4>
        <span class="information">noun | lo·co·mo·tion</span>
        <ol class="definitions">
          <li>movement or the ability to move from one place to another</li>
        </ol>
      </div><!--
 --></div>,
    and the peculiar life with which it seemed endowed. If it was a whale, it surpassed in size all those hitherto classified in science. Taking into consideration the mean of observations made at divers times—rejecting the timid estimate of those who assigned to this object a length of two hundred feet, equally with the exaggerated opinions which set it down as a mile in width and three in length—we might fairly conclude that this mysterious being surpassed greatly all dimensions admitted by the learned ones of the day, if it existed at all. And that it DID exist was an undeniable fact; and, with that tendency which disposes the human mind in favour of the marvellous, we can understand the excitement produced in the entire world by this supernatural apparition. As to classing it in the list of fables, the idea was out of the question.</div>

    <div class="prose">On the 20th of July, 1866, the steamer Governor Higginson, of the Calcutta and Burnach Steam Navigation Company, had met this moving mass five miles off the east coast of Australia. Captain Baker thought at first that he was in the presence of an unknown sandbank; he even prepared to determine its exact position when two columns of water, projected by the mysterious object, shot with a hissing noise a hundred and fifty feet up into the air. Now, unless the sandbank had been submitted to the intermittent eruption of a geyser, the Governor Higginson had to do neither more nor less than with an aquatic mammal, unknown till then, which threw up from its blow-holes columns of water mixed with air and vapour.</div>

    <div class="navigation-buttons">
      <a href="#" class="button"><img src="https://content.codecademy.com/courses/freelance-1/unit-6/left_arrow.svg"><span class="action">Back</span></a>
      <a href="#" class="button"><span class="action">Next</span><img src="https://content.codecademy.com/courses/freelance-1/unit-6/right_arrow.svg"></a>
    </div>
  </div>
</body>
</html>

## style.css
/* Universal Styles */

html {
  font-size: 16px;
}

body {
  min-width: 475px;
  font-family: "Cormorant Garamond", serif;
}

@media only screen and (max-width: 810px) {
  html {
    font-size: 14px;
  }
}


@media only screen and (max-width: 540px) {
  html {
    font-size: 12px;
  }
}

/* Navigation Bar */

nav {
  position: fixed;
  z-index: 5;
  left: -17.8em;
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 5rem;
  padding-right: 2rem;
  background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png") center center repeat;
  font-family: "Proza Libre", serif;
  font-size: 18px;
  line-height: 2.2;
  font-weight: bold;
  color: #142033;
  transition: left 0.5s ease-in-out;
}

nav:hover {
  left: 0;
}

nav .hover-content {
  margin-right: 3em;
}

nav h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6em;
  font-weight: bold;
  color: #639eff;
}

nav h3 {
  padding-bottom: 1.1em;
}

nav ol {
  list-style: upper-roman outside;
}

nav a {
  text-decoration: none;
  color: inherit;
  transition: color 0.5s;
}

nav a:hover,
nav a.active {
  color: #639eff;
}

/* Header */

header {
  padding: 3.125rem 13rem;
  background-color: #142033;
  text-align: center;
  font-weight: bold;
  line-height: 2.1;
  color: #b3d0ff;
}

header h1 {
  font-size: 6rem;
  line-height: 1;
  font-weight: 500;
  color: #66a1ff;
}

header em {
  font-size: 1.5rem;
  font-style: italic;
}

header h2 {
  font-size: 3rem;
}

@media only screen and (max-width: 810px) {
  header {
    padding: 3.125rem 8rem 3.125rem 10rem;
  }

  header h1 {
    font-size: 4rem;
  }

  header h2 {
    font-size: 2rem;
  }
}

/* Book Content */

.book-content {
  padding: 4.75rem 20%;
  background-color: #f2f7ff;
  font-family: "Proza Libre", sans-serif;
  font-size: 1.5rem;
  line-height: 2;
  color: #4a4a4a;
  cursor: default;
}

.book-content h3 {
  text-align: center;
  font-size: 3rem;
  line-height: 2.1;
  font-weight: bold;
  color: #142033;
}

.chapter {
  color: #639eff;
}

.chapter .number {
  display: block;
  font-size: 1.25rem;
}

.chapter .name {
  display: block;
  font-size: 2.25rem;
}

.book-content .prose {
  margin-bottom: 4.75rem;
}

@media only screen and (max-width: 810px) {
  .book-content {
    padding-right: 10%;
  }
}

@media only screen and (max-width: 540px) {
  .book-content {
    padding-right: 1%;
  }
}

/* Word Definitions */

.definable {
  display: inline;
}

.definable .word {
  color: #639eff;
  transition: color 0.5s;
}

.definable .word:hover {
  color: #306acc;
}

.definable .definition-container {
  position: fixed;
  z-index: 10;
  top: -100%;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 4rem 2rem 4rem;
  background-color: #ffffff;
  box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);
  opacity: 0;
  font-family: "Proza Libre", sans-serif;
  font-size: 1.5rem;
  transition: top 0.5s linear, opacity 0.5 linear;
}

.definable:hover .definition-container {
  top: 0;
  opacity: 1;
}

.definition-container h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 3rem;
  font-weight: bold;
  line-height: 2.1;
  color: #66a1ff;
}

.definition-container .information {
  display: block;
  line-height: 2.5;
  color: #9b9b9b;
}

.definition-container .definitions {
  list-style: inside decimal;
  line-height: 1.7;
  color: #4a4a4a;
}

/* Chapter Navigation Buttons */

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 13rem;
  padding: 0 2rem;
  background-color: #639eff;
  opacity: 0.3;
  font-size: 3rem;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  transition: opacity 0.5s;
}

.button:hover {
  opacity: 1;
}

@media only screen and (max-width: 930px) {
  .button {
    width: auto;
    padding: 1rem 2rem;
  }

  .button .action {
    display: none;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>20,000 Leagues Under The Sea</title>
	<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
	<link rel="stylesheet" type="text/css" href="resources/css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700,700i" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,500,700" rel="stylesheet">
	</head>
	<body>

	<!-- Navigation Bar -->

	<nav>
	<div class="hover-content">
	<h2>Contents</h2>
	<h3>PART ONE</h3>
	<ol>
	<li><a href="#" class="active">A SHIFTING REEF</a></li>
	<li><a href="#">PRO AND CON</a></li>
	<li><a href="#">I FORM MY RESOLUTION</a></li>
	<li><a href="#">NED LAND</a></li>
	<li><a href="#">AT A VENTURE</a></li>
	<li><a href="#">AT FULL STEAM</a></li>
	</ol>
	</div>
	<div>
	<img src="https://content.codecademy.com/courses/freelance-1/unit-6/triangle.png">
	</div>
	</nav>

	<!-- Header -->

	<header class="banner">
	<h1>Twenty Thousand Leagues Under the Sea</h1>
	<em>by</em>
	<h2>Jules Verne</h2>
	</header>

	<!-- Book Content -->

	<div class="book-content">
	<h3>Part One</h3>
	<div class="chapter">
	<span class="number">CHAPTER I</span>
	<span class="name">A SHIFTING REEF</span>
	</div>
	<div class="prose">The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.</div>

	<div class="prose">For some time past vessels had been met by “an enormous thing,” a long object, spindle-shaped, occasionally
	<div class="definable">
	<span class="word">phosphorescent</span><!-- Trailing comments prevents indentation whitespace from displaying between divs.
	--><div class="definition-container">
	<h4>phosphorescent</h4>
	<span class="information">adjective \| phos·pho·res·cent</span>
	<ul class="definitions">
	<li>Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons) and continues for a noticeable time after these radiations have stopped</li>
	<li>Exhibiting an enduring luminescence without sensible heat</li>
	</ul>
	</div><!--
	--></div>, and infinitely larger and more rapid in its movements than a whale.</div>

	<div class="prose">The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of
	<div class="definable">
	<span class="word">locomotion</span><!--
	--><div class="definition-container">
	<h4>locomotion</h4>
	<span class="information">noun \| lo·co·mo·tion</span>
	<ol class="definitions">
	<li>movement or the ability to move from one place to another</li>
	</ol>
	</div><!--
	--></div>,
	and the peculiar life with which it seemed endowed. If it was a whale, it surpassed in size all those hitherto classified in science. Taking into consideration the mean of observations made at divers times—rejecting the timid estimate of those who assigned to this object a length of two hundred feet, equally with the exaggerated opinions which set it down as a mile in width and three in length—we might fairly conclude that this mysterious being surpassed greatly all dimensions admitted by the learned ones of the day, if it existed at all. And that it DID exist was an undeniable fact; and, with that tendency which disposes the human mind in favour of the marvellous, we can understand the excitement produced in the entire world by this supernatural apparition. As to classing it in the list of fables, the idea was out of the question.</div>

	<div class="prose">On the 20th of July, 1866, the steamer Governor Higginson, of the Calcutta and Burnach Steam Navigation Company, had met this moving mass five miles off the east coast of Australia. Captain Baker thought at first that he was in the presence of an unknown sandbank; he even prepared to determine its exact position when two columns of water, projected by the mysterious object, shot with a hissing noise a hundred and fifty feet up into the air. Now, unless the sandbank had been submitted to the intermittent eruption of a geyser, the Governor Higginson had to do neither more nor less than with an aquatic mammal, unknown till then, which threw up from its blow-holes columns of water mixed with air and vapour.</div>

	<div class="navigation-buttons">
	<a href="#" class="button"><img src="https://content.codecademy.com/courses/freelance-1/unit-6/left_arrow.svg"><span class="action">Back</span></a>
	<a href="#" class="button"><span class="action">Next</span><img src="https://content.codecademy.com/courses/freelance-1/unit-6/right_arrow.svg"></a>
	</div>
	</div>
	</body>
	</html>
	/* Universal Styles */

	html {
	font-size: 16px;
	}

	body {
	min-width: 475px;
	font-family: "Cormorant Garamond", serif;
	}

	@media only screen and (max-width: 810px) {
	html {
	font-size: 14px;
	}
	}


	@media only screen and (max-width: 540px) {
	html {
	font-size: 12px;
	}
	}

	/* Navigation Bar */

	nav {
	position: fixed;
	z-index: 5;
	left: -17.8em;
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 5rem;
	padding-right: 2rem;
	background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png") center center repeat;
	font-family: "Proza Libre", serif;
	font-size: 18px;
	line-height: 2.2;
	font-weight: bold;
	color: #142033;
	transition: left 0.5s ease-in-out;
	}

	nav:hover {
	left: 0;
	}

	nav .hover-content {
	margin-right: 3em;
	}

	nav h2 {
	font-family: "Cormorant Garamond", serif;
	font-size: 2.6em;
	font-weight: bold;
	color: #639eff;
	}

	nav h3 {
	padding-bottom: 1.1em;
	}

	nav ol {
	list-style: upper-roman outside;
	}

	nav a {
	text-decoration: none;
	color: inherit;
	transition: color 0.5s;
	}

	nav a:hover,
	nav a.active {
	color: #639eff;
	}

	/* Header */

	header {
	padding: 3.125rem 13rem;
	background-color: #142033;
	text-align: center;
	font-weight: bold;
	line-height: 2.1;
	color: #b3d0ff;
	}

	header h1 {
	font-size: 6rem;
	line-height: 1;
	font-weight: 500;
	color: #66a1ff;
	}

	header em {
	font-size: 1.5rem;
	font-style: italic;
	}

	header h2 {
	font-size: 3rem;
	}

	@media only screen and (max-width: 810px) {
	header {
	padding: 3.125rem 8rem 3.125rem 10rem;
	}

	header h1 {
	font-size: 4rem;
	}

	header h2 {
	font-size: 2rem;
	}
	}

	/* Book Content */

	.book-content {
	padding: 4.75rem 20%;
	background-color: #f2f7ff;
	font-family: "Proza Libre", sans-serif;
	font-size: 1.5rem;
	line-height: 2;
	color: #4a4a4a;
	cursor: default;
	}

	.book-content h3 {
	text-align: center;
	font-size: 3rem;
	line-height: 2.1;
	font-weight: bold;
	color: #142033;
	}

	.chapter {
	color: #639eff;
	}

	.chapter .number {
	display: block;
	font-size: 1.25rem;
	}

	.chapter .name {
	display: block;
	font-size: 2.25rem;
	}

	.book-content .prose {
	margin-bottom: 4.75rem;
	}

	@media only screen and (max-width: 810px) {
	.book-content {
	padding-right: 10%;
	}
	}

	@media only screen and (max-width: 540px) {
	.book-content {
	padding-right: 1%;
	}
	}

	/* Word Definitions */

	.definable {
	display: inline;
	}

	.definable .word {
	color: #639eff;
	transition: color 0.5s;
	}

	.definable .word:hover {
	color: #306acc;
	}

	.definable .definition-container {
	position: fixed;
	z-index: 10;
	top: -100%;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 4rem 2rem 4rem;
	background-color: #ffffff;
	box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);
	opacity: 0;
	font-family: "Proza Libre", sans-serif;
	font-size: 1.5rem;
	transition: top 0.5s linear, opacity 0.5 linear;
	}

	.definable:hover .definition-container {
	top: 0;
	opacity: 1;
	}

	.definition-container h4 {
	font-family: "Cormorant Garamond", serif;
	font-size: 3rem;
	font-weight: bold;
	line-height: 2.1;
	color: #66a1ff;
	}

	.definition-container .information {
	display: block;
	line-height: 2.5;
	color: #9b9b9b;
	}

	.definition-container .definitions {
	list-style: inside decimal;
	line-height: 1.7;
	color: #4a4a4a;
	}

	/* Chapter Navigation Buttons */

	.navigation-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.button {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: 13rem;
	padding: 0 2rem;
	background-color: #639eff;
	opacity: 0.3;
	font-size: 3rem;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
	transition: opacity 0.5s;
	}

	.button:hover {
	opacity: 1;
	}

	@media only screen and (max-width: 930px) {
	.button {
	width: auto;
	padding: 1rem 2rem;
	}

	.button .action {
	display: none;
	}
	}