<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/romamilkovic/pen/PPyvXa?limit=all&page=15&q=app" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic&subset=latin,latin-ext);
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ol,
ul {
padding: 0;
list-style: none;
}
a {
-webkit-transition: color 200ms ease-in-out;
transition: color 200ms ease-in-out;
text-decoration: none;
color: #2196f3;
font-weight: 600;
}
a:hover {
color: #0c7cd5;
}
a:active {
color: #0a6ebd;
}
img {
max-width: 100%;
}
.compose, .search-button, .modal-button button {
border: none;
outline: none;
background: #f0f0f0;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
color: #333333;
background-color: #D4DBE2;
font-family: "Open Sans", sans-serif;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
p {
color: #696969;
}
.window {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 1170px;
background-color: white;
-webkit-box-shadow: 0px 8px 20px rgba(42, 47, 57, 0.4);
box-shadow: 0px 8px 20px rgba(42, 47, 57, 0.4);
}
.toolbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 1170px;
min-width: 1170px;
height: 50px;
padding: 0 20px;
background-color: #f6f7f8;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.sidebar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 20px;
background-color: #2a2f39;
-webkit-box-flex: 1;
-ms-flex: 1 0 100px;
flex: 1 0 100px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 50px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.categories li {
position: relative;
}
.categories i {
margin-bottom: 30px;
cursor: pointer;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
opacity: 0.6;
color: white;
font-size: 20px;
}
.categories i:hover {
opacity: 1;
}
.notification {
position: absolute;
top: -20px;
right: -20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 30px;
height: 30px;
color: white;
border: 3px solid #2a2f39;
border-radius: 50%;
background-color: #ea2e49;
font-size: 12px;
font-weight: 600;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.is-active {
opacity: 1 !important;
}
.compose {
padding: 10px 15px;
-webkit-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
color: white;
border-radius: 3px;
background-color: #2196f3;
font-size: 20px;
}
.compose:hover {
background-color: #0c7cd5;
}
.compose:active {
background-color: #0a6ebd;
}
.user-profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-bottom: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.user-profile i {
margin-top: 20px;
cursor: pointer;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
opacity: 0.6;
color: white;
font-size: 20px;
}
.user-profile i:hover {
opacity: 1;
}
.inbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 400px;
min-width: 400px;
margin: 0;
padding: 0;
border-top: 1px solid #d9e0e2;
border-right: 1px solid #d9e0e2;
background: #f6f7f8;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.inbox-item {
height: 200px;
padding: 20px;
cursor: pointer;
-webkit-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
border-bottom: 1px solid #d9e0e2;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.inbox-item:hover {
background-color: #edf5fd;
}
.inbox-item:last-child {
border-bottom: 0;
}
.inbox-sender {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 12px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.inbox-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-flow: row-reverse wrap;
flex-flow: row-reverse wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.inbox-title h4 {
margin: 0;
margin-top: 10px;
}
.sender-name {
font-weight: 600;
}
.sender-date {
font-weight: 600;
}
.sender-date span {
opacity: 0.5;
}
.sender-label {
margin-right: 10px;
font-size: 14px;
}
.content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.message {
width: 100%;
padding: 30px;
border-top: 1px solid #d9e0e2;
background-color: white;
}
.message-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.message-from {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.message-from img {
width: 50px;
height: 50px;
border-radius: 4px;
-o-object-fit: cover;
object-fit: cover;
}
.message-sender {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 10px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.message-sender h5 {
margin: 0;
}
.message-sender span {
margin-top: 5px;
font-size: 12px;
}
.message-is-active {
background: #edf5fd;
}
.message-tools i {
margin-left: 20px;
cursor: pointer;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
color: #2a2f39;
}
.message-tools i:hover {
opacity: 0.6;
}
.window-actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.actions-item {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #dddddd;
}
.actions-item:nth-child(1) {
background-color: #f44336;
}
.actions-item:nth-child(2) {
background-color: #ffeb3b;
}
.actions-item:nth-child(3) {
background-color: #4caf50;
}
input[type="search"] {
width: 300px;
height: 25px;
padding: 0 10px;
border: none;
border: 1px solid #e9e9e9;
border-radius: 3px;
background-color: white;
font-size: 12px;
}
input[type="search"]:focus {
border: 1px solid #2196f3;
outline: none;
}
.search-button {
height: 27px;
max-height: 27px;
margin-left: -8px;
padding: 0 15px;
color: white;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: #ea2e49;
font-size: 12px;
font-weight: 600;
}
.search-button:hover {
background-color: #d01530;
}
.search-button:active {
background-color: #b9132a;
}
.message-labels .message-labels-item {
margin: 20px 0;
}
.red {
border: 2px solid #ea2e49;
background-color: rgba(234, 46, 73, 0.5);
}
.blue {
border: 2px solid #2196f3;
background-color: rgba(33, 150, 243, 0.5);
}
.yellow {
border: 2px solid #ffeb3b;
background-color: rgba(255, 235, 59, 0.5);
}
.green {
border: 2px solid #4caf50;
background-color: rgba(76, 175, 80, 0.5);
}
.message-labels-item {
width: 15px;
height: 15px;
border-radius: 50%;
}
/* Overlay and Modal */
.overlay {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden;
-webkit-transition: visibility 800ms ease-in-out, opacity 500ms ease-in-out;
transition: visibility 800ms ease-in-out, opacity 500ms ease-in-out;
opacity: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.is-open {
visibility: visible;
opacity: 1;
}
.modal {
width: 520px;
border-radius: 3px;
background-color: white;
-webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
}
.modal-title {
position: relative;
padding: 20px;
text-align: center;
}
.modal-form input,
.modal-form textarea {
width: 100%;
margin: 5px 0;
padding: 10px;
border: 1px solid #e9e9e9;
border-radius: 3px;
outline: none;
}
.modal-form input:focus,
.modal-form textarea:focus {
border: 1px solid #2196f3;
}
.modal-form textarea {
resize: vertical;
}
.modal-body {
padding: 20px;
border-top: 1px solid #d9e0e2;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color: #f6f7f8;
}
.modal-button {
padding-top: 10px;
text-align: right;
}
.modal-button button {
padding: 5px 20px;
color: white;
border-radius: 3px;
background-color: #2196f3;
}
.modal-button button:hover {
background-color: #0c7cd5;
}
.modal-button button:active {
background-color: #0a6ebd;
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
width: 15px;
height: 15px;
cursor: pointer;
-webkit-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
.modal-close:hover {
opacity: 0.5;
}
.modal-close:after {
position: absolute;
top: 7px;
right: 0px;
width: 15px;
height: 2px;
content: "";
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #333333;
}
.modal-close:before {
position: absolute;
top: 7px;
right: 0px;
width: 15px;
height: 2px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-color: #333333;
}
</style></head><body>
<div class="window">
<div class="toolbar">
<ul class="window-actions">
<li class="actions-item"></li>
<li class="actions-item"></li>
<li class="actions-item"></li>
</ul>
<div class="search-box">
<input type="search" value="#Swedish" placeholder="Type to search"/>
<button class="search-button"> <i class="fa fa-search"></i></button>
</div>
</div>
<div class="content">
<div class="overlay">
<div class="modal">
<div class="modal-title">New message<span class="modal-close"></span></div>
<div class="modal-body">
<form class="modal-form">
<input type="text" placeholder="To"/>
<input type="text" placeholder="Subject"/>
<textarea name="message" rows="5" placeholder="Your text"></textarea>
<div class="modal-button">
<button class="send">Send</button>
</div>
</form>
</div>
</div>
</div>
<aside class="sidebar">
<nav>
<button class="compose"> <i class="fa fa-pencil"></i></button>
<ul class="categories">
<li>
<div class="notification"><span>5</span></div><i class="fa fa-inbox is-active"></i>
</li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-send"></i></li>
<li><i class="fa fa-trash"></i></li>
</ul>
</nav>
<ul class="message-labels">
<li class="message-labels-item yellow"></li>
<li class="message-labels-item blue"></li>
<li class="message-labels-item red"></li>
<li class="message-labels-item green"></li>
</ul>
<div class="user-profile"><i class="fa fa-cog"></i><i class="fa fa-sign-out"></i></div>
</aside>
<ul class="inbox">
<li class="inbox-item">
<div class="inbox-sender">
<div class="sender-name"> <a href="#">Jeremy Boateng </a></div>
<div class="sender-date"><i class="sender-label fa fa-paperclip"></i><span>Right now</span></div>
</div>
<div class="inbox-title">
<div class="message-labels-item blue"></div>
<h4>What are you doing tomorrow?</h4>
</div>
<p class="inbox-short">Lörem ipsum dolör. Sit amet cönsectetur adipisicing elit sed dö eiusmod. Tempör incididunt ut laböre, et dölöre magnå. Aliquå såpien sollicitudin mi. Dapibus blåndit quäm. Erös risus ornåre leo årcu. </p>
</li>
<li class="inbox-item">
<div class="inbox-sender">
<div class="sender-name"> <a href="#">Jeremy Boateng </a></div>
<div class="sender-date"><i class="sender-label fa fa-paperclip"></i><span>Yesterday, 12:42pm</span></div>
</div>
<div class="inbox-title">
<div class="message-labels-item yellow"></div>
<h4>What are you doing tomorrow?</h4>
</div>
<p class="inbox-short">Lörem ipsum dolör. Sit amet cönsectetur adipisicing elit sed dö eiusmod. Tempör incididunt ut laböre, et dölöre magnå. Aliquå såpien sollicitudin mi. Dapibus blåndit quäm. Erös risus ornåre leo årcu. </p>
</li>
<li class="inbox-item">
<div class="inbox-sender">
<div class="sender-name"> <a href="#">Marko Handanovic </a></div>
<div class="sender-date"><i class="sender-label fa fa-paperclip"></i><span>2 days ago, 08:32am</span></div>
</div>
<div class="inbox-title">
<div class="message-labels-item green"></div>
<h4>Fashion News</h4>
</div>
<p class="inbox-short">Cardigan before they sold out chartreuse fashion axe, 90's leggings mixtape stumptown waistcoat quinoa. Whatever bicycle rights pop-up keytar. Keytar fingerstache readymade four loko, fanny pack kickstarter.</p>
</li>
<li class="inbox-item message-is-active">
<div class="inbox-sender">
<div class="sender-name"> <a href="#">Zlatan Ibrahimovic </a></div>
<div class="sender-date"><i class="sender-label fa fa-paperclip"></i><span>A month ago, 01:02pm</span></div>
</div>
<div class="inbox-title">
<div class="message-labels-item red"></div>
<h4>The challenge of learning Swedish</h4>
</div>
<p class="inbox-short">Most Swedes speak English – which certainly helps a first-time visitor in Stockholm. But it makes learning Swedish somewhat harder, according to former expat Charlotte West. </p>
</li>
</ul>
<div class="message">
<div class="message-info">
<div class="message-from"><img src="http://blog.sportafolio.com/wp-content/uploads/2015/08/zlatan.jpg" alt="img"/>
<div class="message-sender">
<h5>Zlatan Ibrahimovic</h5><span>To: <a href="#">destabiliseus@gmail.com</a></span>
</div>
</div>
<div class="message-tools"><i class="fa fa-reply"></i><i class="fa fa-star-o"></i><i class="fa fa-trash-o"></i></div>
</div>
<h2 class="message-title">The challenge of learning Swedish</h2>
<p class="message-body">Most Swedes speak English – which certainly helps a first-time visitor in Stockholm. But it makes learning Swedish somewhat harder, according to former expat Charlotte West.</p><img src="http://blogs.haverford.edu/lund/files/2014/02/sweden-798-b74c07f139ac68786a085e2650fd9ad9.jpg" alt="img"/>
<h3>Newly arrived</h3>
<p class="message-body">I arrived in Sweden in August 2002 armed with Prisma’s Abridged English-Swedish and Swedish-English Dictionary and an eight-week intensive Swedish course from the University of California at Berkeley behind me. Four years later, the dog-eared dictionary had grammar notes scribbled in the margins and I had become a fluent Swedish speaker, more or less.</p>
<h2>Swedish Word of the Day</h2>
<p class="message-body">A big part of the reason my spoken Swedish got good is that I quickly met Swedish friends who were willing to help me practise. One of our techniques was keeping track of our ‘Swedish Word of the Day’ on a list tacked to the kitchen cupboard.</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 >$(document).ready(function() {
$('.compose').click(function() {
$('.overlay').addClass('is-open');
})
$('.modal-close, .send').click(function() {
$('.overlay').removeClass('is-open');
})
})
//# sourceURL=pen.js
</script>
</body></html>
