CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.Need to build a reduced test case to demonstrate and figure out
a bug? CodePen is great for that. Want to show off your latest creation
and get feedback from your peers? CodePen is great for that. Want to
find example of a particular design pattern for you project? CodePen is
great for that.
http://codepen.io/jlalovi/pen/bIyAr
CSS CODE FOR WEB DESIGN
/** Inspired by: http://graphicburger.com/flat-design-ui-components/ **/
/** Line-chart and donut-chart made by @kseso http://codepen.io/Kseso/pen/phiyL **/
/************************************ FONTS ************************************/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
@font-face {
font-family: 'icomoon';
src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot');
src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
url('http://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
url('http://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;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cloudy:before {
content: "\e60f";
}
.icon-sun:before {
content: "\e610";
}
.icon-cloudy2:before {
content: "\e611";
}
/************************************* END FONTS *************************************/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1f253d;
}
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: #fff;
}
.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: #50597b;
color: #fff;
border: solid 1px #1f253d;
border-radius: 5px;
}
input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
input[type=text]:-moz-input-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
}
input[type=text]::-moz-input-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
}
input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
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;
}
.button:hover {
text-decoration: none;
}
.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;
}
.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 **/
.main-container {
font-family: 'Ubuntu', sans-serif;
width: 950px;
height: 1725px;
margin: 6em auto;
}
/*********************************************** HEADER ***********************************************/
header {
height: 80px;
}
.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: #50597b;
border-bottom: 4px solid #11a8ab;
text-decoration: none;
}
.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;
}
/** CONTAINERS **/
.container {
float: left;
width: 300px;
}
.block {
margin-bottom: 25px;
background: #394264;
border-radius: 5px;
}
/******************************************** LEFT CONTAINER *****************************************/
.left-container {}
.menu-box {
height: 360px;
}
.menu-box .titular {
background: #11a8ab;
}
.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: #50597b;
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 #1f253d;
-webkit-transition: background .2s;
transition: background .2s;
}
.menu-box-tab:hover {
background: #50597b;
border-top: 1px solid #1f253d;
text-decoration: none;
}
.menu-box-tab:hover .icon {
color: #fff;
}
.menu-box-tab:hover .menu-box-number {
background: #e64c65;
}
.donut-chart-block {
height: 434px;
}
.donut-chart-block .titular {
padding: 10px 0;
}
.donut-chart {
height: 270px;
}
/******************************************
DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
******************************************/
.donut-chart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto 2rem;
border-radius: 100%
}
p.center-date {
background: #394264;
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);
}
/******************************************
END DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
******************************************/
.os-percentages {
padding-top: 36px;
}
.os-percentages li {
width: 75px;
border-left: 1px solid #394264;
text-align: center;
background: #50597b;
}
.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;
}
.line-chart {
height: 200px;
background: #11a8ab;
}
/******************************************
LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
******************************************/
.grafico {
padding: 2rem 1rem 1rem;
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 80%;
}
.grafico span {
display: block;
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: #50597B;
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;
}
/******************************************
END LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL
******************************************/
.time-lenght {
padding-top: 22px;
padding-left: 38px;
}
.time-lenght-btn {
display: block;
width: 70px;
line-height: 32px;
background: #50597b;
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;
}
#media-display {
position: relative;
height: 180px;
background: #787878 url('http://www.fancinema.com.ar/wp-content/uploads/catwoman1.jpg') center top;
}
#media-display .play {
position: absolute;
top: 75px;
right: 32px;
border: 2px solid #fff;
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;
}
.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 .number {
text-align: center;
margin: 0;
line-height: 34px;
}
.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: #e64c65;
}
.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 **********************************/
.middle-container {
margin: 0 25px;
}
.profile {
height: 410px;
}
.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: 23px;
}
.profile-options li {
border-left: 1px solid #1f253d;
}
.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: #50597b;
}
.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;
}
.weather .titular {
background: #cc324b;
}
.weather .titular .icon {
padding-right: 15px;
font-size: 26px;
}
.weather .current-day {
height: 135px;
background: #e64c65;
}
.weather .current-day p {
margin: 0;
padding-left: 50px;
}
.current-day-date {
font-size: 16px;
padding-top: 16px;
}
.current-day-temperature {
font-size: 70px;
}
.current-day-temperature .icon-cloudy {
padding-left: 20px;
}
.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 #1f253d;
-webkit-transition: background .3s;
transition: background .3s;
}
.weather .next-days a:hover {
background: #50597b;
}
.weather .next-days a:hover .day {
color: #e64c65;
}
.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;
}
.tweets .titular {
background: #35aadc;
}
.tweets .titular .icon {
font-size: 18px;
padding-right: 20px;
}
.tweet.first {
height: 150px;
border-bottom: 1px solid #1f253d;
}
.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: #1f253d;
}
.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;
}
.middle-container .social .facebook {
background: #3468af;
-webkit-transition: background .3s;
transition: background .3s;
}
.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;
}
.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;
}
.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;
}
/********************************************* RIGHT CONTAINER ****************************************/
.right-container {}
.join-newsletter {
height: 230px;
}
.join-newsletter .titular {
padding-top: 10px;
}
.subscribe.button {
background: #11a8ab;
margin-top: 10px;
}
.subscribe.button:hover {
background: #0F9295;
}
.account {
height: 390px;
}
.account .titular {
padding: 10px 0;
}
.sign-in.button {
background: #e64c65;
margin: 10px auto;
}
.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;
}
.fb-sign-in:hover {
background: #1a4e95;
text-decoration: none;
}
.fb-sign-in .icon {
line-height: 20px;
font-size: 12px;
padding-right: 3px;
}
.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;
}
.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;
}
.calendar-day .titular {
background: #1a4e95;
}
.calendar-day .arrow-btn:hover {
background: #16417E;
}
.calendar-day .the-day {
margin: 0;
text-align: center;
font-size: 146px;
}
.add-event.button {
background: #4fc4f6;
}
.add-event.button:hover {
background: #35aadc;
}
.calendar-month {
height: 380px;
}
.calendar-month .titular {
background: #3468af;
}
.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%;
}
HTML CODE FOR WEB DESIGN
<body>
<div class="main-container">
<!-- HEADER -->
<header class="block">
<ul class="header-menu horizontal-list">
<li>
<a class="header-menu-tab" href="#1"><span class="icon entypo-cog scnd-font-color"></span>Settings</a>
</li>
<li>
<a class="header-menu-tab" href="#2"><span class="icon fontawesome-user scnd-font-color"></span>Account</a>
</li>
<li>
<a class="header-menu-tab" href="#3"><span class="icon fontawesome-envelope scnd-font-color"></span>Messages</a>
<a class="header-menu-number" href="#4">5</a>
</li>
<li>
<a class="header-menu-tab" href="#5"><span class="icon fontawesome-star-empty scnd-font-color"></span>Favorites</a>
</li>
</ul>
<div class="profile-menu">
<p>Me <a href="#26"><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="http://upload.wikimedia.org/wikipedia/commons/e/e1/Anne_Hathaway_Face.jpg">
</div>
</div>
</header>
<!-- LEFT-CONTAINER -->
<div class="left-container container">
<div class="menu-box block"> <!-- MENU BOX (LEFT-CONTAINER) -->
<h2 class="titular">MENU BOX</h2>
<ul class="menu-box-menu">
<li>
<a class="menu-box-tab" href="#6"><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="#8"><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="#10"><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="#12"><span class="icon entypo-cog scnd-font-color"></span>Account Settings</a>
</li>
<li>
<a class="menu-box-tab" href="#13"><sapn class="icon entypo-chart-line scnd-font-color"></sapn>Statistics</a>
</li>
</ul>
</div>
<div class="donut-chart-block block"> <!-- DONUT CHART BLOCK (LEFT-CONTAINER) -->
<h2 class="titular">OS AUDIENCE STATS</h2>
<div class="donut-chart">
<!-- DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
<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>
<!-- END DONUT-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
<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"> <!-- LINE CHART BLOCK (LEFT-CONTAINER) -->
<div class="line-chart">
<!-- LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
<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>
<!-- END LINE-CHART by @kseso http://codepen.io/Kseso/pen/phiyL -->
</div>
<ul class="time-lenght horizontal-list">
<li><a class="time-lenght-btn" href="#14">Week</a></li>
<li><a class="time-lenght-btn" href="#15">Month</a></li>
<li><a class="time-lenght-btn" href="#16">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"> <!-- MEDIA (LEFT-CONTAINER) -->
<div id="media-display">
<a class="media-btn play" href="#23"><span class="fontawesome-play"></span></a>
</div>
<div class="media-control-bar">
<a class="media-btn play" href="#23"><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="#24"><span class="fontawesome-volume-up scnd-font-color"></span></a>
<a class="media-btn resize" href="#25"><span class="fontawesome-resize-full scnd-font-color"></span></a>
</div>
</div>
<ul class="social horizontal-list block"> <!-- SOCIAL (LEFT-CONTAINER) -->
<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>
<!-- MIDDLE-CONTAINER -->
<div class="middle-container container">
<div class="profile block"> <!-- PROFILE (MIDDLE-CONTAINER) -->
<a class="add-button" href="#28"><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="http://upload.wikimedia.org/wikipedia/commons/e/e1/Anne_Hathaway_Face.jpg" >
</div>
<h1 class="user-name">Anne Hathaway</h1>
<div class="profile-description">
<p class="scnd-font-color">Lorem ipsum dolor sit amet consectetuer adipiscing</p>
</div>
<ul class="profile-options horizontal-list">
<li><a class="comments" href="#40"><p><span class="icon fontawesome-comment-alt scnd-font-color"></span>23</li></p></a>
<li><a class="views" href="#41"><p><span class="icon fontawesome-eye-open scnd-font-color"></span>841</li></p></a>
<li><a class="likes" href="#42"><p><span class="icon fontawesome-heart-empty scnd-font-color"></span>49</li></p></a>
</ul>
</div>
<div class="weather block clear"> <!-- WEATHER (MIDDLE-CONTAINER) -->
<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="#43">
<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="#44">
<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="#45">
<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="#46">
<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="">
<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"> <!-- TWEETS (MIDDLE-CONTAINER) -->
<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="#17">@Quora</a></p>
<p><a class="time-ago scnd-font-color" href="#18">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="#19">#CreativeCloud</a></p>
<p><a class="scnd-font-color" href="#20">6 hours ago</a></p>
</div>
</div>
<ul class="social block"> <!-- SOCIAL (MIDDLE-CONTAINER) -->
<li><a href="#50"><div class="facebook icon"><span class="zocial-facebook"></span></div><h2 class="facebook titular">SHARE TO FACEBOOK</h2></li></a>
<li><a href="#51"><div class="twitter icon"><span class="zocial-twitter"></span></div><h2 class="twitter titular">SHARE TO TWITTER</h2></li></a>
<li><a href="#52"><div class="googleplus icon"><span class="zocial-googleplus"></span></div><h2 class="googleplus titular">SHARE TO GOOGLE+</h2></li></a>
</ul>
</div>
<!-- RIGHT-CONTAINER -->
<div class="right-container container">
<div class="join-newsletter block"> <!-- JOIN NEWSLETTER (RIGHT-CONTAINER) -->
<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="#21">SUBSCRIBE</a>
</div>
<div class="account block"> <!-- ACCOUNT (RIGHT-CONTAINER) -->
<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="#22">SIGN IN</a>
<p class="scnd-font-color">Forgot Password?</p>
<a class="fb-sign-in" href="58">
<p><span class="fb-border"><span class="icon zocial-facebook"></span></span>Sign in with Facebook</p>
</a>
</div>
<div class="loading block"> <!-- LOADING (RIGHT-CONTAINER) -->
<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"> <!-- CALENDAR DAY (RIGHT-CONTAINER) -->
<div class="arrow-btn-container">
<a class="arrow-btn left" href="#200"><span class="icon fontawesome-angle-left"></span></a>
<h2 class="titular">WEDNESDAY</h2>
<a class="arrow-btn right" href="#201"><span class="icon fontawesome-angle-right"></span></a>
</div>
<p class="the-day">26</p>
<a class="add-event button" href="#27">ADD EVENT</a>
</div>
<div class="calendar-month block"> <!-- CALENDAR MONTH (RIGHT-CONTAINER) -->
<div class="arrow-btn-container">
<a class="arrow-btn left" href="#202"><span class="icon fontawesome-angle-left"></span></a>
<h2 class="titular">APRIL 2013</h2>
<a class="arrow-btn right" href="#203"><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="#100">1</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#101">2</a></td>
<td><a class="scnd-font-color" href="#102">3</a></td>
<td><a class="scnd-font-color" href="#103">4</a></td>
<td><a class="scnd-font-color" href="#104">5</a></td>
<td><a class="scnd-font-color" href="#105">6</a></td>
<td><a class="scnd-font-color" href="#106">7</a></td>
<td><a class="scnd-font-color" href="#107">8</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#108">9</a></td>
<td><a class="scnd-font-color" href="#109">10</a></td>
<td><a class="scnd-font-color" href="#110">11</a></td>
<td><a class="scnd-font-color" href="#111">12</a></td>
<td><a class="scnd-font-color" href="#112">13</a></td>
<td><a class="scnd-font-color" href="#113">14</a></td>
<td><a class="scnd-font-color" href="#114">15</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#115">16</a></td>
<td><a class="scnd-font-color" href="#116">17</a></td>
<td><a class="scnd-font-color" href="#117">18</a></td>
<td><a class="scnd-font-color" href="#118">19</a></td>
<td><a class="scnd-font-color" href="#119">20</a></td>
<td><a class="scnd-font-color" href="#120">21</a></td>
<td><a class="scnd-font-color" href="#121">22</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#122">23</a></td>
<td><a class="scnd-font-color" href="#123">24</a></td>
<td><a class="scnd-font-color" href="#124">25</a></td>
<td><a class="today" href="#125">26</a></td>
<td><a href="#126">27</a></td>
<td><a href="#127">28</a></td>
<td><a href="#128">29</a></td>
</tr>
<tr>
<td><a href="#129">30</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div> <!-- end calendar-month block -->
</div> <!-- end right-container -->
</div> <!-- end main-container -->
</body>
Main document (you can call it main.php)
<!DOCTYPE html>
<title>Save inline stuff</title>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?php
//you must enter your own connexion details here
$host = 'host';
$dbuser = 'dbuser';
$dbpass = 'dbpass';
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");
$query = mysql_query("SELECT mytext FROM mybase ");
$row = mysql_fetch_assoc($query);
$mytext = $row['mytext'];
echo "When you click outside the editing area after editing the content of the area is saved to the MySQL table<br><br>";
echo "<div style='border:2px solid;border-radius:25px;' id='mytext' contenteditable='true' onBlur='clickheretosave()'>" . $mytext . "</div>";
echo "<br>If you are successfull you should see that the <b>mytext</b> is also reloading when you hit F5";
?>
<script type='text/javascript' language='javascript'>
// <![CDATA[
function clickheretosave () {
var mytext = CKEDITOR.instances.mytext.getData();
$.post('mybase.php', {
mytext : mytext
})
}
// ]]>
</script>
</body>
</html>
In a separate file called mybase.php add the following code - you must of course fill in your own connection details for the database:
<?php header('Content-type: text/html; charset=UTF-8');
$host = 'host';
$dbuser = 'dbuser;
$dbpass = 'dbpass;
$dbname = 'dbname';
$dbconn = mysql_connect($host, $dbuser, $dbpass)
or trigger_error(mysql_error(), E_USER_ERROR);
mysql_select_db($dbname, $dbconn);
mysql_query("SET NAMES UTF8");
$sql = "UPDATE mybase SET mytext ='" . stripslashes($_POST['mytext']) . "'";
$queryresource = mysql_query($sql, $dbconn) or die(mysql_error());
?>
I have testet the code so it should work, but you need to create the database table also.