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

              
                <html>
<body id="main">


<h1 id="title">A Tribute to Bill Gates   
    </h1>
  
  <figure id="img-div">
  <img id="image" class="imageborder" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Bill_Gates_2014.jpg/454px-Bill_Gates_2014.jpg" alt="Picture of Bill Gates">
    <figcaption id="img-caption"><b>Bill Gates in 2014</b></figcaption>
  </figure>
  <br><br>
  
 <div id="tribute-info">
  <h2 id="tributeheading">A Timeline of All Bill Gates Accomplishments</h2>
   
   <ul>
     <li>In 1987, Gates was listed as a billionaire in Forbes magazine's 400 Richest People in America issue. He was worth $1.25 billion and was the world's youngest self-made billionaire.[13] Since 1987, Gates has been included in the Forbes The World's Billionaires list and was the wealthiest from 1995 to 1996,[125] 1998 to 2007, 2009, and has been since 2014.[1] Gates was number one on the Forbes 400 list from 1993 through to 2007, 2009, and 2014 through 2017.[126][127]
     </li>
     
     <li>Time magazine named Gates one of the 100 people who most influenced the 20th century, as well as one of the 100 most influential people of 2004, 2005, and 2006.
     </li>
     
     <li>Time also collectively named Gates, his wife Melinda and U2's lead singer Bono as the 2005 Persons of the Year for their humanitarian efforts.[128] In 2006, he was voted eighth in the list of "Heroes of our time".
     </li>
     
     <li>Gates was listed in the Sunday Times power list in 1999, named CEO of the year by Chief Executive Officers magazine in 1994, ranked number one in the "Top 50 Cyber Elite" by Time in 1998, ranked number two in the Upside Elite 100 in 1999, and was included in The Guardian as one of the "Top 100 influential people in media" in 2001.
     </li>
     
     <li>Gates was elected Member of the US National Academy of Engineering in 1996 "for contributions to the founding and development of personal computing"
     </li>
     
     <li>He was named Honorary Member of the American Library Association in 1998.
     </li>
     
     <li>He was elected a foreign member of the Chinese Academy of Engineering in 2017
     </li>
     
     <li>According to Forbes, Gates was ranked as the fourth most powerful person in the world in 2012,[134] up from fifth in 2011.
     </li>
     
     <li>In 1994, he was honored as the 20th Distinguished Fellow of the British Computer Society (DFBCS). In 1999, Gates received New York Institute of Technology's President's Medal.
     </li>
     
     <li>Gates has received honorary doctorates from Nyenrode Business Universiteit (2003),[137] KTH Royal Institute of Technology (2002),[138] Waseda University (2005),[139] Tsinghua University (2007),[140] Harvard University (2007),[141] the Karolinska Institute (2007),[142] and Cambridge University (2009).
     </li>
     
     <li>He was also made an honorary trustee of Peking University in 2007
     </li>
     
     <li>Gates was made an Honorary Knight Commander of the Order of the British Empire (KBE) by Queen Elizabeth II in 2005.
     </li>
     
     <li>In November 2006, he was awarded the Placard of the Order of the Aztec Eagle, together with his wife Melinda who was awarded the Insignia of the same order, both for their philanthropic work around the world in the areas of health and education, particularly in Mexico, and specifically in the program "Un país de lectores".
     </li>
     
     <li>Gates received the 2010 Bower Award for Business Leadership from The Franklin Institute for his achievements at Microsoft and his philanthropic work.
     </li>
     
     <li>Also in 2010, he was honored with the Silver Buffalo Award by the Boy Scouts of America, its highest award for adults, for his service to youth
     </li>
     
     <li>In 2002, Bill and Melinda Gates received the Jefferson Award for Greatest Public Service Benefiting the Disadvantaged.
     </li>
     
     <li>He was given the 2006 James C. Morgan Global Humanitarian Award from the Tech Awards.
     </li>
     
     <li>In 2015 Gates, along with his wife Melinda, received the Padma Bhushan, India's third-highest civilian award for their social work in the country.
     </li>
     
     <li>Barack Obama honored Bill and Melinda Gates with the Presidential Medal of Freedom for their philanthropic efforts in 2016,[153] and François Hollande awarded Bill and Melinda in the following year with France's highest national order – as Commander of the Legion of Honour for their charity efforts.
     </li>
     
     <li>Entomologists named Bill Gates' flower fly, Eristalis gatesi, in his honor in 1997
     </li>
   </ul>
    </div> <!--tribute-info-->
   
<section class="billquote">
    <p class="billquotep">
      <i>'I choose a lazy person to do a hard job. Because a lazy person 
      will
      find an easy way to do it.`</i><br><br>
      
      <span id="quote"><cite>~Bill Gates</cite></span>
      
       </p>
  </section><br>
  
<section>     
       <p id="endlink">If you would like to read about other major accomplishments from Bill Gates then please click 
           <a id="tribute-link" href ="https://learnodo-newtonic.com/bill-gates-accomplishments" target="_blank">here</a>.</p>
  </section>
   
 </div> <!-- Background1 Timeline End -->
  
  
</body>
</html>
              
            
!

CSS

              
                <style>
html { font-size: calc(1em + 1vw) }
body {
  background-color: #373F51;
  margin: auto;
  padding: 0;
  text-align: center;
  font-family: 'Nanum Gothic', sans-serif;
}
#title {
  background-color: #C2C5CC;
  text-shadow:5px 5px 5px #7a7a7a;
  color: #000000;
  /*background: #dedede;*/
  margin-top: 0;
  padding-top: 2vh;
  padding-bottom: 2vh;
}
#img-div {
  margin-top: 5rem;
}
#image {
  max-width: 100%;
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.imageborder {
  border-style: inset;
  border: 5px solid #6B818C;
  border-radius: 2.5%;
}
#img-caption{
  margin: 0 auto;
  color: #D8DBE2;
  font-size: calc(0.25em + .5vw);
}
#tributeheading {
  text-shadow:5px 5px 9px #7a7a7a;
  padding-top: 3vh;
  padding-bottom: 3vh;
}
#tribute-info {
  padding-top: .5em;
  padding-bottom: 2.5em;
  background-color: #C2C5CC;
  opacity: 0.9;
  font-size:large;
}
ul {
  list-style-type: square;
  text-shadow:5px 5px 9px #7a7a7a;
}
li {
  margin: 3vh 6vw 0 4vw;
  line-height: 2em;
  text-align: left;
}
li {
  color: #000000;
}/*for text indentation*/
.billquote {
  margin: 0 auto;
  width: 70%;
  line-height: 2em;
  margin-top: 3em;
  background-color: #dedede;
  opacity: 0.6;
  border-radius: 10%;
}
.billquotep {
  padding: 1.5em;
}
#quote {
  display: block;
  text-align: left;
}
#endlink {
  color: #D8DBE2;
  margin: 0 2vw 3vh 2vw;
}
#tribute-link {
  font-weight: bold;
}
a:link {
  color: blue;
}
a:visited {
  color: orange;
}

@media only screen and (max-width: 700px) { 
    #img-div {
        width: 50vw;
        margin: 0 auto;
    }
}

</style>

              
            
!

JS

              
                
              
            
!
999px

Console