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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <style>
  .small-margin{
    margin: 25px;
  }
  .thin-border {
    border-width: 5px;
    border-style: solid;
  }
  .green-border {
    border-color: green;
  }
  .red-border {
    border-color: red;
  }
  .brown-border {
    border-color: brown;
  }
  .blue-border {
    border-color: #02f;
  }
</style>
<body style="background:#eee;">
  <div class="small-margin">
    <div class="col-xs-8 text-center" style="background:#fff;">
      <h2><em>My Favorite Places In</em></h2>
      <h1>Miamisburg, Ohio</h1>
    </div>
    <div class="col-xs-4">
      <image class="img-responsive" src="http://www.miamisburg.org/images/060903%20pics/060903%20PICT0187.JPG" alt="Miamisburg Logo"></image>
    </div>
  </div>
  <div class="col-xs-11 small-margin thin-border blue-border">
    <div class="col-xs-8">
      <image class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Montgomery_County_Ohio_incorporated_and_unincorporated_areas_Miamisburg_highlighted.svg/1133px-Montgomery_County_Ohio_incorporated_and_unincorporated_areas_Miamisburg_highlighted.svg.png" alt="Montgomery County"></image>
    </div>
    <div class="col-xs-4">
      <h3>Where is Miamisburg?</h3>
      <p>Miamisburg is located in Montgomery County, Ohio, 10 miles south of Dayton. An hour's drive South on I-75 would take you to Cincinnati, while headed North then East on I-70 will get you to Columbus in approximately 90 minutes.</p> 
    </div>
  </div>
  <div class="col-xs-11 text-center small-margin">
    <h2>The Miamisburg Mound</h2>
    <image class="img-responsive thin-border green-border" src="http://www.miamisburg.org/images/Miamisburg%20Mound%20Park/061911%20Miamisburg%20Mound/061911%20Miamisburg%20Mound%20(9).jpg" alt="Miamisburg Mound"/>
    Believed to have been built by the Adena Indians around 1000BC, the Miamisburg Mound is the tallest conical burial mound in Ohio.
  </div>
  <div class="col-xs-11 text-center small-margin">
    <h2>Baum Opera House</h2>
    <image class="img-responsive thin-border red-border" src="http://baumoperahouse.com/wp-content/uploads/2012/06/Baum-with-Blue-Sky.jpg" alt="Baum Opera House"/>
    Built in 1884 by Charles Baum, this historic build was originally named the "Star City Opera House". It has had many different uses over the years, but more recently is available for rent for meetings or live entertainment. Some believe the place to be haunted, with the ghost living up in the attic of the building.
  </div>
  <div class="col-xs-11 text-center small-margin">
    <h2>The Hamburger Wagon</h2>
    <image class="img-responsive thin-border brown-border col-xs-7" src="http://exploremiamisburg.com/wp-content/uploads/2011/05/hamburger-wagon.jpg" alt="The Hamburger Wagon"/><image class="img-responsive thin-border brown-border col-xs-5" src="https://s3-media2.fl.yelpcdn.com/bphoto/_jNL144ymZUVF7sqSwJ-fw/o.jpg" alt="Hamburger"/>
    Around since the 1913 great flood, the Hamburger Wagon is a classic food cart in downtown Miamisburg. Serving small beef patties on a simple bun with only onions, pickles, and salt and pepper, this little cart holds only two workers during the day, and is wheeled into a nearby garage at night. 
    <div>
    <blockquote style="font-size:12px;">"Step back in time for that taste you'll crave in the future."
      <footer></footer>Jack Sperry, owner</blockquote>
    </div>
  </div>
  <div class="col-xs-11 text-center small-margin">
    <h4>Check out the <a href="https://en.wikipedia.org/wiki/Miamisburg,_Ohio" target="_blank">Wikipedia Article</a> to learn more about this great place!</h4>
  </div>
</body>
            
          
!
999px
Loading ..................

Console