WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Message de motivation
784
sergioarmijo30
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
24 July 2025
Stickman HTML avec structure de grappin
27 February 2025
Un code par securearray494
30 November 2025
Formulaire de connexion HTML : Nom d’utilisateur/Adresse e-mail et mot de passe
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}`; }
