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

              
                <<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title id="title">Elon Musk</title>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</head>
<body>
 <div class="container" id="main">
  <header class="box1 header">
    <h1>The Real Iron Man</h1>
    <h2>Entrepreneur, Engineer, Inventor and Investor</h2>
    </header>
  <div class="box2" id="img-div"> <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Elon_Musk_2015.jpg/800px-Elon_Musk_2015.jpg" alt="Elon Mask"></img><!--Profile Picture-->
  <p id="img-caption">The man who's bringing the future closer</p>
   </div>
  <div class="box3" id="tribute-info"> <!--Achievements-->
      <div> 
        <h4>Basic Info. </h4>
        <ul>
          <li>Born : Elon Reeve Musk June 28, 1971 (age 45)</li>
          <li>Citizenship : South African (1971–present) 
Canadian (1971–present) American (2002–present)</li>
          <li>Children: 6 sons</li>
          <li>Net worth: US$14 Billion (March 31, 2017)</li>
          <li>Alma mater : Queen's University University of Pennsylvania</li>
          <li>Parents : Maye Musk (mother) Errol Graham Musk (father)</li>
       </ul>
    </div>
  
      <div >
        <h4>Projects</h4>
        <ul>
          <li>SpaceX : Reducing space transportation costs and enabling the colonization of Mars</li>
          <li>Tesla Inc.: pecializes in electric cars, Lithium-ion battery energy storage</li>
          <li>Hyperloop : a pod-like vehicle through a reduced-pressure tube[1] that would exceed airliner speed</li>
          <li>SolarCity : specializes in solar energy services</li>
       </ul>
  </div>
      <div>
        <h4>Quick Facts</h4>
        <ul>
          <li>Fact#1 : He developed and sold a video game at age 12</li>
          <li>Fact#2 : He spent just two days at Stanford University</li>
          <li>Fact#3 : He is the real-life model for "Iron Man’s" Tony Stark</li>
          <li>Fact#4 : Elon Musk became a millionaire by the age of 28</li>
          <li>Fact#5 : He owns a James Bond car</li>
          <li>Fact#6: Elon Musk is a workaholic and he works alomost 100 hours per week</li>
       </ul>
    </div>
    </div>
  <div class="box4">
    <h4>Quotes</h4>
         <ul>
          <li>"In order for us to have a future that's exciting and inspiring, it has to be one where we're a space-bearing civilization."
</li>
          <li>"When something is important enough, you do it even if the odds are not in your favor."
</li>
          <li>"I'm interested in things that change the world or that affect the future and wondrous, new technology where you see it, and you're like, 'Wow, how did that even happen? How is that possible?"
</li>
          <li>"I think it's very important to have a feedback loop, where you're constantly thinking about what you've done and how you could be doing it better."
</li>
          <li>"I think that's the single best piece of advice: constantly think about how you could be doing things better and questioning yourself."
</li>
          <li>"When I was in college, I wanted to be involved in things that would change the world."
</li>
          <li>"The problem is that at a lot of big companies, process becomes a substitute for thinking. You're encouraged to behave like a little gear in a complex machine. Frankly, it allows you to keep people who aren't that smart, who aren't that creative." 
</li>
           <li>"The future of humanity is going to bifurcate in two directions: Either it's going to become multiplanetary, or it's going to remain confined to one planet and eventually there's going to be an extinction event."
</li>
          <li>"People work better when they know what the goal is and why. It is important that people look forward to coming to work in the morning and enjoy working."</li>
       </ul>
    </div>
  <footer class="box5" id="footer">
    <h3>For more information, please visit: <a id="tribute-link"  href="https://en.wikipedia.org/wiki/Elon_Musk" target="_blank">Wikipedia</a></h3>
  </footer>
  </div>
</body>
  
</html>



              
            
!

CSS

              
                
.container{
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  justify-items: stretch;
  align-items: stretch;
  position: absolute;
  left: 25%;
  right: 25%;
  border: groove;
  border-radius: 2%;
 
 
}
.container > div {
  background: #eee; 
  padding: 1em;
  
  
}
.container > div:nth-child(odd) {
  background: #ddd;
}

p{
  
}

h2{
  
}

h3{
}

h4{
  text-align: center;
  
}
h3{
  
}


.box1{
  
}

.box2{
  
}
.box3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}
.box4{
  
}
.box5

#main{
  
}
.header{
  text-align: center;
  
}
#footer{
  text-align: center;
}
#img-div{
  
}
#image{
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 30%;
    height: auto;
    border-radius: 1%;
}
#img-caption {
  text-align: center;
}

#tribute-info{
  
}

#tribute-link{
  
}

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console