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.

            
              <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet">

<div class="container-fluid bg">
  <div class="jumbotron text-center" id="jumbo">
    <div class="row">
      <div class="col-xs-12">
        <h1><strong>Coffee</strong></h1>
        <p>A tribute to the best drink to ever be drunk.</p>
      </div>
      <div class="row">
        <div class="col-xs-4"></div>
        <div class="col-xs-4">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Vector_cup_of_coffee.svg/2000px-Vector_cup_of_coffee.svg.png" alt="image of steaming coffee cup" class="img-responsive">
        </div>
        <div class="col-xs-4"></div>
      </div>

      <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
          <h2 id="list"><strong><big>A Quick History of Coffee:</big></strong></h2>
          <ul id="list">
            <li><strong>850: </strong>Ethiopian farmer Kaldi discovers that after eating the red berries from this plant, his goats do not seem to want to sleep. Word travels.</li>
            <li><strong>1000: </strong>Physician and philosopher Avicenna Bukhara writes the first known literature describing the medicinal properties of coffee.</li>
            <li><strong>1100:  </strong>Traders from what is modern-day Yemen return home with coffee from Ethiopia. They cultivate the plant and create a drink by boiling the beans in water. It is called “qahwa” or <em>that which prevents sleep.</em></li>
            <li><strong>1453: </strong>Ottoman Turks introduce coffee to Constantinople. They add cardamom, cinnamon, and anise. Turkish coffee is born! </li>
            <li><strong>1475: </strong>Coffee shops start to open in Constantinople. A law is created that allows a woman to divorce her husband if she is not provided with enough daily coffee.</li>
            <li><strong>1570: </strong>Coffee arrives in Venice.</li>
            <li><strong>1637: </strong>A greek student at Oxford University brings coffee to England for the first time. He is expelled for having too many late night parties!</li>
            <li><strong>1645: </strong>First coffee shop opens in Venice.</li>
            <li><strong>1652: </strong>First coffee shop opens in London. </li>
            <li><strong>1668: </strong>Coffee surpasses beer as New York City's favorite drink!</li>
            <li><strong>1672: </strong>An Armenian man first sells coffee in Paris at a fair.</li>
            <li><strong>1710: </strong>The French devise a way to brew coffee using a linen bag that can be removed once the drink has reached the desired strength. No more grounds in your cup!</li>
            <li><strong>1720: </strong>Café Florian opens in Venice, Italy in Piazza San Marco. It’s still open to this day.</li>
            <li><strong>1721: </strong>First coffee shop opens in Berlin.</li>
            <li><strong>1730: </strong>First coffee plant brought to Jamaica.</li>
            <li><strong>1773: </strong>Organizers meet at the Green Dragon coffee house in Boston (still open as Green Dragon Tavern) to plan the Boston Tea Party.</li>
            <li><strong>1817: </strong>Coffee cultivation introduced in Hawaii.</li>
            <li><strong>1818: </strong>Coffee percolator invented.</li>
            <li><strong>1822: </strong>First precursor to the modern espresso machine built.</li>
            <li><strong>1871: </strong>John Arbuckle packages and labels what will become the first mass-produced coffee sold all over the country.</li>
            <li><strong>1886: </strong>Maxwell House coffee is born; named after the hotel that serves it in Nashville, TN.</li>
            <li><strong>1901: </strong>First commercial espresso machine patented in Italy.</li>
            <li><strong>1903: </strong>Ludwig Roselius, German coffee importer, along with his assistant Karl Wimmer, discover a method to remove caffeine.</li>
            <li><strong>1906: </strong>First instant coffee created. Later marketed as Red-E Coffee.</li>
            <li><strong>1940: </strong>The US now imports 40% of the world's coffee.</li>
            <li><strong>1946: </strong>Italian, Achille Gaggia, evolves the espresso machine using a piston to extract the brew at a higher pressure resulting in a layer crema on the coffee. Yum.</li>
            <li><strong>1960: </strong>The Colombian Coffee Federation debuts the character Juan Valdez. </li>
            <li><strong>1966: </strong>The first Peet's Coffee is opened in Berkeley, CA.</li>
            <li><strong>1971: </strong>In Seattle, the first Starbucks is born. They only sell roasted beans.</li>
            <li><strong>1972: </strong>Mr. Coffee, the first automatic drip coffee machine, debuts.</li>
            <li><strong>1984: </strong>The original Starbucks' owners purchase Peet's Coffee.</li>
            <li><strong>1985: </strong>Howard Schultz quits Starbucks and opens his own chain of coffee shops.</li>
            <li><strong>1987: </strong>Howard Schultz buys Starbucks for $3.8 million and renames his own chain with the Starbucks name. </li>
            <li><strong>2009 - present: </strong>Coffee is, hands down, the world's favorite drink. We consume 400 billion cups each year, nearly 400 million cups a day. The United States imports 27% of all coffee beans grown in the world. Coffee is second only to oil as the most traded commodity.</li>
          </ul>
        </div>
        <div class="col-md-2"></div>
      </div>
      <div>
        <blockquote class="blockquote-reverse">
          <p><em>I have measured out my life with coffee spoons.</p>
        <footer>T.S. Eliot</em></footer>
      </div>
      <p class="text-center small">If you want to read more about coffee, visit <a href="http://www.ncausa.org/" target="_blank">The National Coffee Association</a> or visit the <a href="https://en.wikipedia.org/wiki/Coffee" target="_blank">coffee Wikipedia</a> page.</p>
      <p class="text-center small">Created as a part of the <a href="http://www.freecodecamp.org" target="_blank">FreeCodeCamp</a> curriculum by <a href="http://www.drakeaking.com" target="_blank">Drake</a>.
    </div>

  </div>
            
          
!
            
              body {
  margin-top: 45px;
  margin-right: 15px;
  margin-left: 15px;
}

.bg {
  background-image:  url("https://architecturedsgn.com/wp-content/uploads/2018/01/free-download-clip-art-aromatic-black-gallery-yopriceville-aromatic-coffee-beans-transparent-background-black-gallery-yopriceville-png-images-pluspng-png-coffee-beans-transparent.jpg");
  height: 50%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-size: 500%;
}

#jumbo {
  background: rgb(209, 192, 150);
  background: rgba(209, 192, 150, 0.8);
}

/* #jumbo2 {
  background: rgb(209, 192, 150);
  background: rgba(209, 192, 150, 0.5);
  height: 500px;
} */

#cup {
  height: 80%;
  width: 80%;
}

#list {
  text-align: left;
  font-size: 150%;
}
            
          
!
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