Tribute Page -- freecodecamp.org

index.html

<main id="main">

  <h1 id="title">Carl Sagan</h1>

  <p id="captiontop">Astronomer, cosmologist, astrophysicist, astrobiologist, author, science popularizer, and science communicator</p>

  <figure id="img-div">

    <img id="image" src="https://www.ngenespanol.com/wp-content/uploads/2018/08/10-frases-de-Carl-Sagan-sobre-el-conocimiento-cient%C3%ADfico.jpg" alt="Carl Sagan as shown in the intro of his well known series Cosmos: A Spacetime Odyssey" />
      <figcaption id="img-caption">Carl Edward Sagan Sagan advocated scientific skeptical inquiry and the scientific method, pioneered exobiology and promoted the Search for Extra-Terrestrial Intelligence (<a id="seti" href="https://www.seti.org/" target="_blank">SETI</a>).
  </figcaption>

  </figure>

  <section id=tribute-info>

    <h2>Summary</h2>

    <p><b>Carl Edward Sagan</b> (<i>/ˈseɪɡən/; November 9, 1934 – December 20, 1996</i>) was an American astronomer, cosmologist, astrophysicist, astrobiologist, author, science popularizer, and science communicator in astronomy and other natural sciences. He is best known as a science popularizer and communicator. His best known scientific contribution is research on extraterrestrial life, including experimental demonstration of the production of amino acids from basic chemicals by radiation.</p>

    <p>Sagan assembled the first physical messages sent into space: the Pioneer plaque and the Voyager Golden Record, universal messages that could potentially be understood by any extraterrestrial intelligence that might find them. Sagan argued the now
      accepted hypothesis that the high surface temperatures of Venus can be attributed to and calculated using the greenhouse effect.</p>

    <p>Sagan published more than 600 scientific papers and articles and was author, co-author or editor of more than 20 books. He wrote many popular science books, such as The Dragons of Eden, Broca's Brain and Pale Blue Dot, and narrated and co-wrote the
      award-winning 1980 television series <b>Cosmos: A Personal Voyage</b>. The most widely watched series in the history of American public television, Cosmos has been seen by at least <i>500 million people across 60 different countries</i>. The book
      Cosmos was published to accompany the series. He also wrote the science fiction novel Contact, the basis for a 1997 film of the same name. His papers, <i>containing 595,000 items</i>, are archived at
      <a href="https://www.google.com/maps/place/Library+of+Congress/@38.888684,-77.004719,15z/data=!4m2!3m1!1s0x0:0x46cbb296f4de3eec?sa=X&ved=2ahUKEwimko7E3O3mAhURJrkGHZwEBLIQ_BIwJ3oECAgQCg" target="_blank">The Library of Congress</a>.
    </p>

    <h3 id="footer"><center>You can find out more about Carl Sagan's incredible collaborations to science in his
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Carl_Sagan" target="_blank">Wiki Page</></a>.
    </h3>

  </section>

  </div>

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

style.css

body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: #edeaea;
  line-height: 1.2;
  text-align: justify;
  background-color: #333;
}

h1 {
  font-size: 42px;
  font-style: bold;  
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
}

#captiontop {
  text-align: center;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.7;
}

#img-div {
  padding: 20px;
}

#img-caption {
  text-align: center;
  font-size: 12px;
  font-style: italic;
} 

h2 {
  font-size: 30px;
}

h3 {
  font-size: 16px;
}

a {
  color: #DDCA7E;
}

a:visited {
  color: #477ca7;
}

#main {
  margin: 30px 60px;
  padding: 20px;
  border-radius: 5px;
}

tribute-page-freecodecamp-org.markdown

Tribute Page -- freecodecamp.org

Tribute page that fulfills the below user stories: User Story #1: My tribute page should have an element with a corresponding id="main", which contains all other elements.

User Story #2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").

User Story #3: I should see a div element with a corresponding id="img-div".

User Story #4: Within the img-div element, I should see an img element with a corresponding id="image".

User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div.

User Story #6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.

User Story #7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank").

User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.

User Story #9: The img element should be centered within its parent element.

A Pen by Juanchax on CodePen.

License.