<!DOCTYPE html>
<html>
  <head>
    <title>Hello Name</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 2rem;
      }
      label, input, button {
        display: block;
        margin-bottom: 1rem;
      }
      #greeting {
        font-weight: bold;
        margin-top: 1rem;
        color: #2a7ae2;
      }
    </style>
  </head>
  <body>
    <label for="nameInput">Enter your name:</label>
    <input type="text" id="nameInput" placeholder="Your name" />
    <button onclick="sayHello()">Submit</button>

    <div id="greeting"></div>

    <script>
      function sayHello() {
        const name = document.getElementById('nameInput').value.trim();
        const greeting = name ? `Hello, ${name}!` : '';
        document.getElementById('greeting').textContent = greeting;
      }
    </script>
  </body>
</html>