<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>
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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.