<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;
}
