Slider de fotos

Slider de fotos que contiene solamente 2 imágenes. Pude cambiar haciendo clic en las flechas, como cambiar con las teclas de izquierda y derecha del teclado y sino cada 7seg cambia solo.

Este slider lo programe en base las instrucciones de la página de Retos de FrontEnd Mentor

Acordeon

Acordeón que muestra la información oculta lo hice de manera que cuando el usuario haga clic se despliegue uno y hacer clic en otro se cierre el anterior y despliegue el nuevo que el usuario hizo clic, pero siempre quedara uno abierto.

Este acordeon lo programe en base las instrucciones de la página de Retos de FrontEnd Mentor

Testimonio

Este testimonio simulado consta de un tooltip que muestra las redes sociales una imagen de cabecera y foto del usuario con el comentario. además de un tooltip que muestra sus redes sociales.

Este testimonio lo programe en base las instrucciones de la página de Retos de FrontEnd Mentor

Filtro de usuarios

Este filtro de usuarios esta echo con PUG, SASS. La función que cumple es que el usuario puede hacer un filtrado haciendo clic en las etiquetas, ya sea html,javascript,python,etc. y se mostraran solo esas etiquetas seleccionadas.

Este filtro lo programe en base las instrucciones de la página de Retos de FrontEnd Mentor

Testimonial Grid section

Este testimonio, son para mostrar el uso de css grid y lo mucho más fácil que es acomodar todo en la web en diferentes resoluciones. Las tecnologías que use son PUG SASS y PrePros para compilar todo.

Este artículo de testimonios lo programe en base las instrucciones de la pagina de Retos de FrontEnd Mentor

Simulación Tarjeta de credito

Esta tarjeta se rellenará con el formulario que se despliega haciendo clic sobre la cruz blanca dependiendo de lo que escribe la tarjeta mostrará su lado trasero o delantero.

Lo hice en base a un articulo que proponía el reto.

Carrousel de imágenes

Carrusel de imágenes cuenta con unos círculos que muestra cuantas fotos hay, y por cual va pasando. También puede seleccionarse un círculo y mostrará la imagen seleccionada si saca el mouse de ese círculo volverá a la imágenes donde estaba antes de seleccionarse

inputs radio y checbox

el estilo css no es el mejor pero solo quería mostrar una forma de animar los inputs a la hora de seleccionarlo.

APP de información de películas

Echa con la Api themoviedb aplicación de películas con buscador y al hacer clic en cada película muestra la información de cada una de ellas.

APP de tablas de Pokemos

Echa con la Api pokeapi.co/api donde realice una petición para traer a todos lo pokemons, filtrarlos y hacer una paginación.

APP de información de personajes de Star wars

Echa con la Api https://swapi.dev/. tiene paginacion, al hacer clic en cada personaje muesttra su informacion.

APP de un juego de ta te ti

hice la app con react un juego de ta te ti donde dice el ganador o si hay un empate con un mensaje estilo modal.

APP carrito de compras

app con react que permite agregar articulos al carrito y eliminarlos tanto de carrito como si volvemos a hacer clic en el producto de la tienda se puede modificar la cantidad que queremos de ese producto.

Todo list

app con react y TypesCript donde muestra lista de usuarios donde podemos marcar los que ya están terminados eliminarlos o agregar nuevas tareas. El filtro de la App consta de tres botones donde muestra todas las tareas pendientes como completadas, solo las completadas o las que todavía no se completaron.