Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <!--container with photo and quote-->
<body>
<div class="image"><img src="http://i.huffpost.com/gen/1291484/thumbs/o-BEN-JERRY-COW-570.jpg?2" alt="ben-jerrys">

<p id="quote"><mark><i>"When you are led by values,<br> it doesn't cost your business, <br>it helps your business." </i><br>-Jerry Greenfield 
  </mark></p>
  <div id="title">
  <p id="BenJerry"><b>Ben & Jerry's</b></p>
  </div> 
</div>

<!--Timeline-->
<div class="container fluid bg-2 text-left">
  <h1>Their History</h1>
  <p><b>1978</b> Humble Beginnings<br>
With a $5 correspondence course in ice cream-making from Penn State and  a $12,000 investment ($4,000 of it borrowed), Ben and Jerry open their first  ice cream scoop shop in a renovated gas station in Burlington, Vermont.
  <br><br>
  <b>1979</b> Next Step… <br>
Ben and Jerry celebrate the shop's one-year anniversary – and the customers who made it possible – by holding the first-ever Free Cone Day: free scoops for all, all day long. The annual ice cream give-away continues today in scoop shops around the world.
<br><br>
  <b>1980</b> Supply & Demand <br>
Ben and Jerry rent space in an old spool and bobbin mill on South Champlain Street in Burlington and begin packing their ice cream in pints. The reason? To distribute to grocery and Mom & Pop stores along the restaurant delivery routes Ben services out of the back of his old VW Squareback wagon.
  <br><br>
  <b>1981</b> We Want More! <br>
As the news of Ben & Jerry's spreads, more & more people want a lick. So the first franchised scoop shop opens in Shelburne, Vermont.
<br><br>
  <b>1982</b> Pack it Up!<br>
The old gas station is demolished to create a parking lot. Just before the wrecking ball is swung, the new Ben & Jerry's on Cherry Street in Burlington is up & scooping.
<br><br>
<b>1983</b>
  <br>
Now That's What I Call a Sundae
<br>
Ben & Jerry's ice cream is used to build "the world's largest ice cream sundae" in St. Albans, Vermont; the sundae weighs 27,102 pounds.
<br><br>
  <b>1984</b>
Get a Scoop of the Action
<br>
Ben & Jerry's sets a precedent by discovering a little-known clause about stocks and brokering, then establishing a Vermont-only public stock offering to raise money for a new manufacturing plant.
<br><br>
  <b>1985</b>
The Heart of the Matter
<br>
The Ben & Jerry's Foundation is established with a gift from Ben and Jerry & 7.5% of the company's annual pre-tax profits to fund community-oriented projects.
  <br><br>
  <b>1986</b>
"Like the world's largest baked Alaska"
<br>
Ben & Jerry's launches the Cowmobile, a modified mobile home used to distribute free scoops in a unique, cross-country "marketing drive." On the return trip, the Cowmobile burns to the ground outside of Cleveland, Ohio (no one was hurt). Ben said it looked "like the world's largest Baked Alaska."
<br><br>
  <b>1987</b>
Very Grateful
<br>
Ben & Jerry's introduces Cherry Garcia® ice cream. Named for Grateful Dead guitarist Jerry Garcia at the suggestion of two "DeadHeads" from Portland, Maine, Cherry Garcia® becomes the first ice cream named for a rock legend
<br><br>
  <b>1988</b>
Hail From the Chief
<br>
Ben and Jerry are named “U.S. Small Business Persons of the Year” by President Reagan in a White House Rose Garden ceremony. Jerry's one suit comes in handy and, luckily, Ben finds an Italian waiter's jacket to wear.
<br><br>
    <b>1989</b>
Artificial Growth Hormone? Not in Our Ice Cream!
<br>
Ben & Jerry's comes out against Recombinant Bovine Growth Hormone (rBGH), based on concern about its adverse economic impact on family farming and public confidence in the wholesomeness of dairy products.
<br><br>
  <b>1990</b>
Contented Cows Make the Best Ice Cream
<br>
Eight million Ben & Jerry's pints carry a "Support Farm Aid " message as part of the grassroots efforts of Farm Aid, a non-profit organization whose mission is to keep family farmers on their land.
<br><br>
  <b>1991</b>
A Pint-Sized Legend is Born
<br>
Chocolate Chip Cookie Dough is released in pints after years of research and development. The flavor rockets to the top of the most-popular-in-pints list. Today it still reigns among our all-time flavor hits. (The first-ever batch of the flavor was created in Ben & Jerry’s Burlington scoop shop in 1984, the result of an anonymous note scribbled on the shop's suggestion board.)
<br><br>
  <b>1992</b>
Take a Stand for Children
<br>
Ben & Jerry's joins in a cooperative campaign with the national non profit, Children's Defense Fund; the campaign goal is to bring children's basic needs to the top of the national agenda. Over 70,000 postcards are sent to Congress concerning kids and other national issues.
<br><br>
  <b>1993</b>
"The 90's are the 60's Standing on Your Head"
<br>
Wavy Gravy leads the pack of new flavors. It's named after the famous 1960's Woodstock Festival personality who is today a one-man non-profit helping kids.
<br><br>
  <b>1994</b>
Greetings, Your Majesty
<br>
Pints of Ben & Jerry's ice cream begin to appear in the United Kingdom.
<br><br>
  <b>1995</b>
Hundreds of thousands of cyber-surfers visit the Ben & Jerry's World Wide Web site for virtual licks & voluminous laughs.
  <br><br>
  <b>1996</b>
No Fat, No Lactose, No Cholesterol
<br>
Ben & Jerry's introduces Sorbets made with pure spring water & the best fruits & flavorings. Doonesberry® Sorbet is named after the popular "Doonesbury®" comic strip character. It has since been sent to the Flavor Graveyard, but other sorbets live on in Scoop Shops.
<br><br>
  <b>1997</b>
Phish Food For People
<br>
The great music & renowned concert tours of the Vermont-based musical group, Phish®, inspire Phish Food® ice cream.
<br><br>
  <b>1998</b>
Happy Birthday with a Whole New Look
<br>
Some folks thought our packages were hard to read (& the flavors hard to resist), so after 20 years we dressed up our pints with a fresh new look!
<br><br>
  <b>1999</b>
The Flying Friesian
<br>
In the U.K., Ben & Jerry’s launches the Flying Friesian, a raucous tour bus retrofitted for fun, with a focus on fundraising for U.K. kids-in-need network, Childline.
  <br><br>
  <b>2000</b>
Big Changes
<br>
August 3, 2000: Ben & Jerry’s becomes a wholly-owned subsidiary of Unilever. Through a unique acquisition agreement, an independent Board of Directors is created to provide leadership focused on preserving and expanding Ben & Jerry's social mission, brand integrity, and product quality. We call them the B.O.D. (Which means we really like them.)
<br><br>
  <b>2001</b>
<br>
We're making a movie
<br>
Citizen Cool is a documentary about ordinary folks making an impact in their communities. We celebrate this new release with a flavor inspired by movie treats, Concession Obsession.
<br> <br>
  <b>2002</b>
One Sweet Whirled
<br>
It's an ice cream flavor...it's an environmental action website...it's One Sweet Whirled™ and it's all interconnected, as Ben & Jerry's partners with Dave Matthews Band® & SaveOurEnvironment.org in a campaign to help fight global warming.
<br><br>
  <b>2003</b>
Celebrating 25 Years
<br>
Ben & Jerry's kicks off the year with a birthday bash at our factory in Waterbury VT at the first-ever Winter Fest. Still crazy after 25 years.
<br><br>
  <b>2004</b>
Rock the Vote!
<br>
In an effort to drive voter turnout among young people, Ben & Jerry's partners with Rock the Vote. RTV street teams leverage the long lines of customers on Free Cone Day to register over 11,000 voters – the biggest one-day grassroots registration in Rock the Vote's history.
<br><br>
  <b>2005</b>
Drilling is not the ANsWeR
<br>
To protest proposed oil drilling in the Arctic National Wildlife Refuge, we construct a 900-pound Baked Alaska with our Fossil Fuel ice cream, shoulder it onto the US Capital lawn and serve it up with the help of Greenpeace and the Alaska Wilderness League.
<br><br>
  <b>2006</b>
Fair Trade Upgrade
<br>
Ben & Jerry's continues to support Fair Trade efforts started with Coffee, Coffee Coffee BuzzBuzzBuzz in 1996 by adding Vanilla and Chocolate to the line-up. Fair Trade certification guarantees that the farmers who grow the vanilla, cocoa and coffee beans get a fair price for their harvest, enabling them to reinvest in their land and communities.
<br><br>
  <b>2007</b>
Truth or Clone-sequences
<br>
When the U.S. Food & Drug Administration declared that it believed meat and milk from cloned animals was safe to eat, we were beside ourselves, twice over! To show our disappointment with the FDA's decision – and to urge Americans to speak out against cloning – we send a determined herd of cow-costumed folks to Washington, D.C. for a "Truth or Clone-sequences" demonstration.
<br><br>
  <b>2008</b>
The Batch is Back
<br>
We introduce Goodbye Yellow Brickle Road in recognition of Elton John's first concert in Vermont.
<br><br>
  <b>2009</b>
Do the World a Flavor
<br>
We hold an international “Do the World a Flavor” contest encouraging people to share their ideas for a Fair Trade flavor. Top contestants visit the Dominican Republic, tour a cocoa co-op, and build a playground for children in the village of Yabon. The winning flavor, Almond Delight, is featured in scoop shops as a Limited Batch in 2010.
  </p>

  <!--interview from How I Built This-->
<h2>You can read more about Ben Cohen and Jerry Greenfield, their company, and how they built an ice cream empire <a href="https://en.wikipedia.org/wiki/Ben_%26_Jerry%27s">here</a>.</h2>
<br>
   <iframe frameborder="0" scrolling="no" height="130" width="100%" src="https://www.wnyc.org/widgets/ondemand_player/wnyc/#file=/audio/json/813538/&share=1"></iframe>
</div>
</body>

              
            
!

CSS

              
                img {
    position: relative;
    top: 0%;
    left: 0%;
    width: 100%;
    height: auto;
    clip-path: inset(0px 0px 30px 0px);
    display: block;
}

#quote {
  position: absolute;
  top: 300px;
  left: auto;
  word-spacing: 30%;
  font-family: Helvetica;
  font-weight: normal;
  font-size: 28pt;
  padding: 60px; 
}
  
mark {
  background-color: skyblue;
  line-height: 200%;
}

body {
  background-color: lightgrey;
  font-family: helvetica;
  font-size: 14px;
  color: black;
}

h1 {
    color: black;
    text-align: center;
    padding: 20px;
    
}
h2 {
  color: black;
  text-align: center;
    font-family: helvetica;
    font-size: 18px;
    padding: 20px;
}

  .bg-2 {
    background-color:white;
    margin-bottom: 30px;
  }

#title {
  position: absolute;
  top: 5%;
  left: auto;
  right: 5%;
  bottom: 60%;
  font-size: 60pt;
  padding: 10px;
  font-family: Helvetica;
  font-weight: bold;
}
iframe { 
    margin:0 auto;
    padding-bottom: 10px;
    display: block;
}
              
            
!

JS

              
                
              
            
!
999px

Console