<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My website</title> <style> /* CSS Styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } header { background-color: #333; color: white; padding: 10px 0; text-align: center; } nav { display: flex; justify-content: center; } nav a { color: white; text-decoration: none; padding: 10px 20px; } nav a:hover { background-color: #555; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; } button:hover { background-color: #0056b3; } </style> </head> <body> <header> <h1>My website</h1> <nav> <a href="#">Home</a> <a href="apache2_default_page.html">Apache default page</a> </nav> </header> <div class="container"> <h2>Hosted in house using Apache web server</h2> <p>with HTML, CSS, and JavaScript all on one page.</p> <p>Learn how at <a href="https://massi.net/guides/apache"> https://massi.net/guides/apache </a></p> <button id="changeColorButton">Change Background Color</button> </div> <script> // JavaScript const button = document.getElementById('changeColorButton'); const body = document.body; button.addEventListener('click', function() { const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); body.style.backgroundColor = randomColor; }); </script> </body> </html>