<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
*{
box-sizing: border-box;
}
body{
width: 100vw;
margin: 0;
padding: 0;
background: palegoldenrod;
}
header{
width: 100vw;
height: 50px;
background: #ffc728;
display: flex;
align-items: center;
justify-content: center;
}
h2{
font-size: 30px;
font-family: 'zilla slab', sans-serif;
text-align: center;
color: #fff;
}
.cards-containers{
width: 100vw;
height: 100%;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 25px;
overflow-x: hidden;
}
.container{
position: relative;
width: 250px;
height: 350px;
}
.card{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.2s ease;
}
.card:hover {
transform: rotateY(180deg);
}
.front{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #ffc728;
color: #333;
text-align: center;
font-family: 'zilla slab', sans-serif;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
box-shadow: 0px3px18px3pxrgb(0, 0, 0, 0.2);
overflow: hidden;
}
.frontimg{
width: 100%;
}
.back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #5fcf80;
color: #fff;
transform: rotateY(180deg);
text-align: center;
font-family: 'zilla slab', sans-serif;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
box-shadow: 0px3px18px3pxrgb(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.backimg{
width: 100%;
}
</style></head><body><header><h2>MEMORY GAME</h2></header><divclass="cards-containers"><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat1"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/96938/pexels-photo-96938.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat2"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/2558605/pexels-photo-2558605.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat3"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/236606/pexels-photo-236606.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat4"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/248280/pexels-photo-248280.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat5"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/96938/pexels-photo-96938.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat2"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/236606/pexels-photo-236606.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat4"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/416160/pexels-photo-416160.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat1"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/1183434/pexels-photo-1183434.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat6"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/248280/pexels-photo-248280.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat5"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/2558605/pexels-photo-2558605.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat3"></div></div></div><divclass="container"><divclass="card"><divclass="front"><imgsrc="https://images.pexels.com/photos/1203808/pexels-photo-1203808.jpeg?auto=compress&cs=tinysrgb&w=600"alt="map">
MEMORY
</div><divclass="back"><imgsrc="https://images.pexels.com/photos/1183434/pexels-photo-1183434.jpeg?auto=compress&cs=tinysrgb&w=600"alt="cat6"></div></div></div></div></body></html>Se trata de juego de memoria, encontrar las parejas o dos cartas iguales.
Lo que me costo fue hacer que no tuviese scroll lateral, para ello implemente
*{box-sizing: border-box;}
con ello me aseguro de que los márgenes y rellenos no se sumen al ancho
pues no bastaba que en el body pusiera width:100vw
Para que las cartas no estuviesen pegadas y se quedasen todas en la misma fila implemente
gap: 25px;
flex-wrap: wrap;
gap me da espacio entre las cartas de 20px y wrap en el momento que no quepan más en la línea horizontal baja a otra línea.
Faltaría implementar un código js
