StrangerThings/index.html at main · amitmehta102/StrangerThings · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stranger Things | Fan Website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
  <img src="logo.png" class="logo">
  <nav>
    <a href="#about">About</a>
    <a href="#characters">Characters</a>
    <a href="#gallery">Gallery</a>
  </nav>
</header>

<section class="hero">
  <h1 class="neon-text">WELCOME TO HAWKINS</h1>
  <p class="tagline">Mystery • Friendship • The Upside Down</p>
  <button class="explore-btn" onclick="scrollToExplore()">Explore</button>
</section>

<section id="about" class="about">
  <h2 class="neon-sub">About the Series</h2>
  <p>
    <strong>Stranger Things</strong> is a science-fiction horror series set in 1980s
    Hawkins, Indiana, where a young boy’s disappearance reveals secret experiments
    and a dangerous parallel world known as the <em>Upside Down</em>.
  </p>
  <p>
    A group of friends face supernatural threats through courage and loyalty.
    Blending horror, mystery, and nostalgia, the series is known for its atmosphere,
    emotional depth, and iconic characters.
  </p>
</section>

<section id="characters" class="slider-section">
  <h2 class="neon-sub center">Main Characters</h2>
  <div class="slider-wrapper" id="sliderWrapper">
    <div class="slider" id="slider">
      <div class="card"><img src="eleven.jpg"><h3>Eleven</h3></div>
      <div class="card"><img src="mike.jpg"><h3>Mike Wheeler</h3></div>
      <div class="card"><img src="dustin.jpg"><h3>Dustin Henderson</h3></div>
      <div class="card"><img src="lucas.jpg"><h3>Lucas Sinclair</h3></div>
      <div class="card"><img src="will.jpg"><h3>Will Byers</h3></div>
      <div class="card"><img src="max.jpg"><h3>Max Mayfield</h3></div>
      <div class="card"><img src="vecna.jpg"><h3>Vecna</h3></div>
    </div>
  </div>
</section>

<!-- GALLERY -->
<section id="gallery" class="gallery-section">
  <h2 class="neon-sub center">Gallery</h2>
  <p class="gallery-desc">
    A visual collection of characters and creatures from Hawkins.
  </p>

  <div class="gallery">
    <div class="gallery-item"><img src="eleven.jpg"><span>Eleven</span></div>
    <div class="gallery-item"><img src="mike.jpg"><span>Mike Wheeler</span></div>
    <div class="gallery-item"><img src="dustin.jpg"><span>Dustin Henderson</span></div>
    <div class="gallery-item"><img src="lucas.jpg"><span>Lucas Sinclair</span></div>
    <div class="gallery-item"><img src="will.jpg"><span>Will Byers</span></div>
    <div class="gallery-item"><img src="max.jpg"><span>Max Mayfield</span></div>
    <div class="gallery-item"><img src="vecna.jpg"><span>Vecna</span></div>
    <div class="gallery-item"><img src="hopper.jpg"><span>Jim Hopper</span></div>
    <div class="gallery-item"><img src="joyce.jpg"><span>Joyce Byers</span></div>
    <div class="gallery-item"><img src="steve.jpg"><span>Steve Harrington</span></div>
    <div class="gallery-item"><img src="nancy.jpg"><span>Nancy Wheeler</span></div>
    <div class="gallery-item"><img src="robin.jpg"><span>Robin Buckley</span></div>
    <div class="gallery-item"><img src="eddie.jpg"><span>Eddie Munson</span></div>
    <div class="gallery-item"><img src="demogorgon.jpg"><span>Demogorgon</span></div>
  </div>
</section>

<!-- LIGHTBOX -->
<div id="lightbox">
  <img id="lightbox-img">
</div>

<footer>
  <p>© 2026 | Stranger Things Fan Project</p>
</footer>

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