BC
Bonne Chance

Challenge Discovery Platform - Copy this Angular, Css Component to your project

Encabezado (parte superior izquierda): Un logotipo con el texto "Proven", donde "Pro" está en azul y "ven" en negro. Un icono de una casa (posiblemente para la página de inicio). Un icono de búsqueda (lupa). Sección principal (centrada): Título grande en negrita: "Discover Challenges". Un cuadro de búsqueda con el texto de marcador de posición "Search challenges...". Un conjunto de botones de filtro en formato de etiquetas redondeadas con texto en gris claro: "All" (seleccionado en azul) "Wellness" "Environment" "Music" "Photography" "Education" "Fitness" "Technology" "Art" "Food" Lista de desafíos (columna principal a la izquierda): Primer desafío: Usuario: "Alex Johnson", con una imagen de perfil circular y el usuario "@alexj". Hace "1y ago". Título en negrita: "30 Days of Meditation". Descripción: "Meditate for at least 10 minutes every day for 30 days. Share your experience and track your progress." Icono de calendario con texto: "Ends Aug 29". Icono de personas con texto: "156 participants". Etiqueta de categoría: "Wellness" (azul claro, alineado a la derecha). Botón "Join Challenge". Reacciones: Icono de pulgar arriba con "342". Icono de pulgar abajo con "13". Segundo desafío: Usuario: "Sophie Taylor", con imagen de perfil circular y el usuario "@sophiet". Hace "1y ago". Título en negrita: "Zero Waste Week". Descripción: "Try to produce as little waste as possible for one week. Share your tips and tricks for a sustainable lifestyle." Etiqueta de categoría: "Environment" (azul claro, alineado a la derecha). Panel derecho: "Who to Follow" (Lista de personas con botón "Follow" en azul claro): "Alex Johnson" (@alexj) "Sophie Taylor" (@sophiet) "Marcus Lee" (@marcuslee) "Priya Sharma" (@priyasharma) "Trending Challenges" (Lista de desafíos populares con número de participantes y categoría): "30 Days of Meditation" (156 participants, Wellness). "Zero Waste Week" (87 participants, Environment). "Learn a New Song" (64 participants, Music). EL header se debe mover con el scroll de la pantalla, de igual manera, el botón de la casa y de la lupa, van pegados al logo y de lado derecha va Icono de notificación (campana) con un punto azul indicando una alerta. Un botón azul con un ícono de "+" en la parte inferior derecha. Imagen de perfil circular en la esquina superior derecha. Las cards, debe verse el borde de las mismas y al hacer hover remarcar el borde inferior con un sombreado. De igual manera debe tener en la esquina inferior de la derecha un botón circular con fondo azul y en el centro un "+" este también siempre será visible, que toda la pagina sea responsiva para tablet y moviles

Prompt
Component Preview

About

Challenge Discovery Platform - Explore challenges like "30 Days of Meditation" and "Zero Waste Week", professionally built with Angular and CSS. Download code free!

Share

Last updated 1 month ago