About Us Generator

<div id="about-us-generator">
    <form>
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="email">Email:</label><br>
      <input type="text" id="email" name="email"><br>
      <label for="company-name">Company Name:</label><br>
      <input type="text" id="company-name" name="company-name"><br>
      <label for="about-us-page-link">About Us Page Link:</label><br>
      <input type="text" id="about-us-page-link" name="about-us-page-link"><br>
      <label for="website-type">Website Type:</label><br>
      <input type="text" id="website-type" name="website-type"><br>
      <label for="website-speciality">Website Speciality:</label><br>
      <input type="text" id="website-speciality" name="website-speciality"><br><br>
      <input type="button" value="Generate" onclick="generateAboutUs()">
    </form> 
  </div>
  
  <style>
    body {
      animation: background-animation 5s infinite;
    }
    
    @keyframes background-animation {
      0% {
        background-color: rgb(242, 242, 242);
      }
      50% {
        background-color: rgb(204, 204, 204);
      }
      100% {
        background-color: rgb(242, 242, 242);
      }
    }
  </style>
  
  <style>
    form {
      width: 50%;
      margin: 0 auto;
      text-align: center;
    }
    
    input[type="text"] {
      width: 80%;
      padding: 12px 20px;
      margin: 8px 0;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 4px;
    }
    
    input[type="button"] {
      width: 20%;
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    
    #output {
      width: 50%;
      margin: 0 auto;
      padding: 20px;
      background-color: #f2f2f2;
      font-size: 18px;
    }

    a {
  color: #4CAF50;
}

  </style>
  
  <div id="output"></div>
  
  <script>
  function generateAboutUs() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var companyName = document.getElementById("company-name").value;
  var aboutUsPageLink = document.getElementById("about-us-page-link").value;
  var websiteType = document.getElementById("website-type").value;
  var websiteSpeciality = document.getElementById("website-speciality").value;

  var output = "Hi, my name is " + name + " and I am the owner of " + companyName + ". Our website, " + aboutUsPageLink + ", is a " + websiteType + " website that specialized in " + websiteSpeciality + ". If you have any questions or would like to work with us, you can contact me at " + email + ".<br><br>This text was generated by the About Us Generator on <a href='https://bloggerhemant.in/'>Blogger Hemant</a>.";

  document.getElementById("output").innerHTML = output;
}


    </script>