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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                       <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header> 
<h1 id="title">Steve Jobs Tribute Page</h1>
</header>
 <main id="main">
  <div id="img-div">
  <img 
      id="image"    src='https://images.unsplash.com/photo-1569769107543-e0f61bab8e02?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p id="img-caption"> Apple founder Steve Jobs </p>
   </div>
   
   <h3> Facts about Steve Jobs </h3>
   <ul id="tribute-info">
     <li> He almost became a Buddhist monk</li>
     <p> As an adolescent, Jobs’ dream was to become a Buddhist monk. In 1974, a trip to India sparked in him a lifelong interest in Buddhism that stayed with him forever.</p>
     <li>He was into fish and veggies</li>
     <p> Steve Jobs was a pescetarian and his favourite food was fish. He also liked carrots and fruits and spent some time as a fruitarian, meaning he only ate fruits, nuts, seeds, vegetables, and grains.</p>
     <li>He was a college dropout</li>
     <p>Steve Jobs was a college dropout and attended Reeds College for just 18 months. He continued his education by informally auditing classes. In Reeds, the course that attracted him the most was calligraphy. He used to audit calligraphy classes, which famously went on to influence the typography and font of Apple products.</p>
     <li>His last words are still a mystery</li>
     <p>Steve Jobs final words were monosyllables that he repeated thrice “Oh wow. Oh wow. Oh wow”. The reason behind this utterance is still a mystery.</p>
     <li>He followed a simplistic dress code</li>
     <p>His signature dressing style included a black turtleneck, jeans, and sneakers. He was known for his simplicity with the turtle neck and Levis jeans. It is said that he had close to 100 Levis jeans throughout his lifetime.</p>
     <li>He met his biological sister at 27</li>
     <p>The famous author Mona Simpson is his biological sister, who he tracked down later in life. Her first novel, Anywhere but Here, was about her relationship with her parents, who were Steve Job’s biological parents as well.</p>
     <li>His lifestyle choices possibly resulted in the name ‘Apple’</li>
     <p>A lot has been debated about how Steve Jobs decided to name the company. However it is said that being a fruitarian, he used to visit organic farms to collect fruits. On one such visit, it struck him to name his company Apple.</p>
     <li>He was a tough boss</li>
     <p>He followed strict rules and principles. He believed in being strict to follow that.</p>
     <li>He has a dedicated team to study emotions</li>
     <p>Jobs has a dedicated team to study the excitement and emotion behind opening a box and finding the products inside. This emotion is very common with Apple products today.</p>
     <li>He patented all his inventions</li>
     <p>Steve Jobs had close to 300 patents under his name. The glass staircase at the Apple store is one such patented attraction that pulls passers-by into the store.</p>
     <ul>  
       <a id="tribute-link" href="https://yourstory.com/2017/02/interesting-facts-steve-jobs" target="_blank">
         More Info on Steve Jobs</a>
     
  <footer> </footer>
              
            
!

CSS

              
                body{
      background-color: silver;
    }
    #title{
      text-align: center;
    }
    #main{
     
    }
    #image{
      max-height: 600px;
      max-width: 600px;
      display: block;
      margin-left: auto;
      margin-right:auto;
    }
    h3{
      text-align: center;
    }
    #img-caption{
      text-size: 1px;
      text-align: center;
    }

              
            
!

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