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 class="container">

	<h2>Pen View <span>with checkbox input</span></h2>
	
	<input type="checkbox" id="view-0">
	<label for="view-0">Editor View</label>
	<div class="content" id="content-0">
		<div> This is the place you actually write the code to make Pens. The standard editor is HTML, CSS, and JavaScript. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM">/ pen /</a></div>
	</div>
	
	<input type="checkbox" id="view-1">
	<label for="view-1">Full Page View</label>
	<div class="content" id="content-1">
		<div>A way to look at (or share) a Pen that uses almost the whole screen to show the preview, and doesn’t show the code. <a target="_top" href="https://codepen.io/josetxu/full/mdRgPLM">/ full /</a></div>
	</div>
	
	<input type="checkbox" id="view-2">
	<label for="view-2">Details View</label>
	<div class="content" id="content-2">
		<div>Shows a large preview of the Pen, but you can still turn on the code areas if you wish. Details has more social information about your Pen, like who has loved it, the comments, sharing buttons, the license, and more. <a target="_top" href="https://codepen.io/josetxu/details/mdRgPLM">/ details /</a></div>
	</div>
	
	<input type="checkbox" id="view-3">
	<label for="view-3">Debug View</label>
	<div class="content" id="content-3">
		<div>For looking at your Pen full-screen with no iframe. It’s only for logged in you (unless you’re PRO) , so it’s not great for sharing, but it’s great for debugging!  <a target="_top" href="https://codepen.io/josetxu/debug/mdRgPLM">/debug/</a></div>
	</div>
	
	<input type="checkbox" id="view-4">
	<label for="view-4">Live View</label>
	<div class="content" id="content-4">
		<div>A full-screen preview of your Pen that live updates as you code. For PRO members only. <a target="_top" href="https://codepen.io/josetxu/live/mdRgPLM">/live/</a></div>
	</div>
	
	<input type="checkbox" id="view-5">
	<label for="view-5">Collab Mode</label>
	<div class="content" id="content-5">
		<div>And Professor Mode are PRO-only views for working in real-time with other people. <a target="_top" href="https://codepen.io/josetxu/collab/mdRgPLM">/collab/</a></div>
	</div>
	
	<input type="checkbox" id="view-6">
	<label for="view-6">Presentation Mode</label>
	<div class="content" id="content-6">
		<div>PRO-only view using the Pen Editor on an overhead projector, so there are more options for changing the view and extra room. <a target="_top" href="https://codepen.io/josetxu/pres/mdRgPLM">/pres/</a></div>
	</div>
	
</div>
	
	
	
	
	
<div class="container">	
	
	<h2>Editor Layout  <span>with option input</span></h2>

	<input type="radio" name="lay" id="lay-1">
	<label for="lay-1">Left</label>
	<div class="content" id="layout-1">
		<div>The code editor is placed on the left. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/left/">/left/</a></div>
	</div>
	
	<input type="radio" name="lay" id="lay-2">
	<label for="lay-2">Top</label>
	<div class="content" id="layout-2">
		<div>The code editor is placed on top. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/top/">/top/</a></div>
	</div>
	
	<input type="radio" name="lay" id="lay-3">
	<label for="lay-3">Right</label>
	<div class="content" id="layout-3">
		<div>The code editor is placed on the right. <a target="_top" href="https://codepen.io/josetxu/pen/mdRgPLM/right/">/right/</a></div>
	</div>	

</div>
              
            
!

CSS

              
                body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	font-family: Arial, Helvetica, sans-serif;
}

body * { 
	box-sizing: border-box; 
	outline: none; 
}

.container {
    width: 50%;
    min-height: 100vh;
    padding: 5vmin 5vmin 5vmin 10vmin;
    float: left;
}

.container + .container {
	padding: 5vmin 10vmin 5vmin 5vmin;
}

h2 {
    color: #333;
}

h2:before {
	content: "";
	background: url(https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico) no-repeat center center #fff;
    width: 1.25em;
    height: 1.25em;
    border-radius: 100%;
    display: inline-block;
    margin: 0 0.5em -0.3em 0;
    background-size: calc(1.5em);
}

h2 span {
    font-weight: normal;
    font-size: 0.55em;
    float: right;
    margin-top: 1.3vmin;
    color: #8484841a;
    text-shadow: -1px -1px 0 #00000069;
}

input {display:none;}

label {
	width: 100%;
    float: left;
    background: #1f1f1f;
    outline: none;
    border: 0;
    margin: 0;
    padding: 0.65em;
    cursor: pointer;
    border-radius: 0.15em;
    overflow: hidden;
    color: #fff;
    font-size: 1.35em;
}

label:hover {
    background: #000;
}

input:checked + label {
	background: #000;
}

.content {
	float: left;
    width: 100%;
    background: #333;
    color: #e6e6e6;
    overflow: hidden;
    max-height: 0vmin;
    transition: max-height 0.75s ease 0s;
    margin-top: -0.5vmin;
    margin-bottom: 1vmin;
	border-radius: 0 0 0.5vmin 0.5vmin;
    border-bottom: 0.5vmin solid #1f1f1f;
}

label:hover + .content {
    border-bottom-color: #000;
}

.content > div {
	padding: 0.5em 0.75em;
    border-left: 0.25em dotted #fff;
    border-right: 0.25em dotted #fff;
    text-align: justify;
    font-size: 0.95em;
    color: #e6e6e6;
}

.content a {
    float: right;
    background: #356379;
    color: #fff;
    font-size: 0.8em;
    text-decoration: none;
    padding: 0.25em 0.5em;
    margin: 0.5vmin 0;
    border-radius: 0.15em;
    word-spacing: -0.25em;
}
}

.content a:hover {
    background: #0070ca;
}

.container + .container .content a {
    margin-top: 0;
}

input:checked + label + .content {
	max-height: 20vh;
	transition: max-height 0.75s ease 0s;
}


.container + .container input:checked + label + .content {
	max-height: 10vh;
}


label:after {
    content: "?";
    float: right;
    font-size: 0.75em;
    background: #333;
    color: #fff;
    font-weight: bold;
    border-radius: 100%;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
    transition: all 0.5s ease 0s;
}
	
label:hover:after {
    background: #fff;
    color: #222;
}
	
input:checked + label:after {
    background: #fff;
    color: #222;
    content: "\00BB";
    transform: rotate(90deg);
    line-height: 1.25em;
    transition: all 0.5s ease 0s;
    text-align: center;
}
	
input:checked + label:hover:after {
    background: #fff;
    color: #222;
    transform: rotate(-90deg);
}


label[for=view-0]:before, 
label[for=view-1]:before, 
label[for=view-2]:before {
    content: "FREE";
    font-size: 0.5em;
    background: #a2a2a2;
    padding: 0.25em 0.5em;
    font-weight: bold;
    margin: 0.4em 1em 0 0;
    float: left;
    color: #1f1f1f;
    border-radius: 0.25em;
}



label[for=view-3]:before,
label[for=view-4]:before,
label[for=view-5]:before,
label[for=view-6]:before {
    content: "PRO";
    font-size: 0.65em;
    background: #e2c12b;
    padding: 0.25vmin 0.65vmin;
    font-weight: bold;
    margin: 0.4vmin 1vmin 0 0;
    float: left;
    color: #1f1f1f;
    border-radius: 0.25vmin;
}


input[type=radio]:checked + label:after {
    content: "?";
    transform: none;
    line-height: 1.5em;
}

label[for=lay-1]:before, label[for=lay-2]:before, label[for=lay-3]:before {
    content: "";
    background: 
		linear-gradient(90deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(0deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em);
    width: 1.25em;
    height: 1.25em;
    float: left;
    margin-right: 0.35em;
    border-radius: 0.05em;
}
	
label[for=lay-2]:before {
    background: 
		linear-gradient(180deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(90deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em)
}

[for=lay-3]:before {
    background: 
		linear-gradient(-90deg, #fff0 0vmin, #fff0 0.4em, #1f1f1f 0.4em, #1f1f1f 0.5em, #fff 0.5em), repeating-linear-gradient(180deg, #fff 0em, #fff 0.35em, #1f1f1f 0.35em, #1f1f1f 0.45em, #fff 0.45em, #fff 0.45em) !important
}







@media (max-width:767px){
	.container {
		width: 100%;
		padding: 5vmin !important;
		min-height: auto;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console