Darth-Vader-Fan-Page/index.html at main · OGN15/Darth-Vader-Fan-Page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Darth Vader Fan Page</title>
    <link rel="icon" type="image/jpg" href="images/favicon.jpg" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Darth Vader</h1>
      <p>Darth Vader once said "You don't know the power of the dark side."</p>
    </header>

    <section class="about">
      <h2>About Darth Vader</h2>
      <p>
        Discovered as a slave on Tatooine by Qui-Gon Jinn and Obi-Wan Kenobi,
        Anakin Skywalker had the potential to become one of the most powerful
        Jedi ever, and was believed by some to be the prophesied Chosen One who
        would bring balance to the Force.
      </p>
    </section>
    <hr />
    <section class="quotes">
      <h2>Quotes</h2>
      <div class="quote-box">
        <a
          href="https://www.youtube.com/watch?v=QNoo35bJexI&pp=0gcJCfwAo7VqN5tD"
          target="_blank"
          title="Watch Darth Vader say 'I find your lack of faith disturbing.'"
          class="quote-link"
        >
          "I find your lack of faith disturbing."
        </a>
      </div>
      <div class="quote-box">
        <a
          href="https://www.youtube.com/watch?v=Iyr74Rs6BWU"
          target="_blank"
          title="Watch Vader say 'The Force is strong with this one.'"
          class="quote-link"
          >"The Force is strong with this one."
        </a>
      </div>
      <div class="quote-box">
        <a
          href="https://www.youtube.com/watch?v=mYSSmZVYTkE"
          target="_blank"
          title="Watch Anakin say 'You underestimate my power'"
          class="quote-link"
          >"You underestimate my power."
        </a>
      </div>
    </section>

    <section class="vader-video">
      <h2>Top 10 Greatest Darth Vader Moments</h2>
      <div class="video-container">
        <video width="560" controls loop autoplay muted>
          <source
            src="videos/Top 10 Greatest Darth Vader Scenes.mp4"
            type="video/mp4"
          />
          Your browser does not support the video tag lmao.
        </video>
      </div>
    </section>

    <section class="before-after">
      <h2>Anakin -> Darth Vader</h2>
      <div class="container">
        <div>
          <h3 style="color: blue">Before</h3>
          <img src="media/anakin.jpg" alt="Anakin Skywalker" id="anakin-img" />
        </div>
        <div>
          <h3>After</h3>
          <img src="media/Darth Vader.jpg" alt="Darth Vader" />
        </div>
      </div>
      <div class="transition-text">
        This is his end result. The Jedi became one of the most feared and most
        dangerous Sith of all time.
      </div>
    </section>

    <section class="vader-audio">
      <h2>Vader Breathing Control</h2>
      <audio controls loop>
        <source
          src="media/Darth Vader Breathing Sound Effect.mp3"
          type="audio/mp3"
        />
        Your browser does not support the audio tag lmao womp womp.
      </audio>
    </section>

    <footer>
      <p>&copy; 2025 Ogonna Nwuke. All rights reserved.</p>
    </footer>

    <script>
      alert(`Welcome to the Darth Vader Fan Page`);
    </script>
  </body>
</html>