Grid para imagenes con enlaces
<div class="parent">
<a href="https://www.bet365.mx/#/HO/" target="_blank" class="div1" alt="Bet365"></a>
<a href="https://es.jango.com/music/The+Birthday+Massacre" target="_blank" class="div2" alt="Jango"></a>
<a href="https://www.youtube.com/" target="_blank" class="div3" alt="Youtube"></a>
<div class="div4"></div>
<a href="#" class="div5" alt=""></a>
<a href="https://www.paramountplus.com/home/" target="_blank" class="div6" alt="Paramount Plus"></a>
<a href="https://www.netflix.com/browse" target="_blank" class="div7" alt="Netflix"></a>
<a href="https://web.whatsapp.com/" target="_blank" class="div8" alt="Whatsapp"></a>
</div>
CSS
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 103.5px; /****** altura de imagenes ******/
grid-column-gap: 3px;
grid-row-gap: 3px;
padding: 10px;
}
.div1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
/** background: url(https://static.fabrik.io/b41/a6e4a3f8
3798b844.gif?auto=compress&w=1280&h=1280&fit=max&s=7e49a59249
dc360728c5fa1ff0b227b9) no-repeat center center /cover; **/
background: url(https://i.pinimg.com/originals/12/6d/57/126d5
7aadfa0aa7de82da3088ef737a3.gif) no-repeat center center /cover;
}
.div2 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
background: url(https://media2.giphy.com/media/v1.Y2lkPTZjMDliO
TUydm5hN2plOGxwMWt2bzgxOXZ0aHJ1YWJiMmFneHRyYTdkejZkaG94ayZlcD12MV9
naWZzX3NlYXJjaCZjdD1n/tqfS3mgQU28ko/200w.gif) no-repeat center center /cover;
}
.div3 {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 1;
background: url(https://i.gifer.com/LZ4n.gif) no-repeat center center /cover;
}
.div4 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
background: url(img/equiposmta.jpg) no-repeat center center /cover;
}
.div5 {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 3;
background: url(https://marabelia.com/wp-content/uploads/2024/02
/diseno-web-creativo.gif) no-repeat center center /cover;
}
.div6 {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
background: url(https://i.makeagif.com/media/8-23-2016/CAph_f.gif)
no-repeat center center /cover;
}
.div7 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 4;
background: url(https://media.tenor.com/Hh5lO8fCAAIAAAAM/netflix.gif)
no-repeat center center /cover;
}
.div8 {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 4;
grid-row-end: 4;
background: url(https://gifdb.com/images/high/whatsapp-typing-
logo-yhpoe34slgldf6ek.gif) no-repeat center center /cover;
}
No hay comentarios:
Publicar un comentario