Tutorial para realizar projeto similar

  • Autor Autor DiegoEscobar
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
DiegoEscobar

DiegoEscobar

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

algun tutorial para hacer algo asi ?
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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 edição:
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
 
Voltar
Topo