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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!-- FreeCodeCamp Challenge 1 😊 -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <title>Tribute Page | Dennis Ritchie</title>
  </head>
  <body>
    <main id="main">
      <div class="wrap">
      <!-- Title -->
      <div id="title">
        <h1>Dennis Ritchie</h1>
        <p> <em> Father of Modern Computer Programming</em></p>
      </div>

      <!-- Image of the main OG Dennis Ritchie -->
      <figure id="img-div">
        <img
          id="image"
          src="https://upload.wikimedia.org/wikipedia/commons/2/23/Dennis_Ritchie_2011.jpg"
          alt="The Programming OG D.C"
        />
        <figcaption id="img-caption">Photograph of Dennis Ritchie the computer-scientist behind Unix and C</figcaption>
      </figure>
      <!-- About -->
      <div id="tribute-info">
        <h3>About</h3>
        <div class="bottom-line"></div>
        <p>
          Dennis MacAlistair Ritchie was an American computer scientist. He
          created the C programming language and, with long-time colleague Ken
          Thompson, the Unix operating system.
         
          Ritchie and Thompson received the
          Turing Award from the ACM in 1983, the Hamming Medal from the IEEE in
          1990 and the National Medal of Technology from President Bill Clinton
          in 1999. Ritchie was the head of Lucent Technologies System Software
          Research Department when he retired in 2007.
        </p>
      </div>
   
      <!-- Timeline -->
      <div id="tribute-timeline">
        <h3>Timeline</h3>
        <div class="bottom-line"></div>
        <ul>
          <li> <strong>1941</strong> Born in Bronxville, New York, U.S</li>
          <li><strong>1963</strong> Earned B.Sc. In Physics from Harvard University</li>
          <li><strong>1967</strong> Started working in Bell Labs.</li>
          <li>
            <strong>1968</strong> Earned his Ph.D. in Applied Mathematics from Harvard
            University.
          </li>
          <li>
            <strong>1969</strong> Developed Unix Operating System alongside other developers at
            Bell Labs
          </li>
          <li><strong>1972</strong> Developed C language at Bell Labs</li>
          <li><strong>1990</strong> Transferred to Lucent Technologies.</li>
          <li><strong>2007</strong> Retired from Lucent Technologies</li>
          <li>
            <strong>2011</strong> Died at the age of 70 in Berkeley Heights, New Jersey, U.S.
          </li>
        </ul>
      </div>
      <!-- Notable Awards -->
      <div class="tribute-notable-awards">
        <h3>Notable Awards</h3>
        <div class="bottom-line"></div>
        <ul>
          <li><strong> 1983 </strong> Turing Award</li>
          <li> <strong> 1998 </strong> National Medal of Technology</li>
          <li><strong> 1990</strong>  IEEE Richard W. Hamming Medal</li>
          <li><strong> 1994 </strong>  Computer Pioneer Award</li>
          <li><strong> 1997 </strong> Computer History Museum</li>
          <li><strong> 2003</strong>  Harold Pender Award</li>
          <li><strong> 2011</strong>  Japan Prize</li>
        </ul>
      </div>
      <!-- More Info -->
      <div id="tribute-moreInfo">
        <h3>More Info</h3>
        <div class="bottom-line"></div>
        <p>
          Want to know more check out this
          <a
           id="tribute-link" href="https://en.wikipedia.org/wiki/Dennis_Ritchie"
            target="_blank"
          >
            wiki article</a
          >
        </p>
      </div>
    </div>
      <!-- Footer -->
      <div class="footer"> <p> Powered By Adam Jemal ⚡️ </p></div>
    </div>
    </main>
  </body>
</html>



              
            
!

CSS

              
                /* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: auto;
  height: 100%;
  font-family: "Roboto", sans-serif;
  background-image: linear-gradient(#dd5e89, #f7bb97);
}

/* Reusable */

.bottom-line {
height: 2px;
width: 3rem;
background: #ffbc00;
margin: 5px;
}

/* Core Styling */

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 15px;
}
.wrap {
  width: 900px;
  background: #f3f3f3;
  border: 1px solid;
  border-radius: 50px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

 /* Title */

#title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  line-height: 1.6;
}

#title h1 {
  font-size: 57px;
}

#title p {
  font-size: 14px;
}

/* Image */
#img-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

#image {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  width: 100%;
  height: auto;
  max-width: 300px;
}

#img-caption {
  text-align: center;
  width: 500px;
  margin-top: 15px;
  line-height: 1.2;
  font-size: 12px;
}

/* About */
#tribute-info {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tribute-info p {
  width: 550px;
  margin-top: 10px;
  line-height: 1.6;
}

/* Timeline */
#tribute-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}

#tribute-timeline ul {
  margin-top: 10px;
  list-style: none;
  line-height: 1.7;
}

/* Notable Awards */

.tribute-notable-awards {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;

}

.tribute-notable-awards ul {
  margin-top: 10px;
  list-style: none;
  line-height: 1.7;
  width: 550px;
}

/* More Info */

#tribute-moreInfo {
  display: flex;
  flex-direction: column;
  margin: 15px 0 15px 0;
  align-items: center;
}

#tribute-link {
  cursor: pointer;
  text-decoration: none;
}

#tribute-link:hover {
  text-decoration: underline;
}

/* Footer */
.footer {
  text-align: center;
  width: 900px;
  background: #333;
  margin-top: 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  padding: 15px;
}

.footer p {
  color: #fff;
  font-size: 14px;
}

/* Responsive Design  */

/* ----------- Small Screens ----------- */

/* Portrait and Landscape 320 - 409 */

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 409px)
and (-webkit-min-device-pixel-ratio: 2) {
  #main {
    margin-top: 15px;
    margin-bottom: 5px;
  }
  .wrap {
    width: 330px;
  }

  /* Title */

  #title {
    text-align: center;
    line-height: 1;
  }
  #title h1 {
    margin: 10px 0 15px 0;
  }
  #title p {
    font-size: 12px;
  }

  /* Image */

  #img-div {
    margin-top: 25px;
  }

  #image {
    height: 300px;
  }

  #img-caption {
    width: 250px;
    font-size: 10px;
  }

  /* About */
  #tribute-info p {
    width: 300px;
    margin-top: 10px;
    line-height: 1.6;
  }

  /* Timeline */
  #tribute-timeline ul {
    width: 300px;
    line-height: 2;
    font-size: 12px;
  }

  /* Notable Awards */

  .tribute-notable-awards ul {
    font-size: 12px;
    line-height: 2;
    width: 300px;
  }

  /* More Info */
  #tribute-link p{
    width: 300px;
    font-size: 12px;
    text-align: center;
  }

  #tribute-link a {
    cursor: pointer;
    text-decoration: none;
  }

  #tribute-link a:hover {
    text-decoration: underline;
  }

  /* footer */
  .footer {
  width: 330px;
  }

}


/* Portrait and Landscape 410-736 */
@media only screen 
  and (min-device-width: 410px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    
    .wrap {
      width: 380px;
    }
  
  /* Title */

  #title {
    text-align: center;
    line-height: 1;
  }
  #title h1 {
    margin: 10px 0 15px 0;
    font-size: 50px;
  }
  #title p {
    font-size: 12px;
  }

  /* Image */

  #img-div {
    margin-top: 25px;
  }

  #image {
    height: 300px;
  }

  #img-caption {
    width: 250px;
    font-size: 10px;
  }

  /* About */
  #tribute-info p {
    width: 300px;
    margin-top: 10px;
    line-height: 1.6;
  }

  /* Timeline */
  #tribute-timeline ul {
    width: 300px;
    line-height: 2;
    font-size: 12px;
  }

  /* Notable Awards */

  .tribute-notable-awards ul {
    font-size: 12px;
    line-height: 2;
    width: 300px;
  }

  /* More Info */
  #tribute-link p{
    width: 300px;
    font-size: 12px;
    text-align: center;
  }

  #tribute-link a {
    cursor: pointer;
    text-decoration: none;
  }

  #tribute-link a:hover {
    text-decoration: underline;
  }


  /* footer */
  .footer {
  width: 380px;
  }

}


              
            
!

JS

              
                
              
            
!
999px

Console