ApexPlanet_Task4

#html file

<title>My Portfolio</title>

Chinni's Portfolio

About Projects Contact

<section id="about">
    <h2>About Me</h2>
    <p>Hello! I'm Chinni, a B.Tech CSE student passionate about web development.</p>
</section>

<section id="projects">
    <h2>Projects</h2>
    <div class="project">
        <h3>Task 1 Webpage</h3>
        <p>HTML, CSS, JavaScript basics.</p>
        <a href="#">View Project</a>
    </div>
    <div class="project">
        <h3>To-Do App</h3>
        <p>Interactive JavaScript project with local storage.</p>
        <a href="#">View Project</a>
    </div>
</section>

<section id="contact">
    <h2>Contact Me</h2>
    <form id="contactForm">
        <input type="text" placeholder="Name" id="name" required>
        <input type="email" placeholder="Email" id="email" required>
        <textarea placeholder="Message" id="message" required></textarea>
        <button type="submit">Send</button>
    </form>
</section>

<footer>
    <p>© 2025 Chinni. All rights reserved.</p>
</footer>

<script src="script.js"></script>

#css file body { font-family: Arial, sans-serif; margin: 0; padding: 0; }

header { background-color: #333; color: white; padding: 10px 0; text-align: center; }

nav a { color: white; margin: 0 10px; text-decoration: none; }

section { padding: 40px 20px; max-width: 900px; margin: auto; }

.project { border: 1px solid #ccc; padding: 20px; margin: 10px 0; }

form input, form textarea { display: block; width: 100%; margin: 10px 0; padding: 10px; }

button { padding: 10px 20px; cursor: pointer; }

/* Responsive */ @media(max-width: 768px){ nav { display: flex; flex-direction: column; } }

#js file document.getElementById("contactForm").addEventListener("submit", function(e) { e.preventDefault(); let name = document.getElementById("name").value; let email = document.getElementById("email").value; let message = document.getElementById("message").value;

if(name && email && message) {
    alert("Thank you, " + name + "! Your message has been sent.");
    document.getElementById("contactForm").reset();
} else {
    alert("Please fill all fields.");
}

});