<div class="slideshow">
<div class="slide">
<div class="slide-1"> <a href="#"><img src="img/01.jpg"></a>
<div class="info-slide-left"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
</div>
</div>
<div class="slide-2"> <a href="#"><img src="img/img02.jpg"><a/>
<div class="info-slide-rigth">
<a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
</div>
</div>
<div class="slide-3"> <a href="#"><img src="img/img02.jpg"></a>
<div class="info-slide-right-3"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
</div>
</div>
</div>
<div class="slide">
<div class="slide-1"> <a href="#"><img src="img/01.jpg"></a>
<div class="info-slide-left"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
</div>
</div>
<div class="slide-2"> <a href="#"><img src="img/img02.jpg"><a/>
<div class="info-slide-rigth">
<a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
<div class="publicacao-2">
<p>Artigo publicado em
<time datetime="2014-09-05T18:20" itemprop="datePublished">05 de setembro de 2014</time>
</p>
</div>
</div>
</div>
<div class="slide-3"> <a href="#"><img src="img/img02.jpg"></a>
<div class="info-slide-right-3"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>
</div>
</div>
</div>
CSS Code:
.slideshow{
width:100%;
max-width:980px;
height:auto;
margin:0 auto;
}
.slide{
width:100%;
height:auto;
display:block;
}
.slide-1{
width:80%;
height:505px;
float:left;
}
.slide-2{
width:20%;
height:250px;
float:left;
}
.slide-3{
width:20%;
height:250px;
float:left;
}
.slide-1 img{
width:635px;
height:500px;
}
.slide-2 img{
width:345px;
height:250px;
margin-left:-150px;
}
.slide-3 img{
width:345px;
height:250px;
margin-left:-150px;
}