S
scrool
VIP
Delta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Suscripción a IA
Humoristech
Préstamo en curso
1
Xi
Redactor
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario popular!
Suscripción a IA
Busca en ayudablogger, allí hay un prototipo. O hazla grande en word y cuadra esa tabla.
CANIBAL
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Que en lo que quieres hacer?
Puko
Dseda
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Creas 4 contenedores/div
Lo pones dentro de otros 2 div para centrarlo y el fondo y la sombra
Con display: flex; justify-content: center; los acomodas
Con padding, margin y border le das el diseño a cada contenedor ...
Y el fondo y la sombra ...
Lo pones dentro de otros 2 div para centrarlo y el fondo y la sombra
HTML:
<div class='center'>
<div class='center2'>
<div class='contenedor1'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor2'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor3'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor4'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
</div>
</div>
Con display: flex; justify-content: center; los acomodas
Con padding, margin y border le das el diseño a cada contenedor ...
Y el fondo y la sombra ...
HTML:
<!doctype html>
<head>
<style>
body{
background: #202020;
}
.center {
display: flex;
justify-content: center;
margin-top: 40px;
}
.center2 {
display: flex;
justify-content: center;
list-style: none;
width: 620px;
box-shadow: 0px 3px 4px #000;
}
.contenedor1,.contenedor2,.contenedor3,.contenedor4 {
background: #222222;
width: 152px;
}
.contenedor1 li,.contenedor2 li,.contenedor3 li,.contenedor4 li {
padding: 2px;
}
.contenedor1 li {
margin: 0px 0px 0px 2px;
}
.contenedor1 li div,.contenedor2 li div,.contenedor3 li div,.contenedor4 li div {
color: #777;
background: #222222;
padding: 7px;
}
.contenedor1 li div {
color: #777;
border-bottom: 1px solid #EF0404;
border-right: 1px solid #EF0404;
}
.contenedor2 li div {
color: #777;
border-bottom: 1px solid #EF0404;
margin: 0 -4px;
}
.contenedor3 li div {
color: #777;
border-bottom: 1px solid #EF0404;
border-right: 1px solid #EF0404;
}
.contenedor3 li {
margin: 0px 0px 0px 2px;
}
.contenedor4 li div {
color: #777;
border-bottom: 1px solid #EF0404;
margin: 0 -4px;
}
.contenedor4 li {
margin: 0px 2px 0px 0px;
}
</style>
</head>
<body>
<div class='center'>
<div class='center2'>
<div class='contenedor1'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor2'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor3'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
<div class='contenedor4'>
<li><div> juego </div></li>
<li><div> juego </div></li>
<li><div> juego </div></li>
</div>
</div>
</div>
</body>
</html>Temas similares
