<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/CloudJS/pen/EZYyyg?limit=all&page=5&q=mac" />
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css'>
<style class="cp-pen-styles">.mac-window {
border-radius:5px;
overflow:hidden;
width:600px;
box-shadow:0 10px 60px rgba(0,0,0,.2);
z-index:99999;
}
.mac-window.minimize {
top:125%;-webkit-transform:translateY(-50%) translateX(-50%) scale(1);
transform:translateY(-50%) translateX(-50%) scale(1);
opacity:1;-webkit-transition:all .5s;transition:all .5s;
}
.mac-window.minimize:hover {
top:120%;
-webkit-transition:all .5s;transition:all .5s;
}
.mac-window.maximize {
height:100%;
max-height:100%;
width:100%
max-width:100%;
-webkit-transform:translateY(-50%) translateX(-50%) scale(1);
transform:translateY(-50%) translateX(-50%) scale(1);
}
.mac-window .title-bar {
padding: 8px 12px;
background:#d0cfd0;
background:-webkit-gradient(linear,left bottom,left top,from(#c8c5c8),to(#eae7ea));
background:-webkit-linear-gradient(bottom,#c8c5c8,#eae7ea);background:linear-gradient(0deg,#c8c5c8,#eae7ea);
width:100%;
clear:both;
}
.mac-window .title-bar .buttons {
height:100%;
width:51px;
float:left;
margin-left:9px;
}
.mac-window .title-bar .buttons .close,
.mac-window .title-bar .buttons .maximize,
.mac-window .title-bar .buttons .minimize {
float:left;
height:10px;
width:10px;
border-radius:50%;
margin-top:5px;
background:#fb4948;
border:1px solid rgba(214,46,48,.15);
position:relative;
}
.mac-window .title-bar .buttons .close:before,
.mac-window .title-bar .buttons .maximize:before,
.mac-window .title-bar .buttons .minimize:before {
content:"";
position:absolute;
height:1px;
width:8px;
background:#360000;
top:50%;
left:50%;
-webkit-transform:translateY(-50%) translateX(-50%) rotate(45deg);
transform:translateY(-50%) translateX(-50%) rotate(45deg);
opacity:0;
}
.mac-window .title-bar .buttons .close:after,
.mac-window .title-bar .buttons .maximize:after,
.mac-window .title-bar .buttons .minimize:after {
content:"";
position:absolute;
height:1px;
width:8px;
background:#360000;
top:50%;
left:50%;
-webkit-transform:translateY(-50%) translateX(-50%) rotate(-45deg);transform:translateY(-50%) translateX(-50%) rotate(-45deg);
opacity:0;
}
.mac-window .title-bar .buttons .minimize {
background:#fdb225;
margin-left:6.5px;
border-color:rgba(213,142,27,.15);
position:relative;
}
.mac-window .title-bar .buttons .minimize:before {
content:"";
position:absolute;
height:1px;
width:8px;
background:#864502;
top:50%;
left:50%;
-webkit-transform:translateY(-50%) translateX(-50%);
transform:translateY(-50%) translateX(-50%);
}
.mac-window .title-bar .buttons .minimize:after {
display:none;
}
.mac-window .title-bar .buttons .maximize{
float:right;
background:#2ac833;
border-color:rgba(30,159,32,.15)
}
.mac-window .title-bar .buttons .maximize:before {
width:6px;
height:6px;
background:#0b5401;-webkit-transform:translateY(-50%) translateX(-50%);
transform:translateY(-50%) translateX(-50%);
border:1px solid #2ac833;
border-radius:2px;
}
.mac-window .title-bar .buttons .maximize:after {
width:10px;
height:2px;
background:#2ac833;
-webkit-transform:translateY(-50%) translateX(-50%) rotate(45deg);transform:translateY(-50%) translateX(-50%) rotate(45deg);
}
.mac-window .title-bar .buttons:hover .close:after,
.mac-window .title-bar .buttons:hover .close:before,
.mac-window .title-bar .buttons:hover .maximize:after,
.mac-window .title-bar .buttons:hover .maximize:before,
.mac-window .title-bar .buttons:hover .minimize:after,
.mac-window .title-bar .buttons:hover .minimize:before {
opacity:1;
}
.mac-window .title-bar .title {
height:100%;
text-align:center;
margin-right:60px;
font-family: Helvetica Neue,helvetica,arial,sans-serif;
line-height:21px;
font-size:13px;
color:#222022;
}
.mac-window .window {
background:#fff;
max-height:90vh;
height:100%;
}
body {
background:black;
}
.mac-window {
width:900px;
height:300px;
}
.content {
margin-top:0px;
}
div iframe {
margin-top:21px;
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
div p {
margin-top:21px;
}</style></head><body>
<div class="mac-window active">
<div class="window">
<div class="title-bar">
<div class="buttons">
<div class="close"></div>
<div class="minimize"></div>
<div class="maximize"></div>
</div>
<div class="title">
Terminal
</div>
</div>
<div class="content">
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-1.12.4.js'></script><script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
<script >$(function() {
$('.mac-window').resizable();
$('.mac-window').draggable({
handle: ".title-bar",
containment: "window",
stack: ".window"
});
});
$(".close").click(function() {
$(".mac-window").toggle();
});
//# sourceURL=pen.js
</script>
</body></html>
