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

Related: See More

Paper Dashboard PRO React
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments: