BLOG - MARIAEL/curs_web_2015 GitHub Wiki
El código html
<!--contenido blog start-->
<div class="container padded">
<div class="row">
<div class="col-sm-8 blog">
<section>
<h1><a href="#">Mejores características</a></h1>
<p class="lead"><a href="index.html">Infinito</a></p>
<hr>
<p><span class="glyphicon glyphicon-time"> Post 22 diciembre de 2015</span></p>
<hr>
<img src="./assets/img/blog1.jpg" class="img-responsive" alt="">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore voluptatem dignissimos doloremque nemo ipsum. Consequatur ducimus dolorum, quae, ut vero dolores officiis repellat necessitatibus eveniet et vitae dignissimos libero maiores.</p>
<a href="#" class="btn btn-default">Leer más »</a>
<hr>
</section>
<section>
<h1><a href="#">Velocidad</a></h1>
<p class="lead"><a href="index.html">Absoluta</a></p>
<hr>
<p><span class="glyphicon glyphicon-time"> Post 23 diciembre de 2015</span></p>
<hr>
<img src="./assets/img/blog2.jpg" class="img-responsive" alt="">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore voluptatem dignissimos doloremque nemo ipsum. Consequatur ducimus dolorum, quae, ut vero dolores officiis repellat necessitatibus eveniet et vitae dignissimos libero maiores.</p>
<a href="#" class="btn btn-default">Leer más »</a>
<hr>
</section>
<section>
<h1><a href="#">Mayor Seguridad</a></h1>
<p class="lead"><a href="index.html">Total</a></p>
<hr>
<p><span class="glyphicon glyphicon-time"> Post 23 diciembre de 2015</span></p>
<hr>
<img src="./assets/img/blog3.jpg" class="img-responsive" alt="">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore voluptatem dignissimos doloremque nemo ipsum. Consequatur ducimus dolorum, quae, ut vero dolores officiis repellat necessitatibus eveniet et vitae dignissimos libero maiores.</p>
<a href="#" class="btn btn-default">Leer más »</a>
<hr>
</section>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<div class="col-sm-4 sidebar">
<section>
<h3 class="tpad">Buscar</h3>
<div class="input-group input-group lg">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control input-lg" placeholder="Buscar">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="button">Ir</button>
</span>
</div>
<div class="input-group input-group lg">
<input type="text" class="form-control input-lg" placeholder="Donación">
<span class="input-group-addon"><span class="glyphicon glyphicon-euro"></span></span>
</div>
</section>
<section>
<div class="list-group">
<a href="#" class="list-group-item active"><span class="badge">44</span>Todos</a>
<a href="#" class="list-group-item"><span class="badge">44</span>Velocidad</a>
<a href="#" class="list-group-item"><span class="badge">44</span>Ecológico</a>
<a href="#" class="list-group-item"><span class="badge">44</span>Escena</a>
<a href="#" class="list-group-item"><span class="badge">44</span>Seguridad</a>
<a href="#" class="list-group-item"><span class="badge">44</span>Novedades</a>
</div>
</section>
<section>
<h3 class="tpad">Últimos tweets</h3>
<div class="media tpad">
<a href="#" class="media-object" alt="">
<img src="./assets/img/user.jpg" class="media-object" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">@antonio</h4>
<p class="bpad">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint sequi, eum voluptate perferendis, consequuntur voluptatem omnis pariatur aut odit adipisci repudiandae! Reiciendis delectus, similique fugiat, voluptates incidunt ipsum. Delectus?</p>
</div>
</div>
</section>
</div>
</div>
</div>
<!--contenido blog end-->
El css
.container padded{
padding: 100px 0;
}
/* blog start */
.sidebar{
background-color: #e9e6df;
}
.sidebar h3{
color: #4b8575;
background-color: #e9e6df;
}
.btn-default {
color: #333;
background-color: #E7E7FC;
border-color: #ccc;
}
.blog h1 a{
color: #4b8575;
}
.blog hr{
border-top-color: #4b8575;
}
.blog p a{
color: #ed7337;
}
.pagination li a{
color: #4b8575;
}
/* blog end */