crea un sitio que tenga un buscador con api gratis sin token ni claves tipo duckduck o lo que sea mejor, que permita realizar busquedas y al elegir un resultado de la busqueda si es un sitio de noticias, debe cargar las ultimas noticias de ese sitio, las ultimas 20.
e9b9491
verified
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c1c1c1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a8a8a8; | |
| } | |
| /* Smooth transitions */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Card hover effects */ | |
| .result-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| border-color: #3b82f6; | |
| } | |
| .news-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid #f3f4f6; | |
| } | |
| .news-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| /* Loading animation */ | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| /* Responsive text */ | |
| @media (max-width: 640px) { | |
| .text-responsive { | |
| font-size: 1.5rem; | |
| } | |
| } |