123

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="containter-fluid">

  <div class="small-padding"></div>
  <div class="row">
    <div class="col-xs-offset-1 col-xs-10  container" id="main-cont">
      <h1 class="text-center"><big>Deadmau5</big></h1>
      <h3 class="text-center">Joel Thomas Zimmerman</h3>
      <div class="col-xs-offset-1 col-xs-10">
        <img alt="deadmau5 on stage" src="http://weraveyou.com/wp-content/uploads/2015/07/deadmau55.jpg" class="img-thumbnail img-responsive center-block">

        <div class="small-padding"></div>
        <h2>Overview</h2><br>
        <p>Joel Thomas Zimmerman (born January 5, 1981), known professionally as deadmau5 (pronounced "deadmouse"), is a Canadian progressive house music producer and performer from Toronto, Ontario. Zimmerman produces a variety of styles within the house
          genre and sometimes other forms of electronic music. His tracks have been included in numerous compilation albums such as the 2007 In Search of Sunrise 6: Ibiza CD. The February 2008 issue of Mixmag's music magazine included a free CD which
          was titled MixMag Presents: The Hottest New Name In Dance! DEADMAU5 Tech-Trance-Electro-Madness, mixed by Zimmerman. Tracks have also been included and presented on Armin van Buuren's A State of Trance radio show. His debut album, Get Scraped,
          was released in 2005, followed by others in the next few years. Today, deadmau5 is one of the highest paid electronic artists in the world. He has received six Grammy nominations for his work. As well as his own solo releases, Zimmerman has
          worked alongside other DJs and producers, such as Kaskade, MC Flipside, Rob Swire of Knife Party and Pendulum, Wolfgang Gartner, and on a number of releases, he has partnered with Melleefresh. An early 12" single produced on vinyl titled "I
          Don't Want No Other" was released by Joel Zimmerman and Derek Caesar under the group name "Dred and Karma". The 2006 album titled deadmau5 Circa 1998–2002 was released using the alias "Halcyon441". He has also collaborated with Steve Duda under
          the alias, "BSOD", as well as "WTF?" including Duda, Tommy Lee, and DJ Aero.</p><br><br>
        <div class="col-xs-12 no-padding">
          <div class="col-md-6 no-padding">
            <h2>Discography</h2> <br>
            <ul>
              <li>Get Scraped (2005)</li>
              <li>Vexillology (2006)</li>
              <li>Random Album Title (2008)</li>
              <li>For Lack of a Better Name (2009)</li>
              <li>4×4=12 (2010)</li>
              <li>Album Title Goes Here (2012)</li>
              <li>while(1<2) (2014)</li>
            </ul>
          </div>
          <div class="col-md-6">
            <h2>Have a listen</h2>
            <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tKi9Z-f6qX4" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="big-padding col-xs-12"></div>
        <h4>For more information head over to his <a href="https://en.wikipedia.org/wiki/Deadmau5" target="_blank">wikipedia entry</a></h4>
        <div class="small-padding"></div>
      </div>
    </div>
  </div>
  <div class="small-padding"></div>
</div>
            
          
!
            
              #main-cont {
  color: #fff;
  background-image: url("http://bgfons.com/upload/pattern_texture1169.jpg");
  border-radius:4px;
  background-attachment: fixed;
}
.row {
  margin: 0px;
  padding: 0px;
}
p {
  font-size:16px;
}
li {
  font-size: 16px;
}
.small-padding {
  padding: 1%;
}
.big-padding {
  padding: 5%;
}
.no-padding {
  padding: 0px;
  margin: 0px;
}
a {
  color: #fff;
  text-decoration: underline #f0f; 
}
a:hover {
  color: #f0f;
  text-decoration: underline #f0f; 
}
            
          
!
            
              
$.backstretch("http://gethdwallpapers.pw/wallpapers/l/1920x1080/63/deadmau5_concert_1920x1080_62488.jpg");


            
          
!
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