"Dashboard"
Bootstrap 3.2.0 Snippet by debjit

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900' rel='stylesheet' type='text/css'> <link href="Bootstrap/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="/Content/Bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron alerta">Faltam <span>15 dias</span> para o seu serviço expirar</div> <ul> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> <li class="col-md-1"><span class="notifications">19</span> <img src="http://smartkiss.net/assets/int_makt_communication.png"/> <span class="type">Avaliações Pendentes</span></li> </ul> <div class="col-md-4 clientes"> <div class="clientes-content"> <div class="content-title"> <img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"> <span>Potênciais Clientes</span> </div> <div class="number"><span>150</span>/270</div> <div class="line"> <div class="line-1"></div> <div class="line-2"></div> </div> <div class="analysis"> <div class="quote"><b>4% mais</b> que no mês passado</div> <a href="#" class="see-more">Ver mais <span class="glyphicon glyphicon-circle-arrow-right"></span></a> </div> </div> </div> <div class="col-md-4 concorrentes"> <div class="concorrentes-content"> <div class="content-title"> <img src="http://i.imgur.com/sB8qSlb.jpg" alt="Potênciais Concorrentes"> <span>Potênciais Concorrentes</span> </div> <div class="number"><span>150</span>/270</div> <div class="line"> <div class="line-1"></div> <div class="line-2"></div> </div> <div class="analysis"> <div class="quote"><b>4% mais</b> que no mês passado</div> <a href="#" class="see-more">Ver mais <span class="glyphicon glyphicon-circle-arrow-right"></span></a> </div> </div> </div> <div class="col-md-4" style="border:1px solid red">Perfil</div> <div class="col-md-8" style="border:1px solid yellow">Mapa</div> <div class="col-md-4" style="border:1px solid blue">Visualizações</div> <div class="col-md-5" style="border:1px solid purple">Empresas Qualificadas</div> <div class="col-md-3" style="border:1px solid pink">Empresas Não Qualificadas</div> <div class="col-md-4" style="border:1px solid grey">Tutoriais</div> <div class="col-md-5" style="border:1px solid brown">Ranking</div> <div class="col-md-3" style="border:1px solid aqua">Estado</div> <div class="col-md-4" style="border:1px solid orange">Apoio Cliente</div> </div> </body> </html>
ul { list-style: none; margin: 0; padding: 0; text-align: center; } li { display: inline-block; float: none !important; background: #fff; border: 2px solid #e5e3e4; margin: 0 auto; padding: 0; margin-right: 10px; text-align: center; } .col-md-1 { padding: 0; width: 9.3333%; } li img { margin: 0; } li .type { background: #2d3b46; color: #fff; display: block; line-height: 20px; padding: 10px 0px; margin-top: 10px; } li .notifications { float: right; background: #e5010e; color: #fff; font-weight: bold; padding: 5px 7px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; font-family: 'Georgia', serif; margin-top: -3px; margin-right: 3px; } .texto { background: #2d3b46 } .alerta { background: #fff; padding: 10px 0px; text-align: center; color: #565656; font-size: 12px; } .alerta span { color: #c9093c; font-size: 14px; font-weight: bold; } .clientes .content-title { background: #9fc943; } .concorrentes .content-title { background: #ff454a; } .concorrentes .content-title img, .clientes .content-title img { display: inline-block; padding: 0px 5px; margin-top: -5px; } .clientes .content-title span { color: #fff; margin: 0; padding: 10px 0px; font-size: 18px; font-weight: 100; display: inline-block; font-family: 'Arial', sans-serif; letter-spacing: 0.5px; } .concorrentes .content-title span { color: #fff; margin: 0; padding: 10px 0px; font-size: 18px; font-weight: 100; display: inline-block; font-family: 'Arial', sans-serif; letter-spacing: 0.5px; } .concorrentes, .clientes { padding: 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); } .concorrentes { margin-left: 20px; } .concorrentes .concorrentes-content .line, .clientes .clientes-content .line { height: 5px; } .concorrentes .concorrentes-content .line-1 { height: 5px; width: 70%; background: #ff454a; float: left; } .clientes .clientes-content .line-1 { height: 5px; width: 70%; background: #9fc943; float: left; } .concorrentes .concorrentes-content .line-2, .clientes .clientes-content .line-2 { height: 5px; width: 30%; background: #2b3b48; float: right; } .concorrentes .concorrentes-content .number, .clientes .clientes-content .number { color: #6d767b; font-family: 'Georgia', sans-serif; font-size: 18px; text-align: center; padding: 5px 0px; } .concorrentes .concorrentes-content .number span { color: #ff454a; font-size: 72px; } .clientes .clientes-content .number span { color: #9dc93e; font-size: 72px; } .concorrentes .concorrentes-content .analysis, .clientes .clientes-content .analysis { padding: 15px 15px 10px; display: inline-block; width: 100%; } .concorrentes .concorrentes-content .analysis .quote, .clientes .clientes-content .analysis .quote { color: #444444; float: left; } .concorrentes .concorrentes-content .analysis .see-more, .clientes .clientes-content .analysis .see-more { width: 25%; color: #444444; float: right; } .concorrentes .concorrentes-content .analysis .see-more span, .clientes .clientes-content .analysis .see-more span { padding: 0px 3px; top: 2px; }

Related: See More


Questions / Comments: