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 lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">.
  <head>
    <title>Bill Gates Tribute Page</title>
  </head>
  <body>  
    <!--Title Pane--> 
    
    <div class="jumbotron titlePane">
      <h1 class="text-center">BILL GATES</h1>
      <h3 class="text-center">Pioneer, Business Leader, Philanthropist</h3>
    </div>
    
    <!--Quick Facts-->
    
    <div class="container">
      <div class="row bSpace tSpace Picture">
        <div class="col-md-8">
          <img class="imgResize" src="http://simplyknowledge.com/uploads/page/headimg_url/62/Bill-Gates-hader.jpg" alt="Bill Gates">
        </div>    
        <div class="col-md-3 yellowColor">
          <h4>Quick Facts</h4>
          <ul class="redText">
            <li><b>Name: </b>William Henry Gates III</li>
            <li><b>Born: </b>October 28, 1955</li>
            <li><b>Married To: </b>Melinda French Gates</li>
            <li><b>Career Highlights: </b>
              <ul>
                <li><a href="https://www.microsoft.com/en-us/" target="_blank">Microsoft</a></li>
                <li><a href="http://www.gatesfoundation.org/" target="_blank">Bill and Melinda Gates Foundation</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!--Early Life-->
    
    <div class="container">
      <div class="row bSpace tSpace Picture">
        <div class="col-md-7 push-md-5">
          <img class="imgResizeSml img-center img-responsive" src="http://www.toptenz.net/wp-content/uploads/2014/01/bill-gates-young.jpg" alt="Billl Gates-1985">
        </div>
         <div class="col-md-4 pull-md-6 yellowColor">
          <h4>Early Life</h4>
          <ul class="redText">
            <li><b>1967</b> - Enrolled at Lakeside School, a preparatory school in Seattle; It was here that he first used a computer</li>
            <li><b>1968</b> - Began programming with Paul Allen, the future co-founder and executive vice president of Microsoft</li>
            <li><b>1973</b> - Enrolled at Harvard University</li>
          </ul>
        </div>
      </div>
    </div>
    
    <!--Microsoft Years-->
    
    <div class="container">
      <div class="row bSpace tSpace Picture">
        <div class="col-md-7">
         <img class="imgResizeSml img-center bSpace" src="https://www.wired.com/images_blogs/thisdayintech/2011/04/gates_and_allen_450px.jpg" alt="Bill Gates and Paul Allen-1975">
          <img class="imgResizeSml img-center tSpace" src="http://www.plaffo.com/wp/wp-content/uploads/2015/04/gatesallen.jpg" alt=" Bill and Paul surrounded by computers-1975">
        </div>  
        <div class="col-md-4 yellowColor">
          <h4>The Microsoft Years</h4>
          <ul class="redText">
            <li><b>1975</b> - Left Harvard to work with Paul Allen creating software to operate Micro Instrumentation and Telemetry Systems's (MITS) new Altair computer; Started Micro-Soft, a combination of "micro-computer" and "software"</li>
            <li><b>1976</b> - Changed the company name to Microsoft</li>
            <li><b>1979</b> - Microsoft moves to Washington state</li>
            <li><b>1980</b> - Convinced IBM to have Microsoft develop software for theier new personal computer (PC)</li>
            <li><b>1981</b> - Microsoft releases MS-DOS</li>
            <li><b>1985</b> - Windows 1.0 released using a mouse and a Graphical User Interface (GUI)</li>
            <li><b>1987</b> - Bill Gates becomes the youngest billionaire</li>
            <li><b>1995</b> - With a fortune of $12.9 Billion, Bill Gates becomes the world's richest man</li>
            <li><b>2000</b> - Assumed the role of Chief Software Architect; His college friend Steve Ballmer becomes CEO</li>
            <li><b>2008</b> - Left his day job at Microsoft</li>
            <li><b>2014</b> - Stepped down as chairman of the board, but remained on the board and began serving as a technology advisor</li>
          </ul>
        </div>
      </div>
    </div>
    
    <!--Philanthropic Work-->
    
    <div class="container Picture">
      <div class="row bSpace tSpace">
        <div class="col-md-7 push-md-5">
          <img class="imgResize img-center bSpace" src="https://www.onecoastmagazine.com/images/1511/006-eco-coast.jpg" alt="Bill and Melinda Gates">
          <img class="imgResize tSpace img-center" src="http://www.seattlemonorail.com/wp-content/uploads/2012/08/Entrance1.jpg" alt="Gates Foundation">
        </div>
        <div class="col-md-4 pull-md-6 yellowColor">
          <h4>Philanthropic Work</h4>
          <ul class="redText">
              <li><b>2000</b> - Bill and Melinda Gates officially established the Bill & Melinda Gates Foundation; Also announcedthe first round of Gates Millennium Scholoars</li>
              <li><b>2002</b> - Completed efforts to help install 47,000 computers in 11,000 libraries in all 50 states</li>
              <li><b>2005</b> - Bill and Melinda, along with U2's Bono, named Time Magazine's 2005 Persons of the Year; Bill Gates is bestowed the honorary title of Knight Commander of the British Empire by Queen Elizabeth II</li>
              <li><b>2006</b> - Warren Buffet pleged the bulk of his wealth to the Bill & Melinda Gates Foundation; Bill Gates was awarded the Placard of the Order of the Aztec Eagle by the Mexican government for philanthropic work around the world in the areas of health and education</li>
              <li><b>2010</b> - Bill and Melinda Gates challenged the global health community to declare the Decade of Vaccines; They pleged $10 billion of 10 years to help research, develop, and deliver vaccines for the world's poorest countries</li>
              <li><b>2010</b> - Bill and Melinda Gates, along with Warren Buffet, launch the Giving Pledge - a commitment by the world's wealthiest people to dedicate most of thier wealth to philanthropy</li>
              <li><b>2013</b> - Bill Gates helped launch a $5.5 billion effort to eradicate polio by 2018</li>
          </ul>
        </div>
      </div> 
        
    
      <div class="row bSpace tSpace Picture">
        <div class="col-md-12">
          <img class="imgResizeSml imgCenter" src="http://www.gavi.org/uploadedimages/about_the_alliance/partners_in_the_alliance/logos/gates-foundation_340.gif" alt="Bill and Melinda Gates Foundation">
        </div>
      </div>
     </div>
    <div class="jumbotron titlePaneSmall">
      <h3 class="centerText">To find out more about Bill Gates check out his <a href="https://www.gatesnotes.com/Bio" target="blank">blog</a></h3>
    </div>
    <p class="myText">Written and Coded by <a href="https://www.freecodecamp.com/arcalight" target="_blank">Andrew Adams</p>
  </body>
</html>
              
            
!

CSS

              
                body {
  
  margin-top: 100px;
  background-color: #00a1f1
}
.titlePane {
  margin-left: 10%;
  margin-right: 10%;
  background-color: #ffbb00
}
.titlePaneSmall {
  margin-left: 20%;
  margin-right: 20%;
  background-color: #ffbb00
}
.Picture {
  background-color: #7cbb00;
  margin: 5% auto 5% auto
}
.Picture2 {
  background-color: #7cbb00;
  margin: 5% auto auto auto
}

h1 {
  color: #f65314;
  font-family: "Segoe UI";
  font-size: 100px
}
h3 {
  color: #f65314;
  font-size: 30px;
  font-family: "Segoe UI"
}
h4 {
  color: #f65314;
  font-size: 60px;
  font-family: "Segoe UI";
  text-decoration: underline;
  text-decoration-style: double;
  text-align: center
}
.imgCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.imgResize {
  display: block;
  max-width: 100%;
  height: auto
}
.redText {
  color:#f65314
}
.centerText {
  text-align: center
}
.yellowColor {
  background-color: #ffbb00
}
.bSpaceSml {
  padding-bottom: 5%
}
.bSpace {
  padding-bottom: 5%
}
.tSpace {
  padding-top: 5%
}
.rSpace {
  padding-right: 5%
}
.myText {
  color: #ffbb00
}
a:link {
  color: #f65314
}
a:hover {
  text-decoration: underline;
  color: #7cbb00
}

              
            
!

JS

              
                
              
            
!
999px

Console