Tutorial para realizar proyecto similar

  • Autor Autor DiegoEscobar
  • Fecha de inicio Fecha de inicio
DiegoEscobar

DiegoEscobar

Iota
Verificación en dos pasos activada
Verificado por Binance
algoasienhtml.webp

algun tutorial para hacer algo asi ?
 
Hola Diego,

Si eres más claro, quizás algún usuario te pueda ayudar...
Es que se puede lograr eso mismo, de diferentes formas...
Espero me entiendas bien...

Saludos,
Hugo
 
[MENTION=192558]DiegoEscobar[/MENTION] Yo logre algo similar con la version Free del plugin Visual Composer → Link

Aunque las letras dentro de cada imagen no se como se pondrían, tal vez fueron agregadas con Photoshop y lamentablemente no encontré ningún tutorial o no supe buscarlo con las palabras adecuadas XD pero a pesar de no tener conocimiento de ese plugin en menos de unos minutos me aprendi a defender y pude hacer lo que queria :encouragement:
 
Última edición:
Con HTML no sé, puede ser una plantilla o un gestor de contenidos offline. Con programación básica todo de ese tipo se puede también. Pero yo usaría un buen tema CMS.
 
Si quieres replicar solo lo que sale en la imagen, con css y html puedes hacerlo. Saludos. :encouragement:
 
<ul class="cuadricula">
<li class="mercado">Mercado</li>
<li class="rapida">Comida Rapida</li>
<li class="herramientas">Herramientas</li>
<li class="facturas">Pagar Facturas</li>
</ul>



.cuadricula {

margin:0;
padding:0;
list-style:none;
width:100%;
display:inline-block;
box-sizing:border-box;
}
.cuadricula li {
margin:0;
padding:100px 20px;
width:50%;
display:inline-block;
box-sizing:border-box;
background-size:cover;
text-align:center;
font-size:20px;
text-transform:uppercase;
color:#fff;
float:left;
}
.cuadricula li.mercado {
background:url(_imagen_de_fondo_.jpg) no-repeat center center #000;
}
.cuadricula li.rapida{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #cd0000;
}
.cuadricula li.herramientas{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #00cd00;
}
.cuadricula li.facturas{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #0000cd;
}
 
<ul class="cuadricula">
<li class="mercado">Mercado</li>
<li class="rapida">Comida Rapida</li>
<li class="herramientas">Herramientas</li>
<li class="facturas">Pagar Facturas</li>
</ul>



.cuadricula {

margin:0;
padding:0;
list-style:none;
width:100%;
display:inline-block;
box-sizing:border-box;
}
.cuadricula li {
margin:0;
padding:100px 20px;
width:50%;
display:inline-block;
box-sizing:border-box;
background-size:cover;
text-align:center;
font-size:20px;
text-transform:uppercase;
color:#fff;
float:left;
}
.cuadricula li.mercado {
background:url(_imagen_de_fondo_.jpg) no-repeat center center #000;
}
.cuadricula li.rapida{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #cd0000;
}
.cuadricula li.herramientas{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #00cd00;
}
.cuadricula li.facturas{
background:url(_imagen_de_fondo_.jpg) no-repeat center center #0000cd;
}

voy a intentar muchas gracias
 
Atrás
Arriba