"ui kit"
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 lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/askucher/pen/WRxYPG?depth=everything&order=popularity&page=84&q=chat&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/haggen/2624063/raw/9f0f72e62145538c32f726793b7303c3e820f3c1/proxima-nova.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.min.css'> <style class="cp-pen-styles">@charset "UTF-8"; * { box-sizing: border-box; white-space: nowrap; white-space-collapse: discard; } .scale { animation-name: success; animation-duration: 4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } html, body { font-size: 16px; font-family: 'Proxima Nova', "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 0; margin: 0; box-sizing: border-box; } .presentation { visibility: hidden; margin: 0 auto; background: white; min-height: 100vh; position: relative; overflow: hidden; } .presentation.visible { visibility: visible; } .presentation > .popup { text-align: center; background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100vh; transition: all 0.7s cubic-bezier(0.845, -0.265, 0.19, 1.28); transform: scale(0); } .presentation > .popup > .close { position: absolute; right: 10px; font-size: 20px; width: 40px; height: 40px; vertical-align: middle; line-height: 40px; text-align: center; cursor: pointer; top: 10px; border-radius: 100px; border: 1px solid #CCC; color: #CCC; transition: all .5s; } .presentation > .popup > .close:hover { background: white; border-color: white; color: black; } .presentation > .popup > .code { text-align: left; display: inline-block; margin: 80px 0; max-width: 1000px; min-height: 200px; padding: 20px; background: white; } .presentation > .popup:not(.active) { opacity: 0; } .presentation > .popup.active { transform: scale(1); opacity: 1; } .presentation > .menu { position: fixed; z-index: 999; top: 80px; height: 100vh; left: 0; padding: 0; margin: 0; margin-top: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.95); padding-top: 15px; box-shadow: inset 0px -4px 10px #e6e5e5; border-right: 1px solid #f0eeee; width: 150px; opacity: 0; transition: opacity .5s; } .presentation > .menu > .menu-item { width: 100%; padding: 5px 22px; font-size: 13px; list-style: none; box-sizing: border-box; transition: color 1s; margin: 0; } .presentation > .menu > .menu-item a { text-decoration: none; text-transform: uppercase; color: #999; } .presentation > .menu > .menu-item.active a { color: #3FD59F; } .presentation > .menu.mini { opacity: 1; } @media only screen and (max-width: 500px) { .presentation > .menu.mini { opacity: 0; display: none; } } .presentation > .header.presentation-header { top: 0; z-index: 999; left: 0; width: 100%; height: 120px; line-height: 120px; transition: all .5s; position: fixed; background: #fcfcfc; vertical-align: middle; } .presentation > .header.presentation-header > .content { position: relative; } .presentation > .header.presentation-header > .content > * { vertical-align: top; } .presentation > .header.presentation-header > .content > .logo { width: 150px; transition: width .5s; text-align: center; display: inline-block; } .presentation > .header.presentation-header > .content > .logo > img { height: 50px; transition: height .5s; display: inline-block; vertical-align: middle; } .presentation > .header.presentation-header > .content > .text { color: black; display: inline-block; padding: 0px 20px; font-size: 28px; transition: font-size .5s; } .presentation > .header.presentation-header.mini { height: 80px; line-height: 80px; } .presentation > .header.presentation-header.mini > .content { border-bottom: 1px solid #f0eeee; } .presentation > .header.presentation-header.mini > .content > .logo { width: 150px; text-align: center; } .presentation > .header.presentation-header.mini > .content > .logo > img { height: 40px; } .presentation > .header.presentation-header.mini > .content > .text { font-size: 15px; } .presentation > .fullpage .welcome > .fp-tableCell { position: relative; height: 300px; line-height: 300px; margin-top: 120px; color: white; text-align: center; } .presentation > .fullpage .welcome > .fp-tableCell > .body { margin-top: 300px; text-align: center; padding: 100px; } .presentation > .fullpage .welcome > .fp-tableCell > .cover { width: 100%; height: 300px; padding: 10px; position: absolute; top: 120px; left: 0; } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v1 { z-index: 1; background-size: cover; background-image: url(http://wallpapercave.com/wp/2u5OrmL.png); } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v2 { z-index: 2; background-color: rgba(0, 0, 0, 0.4); } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v3 { z-index: 3; } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v3 .title { z-index: 3; line-height: normal; width: 900px; display: inline-block; text-align: left; } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v3 .title > * { font-weight: 100; margin: 0; } .presentation > .fullpage .welcome > .fp-tableCell > .cover.v3 .title > h2 { color: #CCC; } .presentation > .footer { height: 400px; background: #f9f7f7; } .section { background: white; } .section .bg { position: absolute; color: #faf8f8; font-size: 150px; font-weight: bold; top: 100px; right: -50px; } .section.dark { background: #7d7d7d; } .section.control { padding-left: 150px; } @media only screen and (max-width: 500px) { .section.control { padding-left: 0; } } .demo { height: 100vh; vertical-align: top; position: relative; min-height: 235px; width: 100%; text-align: center; line-height: 100vh; vertical-align: middle; } .demo.small { display: inline-block; width: 50%; } @media only screen and (max-width: 500px) { .demo.small { width: 100%; height: 50vh; line-height: 50vh; display: block; } .demo.small .box { padding-top: 20%; } } .demo.gray { background: #fafafa; } .demo > * { line-height: normal; } .demo > .box { display: inline-block; vertical-align: middle; text-align: left; width: 90%; } .demo > .box.center { text-align: center; } .demo > .box.small { width: 200px; } .demo > .code { position: absolute; right: 7px; cursor: pointer; top: 136px; font-size: 20px; color: #CCC; line-height: 2; font-family: "Material-Design-Iconic-Font"; content: "\f13a"; letter-spacing: 1em; z-index: 1; } @media only screen and (max-width: 500px) { .demo > .code { top: 86px; } } .demo > .title { text-transform: uppercase; position: absolute; text-align: left; line-height: normal; margin-top: 100px; color: #CCC; top: 0px; left: 50px; padding: 40px 0; font-size: 17px; } @media only screen and (max-width: 500px) { .demo > .title { margin-top: 50px; left: 25px; } } .button.default { padding: 0; border-radius: 100px; height: 40px; display: inline-block; line-height: 40px; min-width: 235px; font-size: 1rem; border: 1px solid #3FD59F; color: #3FD59F; background: white; transition: background .5s, border-color .5s; overflow: hidden; text-align: center; text-decoration: none; cursor: pointer; } .button.default:hover { background: rgba(63, 213, 159, 0.2); } .button.accent { padding: 0; border-radius: 100px; height: 40px; display: inline-block; line-height: 40px; min-width: 235px; font-size: 1rem; background: #3FD59F; color: white; border: 1px solid #3FD59F; transition: background .5s, border-color .5s; overflow: hidden; text-align: center; text-decoration: none; cursor: pointer; } .button.accent:hover { background: #17ad77; border-color: #17ad77; } .button:disabled { opacity: .5s; } .button-group { padding: 0; border-radius: 100px; height: 40px; display: inline-block; line-height: 40px; min-width: 235px; font-size: 1rem; transition: background .5s, border-color .5s; min-width: 235px; } .button-group > .button { vertical-align: top; min-width: 100px; } .button-group > .button:first-child { border-radius: 100px 0 0 100px; } .button-group > .button:last-child { border-radius: 0 100px 100px 0; margin-left: -5px; } .button-group > .button.small { min-width: 50px; } .button-group > .button.large { min-width: 150px; } .button-group > .button i { font-size: 20px; vertical-align: middle; display: inline-block; } .list { display: inline-block; max-width: 235px; width: 235px; } .list > .header { font-weight: 600; text-align: left; border-bottom: 1px solid #ece8e8; margin-bottom: 20px; } .list > ul { padding: 0; margin: 0; } .list > ul > li { list-style: none; padding: 5px 0; color: gray; margin: 0; cursor: pointer; } .list > ul > li:hover { color: #3FD59F; } .list > ul > li > * { display: inline-block; width: 50%; } .list > ul > li > *.text { text-align: left; } .list > ul > li > *.stat { text-align: right; color: #ece8e8; } .tabs { width: 100%; line-height: 40px; height: 40px; } .tabs > .tab { text-transform: uppercase; color: #b1aeae; display: inline-block; margin-right: 15px; border-bottom: 3px solid transparent; min-width: 150px; vertical-align: middle; position: relative; } .tabs > .tab:hover { color: gray; } .tabs > .tab.dropdown:after { position: absolute; content: '▼'; right: 5px; font-size: 10px; top: 1px; } .dark .tabs > .tab { color: white; } .dark .tabs > .tab:hover { color: #CCC; } .tabs > .tab.active { border-color: #3FD59F; color: gray; } .tabs > .tab:not(.active) { cursor: pointer; } .table { display: table; width: 100%; border: 1px solid #ece8e8; border-radius: 4px; box-shadow: 0px 0px 4px #eeecec; } .dark .table { box-shadow: none; } .table > .row { display: table-row; } @media only screen and (max-width: 500px) { .table > .row { display: block; } } .table > .row:not(.head) { line-height: 75px; height: 75px; } @media only screen and (max-width: 500px) { .table > .row:not(.head) { height: auto; line-height: normal; } } .table > .row:not(.head):hover { background: rgba(236, 232, 232, 0.2); } .table > .row.head, .table > .row.foot { line-height: 50px; height: 50px; font-size: 10px; text-transform: uppercase; font-weight: bold; color: #565353; } .table > .row.head.head, .table > .row.foot.head { box-shadow: inset 0px -3px 0px #fcf9f9; } .table > .row > .cell { border-bottom: 1px solid #ece8e8; color: gray; vertical-align: middle; min-width: 150px; display: table-cell; background: white; text-align: center; } @media only screen and (max-width: 500px) { .table > .row > .cell { display: block; width: 100%; height: 100px; vertical-align: middle; line-height: 100px; } } .table > .row > .cell.bold { background: #faf9f9; } .table > .row > .cell > * { display: inline-block; vertical-align: middle; } .table > .row > .cell > .icon { color: #3FD59F; margin-right: 3px; } .table > .row > .cell > img { max-width: 30px; margin-right: 10px; max-height: 30px; border-radius: 100px; } .users > .user { border: 1px solid #ece8e8; border-radius: 10px; margin: 10px; width: 235px; display: inline-block; text-align: center; box-shadow: 0px 0px 4px #eeecec; } .dark .users > .user { box-shadow: none; } .users > .user > .face { height: 150px; line-height: 150px; } .users > .user > .face img { vertical-align: middle; display: inline-block; width: 100px; height: 100px; border-radius: 100px; } .users > .user > .info { height: 70px; } .users > .user > .info > .position { color: #CCC; font-size: 13px; } .users > .user > .buttons > .button { border-top: 1px solid #ece8e8; display: inline-block; height: 35px; line-height: 35px; color: #3FD59F; cursor: pointer; vertical-align: middle; transition: all .5s; } .users > .user > .buttons > .button:first-child { width: 116.5px; border-right: 1px solid #ece8e8; } .users > .user > .buttons > .button:last-child { width: 117.5px; } .users > .user > .buttons > .button:hover { background-color: #ece8e8; color: gray; } .products { column-gap: 10px; } .products > .product { column-break-inside: avoid; background-color: white; margin: 10px; cursor: pointer; border: 1px solid #ece8e8; border-radius: 5px; display: inline-block; text-align: center; overflow: hidden; box-shadow: 0px 0px 4px #eeecec; } .dark .products > .product { box-shadow: none; } .products > .product > .image { overflow: hidden; height: 140px; } .products > .product > .image > img { height: auto; width: 240px; transition: all .2s ease-in-out; } .products > .product:hover img { transform: scale(1.3); } .products > .product > .info { padding: 10px; text-align: left; position: relative; } .products > .product > .info .description { color: #CCC; font-size: 13px; } .products > .product > .info .price { position: absolute; right: 10px; top: 10px; color: #3FD59F; } .form.comp { text-align: center; margin: 0 auto; width: 350px; overflow: hidden; border: 1px solid #ece8e8; padding: 0; border-radius: 3px; padding: 60px 20px; position: relative; background: white; } .form.comp.wide { width: 550px; } .form.comp > .header { position: absolute; top: 0; left: 0; background: #f0efef; border-bottom: 1px solid #d7d6d6; height: 40px; line-height: 40px; display: inline-block; margin-bottom: 20px; width: 100%; color: gray; } .form.comp > .input-container { display: block; margin-top: 20px; margin-bottom: 20px; } .form.comp > .input-container > input, .form.comp > .input-container > textarea { border: 0; text-align: center; border-bottom: 1px solid #ece8e8; outline: none; display: block; font-size: 16px; height: 20px; width: 100%; } .form.comp > .input-container > textarea { height: 150px; border: 1px solid #ece8e8; } .form.comp > .input-container > .errors { text-align: left; min-height: 30px; } .dropdown { position: relative; top: 5px; max-width: 235px; margin: 0 auto; } .dropdown > .dropdown-menu { position: absolute; width: 100%; min-height: 160px; z-index: 9; margin-top: 5px; } .dropdown > .dropdown-menu:not(.active) { visibility: hidden; } .dropdown > .dropdown-menu a { cursor: pointer; font-size: 14px; position: relative; display: block; background: white; height: 40px; border-bottom: 1px solid #f1efef; text-transform: uppercase; text-decoration: none; text-align: center; color: #000000; color: rgba(0, 0, 0, 0.4); line-height: 40px; box-shadow: 0px 0px 4px #eeecec; } .dark .dropdown > .dropdown-menu a { box-shadow: none; } .dropdown > .dropdown-menu a:nth-child(1) { margin-top: 15px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .dropdown > .dropdown-menu a:nth-child(1):before { content: ""; width: 0; height: 0; position: absolute; left: 48%; top: -9px; margin-left: 0%; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid white; } .dropdown > .dropdown-menu a:nth-child(1):hover:before { border-bottom-color: #ece8e8; } .dropdown > .dropdown-menu a:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .dropdown > .dropdown-menu a:hover { background: #ece8e8; } .dropdown > .dropdown-menu a.active { background: #3FD59F; color: white; } .dropdown > .dropdown-menu a.active:nth-child(1):before { border-bottom-color: #3FD59F; } .dropdown > .dropdown-menu a.active:hover { background: #3FD59F; } .switch { cursor: pointer; display: inline-block; font-size: 10px; margin: 0; outline: none; } @keyframes switch-on-transform { 0% { transform: translate(0) scaleX(1); } 25% { transform: translate(0) scaleX(1.33); } 100% { transform: translate(100%) scaleX(1); } } @keyframes switch-off-transform { 0% { transform: translate(100%) scaleX(1); } 25% { transform: translate(100%) scaleX(1.33); } 100% { transform: translate(0) scaleX(1); } } .switch > input[type="checkbox"] { padding: 0; margin: 0; outline: none; position: relative; display: inline-block; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; height: 2em; width: 4em; font-size: 2em; border-radius: 1.5em; background-color: #ece8e8; border-color: transparent; background-clip: padding-box; color: #ece8e8; vertical-align: middle; transition: all 0.25s linear 0.25s; } .switch > input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 50%; background-color: white; border-radius: 100%; border: 0.125em solid transparent; background-clip: padding-box; z-index: 2; transform-origin: right center; animation: switch-off-transform 0.25s ease-out forwards; } .switch > input[type="checkbox"]::after { position: absolute; left: 0.675em; top: 0; line-height: 2; font-family: "Material-Design-Iconic-Font"; content: "\f26b \f136"; letter-spacing: 1em; z-index: 1; } .switch:focus { color: white; border-color: transparent; background-color: #ece8e8; outline: none; } .switch > input[type="checkbox"]:checked { color: white; background-color: #3FD59F; border-color: transparent; } .switch > input[type="checkbox"]:checked::before { transform-origin: left center; animation: switch-on-transform 0.25s ease-out forwards; } .radio input[type="radio"]:not(:checked), .radio input[type="radio"]:checked { position: absolute; left: -9999px; opacity: 0; } .radio input[type="radio"]:not(:checked) + label, .radio input[type="radio"]:checked + label { position: relative; padding-left: 45px; cursor: pointer; display: inline-block; height: 40px; line-height: 40px; font-size: 1rem; -webkit-transition: .28s ease; transition: .28s ease; -khtml-user-select: none; /* webkit (konqueror) browsers */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio input[type="radio"] + label:before, .radio input[type="radio"] + label:after { content: ''; position: absolute; left: 0; top: 0; margin: 4px; width: 30px; height: 30px; z-index: 0; -webkit-transition: .28s ease; transition: .28s ease; } .radio input[type="radio"]:not(:checked) + label:before, .radio input[type="radio"]:not(:checked) + label:after { border-radius: 50%; } .radio input[type="radio"]:checked + label:before, .radio input[type="radio"]:checked + label:after { border-radius: 50%; } .radio input[type="radio"].with-gap:checked + label:before, .radio input[type="radio"].with-gap:checked + label:after { border-radius: 50%; } .radio input[type="radio"]:not(:checked) + label:before { border: 2px solid #3FD59F; } .radio input[type="radio"]:not(:checked) + label:after { border: 2px solid #3FD59F; z-index: -1; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .radio input[type="radio"]:checked + label:before { border: 2px solid transparent; } .radio input[type="radio"]:checked + label:after { border: 2px solid #3FD59F; } .radio input[type="radio"]:disabled + label { color: #ece8e8; } .radio input[type="radio"]:disabled + label:before { border: 2px solid #ece8e8; } .radio input[type="radio"]:disabled + label:after { border: 2px solid #3FD59F; } .radio input[type="radio"].with-gap:checked + label:before, .radio input[type="radio"].with-gap:checked + label:after { border: 2px solid #3FD59F; } .radio input[type="radio"]:checked + label:after, .radio input[type="radio"].with-gap:checked + label:after { background-color: #3FD59F; z-index: 0; } .radio input[type="radio"]:checked + label:after { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .radio input[type="radio"].with-gap:checked + label:after { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .radio input[type="radio"].with-gap:disabled:checked + label:before { border: 2px solid rgba(0, 0, 0, 0.26); } .radio input[type="radio"].with-gap:disabled:checked + label:after { border: none; background-color: rgba(0, 0, 0, 0.26); } .chat { width: 100%; display: table; overflow: hidden; } .chat:before { content: " "; display: block; } .chat .chat-content { background-color: #fff; } .chat .chat-image { float: left; border-radius: 50%; } .chat .chat-image.chat-image-default { width: 60px; height: 60px; } .chat .chat-message { margin-bottom: 20px; width: 100%; display: table; overflow: hidden; } .chat .chat-message:before { content: " "; display: block; } .chat .chat-message:last-of-type { margin-bottom: 0; } .chat .chat-message .chat-message-wrapper { max-width: 70%; display: table; margin: 0 20px; padding-top: 10px; position: relative; } .chat .chat-message .chat-message-wrapper:before { content: " "; display: block; width: 0; height: 0; border: 12px solid transparent; top: 20px; position: absolute; z-index: 2; } .chat .chat-message .chat-message-wrapper p { padding: 10px 20px; color: #fff; border-top: 1px solid; margin: 0; } .chat .chat-message .chat-message-wrapper p:first-of-type { border-top: 0 !important; } .chat .chat-message.chat-message-recipient .chat-message-wrapper, .chat .chat-message.chat-message-recipient .chat-message-content { float: left; } .chat .chat-message.chat-message-recipient .chat-message-wrapper:before { left: -20px; border-right-color: #91D98A; } .chat .chat-message.chat-message-recipient p { background-color: #91D98A; border-top-color: #7dc576; } .chat .chat-message.chat-message-sender .chat-message-wrapper, .chat .chat-message.chat-message-sender .chat-message-content { float: right; } .chat .chat-message.chat-message-sender .chat-message-wrapper:before { right: -20px; border-left-color: #8AC0D9; } .chat .chat-message.chat-message-sender p { background: #8AC0D9; border-top-color: #76acc5; } .chat .chat-message.chat-message-sender img { float: right; } .chat .chat-message .chat-message-content { display: table; overflow: hidden; border-radius: 4px; border-radius: 5px; } .chat .chat-message .chat-message-content:before { content: " "; display: block; } .chat .chat-message .chat-details { clear: both; font-size: 12px; width: 100%; text-align: left; } .chat .chat-message .chat-details span { margin-right: 4px; color: #bbb; } @-moz-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 20px; } } @-webkit-keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 20px; } } @keyframes dothabottomcheck { 0% { height: 0; } 100% { height: 20px; } } @keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 48px; } } @-webkit-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 48px; } } @-moz-keyframes dothatopcheck { 0% { height: 0; } 50% { height: 0; } 100% { height: 48px; } } .checkbox input[type=checkbox] { display: none; } .checkbox label.text { line-height: 40px; vertical-align: top; display: inline-block; margin-left: 5px; font-size: 16px; } .checkbox label.graphics { height: 40px; width: 40px; background-color: transparent; border: 4px solid #3FD59F; border-radius: 5px; position: relative; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: border-color ease 0.2s; -o-transition: border-color ease 0.2s; -webkit-transition: border-color ease 0.2s; transition: border-color ease 0.2s; cursor: pointer; } .checkbox label.graphics::before, .checkbox label.graphics::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; height: 0; width: 8px; background-color: #3FD59F; display: inline-block; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; border-radius: 5px; content: ' '; -webkit-transition: opacity ease .5; -moz-transition: opacity ease .5; transition: opacity ease .5; } .checkbox label.graphics::before { top: 28.8px; left: 16.4px; box-shadow: 0 0 0 2px white; -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .checkbox label.graphics::after { top: 14.8px; left: 2px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .checkbox input[type=checkbox]:checked + .graphics, .checkbox .graphics.checked { border-color: #3FD59F; } .checkbox input[type=checkbox]:checked + .graphics::after, .checkbox .graphics.checked::after { height: 20px; -moz-animation: dothabottomcheck 0.2s ease 0s forwards; -o-animation: dothabottomcheck 0.2s ease 0s forwards; -webkit-animation: dothabottomcheck 0.2s ease 0s forwards; animation: dothabottomcheck 0.2s ease 0s forwards; } .checkbox input[type=checkbox]:checked + .graphics::before, .checkbox .graphics.checked::before { height: 48px; -moz-animation: dothatopcheck 0.4s ease 0s forwards; -o-animation: dothatopcheck 0.4s ease 0s forwards; -webkit-animation: dothatopcheck 0.4s ease 0s forwards; animation: dothatopcheck 0.4s ease 0s forwards; } .checkbox input[type=checkbox]:disabled + .graphics { border-color: #ece8e8; } .checkbox input[type=checkbox]:disabled + .text { color: #ece8e8; } .loading { display: inline-block; } .loading > .loading-content { width: 30px; height: 30px; display: flex; position: relative; align-items: center; justify-content: center; } .loading > .loading-content > .loading-circle { top: 0; width: 60px; height: 30px; position: absolute; border: 1px solid #3FD59F; border-bottom: 0; transform-origin: 50% 100%; background-color: transparent; border-top-left-radius: 110px; border-top-right-radius: 110px; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; animation: loading 1.5s linear infinite; -webkit-animation: loading 1.5s linear infinite; } @-webkit-keyframes loading { from { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading { from { -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .search-container .search-box { -webkit-transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s; transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s; width: 40px; height: 40px; border-radius: 20px; border: none; cursor: pointer; background: #ebebeb; } .search-container .search-box + label .search-icon { color: #959191; } .search-container .search-box:hover { color: white; background: #c8c8c8; box-shadow: 0 0 0 5px #3FD59F; } .search-container .search-box:hover + label .search-icon { color: white; } .search-container .search-box:focus { -webkit-transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s; transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s; border: none; outline: none; box-shadow: none; padding-left: 15px; cursor: text; width: 300px; border-radius: auto; background: #ebebeb; color: black; } .search-container .search-box:focus + label .search-icon { color: #959191; } .search-container .search-box:not(:focus) { text-indent: -5000px; } .search-container #search-submit { position: relative; left: -5000px; } .search-container .search-icon { position: relative; left: -29px; top: 3px; font-size: 20px; color: white; cursor: pointer; } @keyframes load { 0% { stroke-dashoffset: 0; } } .progress { position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li { display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before { content: attr(data-name); position: absolute; width: 100%; bottom: -2rem; font-weight: 400; } .progress > li:after { content: attr(data-percent); position: absolute; width: 100%; top: 3.7rem; left: 0; font-size: 2rem; text-align: center; } .progress svg { width: 10rem; height: 10rem; } .progress svg:nth-child(2) { position: absolute; left: 0; top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress svg:nth-child(2) path { fill: none; stroke-width: 25; stroke-dasharray: 629; stroke: #fff; opacity: .9; -webkit-animation: load 10s; animation: load 10s; } .calendar-container { display: inline-block; /* ---------- CALENDAR ---------- */ } .calendar-container a { text-decoration: none; } .calendar-container h2 { font-size: 2em; line-height: 1.25em; margin: .25em 0; } .calendar-container h3 { font-size: 1.5em; line-height: 1em; margin: .33em 0; } .calendar-container table { border-collapse: collapse; border-spacing: 0; } .calendar-container > .calendar { text-align: center; } .calendar-container > .calendar header { position: relative; } .calendar-container > .calendar h2 { text-transform: uppercase; font-size: 18px; font-weight: 100; } .calendar-container > .calendar thead { font-weight: 600; text-transform: uppercase; } .calendar-container > .calendar tbody { color: #7c8a95; } .calendar-container > .calendar tbody td:hover { border: 2px solid #3FD59F; } .calendar-container > .calendar td { border: 2px solid transparent; border-radius: 50%; display: inline-block; height: 40px; line-height: 40px; text-align: center; cursor: pointer; width: 40px; } .calendar-container > .calendar .prev-month, .calendar-container > .calendar .next-month { color: #cbd1d2; } .calendar-container > .calendar .prev-month:hover, .calendar-container > .calendar .next-month:hover { border: 2px solid #3FD59F; } .calendar-container .current-day { background: #3FD59F; color: #f9f9f9; } .calendar-container .event { cursor: pointer; position: relative; } .calendar-container .event:after { background: #3FD59F; border-radius: 50%; bottom: 4px; display: block; content: ''; height: .5em; left: 50%; margin: -.25em 0 0 -.25em; position: absolute; width: .5em; } .calendar-container .event.current-day:after { background: #f9f9f9; } .calendar-container .btn-prev, .calendar-container .btn-next { border-radius: 50%; color: #cbd1d2; height: 2em; font-size: 1.5em; line-height: 2em; margin: -1em; cursor: pointer; position: absolute; top: 50%; width: 2em; } .calendar-container .btn-prev:hover, .calendar-container .btn-next:hover { background: #cbd1d2; color: #f9f9f9; } .calendar-container .btn-prev { left: 3em; } .calendar-container .btn-next { right: 3em; } .grid { margin: 0; padding: 0; display: -webkit-flex; display: flex; list-style: none; } .grid .grid-cell { margin: 5px; padding: 0px; border-radius: 5px; line-height: 1; color: #fff; background: #3FD59F; flex: 1; } .grid .grid-cell.twice { flex: 2; } .grid .grid-cell p { display: block; margin: 0; padding: 20px; color: #fff; text-decoration: none; } .info.comp { display: inline-block; } .info.comp .title { color: #3FD59F; font-size: 30px; } .questionnaire { width: 600px; margin: 2em auto; overflow: hidden; background: white; border-radius: 5px; } @media only screen and (max-width: 600px) { .questionnaire { border-radius: 0px; width: 100%; } } .questionnaire .input-container { display: block; display: flex; padding: 0; margin: 0; border: 0; clear: both; overflow: hidden; } .questionnaire header { height: 75px; background: rgba(0, 0, 0, 0.05); line-height: 75px; padding-left: 20px; border-radius: 5px 5px 0 0; margin: 0; } .questionnaire header h1 { margin: 0; font-size: 1.2em; text-transform: uppercase; color: rgba(51, 51, 51, 0.4); } .questionnaire input, .questionnaire textarea { height: 50px; resize: off; width: 100%; line-height: 50px; padding: 0 0 0 20px; border-top: 0; border-right: 0; font-size: 14px; border-left: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .questionnaire input:focus, .questionnaire textarea:focus { outline: none; color: rgba(51, 51, 51, 0.7); } .questionnaire textarea { height: 200px; } .questionnaire footer { padding: 10px; text-align: center; height: 60px; line-height: 60px; background: rgba(0, 0, 0, 0.05); line-height: 75px; padding-left: 20px; border-radius: 5px 5px 0 0; border-radius: 0 0 5px 5px; padding-left: 0; padding-right: 20px; } .questionnaire footer > * { line-height: normal; } .list-view { display: flex; flex-direction: column; width: 320px; margin: 0 auto; } .list-view .list__item { display: block; border: 1px solid #eee; background-color: #FFFFFF; color: #323438; margin: 0 auto; border-radius: 6px; margin-bottom: .485em; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; } .list-view .media { display: table; table-layout: fixed; width: 100%; } .list-view .media__image, .list-view .media__bd { display: table-cell; vertical-align: middle; } .list-view .media__image > img { display: block; max-width: none; } .list-view .media--user .image__overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .list-view .media--user .media__image { position: relative; width: 24px; overflow: hidden; } .list-view .media--user .media__bd { padding-left: 1em; } .list-view .img--avatar { margin-left: -75%; width: 64px; } .list-view .media__bd { width: 100%; } .list-view .user .actions { transition: transform 280ms cubic-bezier(0.05, 0.15, 0.1, 1); transform: translateX(100%); } .list-view .user:hover .actions { transform: translateX(0); } .list-view .user p { margin: 0; } .list-view .user__name { font-weight: 500; } .list-view .user__description { color: #59646C; font-size: .875em; } .list-view .user__bd { position: relative; padding-right: 2em; } .list-view .user__bd .actions { position: absolute; display: flex; top: 0; right: 0; bottom: 0; width: auto; align-items: center; } .list-view .user__bd .actions .action__item { display: flex; height: 100%; align-items: center; padding: 0 16px; text-decoration: none; color: #CCC; font-size: 24px; } .list-view .user__bd .actions .action__item:hover .icon { fill: #007AFF; } .list-view .icon { transition: fill 280ms cubic-bezier(0, 0.2, 0.25, 1); fill: #A9B7C7; } .list-view .icon--32 { width: 32px; height: 32px; } .list-view .status-indicator { position: absolute; top: calc(1em + 2px); left: calc(-.6em + 2px); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background-color: black; } .list-view .status--online .status-indicator { background-color: #44A0FF; } .list-view .status--online .image__overlay { background-color: rgba(67, 160, 255, 0.6); } .list-view .status--offline .status-indicator { background-color: #C3CDD6; } .list-view .status--offline .image__overlay { background-color: rgba(255, 255, 255, 0.7); } .list-view .status--offline .actions { opacity: .25; pointer-events: none; } .list-view .status--away .status-indicator { background-color: #FFD858; } .list-view .status--away .image__overlay { background-color: rgba(255, 216, 88, 0.6); } .list-view .status--busy .status-indicator { background-color: #FF9458; } .list-view .status--busy .image__overlay { background-color: rgba(255, 147, 88, 0.6); } .list-view .status--pulse::before { position: absolute; top: -.875em; left: -.875em; border-radius: 50%; content: ''; width: 32px; height: 32px; opacity: 1; transform: scale(0); animation: pulse 2s linear forwards infinite; background: #43a0ff; } @keyframes pulse { 50%, 100% { opacity: 0; transform: scale(1); } } input[type="range"] { display: inline-block; -webkit-appearance: none; background-color: #bdc3c7; width: 300px; height: 5px; border-radius: 5px; margin: 0 auto; outline: 0; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #3FD59F; width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; cursor: pointer; transition: 0.3s ease-in-out; } input[type="range"]::-webkit-slider-thumb:hover { background-color: white; border: 2px solid #3FD59F; } input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.6); } input[type="range"] .description { font-size: 15px; text-transform: uppercase; color: #CCC; } </style></head><body> <div class="presentation" ng:app="app" ng:controller="presentation" ng:class="{visible: true}"> <div class="header presentation-header"> <div class="content"> <div class="logo"><img src="https://res.cloudinary.com/nixar-work/image/upload/co_rgb:080101,e_colorize:100/v1471744849/flyber.png"/></div> <div class="text">Flyber UI Kit</div> </div> </div> <ul class="menu"></ul> <div class="popup" ng:class="{active: $root.popupShow == true}"> <div class="close" ng:click="$root.popupShow = false"><i class="zmdi zmdi-close"></i></div> <div class="code" hljs="hljs" hljs-source="$root.popup"> </div> </div> <div class="fullpage"> <div class="section welcome" data-anchor="Welcome"> <div class="cover v1"></div> <div class="cover v2"></div> <div class="cover v3"> <div class="title"> <h1>Pure CSS UI Components</h1> <h2>buttons, inputs, tables, cards and more</h2> </div> </div> <div class="body"> <div class="button default">Get Started</div> </div> </div> <div class="section control" data-anchor="Button"> <div class="demo small"> <div class="title">Button Default</div> <div class="box center"> <div class="button default">Default</div> </div> </div> <div class="demo small"> <div class="title">Button Accent</div> <div class="box center"> <div class="button accent">Accent</div> </div> </div> </div> <div class="section control" data-anchor="Button Group"> <div class="demo small"> <div class="title">Button Group</div> <div class="box center"> <div class="button-group"> <div class="button default">Default</div> <div class="button accent">Accent</div> </div> </div> </div> <div class="demo small"> <div class="title">Button Group (with Icons)</div> <div class="box center"> <div class="button-group"> <div class="button default small"> <i class="zmdi zmdi-close"></i></div> <div class="button accent large">Publish</div> </div> </div> </div> </div> <div class="section control" data-anchor="Switch"> <div class="demo small"> <div class="title">Switch (font-size: 10px)</div> <div class="box center"> <div class="switch"> <input type="checkbox" checked=""/> </div> </div> </div> <div class="demo small"> <div class="title">Switch (font-size: 14px)</div> <div class="box center"> <div class="switch" style="font-size: 14px;"> <input type="checkbox"/> </div> </div> </div> </div> <div class="section control" data-anchor="Radio"> <div class="demo small"> <div class="title">Radio</div> <div class="box small"> <div class="radio"> <input class="with-gap" id="test3" name="group1" type="radio" checked=""/> <label for="test3">Checked</label> </div> <div class="radio"> <input class="with-gap" id="test5" name="group1" type="radio"/> <label for="test5">Unchecked</label> </div> <div class="radio"> <input class="with-gap" id="test5" name="group1" type="radio" disabled=""/> <label for="test5">Disabled</label> </div> </div> </div> <div class="demo small" data-anchor="Checkbox"> <div class="title">Checkbox</div> <div class="box small"> <div class="checkbox"> <input id="checkbox1" type="checkbox" checked=""/> <label class="graphics" for="checkbox1"></label> <label class="text" for="checkbox1">Checked</label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox"/> <label class="graphics" for="checkbox2"></label> <label class="text" for="checkbox2">Unchecked</label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" disabled=""/> <label class="graphics" for="checkbox3"></label> <label class="text" for="checkbox3">Disabled</label> </div> </div> </div> </div> <div class="section control" data-anchor="Range"> <div class="demo"> <div class="title">Range</div> <div class="box center"> <input type="range" min="0" max="10" step="1" value="0"/> </div> </div> </div> <div class="section control dark" data-anchor="Dropdown"> <div class="demo"> <div class="title">Dropdown</div> <div class="box center"> <div class="dropdown"> <div class="button accent">Admin Settings</div> <!--i.zmdi.cog.zmdi-settings--> <div class="dropdown-menu active"><a href="#">Edit Users </a><a class="active" href="#">Web Statistics </a><a href="#">Upload Settings </a><a href="#">Edit Slider </a></div> </div> </div> </div> </div> <div class="section control" data-anchor="Info"> <div class="demo small"> <div class="title">Info</div> <div class="box center"> <div class="info comp"> <div class="title">Selling</div> <div class="description">status</div> </div> </div> </div> <div class="demo small"> <div class="title">Info (Number)</div> <div class="box center"> <div class="info comp"> <div class="title">$200</div> <div class="description">price </div> </div> </div> </div> </div> <div class="section control center" data-anchor="Loading"> <div class="demo"> <div class="title">Loading</div> <div class="box center"> <div class="loading"> <div class="loading-content"> <div class="loading-circle"></div> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Search"> <div class="demo"> <div class="title">Search</div> <div class="box center"> <div class="search-container"> <input class="search-box demo-click" id="search-box" type="text" name="q"/> <label for="search-box"><i class="zmdi zmdi-search search-icon"></i></label> <input id="search-submit" type="submit"/> </div> </div> </div> </div> <div class="section control dark" data-anchor="Form Panel"> <div class="demo"> <div class="title">Form Panel</div> <div class="box center"> <div class="form comp"> <div class="header">Form Window </div> <div class="input-container"> <input type="text" placeholder="Email"/> <div class="errors"></div> </div> <div class="input-container"> <input type="text" placeholder="First Name"/> <div class="errors"></div> </div> <div class="input-container"> <input type="text" placeholder="Password"/> <div class="errors"></div> </div> <div class="button default">Next</div> </div> </div> </div> </div> <div class="section control" data-anchor="List"> <div class="demo small"> <div class="title">List</div> <div class="box center"> <div class="list"> <div class="header">Header List</div> <ul> <li> <div class="text">List Item</div> <div class="stat">121</div> </li> <li> <div class="text">List Item 2</div> <div class="stat">122</div> </li> <li> <div class="text">List Item 3</div> <div class="stat">1233</div> </li> <li> <div class="text">List Item 3</div> <div class="stat">123</div> </li> </ul> </div> </div> </div> <div class="demo small"> <div class="title">List (with icons)</div> <div class="box center"> <div class="list"> <div class="header">Icon List</div> <ul> <li> <div class="text">View</div> <div class="stat"> <i class="zmdi zmdi-eye"></i></div> </li> <li> <div class="text">Coffee</div> <div class="stat"> <i class="zmdi zmdi-coffee"></i></div> </li> <li> <div class="text">Chart</div> <div class="stat"> <i class="zmdi zmdi-chart"></i></div> </li> <li> <div class="text">Edit</div> <div class="stat"> <i class="zmdi zmdi-edit"></i></div> </li> </ul> </div> </div> </div> </div> <div class="section control dark" data-anchor="Questionnaire"> <div class="demo"> <div class="title">Questionnaire</div> <div class="box center"> <div class="questionnaire"> <header> <h1>Send us a suggestion!</h1> </header> <div class="input-container"> <input class="first" placeholder="First Name" type="text"/> <input class="last" placeholder="Last Name" type="text"/> </div> <div class="input-container"> <input class="email" placeholder="E-mail Address" type="text"/> </div> <div class="input-container"> <textarea placeholder="Your Suggestions Here!"></textarea> </div> <footer> <button class="button accent">Send Suggestion</button> </footer> </div> </div> </div> </div> <div class="section control" data-anchor="Tab"> <div class="demo"> <div class="title">Tab</div> <div class="box center"> <div class="tabs"> <div class="tab active">Home</div> <div class="tab">About us</div> <div class="tab">Portfolio</div> </div> </div> </div> </div> <div class="section control dark" data-anchor="Tab 2"> <div class="demo"> <div class="title">Tab (with Dropdown)</div> <div class="box center"> <div class="tabs"> <div class="tab">Home</div> <div class="tab dropdown active"> About us <div class="dropdown-menu active"><a class="active" href="#">Edit Users </a><a href="#">Web Statistics </a><a href="#">Upload Settings </a><a href="#">Edit Slider </a></div> </div> <div class="tab">Portfolio</div> </div> </div> </div> </div> <div class="section control" data-anchor="List View"> <div class="demo"> <div class="title">List View</div> <div class="box center"> <div class="list-view"> <div class="list__item user status--online"> <div class="media media--user"> <div class="media__image"> <div class="image__overlay"></div><img class="img--avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" alt="user"/> </div> <div class="media__bd user__bd"><i class="status-indicator status--pulse"></i> <div class="user-info"> <p class="user__name">Fabio Basile</p> <p class="user__description">Co-founder, Brotherhood</p> </div> <div class="actions"><a class="action__item" href="#"><i class="zmdi zmdi-phone"></i></a></div> </div> </div> </div> <div class="list__item user status--away"> <div class="media media--user"> <div class="media__image"> <div class="image__overlay"></div><img class="img--avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg" alt="user"/> </div> <div class="media__bd user__bd"><i class="status-indicator"></i> <div class="user-info"> <p class="user__name">Harry Roberts</p> <p class="user__description">Consultant Front-end Architect</p> </div> <div class="actions"><a class="action__item" href="#"><i class="zmdi zmdi-phone"></i></a></div> </div> </div> </div> <div class="list__item user status--busy"> <div class="media media--user"> <div class="media__image"> <div class="image__overlay"></div><img class="img--avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" alt="user"/> </div> <div class="media__bd user__bd"><i class="status-indicator"></i> <div class="user-info"> <p class="user__name">Eric Hoffmann</p> <p class="user__description">Founder, JellyJar Co</p> </div> <div class="actions"><a class="action__item" href="#"><i class="zmdi zmdi-phone"></i></a></div> </div> </div> </div> <div class="list__item user status--offline"> <div class="media media--user"> <div class="media__image"> <div class="image__overlay"></div><img class="img--avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/sdw/128.jpg" alt="user"/> </div> <div class="media__bd user__bd"><i class="status-indicator"></i> <div class="user-info"> <p class="user__name">Sebastiaan de With</p> <p class="user__description">Co-founder, Pictogram</p> </div> <div class="actions"><a class="action__item" href="#"><i class="zmdi zmdi-phone"></i></a></div> </div> </div> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Table"> <div class="demo"> <div class="title">Table</div> <div class="box center"> <div class="table"> <div class="row head"> <div class="cell">Client</div> <div class="cell">Ranking </div> <div class="cell">Time</div> <div class="cell">Price</div> <div class="cell">Taxes</div> <div class="cell">Paid</div> </div> <div class="row" ng:repeat="row in rows(5)"> <div class="cell"> <img ng:src="https://randomuser.me/api/portraits/men/{{$index}}.jpg"/> <div class="text">Mike</div> </div> <div class="cell"> <i class="icon zmdi zmdi-star"></i> <div class="text">8/10</div> </div> <div class="cell"> <i class="icon zmdi zmdi-time"></i> <div class="text">3:50</div> </div> <div class="cell bold">$20</div> <div class="cell">$2</div> <div class="cell bold">$22</div> </div> <div class="row foot"></div> </div> </div> </div> </div> <div class="section control" data-anchor="Users"> <div class="demo"> <div class="title">Users</div> <div class="box center"> <div class="users"> <div class="user" ng:repeat="row in rows(8)"> <div class="face"><img ng:src="https://randomuser.me/api/portraits/men/{{$index}}.jpg"/></div> <div class="info"> <div class="name">Andrey</div> <div class="position">Developer</div> </div> <div class="buttons"> <div class="button">Info</div> <div class="button">Chat</div> </div> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Products"> <div class="demo"> <div class="title">Products</div> <div class="box center"> <div class="products"> <div class="product" ng:repeat="row in rows(8)"> <div class="image"><img ng:src="http://lorempixel.com/400/200?random={{$index}}"/></div> <div class="info"> <div class="title">Product</div> <div class="description">Description</div> <div class="price">$25</div> </div> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Calendar"> <div class="demo"> <div class="title">Calendar</div> <div class="box center"> <div class="calendar-container"> <div class="calendar"> <header> <h2>September</h2><i class="btn-prev zmdi zmdi-chevron-left" href="#"></i><i class="btn-next zmdi zmdi-chevron-right" href="#"></i> </header> <table> <thead> <tr> <td>Mo</td> <td>Tu</td> <td>We</td> <td>Th</td> <td>Fr</td> <td>Sa</td> <td>Su</td> </tr> </thead> <tbody> <tr> <td class="prev-month">26</td> <td class="prev-month">27</td> <td class="prev-month">28</td> <td class="prev-month">29</td> <td class="prev-month">30</td> <td class="prev-month">31</td> <td>1</td> </tr> <tr> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td class="event">10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td class="event">21</td> <td>22</td> </tr> <tr> <td class="current-day event">23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> <td>29</td> </tr> <tr> <td>30</td> <td class="next-month">1</td> <td class="next-month">2</td> <td class="next-month">3</td> <td class="next-month">4</td> <td class="next-month">5</td> <td class="next-month">6</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Charts"> <div class="demo"> <div class="title">Charts</div> <!-- Container--> <div class="box center"> <svg width="0" height="0"> <defs> <lineargradient id="cl1" gradientunits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1"> <stop stop-color="#618099"></stop> <stop offset="100%" stop-color="#8e6677"></stop> </lineargradient> <lineargradient id="cl2" gradientunits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#8e6677"></stop> <stop offset="100%" stop-color="#9b5e67"></stop> </lineargradient> <lineargradient id="cl3" gradientunits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1"> <stop stop-color="#9b5e67"></stop> <stop offset="100%" stop-color="#9c787a"></stop> </lineargradient> <lineargradient id="cl4" gradientunits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0"> <stop stop-color="#9c787a"></stop> <stop offset="100%" stop-color="#817a94"></stop> </lineargradient> <lineargradient id="cl5" gradientunits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0"> <stop stop-color="#817a94"></stop> <stop offset="100%" stop-color="#498a98"></stop> </lineargradient> <lineargradient id="cl6" gradientunits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0"> <stop stop-color="#498a98"></stop> <stop offset="100%" stop-color="#618099"></stop> </lineargradient> </defs> </svg> <ul class="progress"> <!-- Item--> <li data-name="SVG Skill" data-percent="13%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="3" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path> </svg> </li> <!-- Item--> <li data-name="HTML5 Skill" data-percent="87%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="2" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path> </svg> </li> <!-- Item--> <li data-name="jQuery Skill" data-percent="13%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="12" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path> </svg> </li> <!-- Item--> <li data-name="UI Skill" data-percent="97%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="9" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path> </svg> </li> <!-- Item--> <li data-name="PHP Skill" data-percent="58%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="6" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="364"></path> </svg> </li> <!-- Item--> <li data-name="CSS Skill" data-percent="100%"> <svg viewbox="-10 -10 220 220"> <g fill="none" stroke-width="6" transform="translate(100,100)"> <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"></path> <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"></path> <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"></path> <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"></path> <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"></path> <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"></path> </g> </svg> <svg viewbox="-10 -10 220 220"> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path> </svg> </li> </ul> </div> </div> </div> <div class="section control" data-anchor="Chat"> <div class="demo"> <div class="title">Chat</div> <div class="box center"> <div class="chat"> <div class="chat-message padding"> <div class="chat-message chat-message-recipient"><img class="chat-image chat-image-default" src="http://www.michaelmammoliti.com/_projects/chat/_media/img/user1.jpg"/> <div class="chat-message-wrapper"> <div class="chat-message-content"> <p>Sushi tonight?</p> </div> <div class="chat-details"><span class="chat-message-localization font-size-small">My Address</span><span class="chat-message-read-status font-size-small">- Read</span></div> </div> </div> <div class="chat-message chat-message-sender"><img class="chat-image chat-image-default" src="http://www.michaelmammoliti.com/_projects/chat/_media/img/user2.jpg"/> <div class="chat-message-wrapper"> <div class="chat-message-content"> <p>Pizza?</p> <p>We had sushi last time!</p> <p>For me one Vegetariana! Plus some chili oil on it!</p> </div> <div class="chat-details"><span class="chat-message-localisation font-size-small">My Address</span><span class="chat-message-read-status font-size-small">- Read</span></div> </div> </div> <div class="chat-message chat-message-recipient"><img class="chat-image chat-image-default" src="http://www.michaelmammoliti.com/_projects/chat/_media/img/user1.jpg"/> <div class="chat-message-wrapper"> <div class="chat-message-content"> <p>Done. Delivery takes 5 minutes!</p> </div> <div class="chat-details"><span class="chat-message-localisation font-size-small">My Address</span><span class="chat-message-read-status font-size-small">- Read</span></div> </div> </div> <div class="chat-message chat-message-sender"><img class="chat-image chat-image-default" src="http://www.michaelmammoliti.com/_projects/chat/_media/img/user2.jpg"/> <div class="chat-message-wrapper"> <div class="chat-message-content"> <p>Awesome! See you later! : )</p> </div> <div class="chat-details"><span class="chat-message-localization font-size-small">My Address</span><span class="chat-message-read-status font-size-small">- Read</span></div> </div> </div> </div> </div> </div> </div> </div> <div class="section control" data-anchor="Flex Grid"> <div class="demo center"> <div class="title">Flex Grid</div> <div class="box"> <div class="grid"> <div class="grid-cell"> <p>1/2</p> </div> <div class="grid-cell"> <p>1/2</p> </div> </div> <div class="grid"> <div class="grid-cell"> <p>1/3</p> </div> <div class="grid-cell"> <p>1/3</p> </div> <div class="grid-cell"> <p>1/3</p> </div> </div> <div class="grid"> <div class="grid-cell"> <p>1/4</p> </div> <div class="grid-cell twice"> <p>1/2</p> </div> <div class="grid-cell"> <p>1/4</p> </div> </div> <div class="grid"> <div class="grid-cell"> <p>Some Text</p> </div> <div class="grid-cell"> <p>Another Text</p> </div> </div> </div> </div> </div> </div> <div class="footer"></div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//code.jquery.com/jquery-2.2.4.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js'></script><script src='https://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.8/beautify-html.js'></script><script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.2/jquery.fullpage.min.js'></script><script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.2/jquery.fullpage.extensions.min.js'></script> <script >// Generated by LiveScript 1.5.0 (function(){ var formatXml; formatXml = function(xml){ var formatted, reg, pad; formatted = ''; reg = /(>)(<)(\/*)/g; xml = xml.replace(reg, '$1\u000d\n$2$3'); pad = 0; jQuery.each(xml.split('\u000d\n'), function(index, node){ var indent, padding, i; indent = 0; if (node.match(/.+<\/\w[^>]*>$/)) { indent = 0; } else if (node.match(/^<\/\w/)) { if (pad !== 0) { pad -= 1; } } else if (node.match(/^<\w([^>]*[^\/])?>.*$/)) { indent = 1; } else { indent = 0; } padding = ''; i = 0; while (i < pad) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} padding += ' '; i++; } window.CP.exitedLoop(1); window.CP.exitedLoop(1); formatted += padding + node + '\u000d\n'; pad += indent; }); return formatted; }; angular.module('app', ['hljs']).directive('fullpage', function($timeout){ return { restrict: 'C', link: function($scope, $element){ var sections, names, menu, append; sections = $(".section"); names = sections.toArray().map(function(it){ return it.attributes["data-anchor"].nodeValue; }); menu = $('.menu'); append = function(item){ var a; a = $("<li class='menu-item' data-menuanchor='" + item + "'><a href='#" + item + "'> " + item + " </a></li>"); return menu.append(a); }; names.forEach(append); return $element.fullpage({ fadingEffect: true, anchors: names, menu: '.menu', onLeave: function(index, nextIndex, direction){ if (nextIndex === 1) { $(".presentation-header").removeClass('mini'); $(".menu").removeClass('mini'); } else { $(".presentation-header").addClass('mini'); $(".menu").addClass('mini'); } return $(".section.active").find(".demo-click").click(); } }); } }; }).directive('demo', function($rootScope){ return { restrict: 'C', link: function($scope, $element){ var code; code = $("<div class='code'><i class='zmdi zmdi-code'></div>"); code.click(function(){ var item; item = $element.clone(); item.children(".title").remove(); item.children(".code").remove(); return $rootScope.$apply(function(){ $rootScope.popup = formatXml(window.html_beautify(item.find('.box').html())); return $rootScope.popupShow = true; }); }); return $element.append(code); } }; }).controller('presentation', function($scope){ return $scope.rows = function(it){ var i$, results$ = []; for (i$ = 1; i$ <= it; ++i$) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} results$.push(i$); } window.CP.exitedLoop(2); window.CP.exitedLoop(2); return results$; }; }); }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: