<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/Zhnggii/pen/akKRXj?depth=everything&order=popularity&page=13&q=statistics&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
@font-face {
font-family: 'icomoon';
src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot');
src:url('https://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
url('https://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*="icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cloudy:before {
content: "\e60f";
}
.icon-sun:before {
content: "\e610";
}
.icon-cloudy2:before {
content: "\e611";
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #EEE;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
h1 {
font-size: 23px;
}
h2 {
font-size: 17px;
}
p {
font-size: 15px;
}
a {
text-decoration: none;
font-size: 15px;
}
a:hover {
text-decoration: underline;
}
h1, h2, p, a, span{
color: #222;
}
.scnd-font-color {
color: #9099b7;
}
.input-container {
position: relative;
}
input[type=text]{
width: 260px;
height: 50px;
margin-left: 20px;
margin-bottom: 20px;
padding-left: 45px;
background: #FCFCFC;
color: #9099b7;
border: none;
border-bottom:1px #ff9e02 solid;
}
input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
color: #9099b7;
}
input[type=text]:-moz-input-placeholder { /* Mozilla Firefox 4 to 18 */
color: #9099b7;
}
input[type=text]::-moz-input-placeholder { /* Mozilla Firefox 19+ */
color: #9099b7;
}
input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #9099b7;
}
input[type=text]:focus {
outline: none; /* removes the default orange border when focus */
border: 1px solid #11a8ab;
}
.input-icon {
font-size: 22px;
position: absolute;
left: 31px;
top: 10px;
}
.input-icon.password-icon {
left: 35px;
}
.horizontal-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.horizontal-list li {
float: left;
}
.clear {
clear: both;
}
.icon {
font-size: 25px;
}
.titular {
display: block;
line-height: 60px;
margin: 0;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.button {
display: block;
width: 175px;
line-height: 50px;
font-size: 16px;
font-weight: 700;
text-align: center;
margin: 0 auto;
border-radius: 5px;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);
}
.arrow-btn-container {
position: relative;
}
.arrow-btn {
position: absolute;
display: block;
width: 60px;
height: 60px;
-webkit-transition: background .3s;
transition: background .3s;
}
.arrow-btn:hover {
text-decoration: none;
}
.arrow-btn.left {
border-top-left-radius: 5px;
}
.arrow-btn.right {
border-top-right-radius: 5px;
right: 0;
top: 0;
}
.arrow-btn .icon {
display: block;
font-size: 18px;
border: 2px solid #fff;
border-radius: 100%;
line-height: 17px;
width: 21px;
margin: 20px auto;
text-align: center;
}
.arrow-btn.left .icon {
padding-right: 2px;
}
.profile-picture {
border-radius: 100%;
overflow: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.big-profile-picture {
margin: 0 auto;
border: 5px solid #50597b;
width: 150px;
height: 150px;
}
.small-profile-picture {
border: 2px solid #50597b;
width: 40px;
height: 40px;
}
.main-container {
font-family: 'Ubuntu', sans-serif;
width: 950px;
height: 1725px;
margin: 6em auto;
}
header {
height: 80px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.header-menu {
font-size: 17px;
line-height: 80px;
}
.header-menu li {
position: relative;
-webkit-transform: translateZ(0); /** To avoid a flash when hover messages **/
}
.header-menu-tab {
padding: 0 27px;
display: block;
line-height: 74px;
font-size: 17px;
-webkit-transition: background .3s;
transition: background .3s;
}
.header-menu-tab:hover {
background: #eee;
border-bottom: 4px solid #11a8ab;
text-decoration: none;
}
.Setting:hover {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header-menu-tab .icon {
padding-right: 15px;
}
.header-menu-number {
position: absolute;
line-height: 22px;
padding: 0 6px;
font-weight: 700;
background: #e64c65;
border-radius: 100%;
top: 15px;
right: 2px;
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.header-menu li:hover .header-menu-number {
text-decoration: none;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.profile-menu {
float: right;
height: 80px;
padding-right: 20px;
}
.profile-menu p {
font-size: 17px;
display: inline-block;
line-height: 76px;
margin: 0;
padding-right: 10px;
}
.profile-menu a {
padding-left: 5px;
}
.profile-menu a:hover {
text-decoration: none;
}
.small-profile-picture {
display: inline-block;
vertical-align: middle;
}
.container {
float: left;
width: 300px;
}
.block {
margin-bottom: 25px;
background: #FCFCFC;
border-radius: 5px;
}
.left-container {}
.menu-box {
height: 360px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.menu-box .titular {
background: #11a8ab;
color: #fff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.menu-box-menu .icon {
display: inline-block;
vertical-align: top;
width: 28px;
margin-left: 20px;
margin-right: 15px;
}
.menu-box-number {
width: 36px;
line-height: 22px;
background: #CCC;
text-align: center;
border-radius: 15px;
position: absolute;
top: 15px;
right: 15px;
-webkit-transition: all .3s;
transition: all .3s;
}
.menu-box-menu li{
height: 60px;
position: relative;
}
.menu-box-tab {
line-height: 60px;
display: block;
border-bottom: 1px solid #eee;
-webkit-transition: background .2s;
transition: background .2s;
}
.menu-box-tab:hover {
background: #EEE;
border-top: 1px solid #1f253d;
text-decoration: none;
}
.Statistics {
border: 0px;
}
.Statistics:hover {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.menu-box-tab:hover .icon {
color: #222;
}
.menu-box-tab:hover .menu-box-number {
background: #e64c65;
}
.donut-chart-block {
height: 434px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.donut-chart-block .titular {
padding: 10px 0;
}
.donut-chart {
height: 270px;
}
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center-date {
background: #FCFCFC;
position: absolute;
text-align: center;
font-size: 28px;
top:0;left:0;bottom:0;right:0;
width: 130px;
height: 130px;
margin: auto;
border-radius: 50%;
line-height: 35px;
padding: 15% 0 0;
}
.center-date span.scnd-font-color {
line-height: 0;
}
.recorte {
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
height: 100%;
position: absolute;
width: 100%;
}
.quesito {
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
height: 100%;
position: absolute;
width: 100%;
font-family: monospace;
font-size: 1.5rem;
}
#porcion1 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
#porcion1 .quesito {
background-color: #E64C65;
-webkit-transform: rotate(76deg);
transform: rotate(76deg);
}
#porcion2 {
-webkit-transform: rotate(76deg);
transform: rotate(76deg);
}
#porcion2 .quesito {
background-color: #11A8AB;
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
}
#porcion3 {
-webkit-transform: rotate(215deg);
transform: rotate(215deg);
}
#porcion3 .quesito {
background-color: #4FC4F6;
-webkit-transform: rotate(113deg);
transform: rotate(113deg);
}
#porcionFin {
-webkit-transform: rotate(-32deg);
transform:rotate(-32deg);
}
#porcionFin .quesito {
background-color: #FCB150;
-webkit-transform: rotate(32deg);
transform: rotate(32deg);
}
.os-percentages {
padding-top: 36px;
}
.os-percentages li {
width: 75px;
border-left: 1px solid #EEE;
text-align: center;
background: rgba(0,0,0,0.01);
}
.os {
margin: 0;
padding: 10px 0 5px;
font-size: 15px;
}
.os.ios {
border-top: 4px solid #e64c65;
}
.os.mac {
border-top: 4px solid #11a8ab;
}
.os.linux {
border-top: 4px solid #fcb150;
}
.os.win {
border-top: 4px solid #4fc4f6;
}
.os-percentage {
margin: 0;
padding: 0 0 15px 10px;
font-size: 25px;
}
.line-chart-block {
height: 400px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.line-chart {
height: 200px;
background: #11a8ab;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.grafico {
padding: 2rem 1rem 1rem;
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 80%;
}
.grafico span {
display: block;
color: #fff;
position: absolute;
bottom: 3rem;
left: 2rem;
height: 0;
border-top: 2px solid;
-webkit-transform-origin: left center;
transform-origin: left center;
}
.grafico span > span {
left: 100%; bottom: 0;
}
[data-valor='25'] {width: 75px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
[data-valor='8'] {width: 24px; -webkit-transform: rotate(65deg); transform: rotate(65deg);}
[data-valor='13'] {width: 39px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
[data-valor='5'] {width: 15px; -webkit-transform: rotate(50deg); transform: rotate(50deg);}
[data-valor='23'] {width: 69px; -webkit-transform: rotate(-70deg); transform: rotate(-70deg);}
[data-valor='12'] {width: 36px; -webkit-transform: rotate(75deg); transform: rotate(75deg);}
[data-valor='15'] {width: 45px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
[data-valor]:before {
content: '';
position: absolute;
display: block;
right: -4px;
bottom: -3px;
padding: 4px;
background: #fff;
border-radius: 50%;
}
[data-valor='23']:after {
content: '+' attr(data-valor) '%';
position: absolute;
right: -2.7rem;
top: -1.7rem;
padding: .3rem .5rem;
background: #9099b7;
border-radius: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
[class^='eje-'] {
position: absolute;
left: 0;
bottom: 0rem;
width: 100%;
padding: 1rem 1rem 0 2rem;
height: 80%;
}
.eje-x {
height: 2.5rem;
}
.eje-y li {
height: 25%;
border-top: 1px solid #777;
}
[data-ejeY]:before {
content: attr(data-ejeY);
display: inline-block;
width: 2rem;
text-align: right;
line-height: 0;
position: relative;
left: -2.5rem;
top: -.5rem;
}
.eje-x li {
width: 33%;
float: left;
text-align: center;
}
.time-lenght {
padding-top: 22px;
padding-left: 38px;
}
.time-lenght-btn {
display: block;
width: 70px;
line-height: 32px;
background: #EEE;
border-radius: 5px;
font-size: 14px;
text-align: center;
margin-right: 5px;
-webkit-transition: background .3s;
transition: background .3s;
}
.time-lenght-btn:hover {
text-decoration: none;
background: #e64c65;
}
.month-data {
padding-top: 28px;
}
.month-data p {
display: inline-block;
margin: 0;
padding: 0 25px 15px;
font-size: 16px;
}
.month-data p:last-child {
padding: 0 25px;
float: right;
font-size: 15px;
}
.increment {
color: #e64c65;
}
.media {
height: 216px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
#media-display {
position: relative;
height: 180px;
background: #888 url('https://www.fancinema.com.ar/wp-content/uploads/catwoman1.jpg') center top;
}
#media-display .play {
position: absolute;
top: 75px;
right: 32px;
border: 2px solid #222;
border-radius: 100%;
padding: 2px 5px 2px 9px;
}
#media-display .play:hover {
border: 2px solid #e64c65;
}
.media-control-bar {
padding: 6px 0 0 15px;
}
.media-btn, .time-passed {
display: inline-block;
margin: 0;
}
.media-btn {
font-size: 19px;
}
.media-btn:hover, .media-btn:hover span {
text-decoration: none;
color: #e64c65;
}
.play {
margin-right: 100px
}
.volume {
margin-left: 30px;
}
.resize {
margin-left: 12px;
}
.left-container .social {
height: 110px;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
}
.left-container .social li {
width: 75px;
height: 110px;
}
.left-container .social li .icon {
text-align: center;
font-size: 20px;
margin: 0;
line-height: 75px;
}
.left-container .social li span {
color: #fff;
}
.left-container .social li .number {
text-align: center;
margin: 0;
line-height: 34px;
color: #fff;
}
.left-container .social .facebook {
background: #3468af;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.left-container .social .facebook .number {
background: #1a4e95;
border-bottom-left-radius: 5px;
}
.left-container .social .twitter {
background: #4fc4f6;
}
.left-container .social .twitter .icon {
font-size: 18px;
}
.left-container .social .twitter .number {
background: #35aadc;
}
.left-container .social .googleplus {
background: #E33955;
}
.left-container .social .googleplus .number{
background: #cc324b;
}
.left-container .social .mailbox {
background: #50597b;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.left-container .social .mailbox .number {
background: #363f61;
border-bottom-right-radius: 5px;
}
.middle-container {
margin: 0 25px;
}
.profile {
height: 410px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.add-button .icon {
float: right;
line-height: 18px;
width: 23px;
border: 2px solid;
border-radius: 100%;
font-size: 18px;
text-align: center;
margin: 10px;
}
.add-button .icon:hover {
color: #e64c65;
border-color: #e64c65;
}
.user-name {
margin: 25px 0 16px;
text-align: center;
}
.profile-description {
width: 210px;
margin: 0 auto;
text-align: center;
}
.profile-options {
padding-top: 40px;
}
.profile-options li {
border-left: 1px solid #EEE;
}
.profile-options p {
margin: 0;
}
.profile-options a {
display: block;
width: 99px;
line-height: 60px;
text-align: center;
-webkit-transition: background .3s;
transition: background .3s;
}
.profile-options a:hover {
text-decoration: none;
background: #EEE;
}
.comments:hover {
border-bottom-left-radius: 5px;
}
.likes:hover {
border-bottom-right-radius: 5px;
}
.profile-options a:hover.comments .icon {
color: #fcb150;
}
.profile-options a:hover.views .icon {
color: #11a8ab;
}
.profile-options a:hover.likes .icon {
color: #e64c65;
}
.profile-options .icon {
padding-right: 10px;
}
.profile-options .comments {
border-top: 4px solid #fcb150;
}
.profile-options .views {
border-top: 4px solid #11a8ab;
}
.profile-options .likes {
border-top: 4px solid #e64c65;
}
.weather {
height: 555px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.weather .titular {
background: #cc324b;
color: #fff;
}
.weather .titular .icon {
padding-right: 15px;
font-size: 26px;
color: #fff;
}
.weather .current-day {
height: 135px;
background: #e64c65;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.weather .current-day p {
margin: 0;
padding-left: 50px;
color: #fff;
}
.current-day-date {
font-size: 16px;
padding-top: 16px;
}
.current-day-temperature {
font-size: 70px;
}
.current-day-temperature .icon-cloudy {
padding-left: 20px;
color: #fff;
}
.weather .next-days{}
.weather .next-days p {
margin: 0;
display: inline-block;
font-size: 16px;
}
.weather .next-days a {
display: block;
line-height: 58px;
border-bottom: 1px solid #eee;
-webkit-transition: background .3s;
transition: background .3s;
}
.weather .next-days a:hover {
background: #eee;
}
.weather .next-days a:hover .day {
color: #e64c65;
}
.weather .next-days .last{
border: 0px;
}
.weather .next-days-date {
padding-left: 20px;
}
.weather .next-days-temperature {
float: right;
padding-right: 20px;
}
.weather .next-days-temperature .icon {
padding-left: 10px;
}
.tweets {
height: 375px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.tweets .titular {
background: #35aadc;
color: #fff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.tweets .titular .icon {
font-size: 18px;
padding-right: 20px;
color: #fff;
}
.tweet.first {
height: 150px;
border-bottom: 1px solid #eee;
}
.tweet p:first-child {
margin: 0;
padding: 30px 30px 0;
}
.tweet p:last-child {
margin: 0;
padding: 15px 30px 0;
}
.tweet-link {
color: #4fc4f6;
}
.middle-container .social {
height: 205px;
background: #eee;
}
.middle-container .social li {
margin-bottom: 12px;
}
.middle-container .social a {
line-height: 60px;
}
.middle-container .social a:hover {
text-decoration: none;
}
.middle-container .social .titular {
border-radius: 5px;
color: #fff;
}
.middle-container .social .facebook {
background: #3468af;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
}
.middle-container .social a:hover .facebook {
background: #1a4e95;
}
.middle-container .social a:hover .icon.facebook {
background: #3468af;
}
.middle-container .social .twitter {
background: #4fc4f6;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
}
.middle-container .social a:hover .twitter {
background: #35aadc;
}
.middle-container .social a:hover .icon.twitter {
background: #4fc4f6;
}
.middle-container .social .googleplus {
background: #e64c65;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
}
.middle-container .social a:hover .googleplus {
background: #cc324b;
}
.middle-container .social a:hover .icon.googleplus {
background: #e64c65;
}
.middle-container .social .icon {
float: left;
width: 60px;
height: 60px;
text-align: center;
font-size: 20px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.middle-container .social .icon.facebook {
background: #1a4e95;
}
.middle-container .social .icon.twitter {
background: #35aadc;
}
.middle-container .social .icon.googleplus {
background: #cc324b;
}
.middle-container .social .icon span {
color: #fff;
}
.right-container {}
.join-newsletter {
height: 230px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.join-newsletter .titular {
padding-top: 10px;
}
.subscribe.button {
background: #11a8ab;
margin-top: 10px;
color: #fff;
}
.subscribe.button:hover {
background: #0F9295;
}
.account {
height: 390px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.account .titular {
padding: 10px 0;
}
.sign-in.button {
background: #e64c65;
margin: 10px auto;
color: #fff;
}
.sign-in.button:hover {
background: #cc324b;
}
.account p {
text-align: center;
}
.fb-sign-in {
margin-top: 28px;
display: block;
line-height: 50px;
background: #3468af;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-transition: background .3s;
transition: background .3s;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.fb-sign-in:hover {
background: #1a4e95;
text-decoration: none;
}
.fb-sign-in .icon {
line-height: 20px;
font-size: 12px;
padding-right: 3px;
color: #fff;
}
.fb-sign-in p{
color: #fff;
}
.fb-border {
display: inline-block;
width: 23px;
line-height: 20px;
border: 2px solid #fff;
border-radius: 100%;
margin-right: 10px;
}
.loading {
height: 200px;
padding-top: 35px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.loading p {
display: inline-block;
padding-left: 30px;
margin: 5px 0 20px;
}
.loading .icon {
padding-right: 15px;
}
.loading .percentage {
float: right;
padding: 6px 35px 0 0;
}
.loading .progress-bar {
width: 250px;
height: 20px;
background: #50597b;
border-radius: 5px;
margin: 0 auto;
}
.progress-bar.downloading {
background: -webkit-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(left, #11a8ab 81%,#50597b 81%); /* IE10+ */
background: linear-gradient(to right, #11a8ab 81%,#50597b 81%); /* W3C */
}
.progress-bar.uploading {
background: -webkit-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(left, #4fc4f6 43%,#50597b 43%); /* IE10+ */
background: linear-gradient(to right, #4fc4f6 43%,#50597b 43%); /* W3C */
}
.calendar-day {
height: 320px;
background: #3468af;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.calendar-day span {
color: #fff;
}
.calendar-day .titular {
background: #1a4e95;
color: #fff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.calendar-day .arrow-btn:hover {
background: #16417E;
}
.calendar-day .the-day {
margin: 0;
text-align: center;
font-size: 146px;
color: #fff;
}
.add-event.button {
background: #4fc4f6;
color: #fff;
}
.add-event.button:hover {
background: #35aadc;
}
.calendar-month {
height: 380px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.calendar-month span {
color: #fff;
}
.calendar-month .titular {
background: #3468af;
color: #fff;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
}
.calendar-month .arrow-btn:hover {
background: #1a4e95;
}
.calendar {
margin: 22px 15px;
text-align: center;
}
.calendar a {
font-size: 17px;
}
.calendar td, .calendar th {
width: 40px;
height: 38px;
}
.calendar .days-week {
color: #4fc4f6;
}
.calendar .today {
display: block;
width: 34px;
line-height: 34px;
background: #e64c65;
border-radius: 100%;
}
</style></head><body>
<div class="main-container">
<header class="block">
<ul class="header-menu horizontal-list">
<li>
<a class="header-menu-tab Setting" href="#"><span class="icon entypo-cog scnd-font-color"></span>Settings</a>
</li>
<li>
<a class="header-menu-tab" href="#"><span class="icon fontawesome-user scnd-font-color"></span>Account</a>
</li>
<li>
<a class="header-menu-tab" href="#"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
<a class="header-menu-number" href="#">5</a>
</li>
<li>
<a class="header-menu-tab" href="#"><span class="icon fontawesome-star-empty scnd-font-color"></span>Favorites</a>
</li>
</ul>
<div class="profile-menu">
<p>Me <a href="#"><span class="entypo-down-open scnd-font-color"></span></a></p>
<div class="profile-picture small-profile-picture">
<!--<img width="40px" alt="Anne Hathaway picture" src="./CodePen - Freebie Interactive Flat Design UI _ Only HTML5 & CSS3_files/Anne_Hathaway_Face.jpg">-->
<img width="40px" src="https://www.motorola.com.cn/profiles/motorola/logo/logo-animation-header-sm-0005.png">
</div>
</div>
</header>
<div class="left-container container">
<div class="menu-box block">
<h2 class="titular">MENU BOX</h2>
<ul class="menu-box-menu">
<li>
<a class="menu-box-tab" href="#"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages<div class="menu-box-number">24</div></a>
</li>
<li>
<a class="menu-box-tab" href="#"><span class="icon entypo-paper-plane scnd-font-color"></span>Invites<div class="menu-box-number">3</div></a>
</li>
<li>
<a class="menu-box-tab" href="#"><span class="icon entypo-calendar scnd-font-color"></span>Events<div class="menu-box-number">5</div></a>
</li>
<li>
<a class="menu-box-tab" href="#"><span class="icon entypo-cog scnd-font-color"></span>Account Settings</a>
</li>
<li>
<a class="menu-box-tab Statistics" href="#"><sapn class="icon entypo-chart-line scnd-font-color"></sapn>Statistics</a>
</li>
</ul>
</div>
<div class="donut-chart-block block">
<h2 class="titular">OS AUDIENCE STATS</h2>
<div class="donut-chart">
<div id="porcion1" class="recorte"><div class="quesito ios" data-rel="21"></div></div>
<div id="porcion2" class="recorte"><div class="quesito mac" data-rel="39"></div></div>
<div id="porcion3" class="recorte"><div class="quesito win" data-rel="31"></div></div>
<div id="porcionFin" class="recorte"><div class="quesito linux" data-rel="9"></div></div>
<p class="center-date">JUNE<br><span class="scnd-font-color">2013</span></p>
</div>
<ul class="os-percentages horizontal-list">
<li>
<p class="ios os scnd-font-color">iOS</p>
<p class="os-percentage">21<sup>%</sup></p>
</li>
<li>
<p class="mac os scnd-font-color">Mac</p>
<p class="os-percentage">48<sup>%</sup></p>
</li>
<li>
<p class="linux os scnd-font-color">Linux</p>
<p class="os-percentage">9<sup>%</sup></p>
</li>
<li>
<p class="win os scnd-font-color">Win</p>
<p class="os-percentage">32<sup>%</sup></p>
</li>
</ul>
</div>
<div class="line-chart-block block clear">
<div class="line-chart">
<div class="grafico">
<ul class="eje-y">
<li data-ejey="30"></li>
<li data-ejey="20"></li>
<li data-ejey="10"></li>
<li data-ejey="0"></li>
</ul>
<ul class="eje-x">
<li>Apr</li>
<li>May</li>
<li>Jun</li>
</ul>
<span data-valor="25">
<span data-valor="8">
<span data-valor="13">
<span data-valor="5">
<span data-valor="23">
<span data-valor="12">
<span data-valor="15">
</span></span></span></span></span></span></span>
</div>
</div>
<ul class="time-lenght horizontal-list">
<li><a class="time-lenght-btn" href="#">Week</a></li>
<li><a class="time-lenght-btn" href="#">Month</a></li>
<li><a class="time-lenght-btn" href="#">Year</a></li>
</ul>
<ul class="month-data clear">
<li>
<p>APR<span class="scnd-font-color"> 2013</span></p>
<p><span class="entypo-plus increment"> </span>21<sup>%</sup></p>
</li>
<li>
<p>MAY<span class="scnd-font-color"> 2013</span></p>
<p><span class="entypo-plus increment"> </span>48<sup>%</sup></p>
</li>
<li>
<p>JUN<span class="scnd-font-color"> 2013</span></p>
<p><span class="entypo-plus increment"> </span>35<sup>%</sup></p>
</li>
</ul>
</div>
<div class="media block">
<div id="media-display">
<a class="media-btn play" href="#"><span class="fontawesome-play"></span></a>
</div>
<div class="media-control-bar">
<a class="media-btn play" href="#"><span class="fontawesome-play scnd-font-color"></span></a>
<p class="time-passed">4:15 <span class="time-duration scnd-font-color">/ 9:23</span></p>
<a class="media-btn volume" href="#"><span class="fontawesome-volume-up scnd-font-color"></span></a>
<a class="media-btn resize" href="#"><span class="fontawesome-resize-full scnd-font-color"></span></a>
</div>
</div>
<ul class="social horizontal-list block">
<li class="facebook"><p class="icon"><span class="zocial-facebook"></span></p><p class="number">248k</p></li>
<li class="twitter"><p class="icon"><span class="zocial-twitter"></span></p><p class="number">30k</p></li>
<li class="googleplus"><p class="icon"><span class="zocial-googleplus"></span></p><p class="number">124k</p></li>
<li class="mailbox"><p class="icon"><span class="fontawesome-envelope"></span></p><p class="number">89k</p></li>
</ul>
</div>
<div class="middle-container container">
<div class="profile block">
<a class="add-button" href="#"><span class="icon entypo-plus scnd-font-color"></span></a>
<div class="profile-picture big-profile-picture clear">
<!--<img width="150px" alt="Anne Hathaway picture" src="./CodePen - Freebie Interactive Flat Design UI _ Only HTML5 & CSS3_files/Anne_Hathaway_Face.jpg">-->
<img width="150px" src="//lh6.ggpht.com/n9MJv671DrCxzNwm4GtGkp1xLMszaBzwTCYP4yxwVZXp26k4TvaoL3fuG3yWWL-sEX0=w300-rw">
</div>
<h1 class="user-name"><!--Anne Hathaway-->Moto</h1>
<div class="profile-description">
<p class="scnd-font-color"><!--Lorem ipsum dolor sit amet consectetuer adipiscing-->Design by Wii</p>
</div>
<ul class="profile-options horizontal-list">
<li><a class="comments" href="#"><p><span class="icon fontawesome-comment-alt scnd-font-color"></span>23</p></a></li><p></p>
<li><a class="views" href="#"><p><span class="icon fontawesome-eye-open scnd-font-color"></span>841</p></a></li><p></p>
<li><a class="likes" href="#"><p><span class="icon fontawesome-heart-empty scnd-font-color"></span>49</p></a></li><p></p>
</ul>
</div>
<div class="weather block clear">
<h2 class="titular"><span class="icon entypo-location"></span><strong>CLUJ-NAPOCA</strong>/RO</h2>
<div class="current-day">
<p class="current-day-date">FRI 29/06</p>
<p class="current-day-temperature">24º<span class="icon-cloudy"></span></p>
</div>
<ul class="next-days">
<li>
<a href="#">
<p class="next-days-date"><span class="day">SAT</span> <span class="scnd-font-color">29/06</span></p>
<p class="next-days-temperature">25º<span class="icon icon-cloudy scnd-font-color"></span></p>
</a>
</li>
<li>
<a href="#">
<p class="next-days-date"><span class="day">SUN</span> <span class="scnd-font-color">30/06</span></p>
<p class="next-days-temperature">22º<span class="icon icon-cloudy2 scnd-font-color"></span></p>
</a>
</li>
<li>
<a href="#">
<p class="next-days-date"><span class="day">MON</span> <span class="scnd-font-color">01/07</span></p>
<p class="next-days-temperature">24º<span class="icon icon-cloudy2 scnd-font-color"></span></p>
</a>
</li>
<li>
<a href="#">
<p class="next-days-date"><span class="day">TUE</span> <span class="scnd-font-color">02/07</span></p>
<p class="next-days-temperature">26º<span class="icon icon-cloudy scnd-font-color"></span></p>
</a>
</li>
<li>
<a href="#">
<p class="next-days-date"><span class="day">WED</span> <span class="scnd-font-color">03/07</span></p>
<p class="next-days-temperature">27º<span class="icon icon-sun scnd-font-color"></span></p>
</a>
</li>
<li>
<a href="#" class="last">
<p class="next-days-date"><span class="day">THU</span> <span class="scnd-font-color">04/07</span></p>
<p class="next-days-temperature">29º<span class="icon icon-sun scnd-font-color"></span></p>
</a>
</li>
</ul>
</div>
<div class="tweets block">
<h2 class="titular"><span class="icon zocial-twitter"></span>LATEST TWEETS</h2>
<div class="tweet first">
<p>Ice-cream trucks only play music when out of ice-cream. Well played dad. On <a class="tweet-link" href="#">@Quora</a></p>
<p><a class="time-ago scnd-font-color" href="#">3 minutes ago</a></p>
</div>
<div class="tweet">
<p>We are in the process of pushing out all of the new CC apps! We will tweet again once they are live <a class="tweet-link" href="#">#CreativeCloud</a></p>
<p><a class="scnd-font-color" href="#">6 hours ago</a></p>
</div>
</div>
<ul class="social block">
<li><a href="#"><div class="facebook icon"><span class="zocial-facebook"></span></div><h2 class="facebook titular">SHARE TO FACEBOOK</h2></a></li>
<li><a href="#"><div class="twitter icon"><span class="zocial-twitter"></span></div><h2 class="twitter titular">SHARE TO TWITTER</h2></a></li>
<li><a href="#"><div class="googleplus icon"><span class="zocial-googleplus"></span></div><h2 class="googleplus titular">SHARE TO GOOGLE+</h2></a></li>
</ul>
</div>
<div class="right-container container">
<div class="join-newsletter block">
<h2 class="titular">JOIN THE NEWSLETTER</h2>
<div class="input-container">
<input type="text" placeholder="yourname@gmail.com" class="email text-input">
<div class="input-icon envelope-icon-newsletter"><span class="fontawesome-envelope scnd-font-color"></span></div>
</div>
<a class="subscribe button" href="#">SUBSCRIBE</a>
</div>
<div class="account block">
<h2 class="titular">SIGN IN TO YOUR ACCOUNT</h2>
<div class="input-container">
<input type="text" placeholder="yourname@gmail.com" class="email text-input">
<div class="input-icon envelope-icon-acount"><span class="fontawesome-envelope scnd-font-color"></span></div>
</div>
<div class="input-container">
<input type="text" placeholder="Password" class="password text-input">
<div class="input-icon password-icon"><span class="fontawesome-lock scnd-font-color"></span></div>
</div>
<a class="sign-in button" href="#">SIGN IN</a>
<p class="scnd-font-color">Forgot Password?</p>
<a class="fb-sign-in" href="#">
<p><span class="fb-border"><span class="icon zocial-facebook"></span></span>Sign in with Facebook</p>
</a>
</div>
<div class="loading block">
<div class="progress-bar downloading"></div>
<p><span class="icon fontawesome-cloud-download scnd-font-color"></span>Downloading...</p>
<p class="percentage">81<sup>%</sup></p>
<div class="progress-bar uploading"></div>
<p><span class="icon fontawesome-cloud-upload scnd-font-color"></span>Uploading...</p>
<p class="percentage">43<sup>%</sup></p>
</div>
<div class="calendar-day block">
<div class="arrow-btn-container">
<a class="arrow-btn left" href="#"><span class="icon fontawesome-angle-left"></span></a>
<h2 class="titular">WEDNESDAY</h2>
<a class="arrow-btn right" href="#"><span class="icon fontawesome-angle-right"></span></a>
</div>
<p class="the-day">26</p>
<a class="add-event button" href="#">ADD EVENT</a>
</div>
<div class="calendar-month block">
<div class="arrow-btn-container">
<a class="arrow-btn left" href="#"><span class="icon fontawesome-angle-left"></span></a>
<h2 class="titular">APRIL 2013</h2>
<a class="arrow-btn right" href="#"><span class="icon fontawesome-angle-right"></span></a>
</div>
<table class="calendar">
<thead class="days-week">
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>R</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a class="scnd-font-color" href="#">1</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#">2</a></td>
<td><a class="scnd-font-color" href="#">3</a></td>
<td><a class="scnd-font-color" href="#">4</a></td>
<td><a class="scnd-font-color" href="#">5</a></td>
<td><a class="scnd-font-color" href="#">6</a></td>
<td><a class="scnd-font-color" href="#">7</a></td>
<td><a class="scnd-font-color" href="#7">8</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#">9</a></td>
<td><a class="scnd-font-color" href="#">10</a></td>
<td><a class="scnd-font-color" href="#">11</a></td>
<td><a class="scnd-font-color" href="#">12</a></td>
<td><a class="scnd-font-color" href="#">13</a></td>
<td><a class="scnd-font-color" href="#">14</a></td>
<td><a class="scnd-font-color" href="#">15</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#">16</a></td>
<td><a class="scnd-font-color" href="#">17</a></td>
<td><a class="scnd-font-color" href="#">18</a></td>
<td><a class="scnd-font-color" href="#">19</a></td>
<td><a class="scnd-font-color" href="#">20</a></td>
<td><a class="scnd-font-color" href="#">21</a></td>
<td><a class="scnd-font-color" href="#">22</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#">23</a></td>
<td><a class="scnd-font-color" href="#">24</a></td>
<td><a class="scnd-font-color" href="#">25</a></td>
<td><a class="today" href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
<td><a href="#">29</a></td>
</tr>
<tr>
<td><a href="#">30</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body></html>
