CÓDIGO HTML5
<main>
<!-------------- 1ERA SECCION -------------->
<div class="row">
<div class="column">
<a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>
</div>
<div class="column">
<a href="https://play.hbomax.com/page/urn:hbo:page:home"><img src="img/hbo.png" alt="HBO Max" style="width:100%"></a>
</div>
<div class="column">
<a href="https://disneyplus.com/"><img src="img/disneyplus.jpg" alt="Disney +" style="width:100%"></a>
</div>
<div class="column">
<a href="https://www.netflix.com/browse"><img src="img/netflix.jpg" alt="Netflix" style="width:100%"></a>
</div>
<div class="column">
<a href="https://www.starplus.com/"><img src="img/starplus.jpg" alt="Star +" style="width:100%"></a>
</div>
<div class="column">
<a href="https://vix.com/es-es/ondemandplus"><img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAZOpTJ.img?h=0&w=600&m=6&q=60&u=t&o=f&l=f" alt="Vix +" style="width:100%"></a>
</div>
<div class="column">
<a href="https://serieslan.com/dragon-ball-gt"><img src="img/dragonballgt.jpg" alt="Dragon Ball GT" title="Dragon Ball GT" style="width:100%"></a>
</div>
<div class="column">
<a href="https://serieslan.com/los-caballeros-del-zodiaco"><img src="https://i0.wp.com/lacomikeria.com/wp-content/uploads/2022/02/33D1123B-9E73-40F4-A189-B74FDE357C54.jpeg?resize=600%2C400&ssl=1" alt="Caballeros del Zodiaco" title="Caballeros del Zodiaco" style="width:100%"></a>
</div>
<div class="column">
<a href="https://vix.com/es-es/ondemandplus"><img src="img/livetv.jpg" alt="Vix +" style="width:100%"></a>
</div>
</div>
<!-------------- 2DA SECCION -------------->
<div class="row">
<div class="column">
<a href="https://www.paramountplus.com/"><img src="../img/paramountplus.jpg" alt="Paramount +" style="width:100%"></a>
</div>
.
.
.
</main>
CÓDIGO CSS
/************* MAIN *************/
main{
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}
.column {
float: left;
width: 11%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
main img{
border-radius: 6px;
border: .5px solid rgba(128, 128, 128, 0.301);
}
main img:hover{
transition: .5s ease all;
transform: scale(1.1);
}
@media screen and (min-width: 200px) and (max-width: 750px){
.column{
float: left;
width: 33%;
padding: 5px;
}
}
No hay comentarios:
Publicar un comentario