<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Profile</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(to right, #FF8C00, #FFD700);
      color: #333;
    }

    header {
      background: linear-gradient(to right, #2c3e50, #3498db);
      color: #ecf0f1;
      padding: 1em;
      text-align: center;
    }

    nav {
      background: linear-gradient(to right, #34495e, #3498db);
      padding: 10px;
      text-align: center;
    }

    nav a {
      color: #ecf0f1;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
      transition: color 0.3s ease-in-out;
    }

    nav a:hover {
      color: #FFD700;
    }

    section {
      max-width: 800px;
      margin: 20px auto;
      background: linear-gradient(to right, #fff, #f0f8ff);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    img {
      border-radius: 50%;
      max-width: 100%;
      height: auto;
    }

    h2 {
      color: #2c3e50;
    }

    h3 {
      color: #FFD700;
    }

    p {
      color: #555;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      margin-bottom: 8px;
      color: #2c3e50;
    }

    .animate {
      animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <header>
    <h1 style="font-size: 2em;">Student Profile</h1>
  </header>

  <nav>
    <a href="#profile">Profile</a>
    <a href="#skills">Skills</a>
    <a href="#education">Education</a>
    <a href="#experience">Experience</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>

  <section id="profile" class="animate">
    <img src="https://via.placeholder.com/150" alt="Student Photo">
    <h2 style="color: #FFD700;">John Doe</h2>
    <p style="color: #2c3e50; font-style: italic;">Computer Science Major</p>
    <p style="color: #2c3e50;">Class of 2023</p>
    <p style="color: #2c3e50;">Contact: john.doe@example.com</p>
  </section>

  <section id="skills" class="animate">
    <h2 style="color: #FFD700;">Skills</h2>
    <ul>
      <li>Programming</li>
      <li>Web Development</li>
      <li>Data Structures</li>
      <li>JavaScript</li>
      <li>HTML/CSS</li>
      <li>Python</li>
    </ul>
  </section>

  <section id="education" class="animate">
    <h2 style="color: #FFD700;">Education</h2>
    <p style="color: #2c3e50;">Bachelor of Science in Computer Science</p>
    <p style="color: #2c3e50;">University of Example</p>
    <p style="color: #2c3e50;">Graduation: May 2023</p>
  </section>

  <section id="experience" class="animate">
    <h2 style="color: #FFD700;">Experience</h2>
    <h3 style="color: #2c3e50;">Software Developer Intern</h3>
    <p style="color: #2c3e50;">XYZ Tech Solutions, Summer 2022</p>
    <p style="color: #2c3e50;">Worked on web application development and collaborated with cross-functional teams.</p>
  </section>

  <section id="projects" class="animate">
    <h2 style="color: #FFD700;">Projects</h2>
    <h3 style="color: #2c3e50;">Portfolio Website</h3>
    <p style="color: #2c3e50;">Designed and developed a personal portfolio website to showcase skills and projects.</p>
    <h3 style="color: #2c3e50;">Chat Application</h3>
    <p style="color: #2c3e50;">Built a real-time chat application using Socket.io and Node.js for a class project.</p>
  </section>

  <section id="contact" class="animate">
    <h2 style="color: #FFD700;">Contact</h2>
    <p style="color: #2c3e50;">Email: john.doe@example.com</p>
    <p style="color: #2c3e50;">LinkedIn: linkedin.com/in/johndoe</p>
    <p style="color: #2c3e50;">GitHub: github.com/johndoe</p>
  </section>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.