<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/arielger/pen/pgraqr?depth=everything&order=popularity&page=12&q=skype&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
background-color: #636c94;
font-family: "Montserrat", Arial, sans-serif;
}
button {
font-family: "Montserrat", Arial, sans-serif;
cursor: pointer;
}
.mail-client {
width: 1300px;
height: 800px;
margin: 50px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
background-color: #fff;
overflow: hidden;
}
.mail-client__left {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
background-color: #e6e9ec;
}
.mail-client__left .new-message-btn {
background-color: #02c386;
color: #fff;
border: none;
height: 75px;
width: 100%;
font-size: 14px;
}
.mail-client__left .new-message-btn > .icon {
margin-right: 10px;
}
.mail-client__left .mail-client__categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 40px;
}
.mail-client__left .mail-client__categories__item {
padding: 0 30px;
line-height: 2.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
color: #82929f;
cursor: pointer;
}
.mail-client__left .mail-client__categories__item:nth-child(1) > .text {
color: #000;
}
.mail-client__left .mail-client__categories__item:nth-child(1) > .number {
color: #538fff;
}
.mail-client__left .mail-client__labels {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 40px;
padding: 0 30px;
}
.mail-client__left .mail-client__labels__title {
font-size: 13px;
margin-bottom: 10px;
}
.mail-client__left .mail-client__labels__item {
line-height: 2.5em;
color: #82929f;
cursor: pointer;
}
.mail-client__left .mail-client__labels__item > .icon {
margin-right: 10px;
}
.mail-client__left .mail-client__labels__item:nth-child(2) .icon {
color: #fd7c4e;
}
.mail-client__left .mail-client__labels__item:nth-child(3) .icon {
color: #c562ef;
}
.mail-client__left .mail-client__labels__item:nth-child(4) .icon {
color: #10c286;
}
.mail-client__left .mail-client__labels__add {
border: none;
background: none;
text-align: left;
outline: none;
padding: 0;
font-size: 16px;
margin-top: 15px;
color: #82929f;
}
.mail-client__left .mail-client__labels__add > .icon {
margin-right: 10px;
}
.mail-client__center {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
background-color: #e6e9ec;
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.mail-client__center .mail-client__sort-by {
height: 75px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 50px;
font-size: 14px;
}
.mail-client__center .mail-client__sort-by > .sort-by {
color: #8e9daa;
margin-right: 5px;
}
.mail-client__center .mail-client__sort-by > .date {
margin-right: 5px;
}
.mail-client__center .mail-client__email-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mail-client__center .mail-client__email-list .mail-client__email-item {
padding: 30px 50px 30px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
line-height: 1.5em;
position: relative;
}
.mail-client__center .mail-client__email-list .mail-client__email-item.selected {
background-color: white;
-webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05), 0 -5px 5px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05), 0 -5px 5px 0 rgba(0, 0, 0, 0.05);
overflow-x: hidden;
}
.mail-client__center .mail-client__email-list .mail-client__email-item__from {
font-size: 18px;
color: #262a2d;
}
.mail-client__center .mail-client__email-list .mail-client__email-item__subject {
color: #5f717f;
}
.mail-client__center .mail-client__email-list .mail-client__email-item__preview {
margin-top: 6px;
font-size: 14px;
color: #8d959f;
line-height: 1.5em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mail-client__center .mail-client__email-list .mail-client__email-item__circle {
color: #538fff;
position: absolute;
line-height: 2em;
font-size: 12px;
left: 30px;
}
.mail-client__center .mail-client__email-list .mail-client__email-item__time {
position: absolute;
right: 30px;
color: #c2c7cd;
font-size: 13px;
}
.mail-client__right {
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
position: relative;
}
.mail-client__right .mail-client__right__up-section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mail-client__right .mail-client__email-actions {
height: 75px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 0 20px;
}
.mail-client__right .mail-client__email-actions > .icon {
color: #a3adbb;
font-size: 24px;
cursor: pointer;
-webkit-transition: all cubic-bezier 0.1s;
transition: all cubic-bezier 0.1s;
}
.mail-client__right .mail-client__email-actions > .icon:hover {
color: #538fff;
}
.mail-client__right .mail-client__search-container {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-left: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding-left: 35px;
}
.mail-client__right .mail-client__search-container > .icon {
color: #a3adbb;
padding-right: 15px;
font-size: 18px;
}
.mail-client__right .mail-client__search-container > .mail-client__search-box {
border: none;
outline: none;
font-size: 18px;
}
.mail-client__right .mail-client__email-detail {
margin-top: 50px;
padding-left: 150px;
padding-right: 100px;
position: relative;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__from-to {
display: block;
font-size: 14px;
color: #8098ab;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__from-to .bold {
color: #454f57;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__time {
position: absolute;
right: 100px;
top: 0;
color: #b1b4b7;
font-size: 14px;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 40px;
left: 90px;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__title {
font-size: 42px;
color: #262a2d;
line-height: 1.25em;
margin: 15px 0;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__description {
margin: 30px 0;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__description p {
color: #6a6c6d;
line-height: 1.75em;
margin-bottom: 10px;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__response-container {
padding-top: 30px;
border-top: 1px solid #e7eaed;
position: relative;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__response {
width: 100%;
border: 0;
outline: none;
color: #4d606e;
font-family: "Montserrat", Arial, sans-serif;
font-size: 14px;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__actions {
position: absolute;
top: 0;
left: -60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-top: 30px;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__actions > .icon {
margin-bottom: 20px;
font-size: 20px;
color: #b0b7c3;
cursor: pointer;
}
.mail-client__right .mail-client__email-detail .mail-client__email-detail__actions > .icon:hover {
color: #000;
}
.mail-client__right .mail-client__send-button {
position: absolute;
bottom: 0;
right: 50px;
border: 0;
color: white;
background-color: #02c386;
padding: 20px 40px;
}
</style></head><body>
<div class="mail-client">
<section class="mail-client__left">
<button class="new-message-btn"><span class="icon fa fa-edit"></span><span>New Message</span></button>
<section class="mail-client__categories">
<div class="mail-client__categories__item">
<span class="text">Inbox</span><span class="number">34</span>
</div>
<div class="mail-client__categories__item">
<span class="text">Sent</span>
</div>
<div class="mail-client__categories__item">
<span class="text">Draft </span>
</div>
<div class="mail-client__categories__item">
<span class="text">Junk</span>
</div>
<div class="mail-client__categories__item">
<span class="text">Trash</span>
</div>
<div class="mail-client__categories__item">
<span class="text">Redminder</span><span class="number">1</span>
</div>
</section>
<section class="mail-client__labels">
<span class="mail-client__labels__title">Labels</span>
<div class="mail-client__labels__item">
<span class="icon fa fa-circle-o"></span><span class="text">Personal</span>
</div>
<div class="mail-client__labels__item">
<span class="icon fa fa-circle-o"></span><span class="text">Work</span>
</div>
<div class="mail-client__labels__item">
<span class="icon fa fa-circle-o"></span><span class="text">Friends</span>
</div>
<button class="mail-client__labels__add"><span class="icon fa fa-plus"></span><span class="text">Add</span></button>
</section>
</section>
<section class="mail-client__center">
<div class="mail-client__sort-by">
<span class="sort-by">Sort by </span><span class="date">Date</span><span class="icon fa fa-caret-down"></span>
</div>
<div class="mail-client__email-list">
<article class="mail-client__email-item">
<span class="mail-client__email-item__time">20:24</span><span class="mail-client__email-item__mark"></span><span class="mail-client__email-item__circle fa fa-circle"></span>
<h5 class="mail-client__email-item__from">
Lisa Guerrero
</h5>
<h5 class="mail-client__email-item__subject">
Comapany goals for 2016
</h5>
<p class="mail-client__email-item__preview">
Hello everyone, I am happy to share with you our new company goals.
</p>
</article>
<article class="mail-client__email-item selected">
<span class="mail-client__email-item__time">14:10</span><span class="mail-client__email-item__mark"></span>
<h5 class="mail-client__email-item__from">
<span class="icon"></span><span class="text">Peter Gregor</span>
</h5>
<h5 class="mail-client__email-item__subject">
Design for health proyect
</h5>
<p class="mail-client__email-item__preview">
Hi Jessica, I love your UI work, and I would like to talk to you
</p>
</article>
<article class="mail-client__email-item">
<span class="mail-client__email-item__time">14:10</span><span class="mail-client__email-item__mark"></span>
<h5 class="mail-client__email-item__from">
<span class="icon"></span><span class="text">Lisa Guerrero</span>
</h5>
<h5 class="mail-client__email-item__subject">
Comapany goals for 2016
</h5>
<p class="mail-client__email-item__preview">
Hello everyone, I am happy to share with you our new company goals.
</p>
</article>
<article class="mail-client__email-item">
<span class="mail-client__email-item__time">14:10</span><span class="mail-client__email-item__mark"></span>
<h5 class="mail-client__email-item__from">
<span class="icon"></span><span class="text">Lisa Guerrero</span>
</h5>
<h5 class="mail-client__email-item__subject">
Comapany goals for 2016
</h5>
<p class="mail-client__email-item__preview">
Hello everyone, I am happy to share with you our new company goals.
</p>
</article>
<article class="mail-client__email-item">
<span class="mail-client__email-item__time">14:10</span><span class="mail-client__email-item__mark"></span>
<h5 class="mail-client__email-item__from">
<span class="icon"></span><Lisa>Guerrero</Lisa>
</h5>
<h5 class="mail-client__email-item__subject">
Comapany goals for 2016
</h5>
<p class="mail-client__email-item__preview">
Hello everyone, I am happy to share with you our new company goals.
</p>
</article>
</div>
</section>
<section class="mail-client__right">
<div class="mail-client__right__up-section">
<div class="mail-client__email-actions">
<span class="icon fa fa-trash"></span><span class="icon fa fa-mail-reply"></span><span class="icon fa fa-mail-reply-all"></span><span class="icon fa fa-long-arrow-right"></span><span class="icon fa fa-ellipsis-h"></span>
</div>
<div class="mail-client__search-container">
<span class="icon fa fa-search"></span><input class="mail-client__search-box" placeholder="Search" type="text" />
</div>
</div>
<div class="mail-client__email-detail">
<span class="mail-client__email-detail__from-to"><span class="bold">Peter Gregor </span><span>to </span><span class="bold">Jessica Larson</span></span><span class="mail-client__email-detail__time">14:10</span><img alt="" class="mail-client__email-detail__avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" />
<h4 class="mail-client__email-detail__title">
Design for health proyect
</h4>
<div class="mail-client__email-detail__description">
<p>
Hi Jessica,
</p>
<p>
I love your UI design work, and I'd like to talk with you about possibly revamping the UI on our desktop application. Can we jump on Skype to discuss it when you have some time?
</p>
<p>
I am looking for a UI designer for an upcoming health app. We already have an established web presence and are now moving to the mobile space.
</p>
<p>
Have a nice day. Peter
</p>
</div>
<div class="mail-client__email-detail__response-container">
<div class="mail-client__email-detail__actions">
<div class="icon fa fa-font"></div>
<div class="icon fa fa-chain"></div>
<div class="icon fa fa-chain-broken"></div>
</div>
<textarea class="mail-client__email-detail__response" cols="30" name="" rows="10"></textarea>
</div>
</div>
<button class="mail-client__send-button">Send</button>
</section>
</div>
</body></html>
