Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <div id="inner_wrap">  

    <!--The Main Thing-->
<div id="wrapper" style="perspective: 1300px;">
<div class="phone view_2" id="phone_1" style="width: 360px; height: 640px;">
  <iframe src="http://designhooks.com" id="frame_1"></iframe>
</div>
</div>

<!--Controls etc.-->
<div id="controls">
    <!--Idea by /u/aerosole-->
  <div>
    <label for="iframePerspective">Add perspective:</label>
    <input type="checkbox" id="iframePerspective" checked="true">
  </div>

</div>

<div id="phone-controls">

  <div id="views">
      <button value="1">Table View</button>
      <button value="2">Front View</button>
  </div>

  <div id="phones">
      <button value="1">iPhone 6</button>
      <button value="2">Samsung Galaxy Note</button>
      <button value="3">Microsoft Lumia 1020</button>
      <button value="4">HTC One</button>
      <button value="5">iPad Mini</button>
  </div>
</div
</div>
              
            
!

CSS

              
                	  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
	
	  html{
	    height:100%;
	  }
	
	  body {
	    font-family: 'Open Sans', sans-serif;
	    height:100%;
	    color:#fff;
		background: #1b1b1b!important;
	  }
	  
	  #container{
		background: #1b1b1b!important;	  
	  }
	  
	  /*Basic Phone styling*/
	  
	  .phone {
	    border: 40px solid #121212;
	    border-width: 55px 7px;
	    border-radius: 40px;
	    margin: 50px auto;
	    overflow: hidden;
	    -webkit-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	   -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
	       -moz-animation: fadein 2s; /* Firefox < 16 */
	        -ms-animation: fadein 2s; /* Internet Explorer */
	         -o-animation: fadein 2s; /* Opera < 12.1 */
	            animation: fadein 2s;
	}
	  
	  .phone iframe {
	    border: 0;
	    width: 100%;
	    height: 100%;
	    background-color:#000;
	  }
	  
	  /*Different Perspectives*/
	  
	  /* Table View */
	  .phone.view_1 {
	    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	            transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);
	    box-shadow: -3px 3px 0 #000, -6px 6px 0 #000, -9px 9px 0 #000, -12px 12px 0 #000, -14px 10px 20px #000;
	  }
	 /*  Front View */
	  .phone.view_2 {
	    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	    box-shadow: 0px 3px 0 #000, 0px 4px 0 #000, 0px 5px 0 #000, 0px 7px 0 #000, 0px 10px 20px #000;
	  }


	@-webkit-keyframes rotate {
	
	    0%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	    50%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-40deg);}
	    100%{-webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(-30deg);}
	}

	/* Rotate Animation */
	
	.view_1.rotate
	{
	    -webkit-animation-name:            rotate; 
	    -webkit-animation-duration:        15s; 
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}


  /*Controls*/
  
  #controls {
    position: absolute;
    top: 80px;
    left: 20px;
    font-size: 0.9em;
    color: #333;
    width:17px;
  }
  
  #controls div {
    margin: 10px;
  }
  
  #controls div label {
    width: 150px;
    display: block;
    float: left;
    color: #fff;
  }

  #phone-controls{
    position: absolute;
    top: 80px;
    right: 20px;
    width: 200px;
    font-size:14px;
  }

  #phones {
    border-top:1px solid #fff;
    margin-top:20px;
    padding-top:20px;
  }

  #phones button {
    outline: none;
    width: 198px;
    border: 1px solid #016aa0;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #016aa0;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #phones button:hover {
    color: #444;
    background-color: #eee;
  }
  
  #views button {
    outline: none;
    width: 198px;
    border: 1px solid #00a8ff;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    background-color: #00a8ff;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  #views button:hover {
    color: #444;
    background-color: #eee;
  }
  
  @media (max-width:900px) {
    #wrapper {
      -webkit-transform: scale(0.8, 0.8);
              transform: scale(0.8, 0.8);
    }
  }
  
  @media (max-width:700px) {
    #wrapper {
      -webkit-transform: scale(0.6, 0.6);
              transform: scale(0.6, 0.6);
    }
    .phone { margin: 0 0 0 -70px; }
  }
  
  @media (max-width:500px) {
    #wrapper {
      -webkit-transform: scale(0.4, 0.4);
              transform: scale(0.4, 0.4);
    }
  }

/* Fade In Animation */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
              
            
!

JS

              
                /*Only needed for the controls*/
phone = document.getElementById("phone_1"),
iframe = document.getElementById("frame_1");


/*View*/
function updateView(view) {
  if (view) {
    phone.className = "phone view_" + view;
  }
}

/*Controls*/
function updateIframe() {

  // preload iphone width and height
  phone.style.width = "375px";
  phone.style.height = "667px";

  /*Idea by /u/aerosole*/
  document.getElementById("wrapper").style.perspective = (
    document.getElementById("iframePerspective").checked ? "1300px" : "none"
  );

}

updateIframe();

/*Events*/
document.getElementById("controls").addEventListener("change", function() {
  updateIframe();
});

document.getElementById("views").addEventListener("click", function(evt) {
  updateView(evt.target.value);
});

document.getElementById("phones").addEventListener("click", function(evt) {

  if(evt.target.value == 1){
    // iphone 6
    width = 375;
    height = 667; 
  }

  if(evt.target.value == 2){
    // samsung
    width = 400;
    height = 640; 
  }

  if(evt.target.value == 3){
    // microsoft
    width = 320;
    height = 480;  
  }

  if(evt.target.value == 4){
    // htc
    width = 360;
    height = 640; 
  }

  if(evt.target.value == 5){
    // ipad mini
    width = 768;
    height = 1024; 
  }

    phone.style.width = width + "px";
    phone.style.height = height + "px"; 

});


 iframe = document.getElementById('frame_1');

  if (iframe.attachEvent){
      iframe.attachEvent("onload", function(){
          afterLoading();
      });
  } else {
      iframe.onload = function(){
          afterLoading();
      };
  }

function afterLoading(){

    setTimeout(function() {
        phone.className = "phone view_1";
        setTimeout(function() {
            // do second thing
            phone.className = "phone view_1 rotate";
        }, 1000);
    }, 1000);

}
              
            
!
999px

Console