Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <main id="main">
    <div id="title">
      <h1>Dr. Jonas E. Salk</h1>
      <h2>A benefactor of mankind</h2>
    </div>
    <div class="container">
      <div id="img-div">
        <img id="image" src="https://www.thenewatlantis.com/wp-content/uploads/legacy/20181214_TNA56Valiunasbanner.jpg" alt="child being vaccinated" />
        <div id="img-caption">
          Dr. Salk vaccinating a young patient in the 1950s.
        </div>
      </div>

      <section id="tribute-info" tabindex="0" aria-label="Timeline">
        <div class="first"></div>
        <h3>Here's a timeline of Dr. Jonas Salk's life and achievements</h3>
        <ul>
          <li>
            <strong>1914</strong> - Born in New York City October 28, 1914.
          </li>
          <li>
            <strong>1927</strong> - Entered Townsend Harris High School, a
            public school for intellectually gifted students.
          </li>
          <li>
            <strong>1934</strong> - Earned a Bachelor of Science degree in
            chemistry from City College of New York.
          </li>
          <li>
            <strong>1939</strong> - Earned his M.D. from New York University.
            Marries his first wife, Donna Lindsay.
          </li>
          <li>
            <strong>1941</strong> - During postgraduate work in virology, Salk
            chose a two-month elective to work in the Thomas Francis'
            laboratory at the University of Michigan.
          </li>
          <li>
            <strong>1942</strong> - Studied viral immunology from the National
            Foundation for Infantile Paralysis with a $2,100 fellowship, and a
            draft deferment as an influenza researcher essential to the
            national defense, Salk headed off to Ann Arbor, where Francis had
            been appointed by the secretary of war as chief of the Commission
            on Influenza.
          </li>
          <li>
            <strong>1947</strong> - Granted his own lab as director of the
            Virus Research Laboratory at the University of Pittsburgh School
            of Medicine. He devoted his efforts to creating a first-class
            research environment and to publishing scientific papers on a
            variety of topics, including poliovirus. His work drew the
            attention of the National Foundation for Infantile Paralysis (now
            the March of Dimes), and he was invited to participate in a
            research program sponsored by the foundation. He agreed and took
            up his assignment of typing polioviruses.
          </li>
          <li>
            <strong>1952</strong> - Salk and his team Julius Youngner, Byron
            Bennett, L. James Lewis, and Lorraine Friedman developed first
            effective polio vaccine at the University of Pittsburgh.
          </li>
          <li>
            <strong>1952</strong> - On July 2nd, assisted by the staff at the
            D.T. Watson Home for Crippled Children, Salk injected 43 children
            with his killed-virus vaccine. A few weeks later, Salk injected
            children at the Polk State School for the retarded and
            feeble-minded. He vaccinated his own children in 1953.
          </li>
          <li>
            <strong>1954</strong> - Polio vaccine tested on about one million
            children, known as the polio pioneers.<img class="pic" src="https://www.historyofvaccines.org/sites/default/files/inline-images/554_Polio_trial.png" alt="The polio pioneer children" />
          </li>
          <li>
            <strong>1955</strong> - The vaccine was announced as safe on April
            12th, 1955. Reports of incidents of paralysis in children who had
            just been vaccinated was later found to be caused by manufacturing
            errors.
          </li>
          <li>
            <strong>1957</strong> - Another scientist, Albert Sabin, develops
            live-virus, oral version of polio vaccine. Supplants Salk's
            vaccine in worldwide use.
          </li>
          <li>
            <strong>1962</strong> - Founded the Salk Institute for Biological
            Studies in La Jolla, California, an enterprise initially funded
            with support from the March of Dimes. Salk’s own research
            continued, most significantly on multiple sclerosis, cancer, and
            AIDS. Salk spent the later years of his life committed to
            developing a killed-virus vaccine to prevent the development of
            AIDS in those infected with human immunodeficiency virus.
          </li>
          <li>
            <strong>1970</strong> - Marries second wife Françoise Gilot,
            divorced first wife in 1968.
          </li>
          <li>
            <strong>1975</strong> - Awarded the US Congressional Gold Medal.
          </li>
          <li>
            <strong>1977</strong> - Awarded the Presidential Medal of Freedom.
          </li>
          <li>
            <strong>1987</strong> - An enhanced-potency IPV was licensed in
            the United States in November 1987, and is currently the vaccine
            of choice.
          </li>
          <li>
            <strong>1990s</strong> - Polio was eliminated in the Americas by
            1994.The disease was officially eliminated in 36 Western Pacific
            countries, including China and Australia, in 2000. Europe was
            declared polio-free in 2002. Since January 2011, no cases of the
            disease have been reported in India, hence in February 2012, the
            country was taken off the WHO list of polio-endemic countries. In
            March 2014, India was declared a polio-free country.
          </li>
          <li>
            <strong>1995</strong> - Dies of heart failure at age 80 on June
            23, 1995 in La Jolla and was buried aat El Camino Memorial Park,
            San Diego.
          </li>
        </ul>
        <div class="second"></div>
      </section>
    </div> <!-- closes div 'container'-->

    <section>
      <blockquote cite="https://libquotes.com/dwight-d-eisenhower/quote/lbs4k3z">
        "The work of Dr. Salk is in the highest tradition of selfless and dedicated medical research.
        He has provided a means for the control of a dread disease. By helping scientists in other
        countries with technical information; by offering to them the strains of seed virus and
        professional aid so that the production of vaccine can be started by them everywhere;
        by welcoming them to his laboratory that they may gain a fuller knowledge,
        Dr. Salk is a benefactor of mankind.
      </blockquote>
      <blockquote>
        His achievement, a credit to our entire scientific community, does
        honor to all the people of the United States."
      </blockquote>
      <p>--Pres. Dwight D. Eisenhower</p>
      <h3>
        Read more about this incredible human being on his
        <a id="tribute-link" href="https://en.wikipedia.org/wiki/Jonas_Salk" target="_blank">Wikipedia entry</a>
      </h3>
    </section>
  </main>
  <footer>
    A project in the
    <a href="https://www.freecodecamp.org/learn/responsive-web-design/#css-grid">
      <img class="fcc" src="https://aws1.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg" alt="freeCodeCamp" width="152" height="17" /></a>
    Responsive Web Design Course
  </footer>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  font-family: Poppins, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.6;
  padding: 0;
}

#main {
  padding-bottom: 2rem;
  background: #d3d0e3;
}

#title h1 {
  font-size: 4rem;
  font-weight: 700;
}

#title h2 {
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
}

#title {
  text-align: center;
  padding: 3rem;
  margin-bottom: 2rem;
}

/* container for image and tribute info  */
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  height: 56rem;
}

#img-div {
  width: 55%;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

#image {
  max-width: 100%;
  align-content: center;
  padding: 25px 25px 0;
  /*aspect-ratio: 922 / 430;*/
  background: white;
}

#img-caption {
  padding: 25px;
  font-size: 1.6rem;
  text-align: center;
  background: white;
}

#tribute-info {
  height: 100%;
  overflow: auto;
}

.first {
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(#d3d0e3, #d3d0e32c);
  /*background: blueviolet;     uncomment this line and comment out previous line to see where this is at */
  position: sticky;
  /*scroll-padding-top: 50px;*/
}

#tribute-info h3 {
  padding: 0 4rem;
  font-size: 2rem;
}

ul {
  max-width: 580px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: inherit;
  font-size: 1.6rem;
}

li {
  margin: 1rem 0;
}

.pic {
  width: 50%;
  height: auto;
  float: right;
  margin: 1rem;
}

.second {
  bottom: -25px;
  width: 100%;
  height: 60px;
  background: linear-gradient(#d3d0e32c, #d3d0e3);
  /*background-color: blue;     uncomment this line and comment out previous line to see where this is at */
  /* removing this puts the element at the lower right of the viewport  */
  position: sticky;
}

blockquote,
p {
  max-width: 800px;
  font-size: 1.6rem;
  font-style: italic;
  text-align: left;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  white-space: initial;
}

h3 {
  font-size: 1.6rem;
  text-align: center;
}

footer {
  font-size: 1.5rem;
  background: #403f3e;
  color: white;
  padding: 8px;
  text-align: center;
}

.fcc {
  margin-bottom: -0.4rem;
}

@media screen and (max-width: 1650px) {
  #title {
    margin-bottom: 0;
  }
  .container {
    height: initial;
    margin-bottom: 0;
  }

  #img-div {
    width: 70%;
    padding: 1.4rem;
    margin: 0 auto;
  }

  #img-caption {
    padding: 1.4rem;
    font-size: 1.5rem;
  }

  #tribute-info {
    width: 70%;
    max-width: 100%;
    height: initial;
    overflow: initial;
    margin: 0 auto;
    padding: 3rem 3rem 0 0;
  }

  .first,
  .second {
    display: none;
  }

  blockquote {
    padding: 2rem;
  }
}

@media screen and (max-width: 900px) {
  #title {
    padding-bottom: 1rem;
    margin-bottom: 0;
  }

  #img-div {
    width: 85%;
  }

  #img-caption {
    padding-bottom: 1rem;
  }

  #tribute-info {
    width: 85%;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console