<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="row">
<div class="well">
<h1 class="text-center">Vote for your favorite</h1>
<div class="list-group">
<div class="list-group-item">
<div class="media col-md-3">
<figure>
<time>
<span class="day">8</span>
<span class="month">Jul</span>
<span class="year">2014</span>
<span class="time">12:00 AM</span>
</time>
</figure>
</div>
<div class="col-md-6">
<h3 class="list-group-item-heading tipster"> <strong>Quiconj Nuñez</strong> </h3>
<p class="list-group-item-text"> Tipo: <span class = "dato">Simple </span></p>
<p class="list-group-item-text"> Partido: <span class = "dato">At. Madrid - Barcelona </span></p>
<p class="list-group-item-text"> Pick: <span class = "dato">Ganador Barcelona </span></p>
<p class="list-group-item-text"> Deporte: <span class = "dato">Futbol </span></p>
<p class="list-group-item-text"> Liga: <span class = "dato">Liga BBVA </span></p>
<p class="list-group-item-text"> Hora: <span class = "dato">22:00 </span></p>
</div>
<div class="col-md-3 text-center stats">
<p><span class="glyphicon glyphicon-usd dato"></span> Cuota: 1.80</p>
<p><span class="glyphicon glyphicon-globe dato"></span> Stake: 2 / 10 </p>
</div>
<div class = "estado pendiente">
<h3>Pendiente</h3>
</div>
</div>
</div>
</div>
</div>
</div>
div.list-group-item {
height:auto;
min-height:220px;
}
.list-group {
color:#0A0A0A;
color:#fff;
}
.list-group-item{
background-color: rgb(102, 102, 102);
margin-bottom: 50px;
}
.stats {
padding-top: 7%;
}
.estado{
width: 100%;
height: 35px;
float: right;
}
.estado h3{
margin: 0;
padding: 5px;
color: #fff;
text-align: center;
}
.acertada{
background-image: -webkit-linear-gradient(rgb(107, 187, 75) 0%, rgb(20, 84, 6) 100%);
background-image: linear-gradient(rgb(107, 187, 75) 0%, rgb(20, 84, 6) 100%);
}
.perdida{
background-image: linear-gradient(rgb(255, 66, 66) 0%, rgb(94, 1, 1) 100%);
background-image: -webkit-linear-gradient(rgb(255, 66, 66) 0%, rgb(94, 1, 1) 100%);
}
.nula{
background-image: -webkit-linear-gradient(top, #DB8B2F 0%, #222 100%);
background-image: linear-gradient(to bottom, #DB8B2F 0%, #222 100%);
}
.pendiente{
background-image: -webkit-linear-gradient(rgb(81, 141, 234) 0%, rgb(31, 59, 169) 100%);
background-image: linear-gradient(rgb(81, 141, 234) 0%, rgb(31, 59, 169) 100%);
}
.dato{
color: rgb(255, 204, 0);
}
.tipster{
color: rgb(194, 55, 76);
}
time {
display: inline-block;
width: 100%;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
time > .day {
display: block;
font-size: 56pt;
font-weight: 100;
line-height: 1;
} time > .month {
display: block;
font-size: 24pt;
font-weight: 900;
line-height: 1;
}
