"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: