<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Us Generator</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 600px; margin: auto; } label { display: block; margin: 10px 0 5px; } input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; } button { padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } .result { border: 1px solid #ddd; padding: 10px; margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>About Us Generator</h1> <label for="companyName">Company Name:</label> <input type="text" id="companyName" placeholder="Enter your company name"> <label for="mission">Mission Statement:</label> <textarea id="mission" rows="4" placeholder="Enter your mission statement"></textarea> <label for="values">Core Values:</label> <textarea id="values" rows="4" placeholder="Enter your core values"></textarea> <button onclick="generateAboutUs()">Generate About Us</button> <div id="result" class="result"></div> </div> <script> function generateAboutUs() { var companyName = document.getElementById('companyName').value; var mission = document.getElementById('mission').value; var values = document.getElementById('values').value; var aboutUsText = <h2>About Us</h2> <p><strong>${companyName}</strong> is committed to delivering exceptional value and service. Our mission is to ${mission}.</p> <p>Our core values include:</p> <ul> ${values.split('\n').map(value => <li>${value.trim()}</li>).join('')} </ul> ; document.getElementById('result').innerHTML = aboutUsText; } </script> </body> </html>