<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 lang='en' 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/adamlindqvist/pen/LEOxbJ?limit=all&page=32&q=app" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Open+Sans:400'>
<style class="cp-pen-styles">body {
overflow: hidden;
margin: 0;
background: url(https://9to5mac.files.wordpress.com/2014/08/yosemite.jpg);
background-size: cover;
background-repeat: none;
height: 100vh;
font-family: 'Source Code Pro';
}
p {
color: #444;
}
.italic {
color: #999;
font-style: italic;
}
h1 {
color: #454647;
font-size: 24px;
}
.topbar {
padding-left: 25px;
width: 100%;
background: rgba(255, 255, 255, 0.8);
height: 30px;
font-size: 20px;
line-height: 1.5;
}
.app {
position: absolute;
overflow: hidden;
border-radius: 5px 5px 0 0;
margin: 50px 200px;
width: 700px;
box-shadow: 0 0 20px #333;
}
.larger {
width: 1000px;
}
.top {
cursor: move;
position: relative;
background: rgba(255, 255, 255, 0.95);
width: 100%;
padding: 10px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.buttons {
position: relative;
float: left;
width: 33%;
z-index: 1;
}
.circle {
float: left;
margin: 4px 16px 0 0;
width: 13px;
height: 13px;
border-radius: 50%;
cursor: pointer;
}
.circle:nth-child(1) {
background: #FF5E51;
}
.circle:nth-child(1):hover {
background: #ea1100;
}
.circle:nth-child(2) {
background: #FEBB00;
}
.circle:nth-child(2):hover {
background: #987000;
}
.circle:nth-child(3) {
background: #18CF37;
}
.circle:nth-child(3):hover {
background: #0d741f;
}
.clear {
clear: left;
}
.title {
z-index: 0;
color: #888;
float: left;
width: 33%;
text-align: center;
margin-left: -10px;
}
.info {
color: #BFBFCF;
width: 33%;
float: right;
text-align: right;
}
.words {
color: #ccc;
margin-top: 0;
float: right;
}
.main {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 50px 40px;
background: #f9f8f7;
width: 100%;
}
.content {
margin-top: 40px;
}
button {
cursor: pointer;
position: absolute;
margin: 50px;
background: rgba(255, 255, 255, 0);
border: none;
border-radius: 3px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
color: #fff;
text-shadow: 1px 1px #333;
outline: 0;
}
button:hover {
background: rgba(255, 255, 255, 0.4);
}
button span {
color: #FFF;
font-size: 14px;
text-shadow: 0 0 8px #333;
}
</style></head><body>
<!-- Text editor concept -->
<!-- Inspiration from https://dribbble.com/shots/1917567-Text-Editor-Concept -->
<div class='topbar'>
<i class='fa fa-apple'></i>
</div>
<button>
<i class='fa fa-file-text-o fa-3x'></i>
<br>
<br>
<span>Untitled.txt</span>
</button>
<div class='app'>
<div class='top'>
<div class='buttons'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
</div>
<div class='title'>
Untitled.txt
</div>
<div class='info'>
Saved
</div>
<div class='clear'></div>
</div>
<div class='main'>
<p class='words'>220 words</p>
<div class='content'>
<h1>Title</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class='italic'>Nulla voluptatem vero quae ipsam, quis alias, eaque aliquam atque libero adipisci sint obcaecati cupiditate aut at voluptatum consequatur, repellat, amet earum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores rem quaerat fugiat odio vitae distinctio minima optio beatae deserunt excepturi velit nemo iste sint ullam, quam dicta, sed mollitia esse. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script >$(".app").draggable({
handle: ".top",
scroll: false
});
$("button").draggable({
scroll: false,
cancel: false
});
$('.circle:nth-child(1)').click(function(){
$('.app').fadeOut();
$('button').fadeIn();
});
$('.circle:nth-child(2)').click(function(){
$('.app').fadeOut();
$('button').fadeIn();
});
$('.circle:nth-child(3)').click(function(){
$('.app').toggleClass('larger', 1000);
});
$('button').dblclick(function(){
$('.app').fadeIn();
});
$('.content').each(function(){
this.contentEditable = true;
});
//# sourceURL=pen.js
</script>
</body></html>
