123

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.

            
                  <h2>Short Biography of <b>Michael Jordan</b></h2>
    <ul class="timeline">
        <li>
            <h3>1963</h3>
            <p>Michael Jordan was born on February 17 in Brooklyn, New York. The son of James R. Jordan, Sr. and Delores Jordan the family soon decided to move to Wilmington, North Carolina. He was the fourth of five children. Michael Jordan attended Emsley A. Laney High School in Wilmington</p>
        </li>
        <li>
            <h3>1981</h3>
            <p>He earned a basketball scholarship to the University of North Carolina majoring in cultural geography</p>
        </li>
        <li>
            <h3>1984</h3>
            <p>Won the Naismith and the Wooden College Player of the Year awards</p>
        </li>
        <li>
            <h3>1984</h3>
            <p>Jordan left the University of North Carolina one year before his scheduled graduation and entered the 1984 NBA Draft but returned to complete his degree in 1986</p>
        </li>
        <li>
            <h3>1984</h3>
            <p>Selected by Chicago Bulls</p>
        </li>
        <li>
            <h3>1984</h3>
            <p>Won the gold medal in the 1984 Summer Olympics</p>
        </li>
        <li>
            <h3>1985</h3>
            <p>NBA Rookie of the Year </p>
        </li>
        <li>
            <h3>1985</h3>
            <p>The Air Jordan I pair of sneakers, a breakthrough in basketball shoe design, was introduced by Nike</p>
        </li>
        <li>
            <h3>1988</h3>
            <p>NBA Defensive Player of the Year </p>
        </li>
        <li>
            <h3>1989</h3>
            <p>Married Juanita Vanoy in September 1989. They have two sons named Jeffrey Michael and Marcus James and a daughter called Jasmine</p>
        </li>
        <li>
            <h3>1991</h3>
            <p>Finals Most Valuable Player MVP - Chicago Leading scorer in the NBA Finals with 31.3 points per game as the Bulls defeated the Los Angeles Lakers, 4-1, to win the franchise’s first NBA title.</p>
        </li>
        <li>
            <h3>1992</h3>
            <p>Won the gold, in the 1992 Summer Olympics 1992 Summer Olympics with the "Dream Team" that included Magic Johnson, Larry Bird, and David Robinson</p>
        </li>
        <li>
            <h3>1992</h3>
            <p>Finals Most Valuable Player MVP - Averaged 35.8 points, 4.8 rebounds and 6.5 assists per game as the Bulls defeated the Portland Trail Blazers, 4-2, to win their second consecutive NBA title</p>
        </li>
        <li>
            <h3>1993</h3>
            <p>Finals Most Valuable Player MVP - Averaged NBA Finals record of 41.0 points per game, while collecting 8.5 rebounds and 6.3 assists, in leading the Bulls to their third straight NBA title, the first team in 27 years to win three consecutive titles. </p>
        </li>
        <li>
            <h3>1993</h3>
            <p>October 6, 1993 Michael Jordan stuns the basketball world by retiring but this is short-lived</p>
        </li>
        <li>
            <h3>1994</h3>
            <p>February 7, 1994 He signs a free agent contract with the Chicago White Sox</p>
        </li>
        <li>
            <h3>1996</h3>
            <p>Space Jam Michael Jordan stars opposite Bugs Bunny (voiced by Billy West) and the rest of the Looney Tunes characters in Space Jam</p>
        </li>
        <li>
            <h3>1996</h3>
            <p>Finals Most Valuable Player - Named Finals MVP for record fourth time. Averaged 27.3 points, 5.3 rebounds, 4.2 assists and 1.67 steals to lead the Bulls to a 4-2 defeat of the Seattle SuperSonics. </p>
        </li>
        <li>
            <h3>1997</h3>
            <p>Finals Most Valuable Player - Averaged 32.3 points, 7.0 rebounds and 6.0 assists to lead the Bulls to a 4-2 victory over the Utah Jazz for an unprecedented fifth NBA Finals MVP. </p>
        </li>
        <li>
            <h3>1997</h3>
            <p>Voted as one of the 50 Greatest Players in NBA history by a panel of media, former players and coaches, general managers and team executives</p>
        </li>
        <li>
            <h3>1998</h3>
            <p>Finals Most Valuable Player - Averaged 33.5 points, 4.0 rebounds and 2.3 assists to lead the Bulls to a 4-2 victory over the Utah Jazz for his sixth NBA Finals MVP</p>
        </li>
        <li>
            <h3>2000</h3>
            <P>Won ESPY athlete of the century award</P>
        </li>
        <li>
            <h3>2001-03</h3>
            <P>Came out of retirement to play with the Washington Wizards</P>
        </li>
        <li>
            <h3>2006</h3>
            <P>Managing member of Basketball Operations Charlotte Bobcats</P>
        </li>
        <li>
            <h3>2006</h3>
            <P>He and Juanita divorced on December 29, 2006</P>
        </li>
    </ul>
            
          
!
            
              @import "lesshat";

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(https://fonts.googleapis.com/css?family=Play:400,700);

@border-radius: 5px;
@hilite-color: #95A5A6;

body {
    font-family: Arial;
    background: -webkit-linear-gradient(63deg, #1a1b1f 5px, transparent 5px) 0 5px,
                -webkit-linear-gradient(243deg, #1a1b1f 5px, transparent 5px) 10px 0px,
                -webkit-linear-gradient(63deg, #2a2b32 5px, transparent 5px) 0px 10px,
                -webkit-linear-gradient(243deg, #2a2b32 5px, transparent 5px) 10px 5px,
                -webkit-linear-gradient(0deg, #212228 10px, transparent 10px),
                -webkit-linear-gradient(#24252b 25%, #202127 25%, #202127 50%, transparent 50%, transparent 75%, #2d2d35 75%, #2d2d35);
    background: -moz-linear-gradient(63deg, #1a1b1f 5px, transparent 5px) 0 5px,
                -moz-linear-gradient(243deg, #1a1b1f 5px, transparent 5px) 10px 0px,
                -moz-linear-gradient(63deg, #2a2b32 5px, transparent 5px) 0px 10px,
                -moz-linear-gradient(243deg, #2a2b32 5px, transparent 5px) 10px 5px,
                -moz-linear-gradient(0deg, #212228 10px, transparent 10px),
                -moz-linear-gradient(#24252b 25%, #202127 25%, #202127 50%, transparent 50%, transparent 75%, #2d2d35 75%, #2d2d35);
    background: linear-gradient(27deg, #1a1b1f 5px, transparent 5px) 0 5px,
                linear-gradient(207deg, #1a1b1f 5px, transparent 5px) 10px 0px,
                linear-gradient(27deg, #2a2b32 5px, transparent 5px) 0px 10px,
                linear-gradient(207deg, #2a2b32 5px, transparent 5px) 10px 5px,
                linear-gradient(90deg, #212228 10px, transparent 10px),
                linear-gradient(#24252b 25%, #202127 25%, #202127 50%, transparent 50%, transparent 75%, #2d2d35 75%, #2d2d35);
    background-size: 20px 20px;
    background-color: #18181c;
}

h2 {
    font-family: 'Play', 'sans-serif';
    font-weight: 400;
    text-align: center;
    color: #fff;
    -webkit-transform: rotate(-6deg);
       -moz-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
         -o-transform: rotate(-6deg);
    b {
        font-weight: 700;
        display: block;
        text-shadow:
                    0 1px #808d93,
                    -1px 0 #cdd2d5,
                    -1px 2px #808d93,
                    -2px 1px #cdd2d5,
                    -2px 3px #808d93,
                    -3px 2px #cdd2d5,
                    -3px 4px #808d93,
                    -4px 3px #cdd2d5,
                    -4px 5px #808d93,
                    -5px 4px #cdd2d5,
                    -5px 6px #808d93,
                    -6px 5px #cdd2d5,
                    -6px 7px #808d93,
                    -7px 6px #cdd2d5,
                    -7px 8px #808d93,
                    -8px 7px #cdd2d5;
        font-size: 70px;
    }
}

.timeline,
.timeline * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.timeline {
    border-left: 1px solid #fff;
    width: 0;
    margin: 0 auto;
    padding: 0;
    position: relative;
    list-style: none;
    li {
        width: 215px;
        display: block;
        position: relative;
        padding: 15px;
        margin: 0 0 0 35px;
        border-radius: @border-radius;
        background-color: #fff;
        -webkit-box-shadow: 3px 4px 2px 2px rgba(255, 255, 255, 0.1);
                box-shadow: 3px 4px 2px 2px rgba(255, 255, 255, 0.1);
        &:before {
            left: -40px;
            top: 20px;
            //content: attr(data-title);
            content: "";
            font-size: 20px;
            position: absolute;
            background-color: #fff;
            color: #000;
            height: 9px;
            width: 9px;
            display: block;
            line-height: 50px;
            text-align: center;
            border-radius: 50px;
        }
        &:after {
            height: 15px;
            width: 15px;
            background-color: @hilite-color;
            position: absolute;
            top: 18px;
            left: -8px;
            content: "";
            font-size: 25px;
            line-height: 0.3;
            -webkit-transform: rotate(-45deg);
               -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                 -o-transform: rotate(-45deg);
        }
        &:nth-child(2n+1) {
            &:after {
                border-bottom: 0;
                border-right: 0;
            }
        }
        &:nth-child(2n+2) {
            margin: 0 0 0 -255px;
            &:before {
                left: 250px;
            }
            &:after {
                left: 206px;
                border-top: 0;
                border-left: 0;
                -webkit-box-shadow: 3px 4px 2px 2px rgba(255, 255, 255, 0.1);
                        box-shadow: 3px 4px 2px 2px rgba(255, 255, 255, 0.1);
            }
        }
        h3 {
            font-family: 'Play', 'sans-serif';
            font-weight: 700;
            font-size: 18px;
            color: #fff;
            margin: -15px -15px 10px;
            padding: 15px;
            background-color: @hilite-color;
            border-top-left-radius: @border-radius;
            border-top-right-radius: @border-radius;
        }
        p {
            font-size: 14px;
            color: #6b6b6b;
            margin: 5px 0 0;
        }
    }
}
            
          
!
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.

Console