<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Personal greeting</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        margin: 0 auto;
        max-width: 1024px;
      }

      main {
        padding: 20px;
      }

      header, footer {
        background: cyan;
        padding: 20px;
        border: 1px solid black;
      }

      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      form {
        font-size: 0.8rem;
      }

      .personal-greeting {
        font-weight: bold;
      }
    </style>
    <script src="index.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Our website</h1>

      <form>
        <div class="remember">
          <label for="entername">Enter your name:</label>
          <input id="entername" type="text" required>
          <input id="submitname" type="submit" value="Say hello">
        </div>
        <div class="forget">
          <label for="forgetname">Want me to forget you?</label>
          <input id="forgetname" type="reset" value="Forget">
        </div>
      </form>
    </header>

    <main>

      <p class="personal-greeting">Welcome to our website.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada, metus ut mollis volutpat, felis est rhoncus turpis, in blandit est risus malesuada dui. Phasellus tempus elit at purus vestibulum suscipit. Donec quis est nec dui pretium venenatis sit amet eu nulla. Donec finibus, ipsum non semper dignissim, massa magna sagittis est, vitae vehicula nunc magna vitae diam. Integer ultrices mauris aliquet arcu tempor, at mattis justo sagittis. Nunc ut nulla et erat viverra tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer vitae bibendum justo. Vestibulum porta velit sit amet libero accumsan fermentum.</p>

      <p>Ut id mauris urna. In sed porttitor lectus. Suspendisse dignissim dolor id lectus pellentesque, eu bibendum lectus malesuada. Phasellus volutpat sollicitudin suscipit. Donec id libero nisl. Praesent gravida purus vel euismod facilisis. Maecenas sit amet velit non lacus aliquam dictum vitae eu augue. Donec euismod enim elementum elit laoreet sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <p>Integer vulputate, libero sed vulputate eleifend, magna libero malesuada ligula, sit amet tincidunt dui mi vitae mauris. Aliquam aliquam turpis mauris, in sagittis orci rutrum efficitur. Sed vel purus fringilla, pretium sapien sed, accumsan erat. Morbi scelerisque tempor purus in faucibus. Nunc fringilla nulla ut aliquam posuere. Vivamus id lectus eleifend, bibendum urna non, ornare nibh. Fusce bibendum vulputate mollis.</p>

    </main>

    <footer>
      <p>Copyright nobody. Use the code as you like.</p>
    </footer>
  </body>
</html>
