<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/leonardoballand/pen/oYvgBG?depth=everything&order=popularity&page=11&q=skype&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">html, body {
background: #f3f9ff;
}
#sidebar {
position: fixed;
background: white;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.1);
padding: 0;
height: 100vh;
}
#sidebar .title {
padding: 0 20px;
}
#sidebar .title h1 {
font-size: 100%;
}
#sidebar .title h1 i {
color: #8e44ad;
}
#sidebar .title a {
font-size: 100%;
line-height: 72px;
color: #a0aeaf;
}
#sidebar .menu .title {
margin-bottom: -2em;
}
#sidebar .menu .title h2 {
font-size: 100%;
color: #8e44ad;
}
#sidebar .menu .title h2 i {
color: #b1bdbd;
}
#sidebar .menu li {
padding: 10px 20px;
box-sizing: border-box;
color: #9baaab;
}
#sidebar .menu li i {
margin-right: 10px;
}
#sidebar .menu2 {
padding: 10px 20px;
}
#sidebar .menu2 li {
margin: 1em 0;
}
#sidebar .menu2 li i {
color: #b1bdbd;
}
#content #content_nav {
background: white;
height: 50px;
box-sizing: border-box;
padding: 5px;
line-height: 10px;
font-size: 80%;
}
#content #content_nav form {
width: 40vw;
height: 30px;
display: inline-block;
}
#content #content_nav form .input-field {
height: 30px;
margin: 0;
padding: 0;
}
#content #content_nav form .input-field label.active {
font-size: 1.2rem;
transform: translateY(0);
}
#content #content_nav form input {
border: none;
}
#content #content_nav .nav_header {
display: inline-block;
font-size: 100%;
line-height: 45px;
}
#content #content_nav .nav_header li {
display: inline-block;
margin: 0 10px;
}
#content #content_nav .nav_header li img {
border-radius: 50%;
width: 20px;
vertical-align: middle;
}
#content #content_nav .nav_header li a {
color: #a0aeaf;
}
#content #content_nav .nav_header li i {
margin-right: 5px;
}
#content #subnav {
height: 50px;
vertical-align: middle;
}
#content #subnav .nav_arrows {
height: 50px;
width: 20vw;
margin-top: 15px;
}
#content #subnav .nav_arrows a {
position: relative;
background: white;
margin: 0 2px;
padding: 5px 10px;
color: #a0aeaf;
}
#content #subnav .nav_buttons {
height: 50px;
margin-top: 10px;
}
#content #subnav .nav_buttons .btn {
margin-right: 5px;
text-transform: initial;
}
#content #profile {
background: white;
box-sizing: border-box;
padding: 2em;
}
#content #profile .divider {
background-color: #f6f7f7;
height: 2px;
}
#content #profile .profile_header {
text-align: center;
}
#content #profile .profile_header h2 {
font-size: 150%;
margin: .5em 0 0 0;
}
#content #profile .profile_header p {
color: #9dacad;
margin: 5px;
}
#content #profile .profile_header img {
width: 100px;
height: 100px;
border-radius: 50%;
}
#content #profile .profile_header li {
display: inline-block;
padding: 10px;
}
#content #profile .profile_header li i.fa-star {
color: #f1c40f;
margin: 1px;
}
#content #profile .profile_header li i.star-disabled {
color: #dae0e0;
}
#content #profile .profile_header li:first-child {
padding-left: 0;
border-right: 2px solid #e8ecec;
}
#content #profile .profile_header li .stats {
color: #333;
}
#content #profile .profile_header li .stats .fa-fire {
color: #e74c3c;
}
#content #profile .profile_information h3, #content #profile .profile_custom h3 {
font-size: 110%;
margin-bottom: 1.5em;
}
#content #profile .profile_information h4, #content #profile .profile_custom h4 {
font-size: 90%;
margin: 0;
color: #9dacad;
}
#content #profile .profile_information p, #content #profile .profile_custom p {
margin: 0 0 10px 0;
}
#content #profile .profile_tags {
padding: 0;
}
#content #profile .profile_tags h3 {
font-size: 110%;
margin-bottom: 1.5em;
}
#content #profile .profile_tags .chip {
background: #f3f9ff;
color: #a0aeaf;
font-size: .7em;
font-weight: normal;
border-radius: 5px;
}
#content #profile .profile_tags .chip a {
color: #a0aeaf;
}
#content #profile .profile_owner {
line-height: 30px;
}
#content #profile .profile_owner img {
border-radius: 50%;
margin-right: 10px;
}
#content #profile .profile_owner span {
color: #9baaab;
}
#content #profile_content nav {
background-color: rgba(127, 140, 141, 0.1);
box-shadow: none;
overflow: hidden;
}
#content #profile_content nav ul {
width: 45vw;
overflow: hidden;
display: inline-block;
}
#content #profile_content nav ul .active {
box-shadow: inset 0px -3px 0px #8e44ad;
background: none;
color: #8e44ad;
font-weight: bold;
}
#content #profile_content nav ul li a:hover {
box-shadow: inset 0px -3px 0px #8e44ad;
background: none;
color: #8e44ad;
}
#content #profile_content nav ul a {
color: #abb8b9;
}
#content #profile_content nav ul .tab {
text-transform: initial;
font-size: .6em;
}
#content #profile_content nav ul .tab:first-child {
margin-left: 2em;
}
#content #profile_content nav .nav_arrows {
display: inline-block;
float: right;
width: 5vw;
text-align: right;
margin-right: 1em;
}
#content #profile_content nav .nav_arrows a {
margin: 1px;
background: white;
padding: 2px 5px;
border-radius: 2px;
}
#content #profile_content nav .nav_arrows a i {
text-align: center;
width: 10px;
height: 10px;
color: #abb8b9;
}
#content #profile_content .profile-content {
clear: both;
background: white;
height: auto;
text-align: left;
margin: 0;
padding: 2em;
}
#content #profile_content .profile-content h3 {
font-size: 120%;
}
#content #profile_content .profile-content .notes {
padding-right: 6em;
}
#content #profile_content .profile-content .notes .note {
margin: 2em 0;
}
#content #profile_content .profile-content .notes .note img {
width: 50px;
border-radius: 50%;
}
#content #profile_content .profile-content .notes .note .note-content {
margin-left: 75px;
}
#content #profile_content .profile-content .notes .note .note-content p {
margin-bottom: 5px;
}
#content #profile_content .profile-content .notes .note .note-content span {
color: #b1bdbd;
}
#content footer .panel {
box-sizing: border-box;
height: 150px;
padding: 2em;
background: white;
}
#content footer .panel i {
font-size: 1.3rem;
line-height: 5rem;
}
#content footer .panel h4 {
font-size: 0.9rem;
line-height: 1.2rem;
margin: 0 0 1em 0;
}
#content footer .panel h4 i {
font-size: 2rem;
line-height: 1rem;
margin-right: 1rem;
}
#content footer .panel h4 i:last-child {
font-size: 125%;
color: #ccd4d5;
}
#content footer .panel .panel-icon {
margin-top: 1em;
margin-right: 2em;
height: 40px;
width: 40px;
text-align: center;
}
#content footer .panel .panel-icon i {
line-height: 40px;
}
#content footer .panel .skype {
background: rgba(52, 152, 219, 0.2);
border-radius: 50%;
color: #3498db;
}
#content footer .panel .paypal {
background: rgba(46, 204, 113, 0.2);
border-radius: 50%;
color: #2ecc71;
}
#content footer .panel .fa-skype {
color: #3498db;
}
#content footer .panel .fa-paypal {
color: blue;
}
#content footer .add-widget {
background: rgba(52, 152, 219, 0.2);
text-align: center;
}
#content footer .add-widget .widget {
text-transform: capitalize;
}
#content footer .add-widget .widget i {
width: 100%;
height: 5px;
}
/* Helpers */
.menu .active {
background: #efe3f4;
border-left: 4px solid #8e44ad;
color: #8e44ad !important;
padding: 10px 15px !important;
}
</style></head><body>
<div class="row">
<div id="sidebar" class="col s2">
<div class="title">
<h1 class="left"><i class="fa fa-cloud prefix"></i> AgileCRM</h1>
<a href="#!" class="right"><i class="fa fa-bars"></i></a>
</div>
<div class="clearfix"></div>
<ul class="menu">
<li class="title">
<h2><span class="suffix">Sales</span> <i class="fa fa-caret-up right"></i></h2>
</li>
<li><i class="fa fa-home"></i> Home</li>
<li class="active"><i class="fa fa-users"></i> Contacts</li>
<li><i class="fa fa-building"></i> Companies</li>
<li><i class="fa fa-comments"></i> Deals</li>
<li><i class="fa fa-briefcase"></i> Cases</li>
<li><i class="fa fa-file"></i> Documents</li>
</ul>
<ul class="menu2">
<li>Marketing <i class="fa fa-caret-down right"></i></li>
<li>Services <i class="fa fa-caret-down right"></i></li>
</ul>
</div><!-- .s4 sidebar -->
<div id="content" class="col s10 offset-s2">
<div class="row">
<div id="content_nav" class="col s12">
<form>
<div class="input-field">
<input id="search" type="search" placeholder="Type in to Search..." required>
<label for="search"><i class="fa fa-search"></i></label>
</div>
</form>
<i class="fa fa-bar-chart"></i>
<div class="nav_header right">
<li>
<a href="#!">
<i class="fa fa-plus"></i> Add
</a>
</li>
<li>
<a href="#!">
<i class="fa fa-pie-chart"></i>
</a>
</li>
<li>
<a href="#!">
<img src="http://media.lemeilleurjobdete.com/uploads/4185/profil-1437318519.jpg" alt="profile_pic" />
<i class="fa fa-caret-down"></i>
</a>
</li>
<li>
<a href="#!"><i class="fa fa-bell"></i></a>
</li>
</div>
</div>
</div>
<div class="row">
<div id="subnav" class="col s12">
<div class="nav_arrows left">
<a href="#!"><i class="fa fa-caret-left"></i></a>
<a href="#!"><i class="fa fa-caret-right"></i></a>
</div>
<div class="nav_buttons right">
<a href="#!" class="btn btn-flat blue lighten-5 blue-text text-lighten-1"><i class="fa fa-envelope prefix"></i> Send email</a>
<a href="#!" class="btn btn-flat blue white-text"><i class="fa fa-ellipsis-h right"></i> Actions</a>
</div>
</div>
</div>
<div class="row">
<div id="profile" class="col s4">
<div class="profile_header">
<img src="https://lh3.googleusercontent.com/-P_cpGe3NM1Q/AAAAAAAAAAI/AAAAAAAAAAA/gYOuFmMJ28g/photo.jpg" alt="profile_picture" />
<h2>Claudia Mills</h2>
<p>Product Manager @Technocore</p>
<ul>
<li>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star star-disabled"></i>
</li>
<li>
<p class="stats"><i class="fa fa-fire"></i> 128</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_information">
<h3>Contact Information</h3>
<ul>
<li>
<h4>Email Address:</h4>
<p>claudia.mills@technocore.com</p>
</li>
<li>
<h4>Phone Number:</h4>
<p>+919533480654</p>
</li>
<li>
<h4>Address:</h4>
<p>West End 45th Street, San Francisco<br/>90123 California, US</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_custom">
<h3>Custom Information</h3>
<ul>
<li>
<h4>Facebook:</h4>
<p>facebook.com/caludiamills</p>
</li>
<li>
<h4>Personal Phone Number:</h4>
<p>+919533480564</p>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="profile_tags">
<h3>Tags</h3>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">another tag <a href="#!"><i class="fa fa-times"></i></a></div>
<div class="chip">test tag <a href="#!"><i class="fa fa-times"></i></a></div>
</div>
<div class="profile_owner">
<img src="https://www2.mmu.ac.uk/media/mmuacuk/content/images/health-professions/student-profile-simone-bianchi-piantini.jpg" width="30px" alt="owner_picture" class="left" />
<p>
<span>Owner: </span>
Mark Hansen
</p>
</div>
</div>
<div id="profile_content" class="col s8">
<nav>
<ul>
<li class="tab">
<a href="#timeline">
Timeline
</a>
</li>
<li class="tab">
<a href="#Notes" class="active">
Notes
</a>
</li>
<li class="tab">
<a href="#events">
Events
</a>
</li>
<li class="tab">
<a href="#tasks">
Tasks
</a>
</li>
<li class="tab">
<a href="#deals">
Deals
</a>
</li>
<li class="tab">
<a href="#campaigns">
Campaigns
</a>
</li>
<li class="tab">
<a href="#webstats">
Web Stats
</a>
</li>
<li class="tab">
<a href="#mail">
Mail
</a>
</li>
<li class="tab">
<a href="#documents">
Documents
</a>
</li>
</ul>
<div class="nav_arrows">
<a href="#!"><i class="fa fa-caret-left"></i></a>
<a href="#!"><i class="fa fa-caret-right"></i></a>
</div>
</nav>
<div class="profile-content">
<div class="row">
<div class="content-header">
<h3 class="left">Notes (7)</h3>
<a href="#!" class="btn btn-flat blue lighten-5 blue-text text-lighten-1 right"><i class="fa fa-caret-down right"></i> Add</a>
</div>
</div>
<div class="row">
<ul class="notes">
<li class="note">
<img src="http://www4.csudh.edu/Assets/CSUDH-Sites/History/images/Faculty-Profile-Pictures/Faculty%20Male%20Default%20Profile%20Picture.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="https://orig02.deviantart.net/d20f/f/2012/057/3/c/profile_picture_by_bdeatcher-d4r1sur.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads//2010/12/facebook-profile-picture-baby-pic-avatar.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="https://justinjackson.ca/wp-content/uploads/2008/08/justin-jackson-profile-smile-selfie.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="http://54.165.17.179/assets/images/people/tiles/karlene-quigley-large.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
<li class="note">
<img src="http://www.gantrypark.com/Portals/12/Users/066/14/53314/adam-parker-large.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut molestiae, aperiam ipsum dolor sit amet, consectetur adipisicing <a href="#!">#hash</a> <a href="#!">#tag</a> <a href="#!">#url</a> corrupti voluptates.
</p>
<span>33 days ago</span>
</div>
</li>
<li class="note">
<img src="https://thumbs.dreamstime.com/z/beautiful-profile-face-young-woman-clean-fresh-skin-40988715.jpg" alt="note_picture" class="left" />
<div class="note-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br/> Ut molestiae, aperiam aspernatur. <a href="#!">@Chris</a>
</p>
<span>32 days ago</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div><!-- .row profile -->
<footer class="row">
<div class="col s4">
<div class="panel">
<h4>
<i class="fa fa-skype"></i>
Skype
<i class="fa fa-ellipsis-h right"></i>
</h4>
<p class="left">
Claudia Mills<br/>
<a href="#!">claudia.mills</a></p>
<div class="panel-icon skype right">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
<div class="col s4">
<div class="panel">
<h4><i class="fa fa-paypal"></i> Paypal <i class="fa fa-ellipsis-h right"></i></h4>
<p class="left"><a href="#!">info@claudia.mills.com</a></p>
<div class="panel-icon paypal right">
<i class="fa fa-check"></i>
</div>
</div>
</div>
<div class="col s4">
<div class="panel add-widget">
<a href="#!" class="blue-text text-lighten-1 widget">
<i class="fa fa-plus"></i>
Add widget
</a>
</div>
</div>
</footer><!-- footer -->
</div><!-- .s9 content -->
</div><!-- .row -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js'></script>
</body></html>
