cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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>
  <head>
    <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="vertical-timeline.css">
  </head>
  <body>
    <div id="container">
      <ol class="timeline">
        <li class="call">
          <time><small>4/10/13</small> <big>18:30</big></time>
          <article>
            <h3>Ricebean black-eyed pea</h3>

            <p>
            Winter purslane courgette pumpkin quandong komatsuna fennel green bean cucumber watercress. Winter purslane garbanzo artichoke broccoli lentil corn okra silver beet celery quandong. Plantain salad beetroot bunya nuts black-eyed pea collard greens radish water spinach gourd chicory prairie turnip avocado sierra leone bologi.
            </p>
          </article>
        </li>
        <li class="flight">
          <time><small>4/11/13</small> <big>12:04</big></time>
          <article>
            <h3>Greens radish arugula</h3>

            <p>
            Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette lettuce. No, not again. I... why does it say paper jam when there is no paper jam? I swear to God, one of these days, I just kick this piece of shit out the window. Celery coriander bitterleaf epazote radicchio shallot winter purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot black-eyed pea brussels sprout garlic kohlrabi.
            </p>
          </article>
        </li>
        <li class="todo">
          <time><small>4/13/13</small> <big>05:36</big></time>
          <article>
            <h3>Sprout garlic kohlrabi</h3>

          <p>
          Parsnip lotus root celery yarrow seakale tomato collard greens tigernut epazote ricebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotus root burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattle seed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard. Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endive squash beet greens carrot chicory green bean. <strong>What? You pooped in the refrigerator? And you ate the whole wheel of cheese? How’d you do that? Heck, I’m not even mad; that’s amazing.</strong> Quandong pea chickweed tomatillo quandong cauliflower spinach water spinach.
          </p>
          </article>
        </li>
        <li class="email">
          <time><small>4/15/13</small> <big>13:15</big></time>
          <article>
            <h3>Watercress ricebean</h3>

            <p>
            Peanut gourd nori welsh onion rock melon mustard jícama. Desert raisin amaranth kombu aubergine kale seakale brussels sprout pea. Black-eyed pea celtuce bamboo shoot salad kohlrabi leek squash prairie turnip catsear rock melon chard taro broccoli turnip greens. Slappin' the base. Fennel quandong potato watercress ricebean swiss chard garbanzo. Endive daikon brussels sprout lotus root silver beet epazote melon shallot.
            </p>
          </article>
        </li>
        <li class="call">
          <time><small>4/16/13</small> <big>21:30</big></time>
          <article>
            <h3>Courgette daikon</h3>

            <p>
            Ultron approves.Parsley amaranth tigernut silver beet maize fennel spinach. Ricebean black-eyed pea maize scallion green bean spinach cabbage jícama bell pepper carrot onion corn plantain garbanzo. NEMO! Sierra leone bologi komatsuna celery peanut swiss chard silver beet squash dandelion maize chicory burdock tatsoi dulse radish wakame beetroot.
            </p
          </article>
        </li>
        <li class="flight">
          <time><small>4/17/13</small> <big>12:11</big></time>
          <article>
          <h3>Greens radish arugula</h3>

          <p>
          Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette lettuce. GOJIRA! Celery coriander bitterleaf epazote radicchio shallot winter purslane collard greens spring onion squash lentil. Artichoke salad bamboo shoot black-eyed pea brussels sprout garlic kohlrabi.
          </p>
          </article>
        </li>
        <li class="todo">
          <time><small>4/18/13</small> <big>09:56</big></time>
          <article>
            <h3>Sprout garlic kohlrabi</h3>

            <p>
            <strong>I love lamp</strong>. Parsnip lotus root celery yarrow seakale tomato collard greens tigernut epazote ricebean melon tomatillo soybean chicory broccoli beet greens peanut salad. Lotus root burdock bell pepper chickweed shallot groundnut pea sprouts welsh onion wattle seed pea salsify turnip scallion peanut arugula bamboo shoot onion swiss chard. Avocado tomato peanut soko amaranth grape fennel chickweed mung bean soybean endive squash beet greens carrot chicory green bean. Tigernut dandelion sea lettuce garlic daikon courgette celery maize parsley komatsuna black-eyed pea bell pepper aubergine cauliflower zucchini. Quandong pea chickweed tomatillo quandong cauliflower spinach water spinach.
            </p>
          </article>
        </li>
      </ol>
    </div>
  </body>
</html>
            
          
!
            
              /* Stolen directly from the Blueprint... */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

/**
 * Colors:
 *
 * - light-blue: rgb(107, 191, 238)
 * - dark-blue: rgb(52, 148, 203)
 * - grayish blue: #BDD0DC (time)
 */
body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

#container {
    width: 80%; margin: auto;
}

ol.timeline {
    border-left: 0.5em solid;
    border-color: rgb(107, 191, 238);
    padding-left: 2em;
    margin-left: 8em;
    list-style: none;
}

.timeline > li {
    position: relative;
    margin-top: 10pt;
    color: white;
}

.timeline > li:before {
    background-color: rgb(52, 148, 203);
    text-align: center;

    width: 2em; height: 2em;
    line-height: 2em;

    font-size: 110%;

    border: 0.5em solid rgb(107, 191, 238);
    border-radius: 50%;

    position: absolute;
    left: -3.5em;
}
.timeline > li.call:before {
    content: "\260E";
}
.timeline > li.flight:before {
    content: '\2708';
}
.timeline > li.todo:before {
    content: '\2714';
}
.timeline > li.email:before {
    content: '\0040';
}

.timeline > li time {
    display: block;
    float: left;
    position: absolute;
    left: -9em;
    text-align: right;
}
.timeline > li time > * {
    display: block;
}
.timeline > li time small {
    color: #BDD0DC;
    font-size: 80%;
}
.timeline > li time big {
    color: rgb(107, 191, 238);
    font-size: 200%;
}
.timeline > li:nth-child(even) time big {
    color: rgb(52, 148, 203); /* dark blue */
}

.timeline > li article {
    background-color: rgb(107, 191, 238);
    margin: 0; padding: 5pt 2em;
    border-radius: 5pt;
}
.timeline > li article:after {
    content: "\25C0";
    color: rgb(107, 191, 238);
    position: absolute;
    top: 0.75em; left: -0.6em;
}
/* https://css-tricks.com/how-nth-child-works/ */
.timeline > li:nth-child(even) article {
    background-color: rgb(52, 148, 203); /* dark blue */
}
.timeline > li:nth-child(even) article:after {
    color: rgb(52, 148, 203); /* dark blue */
}

.timeline > li article h3 {
    padding-bottom: 5pt;
    border-bottom: 1pt dotted;
    margin-bottom: 10pt;
}
            
          
!
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