miércoles, 30 de noviembre de 2022

HTML - Código para 9 recuadros con media query



 

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

Documental de Hackers