PROY68: Search Section

Search Section

Bienvenido

Requerimientos

• Ver el diseño óptimo según el tamaño de pantalla del dispositivo.

• Ver un estado hover al pasar el mouse sobre el botón.

• Mostrar sugerencias en el cuadro de búsqueda.

Diseño

Envía tu solución

Hola Frontend Club👋,

Acabo de completar el reto # como parte del desafío #100daysofprojects.

Mi solución:
Página web - https://profile-card.netlify.app/
Repositorio - https://github.com/01-day-profile-card.git

Recursos

🎨Paleta de colores
- body radial background - #F0F4FF, #D9DDFF
- card background - #FFFFFF
- card title - #151A46
- card text - #000000
- border input - #B3B8D8
- button background - #151A46
- button1 background - #FFEDF3
- button1 text - #D0678A
- button2 background - #F4EDFF
- button2 text - #805BBC
- button3 background - #DFF4D7
- button3 text - #51933E
- button4 background - #FFECDA
- button4 text - #E27F23

⚙️Configuraciones
- card border radius - 20px
- input border radius - 5px
- button border radius - 5px
- buttons color border radius - 5px 

✍️Tipografia
- Fuente: [Merriweather](https://fonts.google.com/specimen/Merriweather)
- card title - 900 - 46px

- Fuente: [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans)
- card text - 500 - 24px
- input placeholder text - 500 - 24px
- button text - 500 - 24px
- title small buttons - 500 - 18px
- text small buttons - 500 - 18px

Plantilla

• Puedes utilizar la plantilla base del proyecto para empezar a codificar.

• Contenido de texto del diseño.

Free and Pro website templates for your business

Choose from over 300 fully responsible portfolio, blog and ecommerce templates.

Search all templates - Search

Common searches
Blog, Business, Portfolio, Ecommerce

Mejora tus habilidades frontend codificando proyectos reales con un tutor personal⚡