horrorstudioskillercustomcreations.github.io/index.html at main · CustomHorrorDesigns/horrorstudioskillercustomcreations.github.io · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
  </style>
</head>
<body>

  <header>
    <div class="logo-wrapper">
      <img id="logo" src="images/logo.png" alt="Horror Studios logo" />
      <div class="blood-drips" aria-hidden="true">
        <span class="drip"></span>
        <span class="drip"></span>
        <span class="drip"></span>
        <span class="drip"></span>
        <span class="drip"></span>
      </div>
      <div class="blood-pool" aria-hidden="true"></div>
    </div>
  </header>
  <div class="fog"></div>
  <img id="demon" src="images/demon.png" alt="Floating demon head" />
  <main>
    <h1>Horror Studios Killer Custom Creations</h1>
    <p class="headline-caption">From classic 80’s horror to the spine-chilling modern films, we bring modern horror to life.</p>

    <div class="horror-card">
      <h2>About Us</h2>
      <p>
        Welcome to Horror Studios Killer Custom Creations. Your one stop spot for unique, handmade horror collectables.
        Perfect for horror fans, collectors, and anyone looking to add a touch of retro fright to their space.
        At Horror Studios Killer Custom Creations, we craft one-of-a-kind horror themed items inspired anywhere from classic 80s movies
        to today’s latest horror hits.
      </p>
    </div>

    <div class="scroll-container">
      <div class="scroll-track" id="scrollTrack">
        <img src="images/Untitled design-2.png" class="glitch" alt="Design 2" onclick="openLightbox(this)">
        <img src="images/Untitled design-3.png" class="glitch" alt="Design 3" onclick="openLightbox(this)">
        <img src="images/Untitled design-4.png" class="glitch" alt="Design 4" onclick="openLightbox(this)">
        <img src="images/Untitled design-5.png" class="glitch" alt="Design 5" onclick="openLightbox(this)">
        <img src="images/Untitled design-6.png" class="glitch" alt="Design 6" onclick="openLightbox(this)">
        <img src="images/Untitled design-7.png" class="glitch" alt="Design 7" onclick="openLightbox(this)">
        <img src="images/Untitled design-8.png" class="glitch" alt="Design 8" onclick="openLightbox(this)">
        <img src="images/Untitled design-9.png" class="glitch" alt="Design 9" onclick="openLightbox(this)">
        <img src="images/Untitled design-10.png" class="glitch" alt="Design 10" onclick="openLightbox(this)">
        <img src="images/Untitled design-11.png" class="glitch" alt="Design 11" onclick="openLightbox(this)">
        <img src="images/Untitled design-12.png" class="glitch" alt="Design 12" onclick="openLightbox(this)">
        <img src="images/Untitled design-13.png" class="glitch" alt="Design 13" onclick="openLightbox(this)">
        <img src="images/Untitled design-14.png" class="glitch" alt="Design 14" onclick="openLightbox(this)">
        <img src="images/Untitled design-15.png" class="glitch" alt="Design 15" onclick="openLightbox(this)">
        <img src="images/Untitled design-16.png" class="glitch" alt="Design 16" onclick="openLightbox(this)">
        <img src="images/Untitled design-17.png" class="glitch" alt="Design 17" onclick="openLightbox(this)">
        <img src="images/Untitled design-18.png" class="glitch" alt="Design 18" onclick="openLightbox(this)">
        <img src="images/Untitled design-19.png" class="glitch" alt="Design 19" onclick="openLightbox(this)">
        <img src="images/Untitled design-20.png" class="glitch" alt="Design 20" onclick="openLightbox(this)">
        <img src="images/Untitled design-22.png" class="glitch" alt="Design 22" onclick="openLightbox(this)">
      </div>
    </div>

    <div class="products">
      <div class="horror-card">
        <h2>Creepy Collectibles</h2>
        <p>Custom, handmade collectables. Things fans need in their collection.</p>
      </div>
      <div class="horror-card">
        <h2>Killer Creations</h2>
        <p>Furnish your fears. Our horror inspired furniture brings nightmares to life.</p>
      </div>
      <div class="horror-card">
        <h2>Clothing</h2>
        <p>Wear your nightmares. Our horror apparel turns fear into fashion.</p>
      </div>
    </div>

    <div class="contact">
      <p>
        📧 Email:
        <a href="mailto:Howiescustomhorrordesigns@yahoo.com">Howiescustomhorrordesigns@yahoo.com</a>
        <br>
        👍 Facebook:
        <a href="https://www.facebook.com/killerhorrorstudioscustomcreations" target="_blank" rel="noopener noreferrer">killerhorrorstudioscustomcreations</a>
      </p>
    </div>
  </main>

  <audio id="demonLaugh" src="assets/demon-laugh.mp3"></audio>

  <div id="lightbox">
    <span class="close" onclick="closeLightbox()">×</span>
    <span class="prev" onclick="changeImage(-1)">❮</span>
    <img id="lightbox-img" alt="Expanded gallery image" />
    <span class="next" onclick="changeImage(1)">❯</span>
  </div>

  <script>
    const logo = document.getElementById('logo');
    const laugh = document.getElementById('demonLaugh');
    const track = document.getElementById('scrollTrack');
    const lightbox = document.getElementById('lightbox');
    const lightboxImage = document.getElementById('lightbox-img');

    let images = Array.from(document.querySelectorAll('.scroll-track img'));
    let currentIndex = 0;

    // Duplicate image set once so carousel loops seamlessly.
    track.innerHTML += track.innerHTML;
    images = Array.from(document.querySelectorAll('.scroll-track img'));

    logo.addEventListener('click', async () => {
      try {
        laugh.currentTime = 0;
        await laugh.play();
      } catch (_) {
        // Browser autoplay policies can block without gesture context.
      }
    });

    function openLightbox(imgEl) {
      imgEl.classList.remove('shake');
      void imgEl.offsetWidth;
      imgEl.classList.add('shake');

      images = Array.from(document.querySelectorAll('.scroll-track img'));
      currentIndex = images.findIndex((img) => img.src === imgEl.src);
      lightboxImage.src = imgEl.src;
      lightbox.style.display = 'flex';
    }

    function closeLightbox() {
      lightbox.style.display = 'none';
    }

    function changeImage(direction) {
      currentIndex += direction;
      if (currentIndex < 0) currentIndex = images.length - 1;
      if (currentIndex >= images.length) currentIndex = 0;
      lightboxImage.src = images[currentIndex].src;
    }

    lightbox.addEventListener('click', (event) => {
      if (event.target === lightbox) closeLightbox();
    });
  </script>
</body>
</html>