Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <article class="container">
    <h1 class="section-title">The Star Wars Saga order</h1>
    <ol class="timeline">
        <li class="timeline__entry">
            <span class="timeline__id">Ep.1</span>
            <div class="timeline__content">
                <h2 class="timeline__heading">The Phantom Menance</h2>
                <p class="timeline__text">Obi-Wan Kenobi (Ewan McGregor) is a young apprentice Jedi knight under the tutelage of Qui-Gon Jinn (Liam Neeson) ; Anakin Skywalker (Jake Lloyd), who will later father Luke Skywalker and become known as Darth Vader, is just a 9-year-old boy. When the Trade Federation cuts off all routes to the planet Naboo, Qui-Gon and Obi-Wan are assigned to settle the matter.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.2</span>
            <div class="timeline__content timeline__content--flipped">
                <h2 class="timeline__heading">Attack of the Clones</h2>
                <p class="timeline__text">Set ten years after the events of "The Phantom Menace," the Republic continues to be mired in strife and chaos. A separatist movement encompassing hundreds of planets and powerful corporate alliances poses new threats to the galaxy that even the Jedi cannot stem. These moves, long planned by an as yet unrevealed and powerful force, lead to the beginning of the Clone Wars -- and the beginning of the end of the Republic.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.3</span>
            <div class="timeline__content">
                <h2 class="timeline__heading">Revenge of the Sith</h2>
                <p class="timeline__text">It has been three years since the Clone Wars began. Jedi Master Obi-Wan Kenobi (Ewan McGregor) and Jedi Knight Anakin Skywalker (Hayden Christensen) rescue Chancellor Palpatine (Ian McDiarmid) from General Grievous, the commander of the droid armies, but Grievous escapes. Suspicions are raised within the Jedi Council concerning Chancellor Palpatine, with whom Anakin has formed a bond. Asked to spy on the chancellor, and full of bitterness toward the Jedi Council, Anakin embraces the Dark Side.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Bonus</span>
            <div class="timeline__content timeline__content--flipped">
                <h2 class="timeline__heading">Rogue One</h2>
                <p class="timeline__text">Former scientist Galen Erso lives on a farm with his wife and young daughter, Jyn. His peaceful existence comes crashing down when the evil Orson Krennic takes him away from his beloved family. Many years later, Galen becomes the Empire's lead engineer for the most powerful weapon in the galaxy, the Death Star. Knowing that her father holds the key to its destruction, Jyn joins forces with a spy and other resistance fighters to steal the space station's plans for the Rebel Alliance.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.4</span>
            <div class="timeline__content">
                <h2 class="timeline__heading">Star Wars (A New Hope)</h2>
                <p class="timeline__text">The Imperial Forces -- under orders from cruel Darth Vader (David Prowse) -- hold Princess Leia (Carrie Fisher) hostage, in their efforts to quell the rebellion against the Galactic Empire. Luke Skywalker (Mark Hamill) and Han Solo (Harrison Ford), captain of the Millennium Falcon, work together with the companionable droid duo R2-D2 (Kenny Baker) and C-3PO (Anthony Daniels) to rescue the beautiful princess, help the Rebel Alliance, and restore freedom and justice to the Galaxy.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.5</span>
            <div class="timeline__content timeline__content--flipped">
                <h2 class="timeline__heading">The Empire Strikes Back</h2>
                <p class="timeline__text">The adventure continues in this "Star Wars" sequel. Luke Skywalker (Mark Hamill), Han Solo (Harrison Ford), Princess Leia (Carrie Fisher) and Chewbacca (Peter Mayhew) face attack by the Imperial forces and its AT-AT walkers on the ice planet Hoth. While Han and Leia escape in the Millennium Falcon, Luke travels to Dagobah in search of Yoda. Only with the Jedi master's help will Luke survive when the dark side of the Force beckons him into the ultimate duel with Darth Vader (David Prowse).</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.6</span>
            <div class="timeline__content">
                <h2 class="timeline__heading">Return of the Jedi</h2>
                <p class="timeline__text">Luke Skywalker (Mark Hamill) battles horrible Jabba the Hut and cruel Darth Vader to save his comrades in the Rebel Alliance and triumph over the Galactic Empire. Han Solo (Harrison Ford) and Princess Leia (Carrie Fisher) reaffirm their love and team with Chewbacca, Lando Calrissian (Billy Dee Williams), the Ewoks and the androids C-3PO and R2-D2 to aid in the disruption of the Dark Side and the defeat of the evil emperor.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.7</span>
            <div class="timeline__content timeline__content--flipped">
                <h2 class="timeline__heading">The Force Awakens</h2>
                <p class="timeline__text">Thirty years after the defeat of the Galactic Empire, the galaxy faces a new threat from the evil Kylo Ren (Adam Driver) and the First Order. When a defector named Finn (John Boyega) crash-lands on a desert planet, he meets Rey (Daisy Ridley), a tough scavenger whose droid contains a top-secret map. Together, the young duo joins forces with Han Solo (Harrison Ford) to make sure the Resistance receives the intelligence concerning the whereabouts of Luke Skywalker (Mark Hamill), the last of the Jedi Knights.</p>
            </div>
        </li>
        <li class="timeline__entry">
            <span class="timeline__id">Ep.8</span>
            <div class="timeline__content">
                <h2 class="timeline__heading">The Last Jedi</h2>
                <p class="timeline__text">Yet to be confirmed. The further adventures of Luke Skywalker (Mark Hamill), Leia (Carrie Fisher) and Rey (Daisy Ridley).</p>
            </div>
        </li>
    </ol>
</article>
!

CSS 

              
                /**
 * Timeline styling
 */

$bp1: 45em;

.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    
    &:before {
        content: "";
        position: absolute;
        top: -3em;
        left: 2em;
        width: .25em;
        height: calc(100% + 6em);
        background: linear-gradient(to bottom, #151515 0%, #3b3b3b 2%, #3b3b3b 98%, #151515 100%);
    
        @media screen and (min-width: $bp1) {
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.timeline__entry {
    position: relative;
    margin-bottom: 4em;
    color: #fff;
    
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.timeline__id {
    position: absolute;
    top: 1em;
    left: 2em;
    padding: .5em 1em;
    background: #282727;
    transform: translateX(-50%);
    
    @media screen and (min-width: $bp1) {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline__content {
    position: relative;
    display: block;
    margin-left: 6em;
    padding: 1em;
    background: #282727;
    
    @media screen and (min-width: $bp1) {
        margin-left: 0;
        width: calc(50% - 4em);
    }
    
    &:before {
        content: "";
        position: absolute;
        display: block;
        top: 1em;
        left: -1em;
        border-top: 1em solid transparent;
        border-bottom: 1em solid transparent;
        border-right: 1em solid #282727;
        
        @media screen and (min-width: $bp1) {
            left: auto;
            right: -1em;
            border-left: 1em solid #282727;
            border-right: none;
        }
    }
}

.timeline__content--flipped {
    @media screen and (min-width: $bp1) {
        float: right;
        
        &:before {
            left: -1em;
            right: auto;
            border-left: none;
            border-right: 1em solid #282727;
        }
    }
}

.timeline__heading {
    margin-bottom: .25em;
    font-size: 1.2rem;
}

.timeline__text {
    color: #ccc;

    &:last-child {
        margin-bottom: 0;
    }
}



/**
 * Basic styling
 */

* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
}

body {
    line-height: 1.4;
    background-color: #151515;
}

.container {
    width: 85%;
    max-width: 1200px;
    margin: 4em auto;
}

.section-title {
    padding-bottom: 2em;
    text-align: center;
    color: #dddddd;
}
!

JS
!
999px

Console