WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Page</title> <style> body { margin: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; } .wrapper { max-width: 720px; margin: 100px auto; background-color: #ffffff; padding: 32px; border-radius: 12px; } h1 { margin-top: 0; font-size: 28px; } p { line-height: 1.7; font-size: 15px; } button { margin-top: 20px; padding: 10px 20px; background-color: #3f8cff; color: #fff; border: none; border-radius: 6px; cursor: pointer; } button:hover { opacity: 0.9; } </style> </head> <body> <div class="wrapper"> <h1>Hello</h1> <p> This is a clean and simple HTML page. It is easy to read and easy to edit. </p> <p> The goal is clarity, not complexity. </p> <button onclick="showMessage()">Click me</button> </div> <script> function showMessage() { alert("Thanks for clicking!"); } </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; } .wrapper { max-width: 720px; margin: 100px auto; background-color: #ffffff; padding: 32px; border-radius: 12px; } h1 { margin-top: 0; font-size: 28px; } p { line-height: 1.7; font-size: 15px; } button { margin-top: 20px; padding: 10px 20px; background-color: #3f8cff; color: #ffffff; border: none; border-radius: 6px; cursor: pointer; } button:hover { opacity: 0.9; }
/* Replace with your JS Code (Leave empty if not needed) */document.addEventListener("DOMContentLoaded", function () { const button = document.querySelector("button"); if (button) { button.addEventListener("click", handleClick); } }); function handleClick() { showAlert(); } function showAlert() { alert("Thanks for clicking!"); }
Validating your code, please wait...
HTML
CSS
JS
<!-- Replace with your HTML Code (Leave empty if not needed) --><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Page</title> <style> body { margin: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; } .wrapper { max-width: 720px; margin: 100px auto; background-color: #ffffff; padding: 32px; border-radius: 12px; } h1 { margin-top: 0; font-size: 28px; } p { line-height: 1.7; font-size: 15px; } button { margin-top: 20px; padding: 10px 20px; background-color: #3f8cff; color: #fff; border: none; border-radius: 6px; cursor: pointer; } button:hover { opacity: 0.9; } </style> </head> <body> <div class="wrapper"> <h1>Hello</h1> <p> This is a clean and simple HTML page. It is easy to read and easy to edit. </p> <p> The goal is clarity, not complexity. </p> <button onclick="showMessage()">Click me</button> </div> <script> function showMessage() { alert("Thanks for clicking!"); } </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->* { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; color: #333; } .wrapper { max-width: 720px; margin: 100px auto; background-color: #ffffff; padding: 32px; border-radius: 12px; } h1 { margin-top: 0; font-size: 28px; } p { line-height: 1.7; font-size: 15px; } button { margin-top: 20px; padding: 10px 20px; background-color: #3f8cff; color: #ffffff; border: none; border-radius: 6px; cursor: pointer; } button:hover { opacity: 0.9; }
/* Replace with your JS Code (Leave empty if not needed) */document.addEventListener("DOMContentLoaded", function () { const button = document.querySelector("button"); if (button) { button.addEventListener("click", handleClick); } }); function handleClick() { showAlert(); } function showAlert() { alert("Thanks for clicking!"); }