WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Mensagem de motivação
199
sergioarmijo30
Abrir no Editor
Publique Seu Código
Recomendado
15 May 2025
DJ de introdução
7 November 2024
Efeito de animação de texto flutuante
4 May 2025
Modelo de barra de navegação HTML e CSS responsivo
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Sxrgio</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>¡Bienvenido!</h1> <p>Escribe tu nombre para recibir un saludo y un mensaje motivador:</p> <p>Write your name to receive a greeating and a motivating message:</p> <input type="text" id="nombre" placeholder="Tu nombre aquí..."> <button onclick="saludar()">Enviar</button> <div id="resultado" class="mensaje"></div> <script src="java.js"></script> </body> </html>
CSS
Copy
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(to right, #d00303, #1bf6bf); color: #333; text-align: center; padding-top: 100px; } h1 { color: #dad1d1; } p{ color: #ffffff; } input, button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; margin: 10px; } input { width: 250px; } button { background-color: #000000; color: white; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #1de28d; } .mensaje { margin-top: 30px; font-size: 20px; color: #222; background-color: rgba(255, 255, 255, 0.7); display: inline-block; padding: 20px; border-radius: 12px; }
JS
Copy
function saludar() { const nombre = document.getElementById("nombre").value.trim(); const mensajes = [ "¡Hoy es un gran día para empezar algo nuevo!", "¡Tienes un potencial increíble, no lo olvides!", "¡Confía en ti mismo y ve tras tus sueños!", "¡Cada paso que das te acerca a tu meta!", "¡No te rindas, lo mejor está por venir!" ]; if (nombre === "") { alert("Por favor, escribe tu nombre."); return; } const mensaje = mensajes[Math.floor(Math.random() * mensajes.length)]; document.getElementById("resultado").innerHTML = `<strong>¡Hola, ${nombre}!</strong><br>${mensaje}`; }
