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='//fonts.googleapis.com/css?family=Monoton' rel='stylesheet'>

<link href='//fonts.googleapis.com/css?family=League Script' rel='stylesheet'>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<body>

  <div class="container-fluid">
    <h1 class="title">A <span class="lauren"> Lauren</span> in the Wild 
    </h1>
  <div class="row">
    <div class="col-lg-12">
      <img src="https://s5.postimg.org/vo0mwjfvb/edit.jpg" class="glacierImage img-responsive center-block"  alt="Lauren in Glacier">
    </div>  
  </div>
    

    <div class="row">
      <span class="col-xs-6 col-md-6 illusiveText">There was once an
        <span class="illusive">
          <strong>illusive
          </strong><br>
        </span> creature that originated<br>out of the small town of<br>Strum, Wisconsin.
      </span>
      <div class="col-xs-6 col-md-6">
        <img class="img-responsive laughImage" src="https://s26.postimg.org/56zuqb6a1/14615730_657003794469357_6781535219224956956_o.jpg" alt="laughin">
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6 col-md-6">
        <img class="img-responsive backImage" alt="Lohs pic" src="https://s17.postimg.org/8rhctd89r/Screen_Shot_2017-04-04_at_12.35.43_AM.jpg">
      </div>
      <div class="col-xs-6 col-md-6 filmText">Although rarely found <br> there now, this rare being<br> can be seen and captured (in
        <a href=https://www.youtube.com/embed/Z-j1DZe6DFs target="_blank">film 
          </a>) <br>all over the world.
      </div>
    </div>

    <p class="mainText">Lauren's
      <span class="stories"> stories
      </span> are many and have been documented below, in "2 truths and 1 lie " format of course... only adding permanence to the complexity of this life form. If you can checkmark the 15 truths correctly... nothing cool will happen on this webpage.
      I am a beginner web developer... what do you expect from me? Enjoy.
    </p>

    <div class="row">
      <div class="col-xs-9 col-md-9">
        <h2 class="secondTitle"><strong>15 _truths and 5 _lies</></strong>
         </h2>

        <ul id="unordered-list">
          <li><input type="checkbox" name="1"> A Lauren in the wild once flashed the country side of Norway from a cliff. In the middle of the day... sober... while people were filming in the foreground.
          </li>
          <li>
            <input type="checkbox" name="1"> A Lauren in the wild once did a keg stand at a close family member's baby shower.
          </li>
          <li><input type="checkbox" name="1"> She has been to Ho Chi Minh City, Vietnam.
          </li>
          <li><input type="checkbox" name="1"> If you're lucky enough to catch it, this creature will walk around on the knuckles of her toes for minutes at a time. She usually performs this feat for groups of people when there is a dull moment, just to spice
            things up.
          </li>
          <li><input type="checkbox" name="1"> The best firework show Lauren was ever found enjoying was in a mountain town with a population of just over 2,000 people. It was in this town that she rode on the back of a grizzly bear.
          </li>
          <li><input type="checkbox" name="1"> A Lauren in the wild graduated high school second from the top of her class.
          </li>
          <li><input type="checkbox" name="1"> This wild thing was once day drinking on a beach in Mexico and decided she wanted a tattoo. She proceded to go off solo and find an open shop to create a quarter sized panda bear on the inside of her left bicep.
            She refers to panda by the name El Huerto Jose.
          </li>
          <li><input type="checkbox" name="1"> A Lauren in the wild once had her own etsy shop and did very well selling belly button rings.
          </li>
          <li><input type="checkbox" name="1"> Lauren was once seen riding a horse through the mountains of the western United States. She kicked the pony because she thought it would be fun to go faster. The horse proceded to charge up an unknown mountain
            side for the next 20 minutes with Lauren screaming her head off. She only got a minor scrape on her cheek from an overhanging pine tree branch.
          </li>
          <li><input type="checkbox" name="1"> Lauren performed a rap battle on television. It was about how she promised to never eat a cow (she is vegan), if only it would come over to her side of the field. The cow never came.
          </li>
          <li><input type="checkbox" name="1"> This lady once wore rainboots to her friend's formal wedding.
          </li>
          <li><input type="checkbox" name="1"> A group of friends and Lauren were once invited into a sacred temple and given good luck bracelets by a famous buddha.
          </li>
          <li><input type="checkbox" name="1"> Pictures of Lauren can be found in Hawaii where in some circles, she is a well known hand model.
          </li>
          <li><input type="checkbox" name="1"> Lauren has completed the following in a 24 hour period: skydived, gambled and won $1000, drank 6 bloody marys, visited for an hour with a hooker about politics, and snuck into a rooftop pool. In Vegas.
          </li>
          <li><input type="checkbox" name="1"> While listening to a Blink 182 pandora station, Lauren in the wild rolled her car 4 times on her way to school. She came out unscathed and even made it to one of her finals that day.
          </li>
          <li><input type="checkbox" name="1"> Lauren got her hair done in Norway at a salon called Angels Afro. Her hair took so long they took a break, locked the doors and threw a pizza party. Overall, she was in this hair studio about 8 hours. There were
            many discussions about french underwear.
          </li>
          <li><input type="checkbox" name="1"> Lauren stretched her perfomance skills by lip syncing to elvis in her school's talent shows. She was especially talented at the hip shake.
          </li>
          <li><input type="checkbox" name="1"> A Lauren enjoys falling asleep to the sounds of horror story podcasts. Especially while camping.
          </li>
          <li><input type="checkbox" name="1"> A Lauren once went to a foreign country at age 16 with her sister. Right before leaving the USA, she said she would be right back, having to go to the bathroom. After an over an hour went by, Lauren's sister
            was getting pretty scared that someone had stolen her. Searching everywhere, she found Lauren in an airport bookstore, sitting on a floor reading a magazine.
          </li>
          <li><input type="checkbox" name="1"> A Lauren once went to burning man, where she lost her phone, id, and backpack and then went missing from her camp for 4 days. She brought back many stories.
          </li>
          <li><input type="checkbox" name="1"> Lauren once met Xavier Rud(Austrailian Musician) in Hawaii while she was dressed up as a lion. <br> </li>
        </ul>
      </div>
      <div class="col-xs-3 col-md-3">
        <img class="img-responsive collageImage" src="https://s33.postimg.org/t1t9hri4v/collage_3.jpg" alt="collagePane">
      </div>
    </div>
    <div class="rights">All Rights Reserved | A Lauren Will Not Be Contained Inc</div>
  </div>
</body>
            
          
!
            
              ul {
  list-style: none;
}

li {
  margin-bottom: 20px;
}

p {
    font-size: 20px;
  }

.title {
  margin-bottom: 0px;
  font-family: 'Monoton';
  font-size: 50px;
  color:  green;
  }

.lauren {
  font-size:  150px;
  font-family: 'League Script';
}

.glacierImage {
   
    border: none;
}

.illusiveText {
    padding:  250px 0px 0px 0px;
    font-size: 25px;
    text-align: center;
}
.illusive {
    color: green;
}
.collageImage {
  padding-top: 120px;
  width: 78%;
}

.laughImage {
  background-color: white;
  padding: 100px 0px 100px 0px;
}

.filmText {
  padding: 150px 0px 0px 0px;
  font-size: 25px;
  text-align: center;
}

.backImage {
  background-color: white;
}

.stories {
  color: green;
  font-size: 35px;
  font-family: 'Monoton';
  
}

.mainText {
    background-color: white;
    padding: 75px 75px 75px 250px;
}

.secondTitle {
    color: green;
    padding: 0px 0px 30px 20px;
    font-family: "League Script";
    font-size: 50px;
}

.rights {
  padding: 100px 0px 60px 0px;
  text-align: center;
}
            
          
!
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