"panel"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/matthewjamesr/pen/ogzdBR?depth=everything&order=popularity&page=7&q=dashboard&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/skeleton.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css'> <style class="cp-pen-styles">/* COLOR SETUP */ /* HELPER CLASSES */ .no-margin { margin-left: 0px; } .no-pad-bottom { padding-bottom: 0px; } .pull-left { float: left; } .pull-right { float: right; } .hr { border-bottom: 1px solid #e3e3e3; } .hr-dotted { border-bottom: 1px dotted #e3e3e3; } .text-left { text-align: left; } .text-center { text-align: center; } .block-center { display: block; margin-left: auto; margin-right: auto; } .push-top-sm { margin-top: 15px; } .cancellation-count { margin-top: 40px; margin-bottom: 40px; bottom: -20px; text-align: center; font-size: 700%; color: #31F7DD; } .cancellations { background: #31F7DD; padding-top: 0px; margin-left: -15px; margin-right: -15px; margin-bottom: -15px; height: 45px; color: #fff; } .cancellations ul { margin: 0px; margin-bottom: -15px; padding-left: 10px; padding-right: 10px; list-style-type: none; text-align: justify; } .cancellations ul.big { margin-top: -20px; } .cancellations ul.big li { font-size: 140%; } .cancellations ul:after { content: ""; width: 100%; display: inline-block; } .cancellations li { display: inline; font-size: 75%; } /* IMAGE CLASSES */ .avatar { height: 150px; width: 150px; border: 8px solid #eaeaea; border-radius: 50%; } /* MAIN CLASSES */ body { background: #efefef; color: #777777; } .header { position: absolute; top: 0px; left: 0px; width: 100%; background: #49535b; color: lightgray; padding-top: 15px; } .header h3 { margin: 0px; color: white; } .header i { margin-right: 5px; font-size: 120%; } .header ul { float: right; margin: 0px; line-height: 30px; list-style-type: none; } .header ul li { display: inline; padding: 0px 2px 0px 2px; } .header ul li:hover { color: #a6a6a6; } .content { position: relative; top: 110px; } .content .block-content { background: #FCFCFC; padding: 15px; margin-bottom: 12px; -webkit-box-shadow: 0px 5px 5px -3px #bcbcbc; -moz-box-shadow: 0px 5px 5px -3px #bcbcbc; box-shadow: 0px 5px 5px -3px #bcbcbc; } .content .block-content h5 { padding-bottom: 3px; } .content .cal-alerts { margin-top: 85px; margin-bottom: -15px; } .content .cal-alerts i { width: 30px; font-size: 130%; margin: 0 auto; margin-right: 5px; } .content .cal-alerts li { line-height: 10px; letter-spacing: 0px; font-size: 85%; color: #777777; } .content .cal-alerts li .red { color: red; } .content .cal-alerts li .yellow { color: yellow; } .content .cal-alerts li .green { color: #00dc00; } .content .user-details, .content .user-alerts { margin-bottom: -15px; } .content .user-details .sub-heading, .content .user-alerts .sub-heading { margin-top: -3px; font-size: 85%; } .content .user-details i, .content .user-alerts i { width: 30px; font-size: 130%; margin: 0 auto; margin-right: 5px; } .content .user-details li, .content .user-alerts li { line-height: 10px; letter-spacing: 0px; font-size: 85%; color: #777777; } .content .user-details li .red, .content .user-alerts li .red { color: red; } .content .user-details li .yellow, .content .user-alerts li .yellow { color: #d6d600; } .content .user-details li .green, .content .user-alerts li .green { color: #00dc00; } .content .staff i { font-size: 170%; } .content .staff .red { color: red; } .content .staff .green { color: #00b300; } .content .staff img { margin-top: 10px; height: 40px; width: 40px; border: none; } .content .staff .staff-name { font-weight: bold; font-size: 110%; margin-top: 5px; text-align: center; } .content .staff .online { font-size: 85%; margin-top: -3px; } .content .footer { width: 100%; margin-left: -15px; margin-right: -30px; padding: 1px; background-color: #F47A60; } .content .calendar { float: left; width: 100%; margin-left: -15px; margin-right: -15px; padding: 15px; background-color: #F47A60; color: #FCFCFC; } .content .calendar h3.day { float: left; color: #FCFCFC; } .content .calendar .extend-day { float: left; } .content .calendar .extend-day p { float: left; clear: left; margin: 0px; margin-left: 10px; } .content .calendar .extend-day .pull { margin-top: -5px; font-size: 75%; color: #dddddd; } .content .calendar .toggle-month { float: right; } .content .calendar .toggle-month h3 { display: inline; color: #FCFCFC; } .content .sheet { padding-top: 85px; font-size: 85%; } .content .sheet li { display: inline; padding-left: 3px; padding-right: 3px; } .content .sheet .sheet-day { margin-top: -5px; } .content .sheet .sheet-day li { margin-right: 3px; padding: 9px; background: #e3e3e3; font-size: 93%; } .content .sheet .sheet-day li.empty { padding-right: 19px; background: transparent; } .content .sheet .calendar-footer { width: 100%; height: 10px; margin-left: -15px; margin-right: -15px; padding: 15px; background-color: #F47A60; color: #FCFCFC; } .content .sched-request { clear: left; } .content .revenue-icon { font-size: 180%; color: #a6a6a6; } .content .revenue { margin: 0px; margin-top: 10px; padding-right: 0px; } .content .revenue h4 { line-height: 45px; color: #8d8d8d; } .content .revenue .percent { clear: left; font-size: 40%; line-height: 0px; color: #a6a6a6; } .content .revenue .up { color: #00b300; } .content .revenue .down { color: red; } .content .revenue .commission { clear: left; margin-top: -15px; font-size: 40%; font-weight: bold; } </style></head><body> <section class="header"> <div class="container"> <div class="row"> <div class="four columns"> <h3>BOXLY</h3> </div> <div class="twelve columns"> <ul> <li><i class="fi-torsos-all"></i><span>Clients</span></li> <li><i class="fi-eye"></i><span>Sitters</span></li> <li><i class="fi-torso"></i><span>Admin</span></li> <li><i class="fi-graph-bar"></i><span>Reports</span></li> <li><i class="fi-star"></i><span>Functions</span></li> <li><i class="fi-key"></i><span>Keys</span></li> <li><i class="fi-clipboard"></i><span>Accounting</span></li> <li><i class="fi-torsos"></i><span>New Client</span></li> <li><i class="fi-alert"></i><span>Alerts</span></li> </ul> </div> </div> </div> </section> <div class="container content"> <div class="row"> <div class="four columns block"> <section class="block-content"><i class="fi-widget pull-right"></i><img class="avatar block-center" src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg"/> <section class="push-top-sm hr"> <h4 class="text-center">Matthew Reichardt</h4> </section> <section class="user-details push-top-sm"> <ul> <li><i class="fi-star"></i><span>Founder</span></li> <li><i class="fi-marker"></i><span>St. Louis, MO</span></li> </ul> </section> </section> <section class="block-content"><i class="fi-alert pull-right"></i> <h5 class="text-left hr">Alerts</h5> <section class="user-alerts push-top-sm"> <ul> <li><i class="fi-alert red"></i><span>Upcoming appointment</span></li> <li><i class="fi-alert red"></i><span>Lorem ipsum dolar</span></li> <li><i class="fi-alert red"></i><span>Some random alert</span></li> <li><i class="fi-alert red"></i><span>This design is slick!</span></li> </ul> </section> </section> <section class="block-content"><i class="fi-clipboard pull-right"></i> <h5 class="text-left hr">Completed Alerts</h5> <section class="user-alerts push-top-sm"> <ul> <li><i class="fi-check green"></i><span>Upcoming appointment</span></li> <li><i class="fi-check green"></i><span>Lorem ipsum dolar</span></li> <li><i class="fi-check green"></i><span>Some random alert</span></li> <li><i class="fi-check green"></i><span>This design is slick!</span></li> </ul> </section> </section> <section class="block-content"> <h5 class="text-left hr">Completed Jobs</h5> <section class="user-alerts push-top-sm"> <ul> <li><i class="fi-check green"></i><span>3 jobs complete</span></li> <li><i class="fi-alert red"></i><span>7 uncompleted jobs</span></li> </ul> </section> </section> </div> <div class="four columns block"> <section class="block-content"> <div class="row"> <h5 class="text-left hr">Staff Online</h5> <section class="staff hr-dotted"><img class="avatar block-center" src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg"/> <div class="staff-name">Grant Burns</div> <div class="text-center"><i class="fi-power green"></i></div> <div class="online text-center green">Active</div> </section> </div> <div class="row"> <section class="staff"><img class="avatar block-center" src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg"/> <div class="staff-name">Grant Burns</div> <div class="text-center"><i class="fi-power green"></i></div> <div class="online text-center green">Active</div> </section> </div> </section> </div> <!-- Calender Section--> <div class="four columns block"> <section class="block-content"> <div class="row"> <h5 class="text-left hr">Calendar</h5> <section class="calendar"> <h3 class="day">28</h3> <div class="extend-day"> <p>Sunday</p> <p class="pull">December/2014</p> </div> <div class="toggle-month"> <h3><</h3> <h3>></h3> </div> </section> <section class="cal-alerts push-top-sm"> <ul> <li><i class="fi-alert red"></i><span>Upcoming appointment</span></li> <li><i class="fi-alert red"></i><span>Lorem ipsum dolar</span></li> <li><i class="fi-alert red"></i><span>Some random alert</span></li> <li><i class="fi-alert red"></i><span>This design is slick!</span></li> </ul> </section> </div> </section> </div> <!-- Schedule Requests Section--> <!-- Calender Section--> <div class="four columns block"> <section class="block-content"> <h5 class="text-left hr">Schedule Requests</h5> <section class="user-alerts push-top-sm"> <ul> <li class="sched-request"><i class="fi-compass pull-left"></i> <div class="pull-left"><i>Meet the team</i><br/> <p class="sub-heading">T-Rex St Loius</p> </div> </li> <li class="sched-request"><i class="fi-compass pull-left"></i> <div class="pull-left"><i>Build Initial Specs</i><br/> <p class="sub-heading">T-Rex St Loius</p> </div> </li> <li class="sched-request"><i class="fi-compass pull-left"></i> <div class="pull-left"><i>Design User Board</i><br/> <p class="sub-heading">Remote</p> </div> </li> </ul> </section> </section> </div> <div class="twelve columns block"> <section class="block-content revenue-icon"><i class="fi-dollar pull-right"></i> <h5 class="text-left hr">Revenue</h5> <div class="row"> <div class="four columns user-alerts revenue push-top-sm block"> <h6> <strong>Daily</strong></h6> <h2 class="pull-left">$2.089</h2><span class="pull-left"> <h4>.00</h4></span> <div class="commission pull-left">COMMISSION: 1,000.00</div> <div class="percent down">2.7%</div> </div> <div class="four columns user-alerts revenue push-top-sm block"> <h6> <strong>Monthly</strong></h6> <h2 class="pull-left">$27.125</h2><span class="pull-left"> <h4>.00</h4></span> <div class="commission pull-left">COMMISSION: 16,000.00</div> <div class="percent up">1.5%</div> </div> <div class="four columns user-alerts push-top-sm block revenue"> <h6> <strong>Yesterday</strong></h6> <h2 class="pull-left">$86.079</h2><span class="pull-left"> <h4>.86</h4></span> <div class="commission pull-left">COMMISSION: 16,000.00</div> <div class="percent up">3.1%</div> </div> </div> </section> </div> <div class="eight columns block"> <section class="block-content"> <div class="row"> <h5 class="text-left hr">Arivals | Departures</h5> </div> </section> </div> <div class="four columns block"> <section class="block-content"> <div class="row"> <h5 class="text-left hr">Late Timeframes</h5> </div> </section> </div> <!--Logins Section--> <div class="row"> <div class="four columns block"> <section class="block-content user-details"> <div class="row"> <h5 class="text-left hr">Current Login's [STAFF]</h5> <ul class="push-top-sm"> <li><i class="fi-torso green"></i><span>Matthew Reichardt</span></li> <li><i class="fi-torso green"></i><span>Grant Burns</span></li> <li><i class="fi-torso yellow"></i><span>Lorem Ipsum</span></li> <li><i class="fi-torso green"></i><span>Ipsum Lorem</span></li> </ul> </div> </section> </div> <div class="four columns block"> <section class="block-content"> <div class="row"> <h5 class="text-left hr">Clients</h5> </div> </section> </div> <div class="four columns block"> <section class="block-content no-pad-bottom"> <div class="row"> <h5 class="text-left hr">Daily Cancellations</h5> <h6 class="cancellation"> <strong>Today</strong></h6> <div class="cancellation-count">8</div> </div> <div class="cancellations"> <ul> <li>Week</li> <li>Month</li> <li>Total</li> </ul> <ul class="big"> <li>3</li> <li style="margin-left:21px;">32</li> <li>57</li> </ul> </div> </section> </div> </div> </div> </div> </body></html>

Questions / Comments: