<head>
    <link rel="stylesheet" href="tribute_page.css">
    <title>Tribute Page</title>
</head>
<body>
    <div id="main">
        <h1 id="title">Dr. Norman Borlaug</h1>
        <figure id="img-div">
            <img
            id="image"
            src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"
            alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"
          />
          <figcaption id="img-caption">
            Dr. Norman Borlaug, third from the left, trains biologists in Mexico on
            how to increase wheat yields - part of his life-long war on hunger.
          </figcaption>
        </figure>
        <div id="tribute-info">
            <h3>Here's a time line of Dr. Borlaug's life:</h3>
            <ul>
                <li>1914 - Born in Cresco, Iowa</li>
                <li>1933 - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
                <li>1935 - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
                <li><a href="http://wikipedia.org" target="_blank" id="tribute-link">Learn more</a></li>
            </ul>
        </div>
    </div>
</body>
html {
    font-size: 10px;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
      'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    text-align: center;
    color: #333;
    margin: 0;
  }
  
  h1 {
    font-size: 4rem;
    margin-bottom: 0;
  }
  
  @media (max-width: 460px) {
    h1 {
      font-size: 3.5rem;
      line-height: 1.2;
    }
  }
  
  h2 {
    font-size: 3.25rem;
  }
  
  a {
    color: #477ca7;
  }
  
  a:visited {
    color: #602ab8;
  }
  
  #main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
  }
  
  @media (max-width: 460px) {
    #main {
      margin: 0;
    }
  }
  
  img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
  }
  
  #img-div {
    background: white;
    padding: 10px;
    margin: 0;
  }
  
  #img-caption {
    margin: 15px 0 5px 0;
  }
  
  @media (max-width: 460px) {
    #img-caption {
      font-size: 1.4rem;
    }
  }
  
  ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
  }
  
  li {
    margin: 16px 0;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.