css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

            
              <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>
            
          
!
            
              /**
 * 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;
}
            
          
!
999px
🕑 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.
Loading ..................

Console