body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; } h2 { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input, textarea, select, button { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } #formMessage { margin-top: 10px; color: green; } document.getElementById('portfolioForm').addEventListener('submit', function(event) { event.preventDefault(); const formMessage = document.getElementById('formMessage'); formMessage.textContent = 'Thank you for your submission!'; const formData = new FormData(event.target); // Example: Log form data to console console.log('Form Data:', Object.fromEntries(formData.entries())); // Example: Send form data to server // fetch('/submit-portfolio', { // method: 'POST', // body: formData // }).then(response => response.json()) // .then(data => { // formMessage.textContent = 'Submission successful!'; // }).catch(error => { // formMessage.textContent = 'Submission failed. Please try again.'; // formMessage.style.color = 'red'; // }); event.target.reset(); });