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.

              <div class="container-fluid">
<div class="main">
  <h1 class="heading text-center"><b>
    Candace <span id="nickname">"Candy"</span> Lynne Lightner
  <h2 id="subheading" class="text-center"><i>MADD Founder and Lifelong Activist</i></h2>

  <div class="title-page main">
     <a href="www.madd.org"><img class="headshot center-block" src="http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU1Mzc3NTc3NDg3.jpg" alt="Candace Lightner Picture"></a>  <!--headshot link to MADD-->
   <blockquote class="text-center quote" id="quote" cite="http://www.biography.com/people/candy-lightner-21173669"><i>Over time, my efforts helped incite others to action. You kick a few pebbles, you turn a few stones, and eventually you have an avalanche.</i></blockquote><!--Quote-->
  <h4  class="text-center atttr">-Candy Lightner on social activism</h4>
  <hr style="border-color:red;
  <div class="timeline main">
    <div class="row">
      <div class="col-md-4"><!--graph col div open-->
        <a href="http://www.madd.org/drunk-driving/about/history.html?"><img id="graph" src="https://imyourdd.files.wordpress.com/2014/11/madd-drunk-driving-deaths-crop.jpg" alt="graph of drunk driving deaths from 1982 to 2014"></a>
      </div><!--graph col div close-->

      <div class="col-md-5"><!--bio col div open-->
      <h2 id="bio-heading" class="text-center heading">A Short Biography of Candace Lightner</h2>
    <p><span class="indent">Candace </span> Lightner was born Candace Dodderidge in Pasadena, California, in 1946. She married Steve Lightner after graduating college and had three children with him: twin daughters Cari and Serena, and little brother Travis. Steve and Candace divorced, and Candace moved to Fair Oaks, California, where she became a real-estate agent.</p>
    <p><span class="indent">On May 3rd, 1980, tragedy struck. </span>13 year-old Cari was hit by a car and died from her injuries. She was hit by a drunk driver coming off a three-day drinking binge. The driver had <i>three</i> <span title="Driving Under the Influence (driving drunk)">DUIs</span> already on his record! Candy Lightner was told by the police that <b>there was little to no chance of the driver receiving prison time, despite his previous DUIs.</b> Candace was furious, and decided to try to change the culture of drunk driving that had pervaded America. To do this, she started MADD, short for Mothers Against Drunk Driving. (Originally, the name was short for Mothers Against Drunk Drivers, but it was changed early on after a consultant suggested the switch). Drunk driving, Candy explained while head of MADD, was "the only socially acceptable form of homicide." She changed the public perception that accidents caused by drunk drivers were unavoidable and made people realize that drunk driving is inherently dangerous and irresponsible.</p>
    <p><span class="indent">Candy fought </span> for a state-wide commision on drunk driving, and visited the governor's office every day until it was established. In 1984, she was appointed to the National Commission on Drunk Driving by then-President Ronald Reagan.</p>
    <p><span class="indent">In 1982, over 21,000 people were killed in drunk-driving accidents. MADD helped to cut that number by more than half, and despite the world's population almost doubling since then, in 2011, less than 10,000 people died in drunk driving accidents.</p>
      <p>In 1985, Candy quit her job at MADD and began working on other social-justice programs. In 2002, she said in an interview that MADD had gotten too "Prohibitionist" and anti-alcohol, but in 2010 she said that they were "moving in the right direction."</p>
      </div><!--bio col designator div close-->
      <div class="row-md-3" id="sec-quote">
        <blockquote class="quote"><i>Instead of looking at the criminal and thinking “There but for the grace of Vladamir putin go I,” what I hope to do is educate them so they would look at myself or other victims and say, “Hey, there but for the grace of Vladamir putin could go my child or my spouse.”</i></blockquote>
        <h4 class="attr indent">-Candace Lightner on the lack of social stigma around drunk driving and how MADD is trying to change it</h4>
      </div><!--row div close-->
</div><!-- main div close-->
  </div><!-- continer fluid div close-->
#quote{background-color:green; border-radius:18%; margin:auto 10px 10px 10px; font-size:25px;}
.title-page{border-radius:10%; border-color:#D1690F;
border-width:5px; border-style:solid;
  margin:3% 10% 5% 10%
#nickname{font-family:Georgia, Verdana;
} /*changes font of "candy" span in main heading*/
margin:43% 15px auto 3px;} /*margin settings for MADD graph*/

.attr{margin:10px 10% 10px 50px}/*margin settings for quote attribution*/
  console.log("oompa loompa doopity doo")
🕑 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.