# Website files for a simple personal portfolio site ## index.html Your Name - Personal Website

Your Name

About Me

Hello! I'm a passionate [your profession/interest] with experience in [your skills]. Welcome to my personal website.

My Projects

Project 1

Description of your first project.

Project 2

Description of your second project.

Project 3

Description of your third project.

Contact Me

## styles.css body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; padding: 0 20px; } header { background-color: #35424a; color: #ffffff; padding-top: 30px; min-height: 70px; border-bottom: #e8491d 3px solid; } header h1 { margin: 0; text-align: center; } header nav { text-align: center; margin-top: 20px; } header nav ul { padding: 0; } header nav ul li { display: inline; margin: 0 10px; } header nav ul li a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } .section { padding: 50px 0; text-align: center; } .project-grid { display: flex; justify-content: space-around; flex-wrap: wrap; } .project-card { background: #f4f4f4; border-radius: 5px; padding: 20px; margin: 10px; width: 250px; } #contact-form { max-width: 500px; margin: auto; } #contact-form input, #contact-form textarea { width: 100%; padding: 10px; margin-bottom: 10px; } #contact-form button { display: block; width: 100%; padding: 10px; background: #35424a; color: #ffffff; border: none; cursor: pointer; } footer { background-color: #35424a; color: #ffffff; text-align: center; padding: 20px; position: relative; bottom: 0; width: 100%; } ## script.js document.addEventListener('DOMContentLoaded', () => { const contactForm = document.getElementById('contact-form'); contactForm.addEventListener('submit', (e) => { e.preventDefault(); alert('Thank you for your message! I will get back to you soon.'); contactForm.reset(); }); }); # Website Structure # personal-website/ # ├── index.html # ├── styles.css # └── script.js