a

CSS/style.css

@@ -0,0 +1,172 @@
+body {
+  margin: 0;
+  font-family: 'Black Kiyrand';
+
+background-color: black;
+color:#D10000;
+
+  cursor: url('../images/re.png') 0 0, auto;
+
+font-style: italic;
+text-shadow: 0 0 0.5px rgb(7, 7, 7);
+
+    min-height: 100vh;
+
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;  
+}
+
+ header {
+  text-align: center;
+    font-size: 20px;
+    font-weight: normal;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+.statement {
+  text-align: center;
+  font-weight: normal;
+  color:#D10000
+}
+
+.statement a {
+     text-shadow: 0 0 0.5px rgb(7, 7, 7); justify-content: center; gap: 20px; padding: 10px; margin: 0px ; color:rgb(56, 71, 212);
+}
+
+.continue {
+     text-shadow: 0 0 0.5px rgb(7, 7, 7); justify-content: center; align-items: center; color:rgb(56, 71, 212);
+}
+
+.continue:hover {
+    cursor: url('../images/cursor.png') 0 0, auto;
+    transition: 0.3s ease;  color: #e6b208;  justify-content: center; align-items: center;  
+}
+
+#jumpscare-link:hover {
+    cursor: url('../images/cursor.png') 0 0, auto;
+    transition: 0.3s ease;   color: #e6b208;  justify-content: center; align-items: center;
+}
+
+.link:hover { 
+    cursor: url('../images/cursor.png') 0 0, auto;
+    transition: 0.3s ease;   color: #e6b208;  justify-content: center; align-items: center;
+}
+
+#jumpscare-link {
+    text-shadow: 0 0 0.5px rgb(7, 7, 7); justify-content: center; gap: 20px; padding: 10px; margin: 0px ; color:rgb(56, 71, 212);
+}
+ul { 
+    list-style: none;
+    margin: 0;
+  padding: 0;
+   display: flex; flex-direction: row;  justify-content: center; align-items: center;
+}   
+
+h3 { 
+  text-align: left;
+  font-weight: normal;
+}
+
+h2 {
+  font-weight: normal;
+      text-align: center;
+  color: rgb(169, 42, 219);
+}
+
+h1 {
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Black Kiyrand";
+  src: url('../assets/BlackKiyrand-Regular.ttf') format("truetype");
+}
+
+p {
+  font-size: 20px;
+  line-height: 1.5;
+}
+
+fieldset {
+
+    position: relative;
+
+
+ border: transparent;
+
+   padding: 30px;
+
+
+
+  max-width: 1300px;
+
+
+
+
+    margin: 0 auto;
+
+}
+
+
+
+
+
+
+img.candleLeft {
+  position: absolute ;
+  width: 150px;
+  height: auto;
+  image-rendering: pixelated;
+   left: -80px;
+  top: -105px;
+}
+
+img.candleRight {
+  position: absolute ;
+  height: auto;
+  width: 150px;
+  image-rendering: pixelated;
+   right: -80px;
+  top: -105px;
+  z-index: 10;
+}
+
+legend {
+    margin: auto;
+  text-align: center;
+
+
+
+
+}
+
+#jumpscare {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    background: black;
+}
+
+#jumpscare video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.flashlight {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9999;
+     background: radial-gradient(
+        circle 120px at var(--x, 50%) var(--y, 50%),
+        transparent 0%,
+        rgba(0, 0, 0, 0.95) 100%
+    );
+}
+

assets/lantern.crs

@@ -0,0 +1,45 @@
+[Arrow]
+Path=Normal Select.cur
+
+[Hand]
+Path=Link Select.ani
+
+[AppStarting]
+Path=Working In Background.ani
+
+[UpArrow]
+Path=Alternate Select.cur
+
+[Wait]
+Path=Busy.ani
+
+[SizeNWSE]
+Path=Diagonal Resize 1.ani
+
+[SizeNESW]
+Path=Diagonal Resize 2.ani
+
+[NWPen]
+Path=Handwriting.cur
+
+[Help]
+Path=Help Select.cur
+
+[SizeWE]
+Path=Horizontal Resize.ani
+
+[SizeAll]
+Path=Move.ani
+
+[Crosshair]
+Path=Precision Select.cur
+
+[IBeam]
+Path=Text Select.cur
+
+[No]
+Path=Unavaliable.cur
+
+[SizeNS]
+Path=Vertical Resize.ani
+

assets/readme.txt

@@ -0,0 +1,22 @@
+=== Lantern Cursor Set ===
+
+By: Bubbles_The_Gr8 (http://www.rw-designer.com/user/38985) b.n.bell@hotmail.com
+
+Download: http://www.rw-designer.com/cursor-set/lantern
+
+Author's description:
+
+Hey everyone! Been awhile (like a couple of years) since I uploaded anything so I thought I might as well dump this here. It's based on the old black iron lanterns from way back when. Enjoy!
+
+==========
+
+License: Creative Commons - Noncommercial
+
+You are free:
+
+* To Share - To copy, distribute and transmit the work.
+* To Remix - To adapt the work.
+
+Under the following conditions:
+
+* Noncommercial - You may not use this work for commercial purposes.

diet.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Redaction+35:ital,wght@0,400;0,700;1,400&family=Redaction+50:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="/css/index.css" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using @vitejs/plugin-react"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <title>Guide To A Vampire Lifestyle</title>
+  </head>
+  <body>
+
+<video id="scare-video" src='../assets/jumpscare.mp4'></video>
+
+    <div id="jumpscare">
+        <video id="scare-video" src='../assets/jumpscare.mp4'></video>
+    </div>
+    <div id="root"></div>
+    <script type="module" src='/java/diet.js'></script>
+  </body>
+</html>

index.html

@@ -1,35 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+
+
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="CSS/style.css"/>
+       <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="Web site created using @vitejs/plugin-react"
-    />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="/manifest.json" />
-    <title>React App</title>
+
+
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+<header> 
+  <h1>Guide To A Vampire Lifestyle</h1>
+  <img src="images/Screenshot 2026-11-10 115647.png" alt="Vampire Lifestyle Guide" />
+
+   <h2 class="statement">Statement from Drac</h2>
+    <p>i want to dedicate my first project site to helping my brothers in blood look and feel their best</p>
+</header>
+
+<a class="link" href="maincontent.html"><h2 class="continue">Continue To Fundamentals</h2></a>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+ <br>
+ <br>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+   <noscript>You need to enable JavaScript to run this app.</noscript>
+    <footer> &copy; 2026 King-Vamp , DracLord </footer>
+    <div id="root"></div> 
+    <div class="flashlight"></div>
+    <script type="module" src='java/index.js'></script>
+
   </body>
-  <script type="module" src="/src/index.jsx"></script>
+
 </html>

java/diet.js

@@ -0,0 +1,23 @@
+const links = document.querySelectorAll("a:not(.links)");
+const jumpscare = document.getElementById("jumpscare");
+const video = document.getElementById("scare-video");
+
+links.forEach(link => {
+    link.addEventListener("click", async function(event) {
+        event.preventDefault();
+
+        jumpscare.style.display = "block";
+        video.currentTime = 0;
+
+        try {
+            await video.play();
+        } catch (error) {
+            console.error(error);
+        }
+
+        setTimeout(() => {
+            video.pause();
+            jumpscare.style.display = "none";
+        }, 3000);
+    });
+});

java/index.js

@@ -0,0 +1,13 @@
+const flashlight = document.querySelector(".flashlight");
+
+window.addEventListener("mousemove", function(event) {
+    flashlight.style.background = `
+        radial-gradient(
+            circle 200px at ${event.clientX}px ${event.clientY}px,
+            transparent 0%,
+            rgba(0, 0, 0, 0.95) 100%
+        )
+    `;
+});
+
+console.log("JavaScript is working!");