WEB TECHNOLOGY 2

FITNESS TRAINER November 05, 2025

 1. PORTFOLIO

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css">

  <title>Nandini H M - Portfolio</title>

</head>

<body>

  <header>

    <h1>Nandini H M</h1>

    <p>Assistant Professor<br>Department of Information Technology, KSOU, Mysuru</p>

  </header>


  <section id="about">

    <h2>About Me</h2>

    <p>I am an Assistant Professor in the Department of Information Technology at KSOU, Mysuru.</p>

  </section>


  <section id="skills">

    <h2>Skills</h2>

    <ul>

      <li>Web Development</li>

      <li>Programming (Java, Python)</li>

      <li>Data Science</li>

    </ul>

  </section>


  <section id="projects">

    <h2>Projects</h2>

    <div class="project">

      <h3>Research Project: A Study on Data Analysis</h3>

      <p>Investigated data analysis techniques and their applications in various domains.</p>

      <a href="#">View Project</a>

    </div>


    <div class="project">

      <h3>Web Development: Online Course Platform</h3>

      <p>Designed and developed an online platform for hosting IT courses.</p>

      <a href="#">View Project</a>

    </div>

  </section>


  <footer>

    <p>Contact me at: <a href="mailto:nandiniksou@gmail.com">nandiniksou@gmail.com</a></p>

  </footer>

</body>

</html>

CSS
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

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

section {
  padding: 2em;
  background-color: white;
  margin: 1em auto;
  width: 80%;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

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

.project {
  margin-bottom: 1.5em;
}

.project a {
  display: inline-block;
  margin-top: 0.5em;
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
}

.project a:hover {
  text-decoration: underline;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

2. ONLINE RESUME

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Ganesha H M - Resume</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      margin: 20px;

      background-color: #f8f8f8;

      color: #333;

      line-height: 1.6;

    }

    header, section, footer {

      margin-bottom: 20px;

      background-color: #fff;

      padding: 15px 20px;

      border-radius: 8px;

      box-shadow: 0 0 5px rgba(0,0,0,0.1);

    }

    h1 {

      margin-bottom: 5px;

      color: #222;

    }

    h2 {

      color: #0056b3;

      border-bottom: 2px solid #0056b3;

      padding-bottom: 4px;

    }

    ul {

      list-style-type: none;

      padding: 0;

    }

    li {

      margin-bottom: 5px;

    }

    footer {

      text-align: center;

      font-size: 0.9em;

      color: #555;

    }

  </style>

</head>

<body>

  <header>

    <h1>Ganesha H M</h1>

    <p><strong>Web Developer</strong></p>

  </header>


  <section id="about">

    <h2>About Me</h2>

    <p>A passionate web developer with expertise in HTML, CSS, and JavaScript.

    Dedicated to creating responsive and user-friendly websites.</p>

  </section>


  <section id="education">

    <h2>Education</h2>

    <ul>

      <li>Master of Science in Information Technology - KSOU (2018–2022)</li>

    </ul>

  </section>


  <section id="experience">

    <h2>Work Experience</h2>

    <ul>

      <li>Web Developer - ABC Company (2022 – Present)</li>

      <li>Intern, Junior Developer - DEF Agency (Summer 2021)</li>

    </ul>

  </section>


  <section id="skills">

    <h2>Skills</h2>

    <ul>

      <li>HTML5, CSS3, JavaScript</li>

      <li>Responsive Web Design</li>

      <li>Version Control (Git)</li>

      <!-- Add more skills as needed -->

    </ul>

  </section>


  <section id="contact">

    <h2>Contact</h2>

    <ul>

      <li>Email: <a href="mailto:ghm@example.com">ghm@example.com</a></li>

      <li>LinkedIn: <a href="https://linkedin.com/in/ghm" target="_blank">linkedin.com/in/ghm</a></li>

      <li>GitHub: <a href="https://github.com/ghm" target="_blank">github.com/ghm</a></li>

    </ul>

  </section>


  <footer>

    <p>&copy; 2024 Ganesha H M. All rights reserved.</p>

  </footer>

</body>

</html>

3. CLICKABLE IMAGE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clickable Image Example</title>
</head>
<body>

  <h2>Click the image to visit OpenAI</h2>

  <!-- Clickable Image -->
  <a href="https://www.openai.com" target="_blank">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/OpenAI_Logo.svg" 
         alt="OpenAI Logo" 
         width="200" 
         style="border:2px solid #333; border-radius:10px;">
  </a>

</body>
</html>

4. NAVIGATION BAR


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Navigation Bar</title>
  <style>
    /* Basic Navbar Styling */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f4f4f4;
    }

    nav {
      background-color: #333;
      padding: 1em;
      text-align: center;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 15px;
      font-size: 18px;
      font-weight: bold;
      transition: color 0.3s, border-bottom 0.3s;
    }

    nav a:hover {
      color: #00bfff;
      border-bottom: 2px solid #00bfff;
    }
  </style>
</head>
<body>

  <!-- Navigation Bar -->
  <nav>
    <a href="https://www.google.com" target="_blank">Google</a>
    <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
    <a href="https://www.openai.com" target="_blank">OpenAI</a>
  </nav>

  <main style="padding: 2em; text-align:center;">
    <h2>Welcome!</h2>
    <p>Click any link above to visit the corresponding website.</p>
  </main>

</body>
</html>

5. IMAGE AND AUDIO EMBEDDING


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image and Audio Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 40px;
      background-color: #f4f4f4;
    }

    img {
      width: 300px;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      margin-bottom: 20px;
    }

    audio {
      margin-top: 20px;
      width: 300px;
    }
  </style>
</head>
<body>

  <h1>Welcome to My Media Page</h1>
  <p>Here’s an embedded image and an audio player:</p>

  <!-- Embedded Image -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Golde33443.jpg" 
       alt="Beautiful Landscape">

  <!-- Embedded Audio -->
  <audio controls>
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

</body>
</html>

6. LOGIN PAGE


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #6a11cb; 
    background: linear-gradient(to right, #6a11cb, #2575fc);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .login-box {
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    width: 280px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .login-box h2 {
    margin-bottom: 20px;
    color: #333;
  }

  .login-box input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .login-box input[type="submit"] {
    background: #2575fc;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: 0.3s;
  }

  .login-box input[type="submit"]:hover {
    background: #1a5dd6;
  }
</style>
</head>
<body>

<div class="login-box">
  <h2>Login</h2>
  <form>
    <input type="text" placeholder="Username" required>
    <input type="password" placeholder="Password" required>
    <input type="submit" value="Login">
  </form>
</div>

</body>
</html>

FITNESS TRAINER

Posted by FITNESS TRAINER

Post a Comment

0 Comments