#html file

<title>My Introduction</title>

• Home
• About
• Skills
• Contact

<main>
    <section id="home">
        <h1>Welcome to My Website</h1>
        <img src="https://via.placeholder.com/200x200" alt="Profile Picture" id="profile-pic">
        <p>Hello! I'm a web development intern learning HTML, CSS, and JavaScript.</p>
        <button id="greet-btn">Click to Greet!</button>
    </section>

    <section id="about">
        <h2>About Me</h2>
        <p>I'm passionate about web development and currently learning front-end technologies.</p>
        <p>This website showcases my journey through the ApexPlanet internship program.</p>
    </section>

    <section id="skills">
        <h2>Skills I'm Learning</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
            <li>Responsive Design</li>
        </ul>
    </section>

    <section id="contact">
        <h2>Contact Information</h2>
        <p>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></p>
        <p>LinkedIn: <a href="https://linkedin.com/in/yourprofile" target="_blank">Your Profile</a></p>
    </section>
</main>

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

#css file

• { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; }

header { background-color: #2c3e50; color: white; padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; }

nav ul { list-style: none; display: flex; justify-content: center; }

nav li { margin: 0 15px; }

nav a { color: white; text-decoration: none; font-weight: bold; }

nav a:hover { color: #3498db; }

main { margin-top: 80px; padding: 20px; }

section { background: white; margin: 20px 0; padding: 30px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

h1 { color: #2c3e50; text-align: center; margin-bottom: 20px; }

h2 { color: #34495e; margin-bottom: 15px; }

#profile-pic { display: block; margin: 20px auto; border-radius: 50%; border: 4px solid #3498db; }

#greet-btn { display: block; margin: 20px auto; padding: 12px 24px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; }

#greet-btn:hover { background-color: #2980b9; }

ul { padding-left: 20px; }

li { margin: 8px 0; }

a { color: #3498db; text-decoration: none; }

a:hover { text-decoration: underline; }

#Js file document.addEventListener('DOMContentLoaded', function() { const greetBtn = document.getElementById('greet-btn');

greetBtn.addEventListener('click', function() {
    const name = prompt('What\'s your name?');
    if (name) {
        alert(`Hello ${name}! Welcome to my website!`);
    }
});

// Smooth scrolling for navigation links
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetSection = document.querySelector(targetId);
        targetSection.scrollIntoView({ behavior: 'smooth' });
    });
});

});