Stranger-Things-1/index.html at main · Reedham06/Stranger-Things-1 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERR_CONNECTION_LOST</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="flashlight"></div>
    <div class="scanlines"></div>
    <div class="vhs-noise"></div>
    <div class="thunder-overlay"></div>

    <div class="ecg-container">
        <svg class="ecg-line" viewBox="0 0 500 150" preserveAspectRatio="none">
            <polyline points="0,75 150,75 160,20 170,130 180,10 190,140 200,75 220,75 230,40 240,110 250,75 500,75" />
        </svg>
    </div>

    <div id="build-id">
        <span>O</span><span>l</span><span>k</span>
    </div>

    <div id="vines-container">
        <div class="vine" id="decoy-vine" style="left: 50%; opacity: 0.5;"></div>
        <div class="vine" style="left: 20%;"></div>
        <div class="vine" style="left: 80%;"></div>
        <div class="vine" style="left: 10%;"></div>
        <div class="vine" style="left: 90%;"></div>
        <div class="vine" style="left: 35%;"></div>
        <div class="vine" style="left: 65%;"></div>
    </div>

    <div id="blood-container"></div>

    <div class="hero-section">
        <img src="https://images.unsplash.com/photo-1626544827763-d516dce335ca?q=80&w=2500&auto=format&fit=crop" alt="Demogorgon" class="demogorgon-bg" onerror="this.style.opacity='0'">

        <div class="vhs-tape" style="left: 10%; animation-delay: 0s;"></div>
        <div class="vhs-tape" style="left: 70%; animation-delay: 4s;"></div>
        <div class="vhs-tape" style="right: 15%; animation-delay: 2s;"></div>
        <div class="paper" style="left: 20%; animation-delay: 1s;"></div>
        <div class="paper" style="right: 25%; animation-delay: 3s;"></div>
        <div class="paper" style="left: 60%; animation-delay: 7s;"></div>

        <div id="spores"></div>
        <div id="ash-container"></div>

        <div class="content-overlay">
            <div class="st-logo">STRANGER<br>THINGS</div>

            <div class="alert-box">
                <h2 id="status-title">BREACH DETECTED</h2>
                <p id="status-text">SUBJECT #011 MISSING</p>
                <p class="run-text">DEMOGORGON IS BEHIND YOU... RUN...</p>
                <p class="clue-text">SEARCH FOR CLUES HERE TO GET THE KEY TO ESCAPE</p>
            </div>
        </div>
    </div>

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