<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="jumbotron alerta">Faltam<span>15 dias</span>para o seu serviço expirar</div> <ul class="lista-notification"> <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 jumbotron-dashboard 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 jumbotron-dashboard potenciais"> <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 jumbotron-dashboard"> <div class="concorrentes-content"> <div class="content-title"><img src="http://i.imgur.com/sB8qSlb.jpg" alt="Potênciais Concorrentes"><span>Perfil</span></div> <img src="http://lorempixel.com/output/fashion-q-c-240-240-9.jpg"/> <div class="alerta"> Preencha o seu perfil para ter mais visibilidade</div> </div> </div> <div class="col-md-8 jumbotron-dashboard"> <img src="http://lorempixel.com/output/nature-q-c-815-341-3.jpg" /> </div> <div class="col-md-4 jumbotron-dashboard visualizacoes"><div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Visualizações de perfil</span></div> <div class="dl"> <div class="discount alizarin">15 <div class="type">visualizações</div> </div> <ul> <li> <div class="comment-img"><img src="http://lorempixel.com/50/50/people/6"></div> <div class="comment-text"><strong><a href="">Jane Doe</a></strong> <p>Hello this is a test comment.</p> </div> </li> <li> <div class="comment-img"><img src="http://lorempixel.com/50/50/people/7"></div> <div class="comment-text"><strong><a href="">Jane Doe</a></strong> <p>Hello this is</p> </div> </li> <li> <div class="comment-img"><img src="http://lorempixel.com/50/50/people/9"></div> <div class="comment-text"><strong><a href="">Jane Doe</a></strong> <p class="">Hello this is a test comment.</p> </div> </li> </ul> </div> </div> <div class="col-md-5 jumbotron-dashboard"><div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Empresas Qualificadas</span></div><img src="http://lorempixel.com/output/nature-q-c-485-341-4.jpg"/></div> <div class="col-md-3 jumbotron-dashboard"><div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Empresas não qualificadas</span></div><img src="http://lorempixel.com/output/fashion-q-c-240-240-9.jpg"/></div> <div class="col-md-4"><img src="http://lorempixel.com/output/fashion-q-c-240-240-9.jpg"/></div> <div class="col-md-5 jumbotron-dashboard"> <div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Ranking Avaliação</span></div> <div class="position">Estou em<span class="numero">32ª</span></div> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Descrição</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Generate your own Bootstrap color</td> </tr> <tr> <td>2</td> <td>Generate your own Bootstrap color</td> </tr> <tr> <td>3</td> <td>Generate your own Bootstrap color</td> </tr> <tr> <td>4</td> <td>Generate your own Bootstrap color</td> </tr> <tr> <td>5</td> <td>Generate your own Bootstrap color</td> </tr> </tbody> </table> </div> <div class="col-md-3 jumbotron-dashboard"><div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Estado de empresas</span></div></div> <div class="col-md-4 jumbotron-dashboard apoio"><div class="content-title"><img src="http://i.imgur.com/4jvcAzB.jpg" alt="Potênciais Clientes"><span>Apoio do cliente</span></div><div class="telefone">0351 65 9843 3</div><div class="email"> info@bestsupplier.eu</divu</div> </div>

body { background:#f6f6f6; } ul { margin:0; padding:0; } .jumbotron-dashboard { padding: 0; margin-bottom: 30px; color: inherit; background-color: #FFF; -webkit-box-shadow: 1px 1px 17px 0px rgba(112,120,124,0.16); -moz-box-shadow: 1px 1px 17px 0px rgba(112,120,124,0.16); box-shadow: 1px 1px 17px 0px rgba(112,120,124,0.16); } .lista-notification { margin: 0; padding: 0; text-align: center; } .lista-notification li { display: inline-block; float: none !important; background: #fff; border: 2px solid #e5e3e4; margin: 0 auto; padding: 0; margin-right: 10px; text-align: center; list-style: none; } .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; color: #FFF; } .potenciais .content-title { background: #ff454a; color: #FFF; } .content-title { color:#3d3d3d; } .content-title img { display: inline-block; padding: 0px 5px; margin-top: -5px; } .content-title span { padding: 10px 0px; display: inline-block; } .concorrentes-content .line-1 { height: 5px; width: 70%; background: #ff454a; float: left; } .clientes-content .line-1 { height: 5px; width: 70%; background: #9fc943; float: left; } .concorrentes-content .line-2, .clientes-content .line-2 { height: 5px; width: 30%; background: #2b3b48; float: right; } .concorrentes-content .number, .clientes-content .number { color: #6d767b; font-family: 'Georgia', sans-serif; font-size: 18px; text-align: center; padding: 5px 0px; } .concorrentes-content .number span { color: #ff454a; font-size: 72px; } .clientes-content .number span { color: #9dc93e; font-size: 72px; } .concorrentes-content .analysis, .clientes-content .analysis { padding: 15px 15px 10px; display: inline-block; width: 100%; } .concorrentes-content .analysis .quote, .clientes-content .analysis .quote { color: #444444; float: left; } .concorrentes-content .analysis .see-more, .clientes-content .analysis .see-more { width: 25%; color: #444444; float: right; } .concorrentes-content .analysis .see-more span, .clientes-content .analysis .see-more span { padding: 0px 3px; top: 2px; } .visualizacoes { background: #c9c9c9; } .visualizacoes ul{ background: #FFF; } .visualizacoes .content-title { color: #FFF; } .dl .discount { min-height: 50px; position: relative; font-size: 80px; line-height: 80px; text-align: center; font-weight: bold; padding: 20px 15px 0; color: #FFF; } .dl .discount:after { content: " "; border-right: 20px solid transparent; border-left: 20px solid transparent; position: absolute; bottom: -20px; left: 43% } .dl .discount.alizarin:after { border-top: 20px solid #c9c9c9; } .dl .discount .type { font-size: 20px; letter-spacing: 1px; text-transform: uppercase; margin-top: -30px; color:#FFF; } .comment-img { padding-right: 15px; } ul li > div { display: table-cell; } ul li { border-bottom: 1px solid #ebebeb; list-style: none; padding: 10px; } .caixa{ background:#01C9E2; min-height:100px; } .table-hover>tbody>tr:hover>td { background:#00c7de!important; } .position { position:absolute; background:#6e797d; padding:10px 15px; right:0; top:0; color:#FFF; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; margin: -5px 0px; font-size:10px; } .numero { display:block; text-align: center; font-size:20px; } .apoio { background:#01c9e2; color:#FFF!important; height:160px; } .apoio .content-title { color:#FFF!important; } .apoio .telefone { text-align:center; font-size:30px; font-weight:bold; } .apoio .email { text-align:center; font-size:20px; }