Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <html lang="en">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400" rel="stylesheet">
        <title>Steve Jobs</title>
        <div class="row">
            <div class="wall">
            <h1>Steve Jobs</h1>
            <img src="http://historythings.com/wp-content/uploads/2016/06/SteveJobsBook.jpg" alt="Steve Jobs Image">
            <section class="section-bio">
            <h2>A little Biography of steve</h2>
                <h4>Steven Paul Jobs</h4>
                <p class="long-copy">Born in San Francisco, California ( February 24, 1955 – October 5, 2011) was an American entrepreneur, businessman, inventor, and industrial designer. He was the co-founder, chairman, and chief executive officer (CEO) of Apple Inc. CEO and majority shareholder of Pixar, a member of The Walt Disney Company's board of directors following its acquisition of Pixar and founder, chairman, and CEO of NeXT.</p>
                <p class="long-copy">Founded in 1975 by Steve Jobs and Steve Wozniak, Apple.Computer was started in the garage of Steve Jobs parent founding their entrepreneurial venture by jobs selling his Volkswagen bus and Wozniak selling is beloved scientific calculator. Apple Computer revolutionizing the computer industry by making the first personal, Apple become to one of the most advance and beloved tech-company ever, since then apple keep making the product better making them faster, smallest and user friendly, not just for computer geek but for Student, Doctor, Teacher, Artis and last but not least your Grandma</p>
                <p class="long-copy">Most associate Jobs’s success with Apple; however, in the early days, Job’s relationship with Apple proved to be a rocky one. After resigning from the company in 1985, Jobs founded NeXT, a firm that created computers for business and educational needs. While NeXT wasn’t particularly successful based on units sold, the company continues to be an integral part of computers today: portions of Nextstep operating systems still live on within Mac OS X.</p>
                <p class="long-copy">Job’s $5 million acquisition of Lucasfilms’s Computer Graphic Division in 1986 proved to be a wise investment. The potential he saw in the company  later renamed Pixar – paid off when he sold it to Disney in 2006 for $7.4 billion. Prior to the mid 1990s, Disney was the sole creator of full-length animated feature films, and it wasn’t until the success of “Toy Story” in 1995 that Pixar landed on the map. With each subsequent film, Pixar gained steam and created a whole animation industry in Hollywood. The company’s movies grossed $3.8 billion worldwide before its acquisition by Disney.</p>
                <section class="section-did-u">
                    <div class="">
                        <h2>Did you know?</h2>
                        <p class="long-copy paragraph">The <a href="http://applemuseum.bott.org/sections/computers/a1.html"><strong>Apple 1</strong></a> were computers single-handedly designed and built by <a href="https://en.wikipedia.org/wiki/Steve_Wozniak"><strong>Wozniak</strong></a> and first to public at the Hombrew Computer Club. The <a href="https://en.wikipedia.org/wiki/Apple_I"><strong>Apple 1</strong></a>x was only sold as a motherboard with CPU, RAM, and basic textual-video chip, which is less than what is now considered a complete personal computer. The Apple 1 went on sale in July 1976 and was market-priced at $666.66 ("$2,806 in 2016 dollars") </p>
            <h2>Here's a time line of Steve Job's life inventions:</h2>
                    <li><p><strong>1 April 1976</strong>&nbsp; Apple Computers is founded and the Apple 1 is show to the world in a Homebrew Computer Club.</p></li>
                    <li><p><strong>June 5, 1977</strong>&nbsp; Releases the Apple 2, the first commercially available personal computer in a plastic case with color graphic and Apple's first succesfull personal computer.</p></li>
                    <li><p><strong>January 24, 1984</strong>&nbsp; Introduces the Macintosh and "for the first time let Macintosh speak for itself." The computer says, "Never trust a computer you can't lift". </p></li>
                    <li><p><strong>February 3, 1986</strong>&nbsp; For $7 million, buys the Graphics Group division of Lucasfilm that becomes Pixar Animation Studios.</p></li>
                    <li><p><strong>October 12, 2001</strong>&nbsp; The face of the music changed forever with a thousand song in your pocket "the iPod".</p></li>
                    <li><p><strong>April 28, 2003</strong>&nbsp; Apple opens the itunes Music Store and start revolutionize the music, one song at the time.</p></li>
                    <li><p><strong>January 9, 2007</strong>&nbsp; "Today Apple is going to reinvent the phone" with those world Steve Jobs introduced the iPhone to the world.</p></li>
                    <li><p><strong>January 27, 2010</strong>&nbsp; The iPad - a Mac/iPhone hybrid</p></li>
                <a href="https://itunes.apple.com/us/book/steve-jobs/id431617578?mt=11">Steve Jobs Book</a>
              * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

html {
    background-color: #fff;
    color: #555;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;

/* -------------------------------------- */
/* -------------------------------------- */
.row {
    max-width: 1140px;
    margin: 0 auto;

section {
    padding: 80px 0;

h3 {
    text-transform: uppercase;
    text-align: center;

h1 {
    text-align: center;
    letter-spacing: 2px;
    word-spacing: 6px;
    font-size: 240%;
    padding-top: 20px;
    margin-bottom: 30px;

h2 {
    font-size: 180%;
    word-spacing: 2px;
    letter-spacing: 1px;
    margin-bottom: 50px;

h3 {
    margin-top: 37px;
    margin-bottom: 27px

h4 {
    padding: 5px 0;
    margin-left: 15%;
    margin-top: 50px;

.long-copy {
    padding-bottom: 20px;
    padding-top: 10px;
    line-height: 145%;
    width: 70%;
    margin-left: 15%;
    margin-bottom: 30px;

img {
    width: 100%;
    padding: 20px 30px;
    margin-bottom: 60px;
    border-radius: 47px;

.wall {
    background-color: #dedede;
    border-radius: 10px;

ul {
    padding-top: 10px;
    margin-left: 10px;
    margin-bottom: 5px;

li {
    line-height: 145%;
    width: 70%;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 15%;

/*------- Section-did-u --------*/

.section-did-u {
    background-color: #fff;
    border: 10px solid #f4f4f4;
    border-radius: 20px;
    margin: 0 20px;

.paragraph {
    line-height: 175%;
    letter-spacing: 1px;

a:visited {
  color: rgba(26, 188, 156,1.0);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;

a:active {
  color #555;
  border-bottom: 1px solid transparent;
  border-bottom: 1px solid rgba(26, 188, 156,1.0);
  transition: border-bottom, 0.2s, color 0.2s;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.