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>
<div id="main">
    <header>
        <h1 id="title">Remembering Steve Jobs</h1>
        <p id="steve-jobs-quote">"Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs</p>
    </header>
    <div id="img-div">
        <img id="image"
             src="https://cdn.cultofmac.com/wp-content/uploads/2016/06/Steve_Jobs_Headshot_2010-CROP-780x611.png"
             alt="Steve jobs">
        <p id="img-caption">Steve jobs introducing the iphone 4</p>
    </div>
    <div id="tribute-info">
        <p class="title">Here's a time line of Steve Jobs' life:</p>
        <ul>
            <li><b>1955</b> - Born in San Francisco, California, U.S.</li>
            <li><b>1966</b> - The Jobs family moves to Mountain View, Calif., part of what would later become known as Silicon Valley.</li>
            <li><b>1968</b> - Jobs calls Bill Hewlett, the co-founder and co-namesake of Hewlett-Packard, looking for spare parts to build a frequency counter. Hewlett gives Jobs the parts, as well as an internship with the company that summer.</li>
            <li><b>1970</b> - Meets future Apple co-founder Steve Wozniak through a friend.</li>
            <li><b>1972</b> - Graduates from Homestead High School in Cupertino, Calif., and enrolls at Reed College in Portland, Ore., only to drop out a semester later.</li>
            <li><b>1976</b> - Co-founds Apple Computer with Wozniak and Ronald Wayne.</li>
            <li><b>1977</b> - Releases the Apple II, the first commercially available personal computer in a plastic case with color graphics--and Apple's first successful personal computer.</li>
            <li><b>1980</b> - Apple goes public, putting Jobs' net worth north of $200 million.</li>
            <li><b>1984</b> - Two days after the $1.5 million Ridley Scott-directed "1984" Super Bowl commercial airs, introduces the Macintosh to much fanfare during Apple's shareholder meeting.</li>
            <li><b>1985</b> - Jobs was forced out of Apple in 1985 after a long power struggle with the company's board and its then-CEO John Sculley</li>
            <li><b>1986</b> - For $10 million, buys the Graphics Group division of Lucasfilm that becomes Pixar Animation Studios.</li>
            <li><b>1988</b> - NeXT Computer releases its first computer.</li>
            <li><b>1993</b> - NeXT discontinues hardware business, gets into software instead. The company is renamed NeXT Software, Inc.</li>
            <li><b>1995</b> - Becomes Pixar's president and CEO. Later in the year, Jobs brings Pixar pubic one week after the release of "Toy Story," with Tom Hanks doing the voice of Woody and Tim Allen as Buzz Lightyear.</li>
            <li><b>1996</b> - Returns to Apple, as an adviser, after it buys NeXT for $429 million.</li>
            <li><b>1997</b> - Becomes CEO, initially as the de facto chief, then as interim chief in September.</li>
            <li><b>1997</b> - Announces a $150 million investment from Microsoft, coupled with a partnership on Microsoft Office and Internet Explorer for the Mac.</li>
            <li><b>1997</b> - Introduces the Apple Store, which lets consumers custom-order Apple products directly from the company online.</li>
            <li><b>1998</b> - Introduces the iMac, which becomes commercially available in August.</li>
            <li><b>2001</b> - Introduces iTunes, then exclusively for Mac users.</li>
            <li><b>2001</b> - Apple ships the the first version of Mac OS X, code-named Cheetah.</li>
            <li><b>2001</b> - Introduces the iPod.</li>
            <li><b>2003</b> - Opens the iTunes Music Store in the United States. Apple sold 10 billion songs via iTunes as of February 24, 2010, and it counted 225 million iTunes accounts with credit cards as of June 2011.</li>
            <li><b>2004</b> - Jobs undergoes surgery to remove a cancerous tumor in his pancreas.</li>
            <li><b>2007</b> - Introduces the iPhone.</li>
            <li><b>2008</b> - Introduces the App Store as an update to iTunes.</li>
            <li><b>2010</b> - Introduces the iPad.</li>
            <li><b>2011</b> - Goes on medical leave of absence from CEO post nearly two years after the six-month break he took to undergo a liver transplant.</li>
            <li><b>2011</b> - Gives a keynote speech at Apple's Worldwide Developers Conference, it's Jobs' last public appearance at an Apple event.</li>
            <li><b>2011</b> - Resigns from Apple CEO post; becomes chairman.</li>
            <li><b>2011</b> - Dies of respiratory arrest related to the cancerous tumor.</li>
        </ul>

        <p class="title">You can read more about the visionary who helped make the world a better place in his <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Jobs">Wikipedia entry</a></p>
    </div>

</div>
              
            
!

CSS

              
                :root {
    --background-color: #fafafa;
    --secondary-background-color: #fff;
    --background-header-color: #333;
    --sencondary-text-color: #2b2b2b;
    --width-content: 45%;
    --small-font-size: 16px;
    --sub-title-font-size: 22px;
    --title-font-size: 40px;
}

* {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

#main {
    background-color: var(--background-color);
}
header {
    background-color: var(--background-header-color);
    padding: 20px;
}

h1 {
    font-size: var(--title-font-size);
    text-align: center;
    color: #fff;
    margin-top: 20px;
}

#steve-jobs-quote {
    text-align: center;
    font-size: var(--small-font-size);
    margin: 10px 0 0 0;
    color: #d6d6d6;
}

#img-div{
    background-color: var(--secondary-background-color);
    margin: 10px;
    padding: 20px 0;
}

#image {
    display: block;
    width: var(--width-content);
    height: auto;
    max-width: 780px;
    max-height: 611px;
    margin: auto;
}

#img-caption {
    margin: 5px 0 0 0;
    font-size: 16px;
    text-align: center;
}

#tribute-info {
    background-color: var(--background-color);
    margin: 40px 20px;
    font-size: 20px;
}
#tribute-info .title {
    font-size: var(--sub-title-font-size);
    text-align: center;
    color: #111111;
    display: block;
    padding: 10px;
    font-weight: bold;
}
#tribute-info ul {
    display: block;
    width: var(--width-content);
    margin: 20px auto;
}
#tribute-info ul li {
    color: var(--sencondary-text-color);
    font-size: var(--small-font-size);
    margin: 14px;
}

@media (max-width: 1200px) {
    :root{
        --width-content: 60%;
    }
}

@media (max-width: 900px) {
    :root{
        --width-content: 70%;
        --sub-title-font-size: 19px;
        --title-font-size: 35px;
    }
}

@media (max-width: 650px) {
    :root{
        --width-content: 85%;
        --small-font-size: 15px;
        --sub-title-font-size: 18px;
        --title-font-size: 32px;
    }
}
@media (max-width: 450px) {
    :root{
        --width-content: 95%;
        --small-font-size: 14px;
        --sub-title-font-size: 16px;
        --title-font-size: 28px;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console