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 &raquo;</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 &raquo;</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 &raquo;</a>
					<hr>
				</section>
					<ul class="pagination">
						<li><a href="#">&laquo;</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="#">&raquo;</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 */
⚠️ **GitHub.com Fallback** ⚠️