three hopes — búsqueda / tracker
Pastebin
Originalmente había hecho esta tablilla de búsqueda para otro reto de códigos en @dixinmortal, en concreto para el reto de los colores primarios. Es que con mis lords bonitos del FE3H cómo no inspirarse uvu
Y pues bien! En el ejemplo tengo tres cajitas de personajes, pero se le puede aumentar/disminuir las que uno necesite, repitiendo la caja con clase pj-contain, así:
Las cajas tienen imágenes de fondo de 450*150. Yo recomiendo que tengan algo de color llano en el fondo, para que se pueda usar el mismo color para el resto de contenido de la cajita. Que, para eso, yo por defecto hice clases para los tres colores, pero ustedes pueden editar esas clases y/o los colores, o crear nuevas clases de necesitarlo. Aquí las que usé yo, pero lo importante es que usen la variable correspondiente:
.w3h-blue{--w3hacc:#5757d3;} .w3h-red{--w3hacc:#d35757;} .w3h-yel{--w3hacc:#d2b356;}
Ahora, para la caja inicial, uso una imagen de fondo de 250*215, y recomiendo que la mayor parte del contenido esté en la parte superior, porque será tapado el resto por los botones. Aquí también hay un par de variables que corresponden a los colores normal (--w3hm1) y hover (--w3hm2) de los botones.
Para los iconos, usé los Material Icons de Google.
Como último punto, existe una clase found que se le puede agregar junto a la clase pj-contain, que pondrá un overlay que indicará que dicho personaje ha sido Encontrado. En el código hay un ejemplo de cómo se usa también.
Disclaimers y demás:
* Se permite el uso del siguiente código en cualquier lugar del Internet, ya sea en su forma íntegra como con todas las modificaciones que el usuario realice sobre él. PERO Queda prohibida su distribución en sitios de resources de códigos y gráficos suplantando mi identidad como autor. (no sé por qué alguien haría algo como eso but just in case) * Se recomienda que el usuario use su propio hosting de imágenes y/o fuentes para los recursos usados, ya que los usados aquí pueden desaparecer sin previo aviso. * Se aprecia enormemente los reblogs si les gustó el code o si llegan a usarlo ♥ * Se agradece el no retirar los créditos.
