<body id="defaultBody" onload="generateAd();compileLocalesList();compileEntityList();accordionMenu();">
<header id="header">
<div id="defaultHeader">
<div class="headerDiv">
<img id="logo1" class="logo" src="https://i.imgur.com/7zY0zXo.gif" alt="Spinning pentagram logo">
<img id="title" src="https://i.imgur.com/deC4Bgo.gif" alt="Necronomi.com">
<img id="logo2" class="logo" src="https://i.imgur.com/7zY0zXo.gif" alt="Spinning pentagram logo">
</div>
<div id="navbar">
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
<a class="navlink" href="javascript:void(0);" title="Go to Homepage" onclick="switchPage('home')"> -
Homepage - </a>
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
<a class="navlink" href="javascript:void(0);" title="Go to Locales" onclick="switchPage('locales')"> -
Locales - </a>
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
<a class="navlink" href="javascript:void(0);" title="Go to Entities" onclick="switchPage('entities')"> -
Entities - </a>
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
<a class="navlink" href="javascript:void(0);" title="Go to Contact Us" onclick="switchPage('contact')">
- Contact us - </a>
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
<a class="navlink" href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"> - FAQ -
</a>
<img class="divider" src="https://i.imgur.com/9kFo43c.gif" alt="UI divider">
</div>
</div>
</header>
<div class="page loaded" id="home" style="display:block;">
<div id="top-flex">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src=https://i.imgur.com/D2amyrx.gif class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="https://i.imgur.com/XRxcIRR.gif" class="box-ad" alt="box ad"></a>
</div>
<div id="mid-top-flex">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="https://i.imgur.com/MY1imxM.gif" class="horizontal-ad" alt="horizontal ad"></a>
<div class="homeDescription">
<h2 style="padding:calc(5px + 0.5vw);width:45vw;">Welcome,</h2>
<p style="padding:calc(5px + 0.5vw);width:45vw;">If you're reading this, you are most likely akin to
myself, a
curious soul that wishes to seek out knowledge of that which exists outside of our material
realm. Knowledge
that normally must be learned through experience, or from the pages of a dread tome, both of
which can prove
to be dangerous and expensive ventures. However, taking advantage of the recent development of
personal
websites, you now have access to my own experience and accquired knowledge! Now you'll be able
to explore the
dark corners of this world, secure in knowing that you aren't going there without a helpful
guide to make sure
you never risk becoming a spirit yourself.</p>
<p>Good luck, and happy hunting,</p>
<a href="javascript:void(0);" title="Go to Contact Us" onclick="switchPage('contact')" class="navlinkDark" style="padding-bottom:2vw;">D4RKDW3LL3R</a>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="https://i.imgur.com/lu8g5wu.gif" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="https://i.imgur.com/a4Z18wH.gif" class="box-ad" alt="box ad"></a>
</div>
</div>
<footer>
<a href="#header" class="navlink">back to top</a>
</footer>
</div>
<div class="page" id="locales" style="display:none;">
<ul id="localeArticleList">
<li style="color:white;list-style-type:none;">Click on an article to jump to it.</li>
</ul>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="localeName">Hidden Rooms</h1>
</div>
<div class="articleDescription">
<p class="articleText">When it comes to trying to find places affected by preturnatural energies, a
good place
to start is any location never meant to see the light of day. Hidden rooms are almost always
associated with
activities that are either nefarious or simply distasteful to the wider public, and are thus
infused with the
complex memories and feelings that are synonymous with lingering spirits. <br> Alternatively,
you could get
lucky and find a place that is not only ripe with the history that attracts wandering souls, but
perhaps even
a place dedicated to the practice of ancient rites and arcane pursuits. Of course it should be
assumed that a
location of that kind would be much more likely to hold dangerous artifacts or perhaps even
traps designed to
deter any would-be intrduers. Because of this, and of course the normal amount of risk that
comes along with
exploring any unmaintained building, caution must be exercised, and whenever possible an expert
on the
location should tag along as a guide. </p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/VdjD1rd.jpg" alt="Bathroom in abandoned house with a trapdoor leading downwards">
<p class="articleCaption">A trapdoor in an abandoned house that led to a basic fallout shelter.
</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="localeName">Drainage tunnels</h1>
</div>
<div class="articleDescription">
<p class="articleText">Many ancient and eldritch forces exist deep in the earth, so the deeper you
can get, the
more likely you'll be able to encounter paranormal phenomena. Not everyone has access to optimal
locations
like ancient crypts and abandoned mines, but most people have drainage tunnels nearby to their
homes! <br>
While
these tunnels seem mundane, they still succeed in getting you deeper into the earth, where old
things dwell,
and in addition to that, they sometimes find themselves home to dark dealings, which is yet more
potential for
lingering spirits. Because of this, it is not unheard of for many towns to have their own local
legends about
nearby drainage tunnels, such as the <a href="https://weirdnj.com/stories/gates-of-hell/" target="_blank" class="navlinkDark">Gates of hell</a> in New Jersey. <br>
</p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/UCQTwEK.jpg" alt="Dimly lit drainage tunnel">
<p class="articleCaption">A waterproof flashlight is recommended for exploring flooded tunnels
like this.</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="localeName">Unusual plant growth</h1>
</div>
<div class="articleDescription">
<p class="articleText">
While unusual or notable plant growth can be perfectly innocent, it can also be the sign of
supernatural
influence. One example that many people may be familiar with are <a href="https://en.wikipedia.org/wiki/Fairy_ring" target="_blank" class="navlinkDark">fairy
rings</a>, a
colloquial term for a patch
of mushrooms or flowers that grow in a perfect ring. These often represent a place to commune
with
otherworldly beings or even where a portal into the dreamworld can be found. <br>
The exact effects of each instance depends on what exactly caused the unnatural growth. Some
examples could
have been formed by mortal spellcasters, seeking to speak with forces beyond our realm, or by
those forces
themselves. Research on individual instances should be done to determine the source of the
change, as
approaching these phenomena without an idea of what to expect can leave you unprepared in a new
and dangerous
location, or conversing with something you'd rather not talk to.
</p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/fa8SGF8.jpg" alt="A natural arch formed by trees bending over a path. The picture was taken at night, and the trees have no leaves.">
<p class="articleCaption">An arch formed of dying trees, leading to an unnatural darkness.</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="horizontal-ad" alt="horizontal ad" style="margin-top: 1vw;"></a>
<footer>
<a href="#header" class="navlink">back to top</a>
</footer>
</div>
<div class="page" id="entities" style="display:none;">
<ul id="entityArticleList">
<li style="color:white;list-style-type:none;">Click on an article to jump to it.</li>
</ul>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="entityName">Old Red-Eye</h1>
</div>
<div class="articleDescription">
<p class="articleText">Old Red-eye is a folk tale from the area of the <a href="https://en.wikipedia.org/wiki/New_Jersey_Pine_Barrens" target="_blank" class="navlinkDark">Pine
Barrens</a>, in the state of New Jersey.
It is believed to be a bipedal primate, possible a relative of its west coast counterpart, <a href="https://en.wikipedia.org/wiki/Bigfoot" target="_blank" class="navlinkDark">Sasquatch</a>. <br>
Its not inaccurate to describe the creature as a mountain of matted, black fur, with some of its
only
distinguishable features being its lanky limbs, and the eerie, red glow of its eyes. <br>
Approach with caution if at all, Red-eye is known to be quite territorial, and its surmised that
a not
insignifigant amount of the hikers that go missing in the <a href="https://en.wikipedia.org/wiki/New_Jersey_Pine_Barrens" target="_blank" class="navlinkDark">Pine
Barrens</a> every year are thanks to Old Red-eye.
</p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/BhnqtIr.jpg" alt="Silhouette of creature with glowing red eyes walking through the woods.">
<p class="articleCaption">Possible sighting of Old Red-eye</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="entityName">House-Sitters</h1>
</div>
<div class="articleDescription">
<p class="articleText">House-sitters are a variety of lingering spirit that is bound to a specific
abode,
usually one they used to inhabit or that they were tasked with taking care of. Often times they
are unaware of
their own death, and are just operating off of memories of their old responsibilities. <br>
Largely harmless,
these
spirits will follow whatever routine or standards they held in life, such as keeping a space
clean,
maintaining a collection of sentimental items, or even tending to guests. However, like most
spirits, they are
not to be taken lightly, as actions that go against a house-sitters goals can cause them to
label someone an
unwanted guest. <br> A house-sitter will take any effort to remove an unwanted guest, this can
depend on their
temperament in life, and usually starts polite but firm. If these initial warnings are ignored,
an
investigator risks being sent much more intense and possibly even dangerous messages. The best
way to deal
with these spectres is to follow their rules, which must be gleaned from context clues, based on
how the house
is maintained, and any information you have on its inhabitants from years past. If you respect
their dwelling,
you should be safe to explore without fear of repercussions, and may even find yourself a
temporary ally.
</p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/tPY7sIv.jpg" alt="Unnaturally long arm reaching down from the top of a set of basement stairs, reaching for a light switch. The basement lights are off and a light has been left on upstairs.">
<p class="articleCaption">A house-sitter, reaching down to turn off a light that has been left
on.</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<div class="articleBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="article">
<div class="subtitle">
<h1 class="entityName">Keepers</h1>
</div>
<div class="articleDescription">
<p class="articleText">Keepers are a variant of house-sitter, with the key distinction that their
goal in life
was to guard a location against intruders, or to prevent a specific oject from falling into the
wrong hands.
These spirits are much more territorial and violent than their homebody counterparts, and must
be regarded
with extreme caution. <br> Overall one should avoid a place that is being watched by a keeper
unless
absolutely necessary. However, in events where it is necessary to cross into their territory, it
is best to
study them for a while beforehand, to get an idea of their habits and routines. Once you have an
idea of where
they spend most of their time, and the areas they avoid, you'll have a much better idea of what
areas are safe
to traverse and when. <br> If your attempts at stealth are unsuccessful and you are spotted, run
immediately.
You will not get a polite warning from a keeper, and the price of whatever equipment you have to
leave behind
is note worth your own life.
</p>
<div class="imgcaption">
<img class="articleImage" src="https://i.imgur.com/EZ24vaY.jpg" alt="A tall, shadowy figure standing in a dark room. Its eyes glow with bright white light. Its limbs are longer than should be possible for a human.">
<p class="articleCaption">A keeper, catching sight of an intruder in its abode.</p>
</div>
</div>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="horizontal-ad" alt="horizontal ad" style="margin-top: 1vw;"></a>
<footer>
<a href="#header" class="navlink">back to top</a>
</footer>
</div>
<div class="page" id="contact" style="display:none;"><a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="horizontal-ad" alt="horizontal ad" style="margin-top: 2vw;"></a>
<div class="profileBox">
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
<div class="profile" id="darkdweller">
<div class="profileSpotlight">
<img class="profilePicture" src="https://i.imgur.com/zzBilE9.jpg">
<h4 class="username">D4RKDW3LL3R</h4>
<h6 class="title">Site admin</h6>
<p class="qoute">"Knowledge is our greatest defense against the lurking horrors of outer spheres."
</p>
</div>
<p class="bio">Unfortunately due to the nature of my work, I am considered a wanted man in many places,
both for
trespassing and destruction of property. As such I cannot reveal much personal information about
myself, but
what I can tell you is that I've been seeking arcane knowledge and proof of the paranormal longer
than you've
been alive. <br> However the process of finding this information is often time consuming and
dangerous, leading
it to
be a very insular practice, that does not encourage would-be ghost hunters to join our ranks. This
site is my
attempt to rectify this issue by compiling the information that I have procured from many dread
tomes and from
my own explorations into places most mortals fear to tread. With the technology available in this
new era, I
believe it would be possible for anyone to become a paranormal investigator with relative ease, as
long as they
have the knowledge, which I am more than happy to provide.</p>
</div>
<div class="adColumn">
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
<a href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')"><img src="" class="box-ad" alt="box ad"></a>
</div>
</div>
<footer>
<a href="#header" class="navlink">back to top</a>
</footer>
</div>
<div class="page" id="faq" style="display:none;">
<header>
<div class="faqHeaderdiv">
<img id="logo1" class="faqLogo" src="https://i.imgur.com/d13y25q.gif" alt="Spinning pentagram logo">
<img id="faqTitle" src="https://i.imgur.com/UMvjhwK.png" alt="Necronomi.com">
<img id="logo2" class="faqLogo" src="https://i.imgur.com/d13y25q.gif" alt="Spinning pentagram logo">
</div>
</header>
<div id="faqNavbar">
<a class="faqNavlink" href="javascript:void(0);" title="Go to Homepage" onclick="switchPage('home')">Homepage</a>
<a class="faqNavlink" href="javascript:void(0);" title="Go to Locales" onclick="switchPage('locales')">Locales</a>
<a class="faqNavlink" href="javascript:void(0);" title="Go to Entities" onclick="switchPage('entities')">Entities</a>
<a class="faqNavlink" href="javascript:void(0);" title="Go to contact Us" onclick="switchPage('contact')">Contact us</a>
<a class="faqNavlink" href="javascript:void(0);" title="Go to FAQ" onclick="switchPage('faq')">FAQ</a>
</div>
<div id="faqMain">
<h1 id="faqHeading">Frequently Asked Questions</h1>
<p id="faqDescription">
Confused about what this site is and what its for? Hopefully I can clear things up for you!
</p>
<div id="faqBoxes">
<button class="accordion">What actually is this site?</button>
<div class="panel">
<p>This is a creative writing project, done as part of a web design course I took part in during
2023. Its also
being done as part of a personal project of mine, which is a tabletop roleplaying game that this
will act as a
supplement to. The game is set in 90s, hence the intentionally hideous web design on most of the
pages.</p>
</div>
<button class="accordion">Is this real ghost hunting advice?</button>
<div class="panel">
<p>Nope, all the info on this site is purely fictional, and should not be taken as advice or
instruction for
anything. Though I might eventually include links to real ghost hunting sites that can provide
more practical
advice to those looking to participate in the practice themselves.
</p>
</div>
<button class="accordion">Who is D4RKDW3LL3R?</button>
<div class="panel">
<p>D4RKDW3LL3R is another of the fictional elements of this website. In terms of the lore, the site
was written
and hosted by him, making him the admin. Little is known about him as a person, beyond that he
was an expert
paranormal investigator that spent decades delving into hidden secrets of our world.</p>
<p>He believes that these
secrets should be more easily accessible to the common man, so jumped at the chance to compile
his findings
in the form of a webpage.</p>
</div>
<button class="accordion">Who are you?</button>
<div class="panel">
<p>My name is Kylie Crooker, an aspiring web developer from the eastern united states. I have a
passion for
fictional worlds and stories, especially those that involve things outside of the norm, such as
horror and
fantasy.</p>
<p>If you'd like to see other projects I've worked on, or learn more about me, links can be found
below
this FAQ.</p>
</div>
<button class="accordion">Is this site finished?</button>
<div class="panel">
<p>Almost certainly not, I had to finish it in a timely manner for the purposes of my web design
course, but
there are still quite a few things I want to implement.</p>
<p>This will likely be an ongoing project in my personal
time, however I'm unsure if I will keep this updated as part of my portfolio, or just include
this iteration
of the site.</p>
</div>
<button class="accordion">What inspired this site?</button>
<div class="panel">
<p>The web design of the 90s was definitely a major inspiration, and so was the Cthulhu Mythos.</p>
<p>I feel rather
bored at the lifeless design of most modern web pages, and find a certain level of life and
sincerity in the
garish design of ages past. So while its not technically the best in terms of design or
accessibility, I still
have a soft spot for the gif filled, bright, audio-playing websites of yesteryear.</p>
<p>The cthulhu mythos has always been an area of fascination for me, in spite of its author being a
vile person.
Something about the otherworldly monstrosities from beyond the stars, and locations more ancient
than time can
describe fills me with wonder and dread in equal measure.
</p>
</div>
<button class="accordion">Trans rights?</button>
<div class="panel">
<p>Trans rights, and trans wrongs >:)</p>
</div>
</div>
</div>
<div id="faqLinks">
<a href="https://github.com/kylieCrooker" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" class="linkIcon" alt="github link"></a>
<a href="mailto: kyliecrooker@hopeworks.com"><img src="https://upload.wikimedia.org/wikipedia/commons/5/50/TK_email_icon.svg" class="linkIcon" alt="email link"></a>
<a href="https://codepen.io/Kylie-Crooker" target="_blank"><img src="https://blog.codepen.io/wp-content/uploads/2014/03/codepen-logo.svg" class="linkIcon" alt="Codepen link"></a>
<a href="https://www.linkedin.com/in/kylie-crooker-91352a292/" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/8/81/LinkedIn_icon.svg" class="linkIcon" alt="Linkedin link"></a>
</div>
</div>
</body>html {
cursor: url("https://i.imgur.com/u8RzfmT.gif"), auto;
font-family: Georgia, serif;
}
#defaultBody {
background-image: url("https://i.imgur.com/8D09NBG.gif"),
url("https://i.imgur.com/58SKu2x.gif"),
url("https://i.imgur.com/fsF147c.gif");
background-position: left top, right top, left top;
background-repeat: repeat-y, repeat-y, repeat;
background-size: 14vw, 14vw, 15vw;
font-size: calc(12px + 0.4vw);
}
footer {
text-align: center;
margin-top: 2vw;
margin-bottom: 2vw;
}
.horizontal-ad {
width: 45vw;
height: 7vw;
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-ad {
width: 8vw;
height: 40vw;
display: block;
}
.box-ad {
width: 11vw;
height: 11vw;
display: block;
}
.adColumn {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 25vw;
gap: 2vw;
}
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");
ul {
border-style: dotted;
border-color: lime;
width: 40vw;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.listItem {
background-image: url("https://i.imgur.com/Qvbn76s.gif");
background-position: left center;
background-repeat: no-repeat;
background-size: 3vw;
list-style: none;
padding: 1.5vw 3.5vw;
}
.article {
display: flex;
flex-direction: column;
align-items: center;
gap: 1vw;
margin-top: 1vw;
width: 50vw;
}
.subtitle {
border-style: ridge;
border-color: saddlebrown;
border-width: 0.4vw;
background-image: url("https://i.imgur.com/f9YF0h0.jpg");
background-size: contain;
width: auto;
height: auto;
text-align: justify;
color: maroon;
overflow: auto;
text-align: center;
}
.subtitle h1 {
margin: 0.5vw;
font-size: calc(5px + 1vw);
font-family: "Permanent Marker", cursive;
}
.articleDescription {
border-style: ridge;
border-color: saddlebrown;
border-width: 0.4vw;
background-image: url("https://i.imgur.com/f9YF0h0.jpg");
background-size: contain;
width: 50vw;
display: flex;
justify-content: space-between;
gap: 1vw;
}
.articleText {
width: 60%;
overflow: auto;
margin-left: 1vw;
text-align: justify;
color: maroon;
}
.imgcaption {
text-align: center;
display: flex;
flex-direction: column;
margin-top: 1vw;
margin-left: 1vw;
margin-right: 1vw;
align-items: center;
width: 60%;
}
.articleImage {
width: 90%;
border-style: ridge;
border-color: saddlebrown;
border-width: 0.5vw;
margin-right: 1vw;
margin-left: 1vw;
}
.articleCaption {
width: 100%;
margin-right: 1vw;
margin-left: 1vw;
color: black;
}
.articleBox {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2vw;
}
#top-flex {
margin-top: calc(5px + 0.6vw);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(5px + 0.5vw);
}
#mid-top-flex {
display: flex;
flex-direction: column;
gap: calc(5px + 0.8vw);
}
#mid-flex {
margin-top: calc(5px + 0.6vw);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(5px + 0.5vw);
}
.dualbox {
display: flex;
flex-direction: column;
gap: calc(5px + 0.5vw);
}
.homeDescription {
border-style: ridge;
border-color: saddlebrown;
border-width: 0.4vw;
background-image: url("https://i.imgur.com/f9YF0h0.jpg");
background-size: contain;
width: 50vw;
height: 30vw;
color: maroon;
overflow: auto;
font-size: 2vw;
text-align: center;
}
.headerDiv {
display: flex;
flex-direction: row;
justify-content: space-between;
background-image: url("https://i.imgur.com/fsF147c.gif");
}
#title {
width: 50%;
max-width: 100%;
height: auto;
margin-top: auto;
margin-bottom: auto;
}
.logo {
padding: 1%;
width: 10%;
}
body {
margin: 0px;
}
#navbar {
background-image: url("https://i.imgur.com/3TB1Yul.png");
background-repeat: round;
background-size: contain;
padding-top: 1%;
padding-bottom: 1%;
width: auto;
display: flex;
justify-content: space-evenly;
font-size: calc(12px + 1vw);
overflow: auto;
white-space: nowrap;
gap: 1vw;
}
.divider {
min-width: 8px;
width: 1.5vw;
height: auto;
margin-top: auto;
margin-bottom: auto;
}
.navlink:link {
color: limegreen;
text-decoration: none;
}
.navlink:visited {
color: mediumseagreen;
text-decoration: none;
}
.navlink:hover {
color: greenyellow;
text-decoration: underline;
}
.navlink:active {
color: lime;
text-decoration: underline;
}
.navlinkDark:link {
color: red;
text-decoration: none;
}
.navlinkDark:visited {
color: red;
text-decoration: none;
}
.navlinkDark:hover {
color: #ce0101;
text-decoration: underline;
}
.navlinkDark:active {
color: #ff0000;
text-decoration: underline;
}
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Permanent+Marker&display=swap");
.faqHeaderdiv {
display: flex;
flex-direction: row;
justify-content: space-between;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/80/Backgorund.gif");
background-repeat: no-repeat;
background-size: cover;
}
#faqTitle {
width: 50%;
max-width: 100%;
height: auto;
margin-top: auto;
margin-bottom: auto;
}
.faqLogo {
padding: 1%;
width: 10%;
}
Body {
margin: 0px;
}
#faqNavbar {
background-color: black;
background-repeat: round;
background-size: contain;
padding-top: 1%;
padding-bottom: 1%;
width: auto;
display: flex;
justify-content: flex-start;
padding-left: 1.5vw;
font-size: calc(8px + 0.6vw);
overflow: auto;
white-space: nowrap;
gap: 3vw;
box-shadow: 0px 0.1vw 5px;
position: sticky;
top: 0;
font-family: "Libre Baskerville", serif;
}
.faqDivider {
min-width: 8px;
width: 1.5vw;
height: auto;
margin-top: auto;
margin-bottom: auto;
}
.faqNavlink:link {
color: darkgray;
text-decoration: none;
transition: color 0.5s;
}
.faqNavlink:visited {
color: gray;
text-decoration: none;
transition: color 0.5s;
}
.faqNavlink:hover {
color: lightgrey;
text-decoration: underline;
transition: color 0.5s;
}
.faqNavlink:active {
color: whitesmoke;
text-decoration: underline;
}
@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400;500;600&family=Libre+Baskerville&family=Permanent+Marker&family=Roboto&display=swap");
#faqBody {
background: linear-gradient(
0deg,
rgba(0, 0, 0, 1) 0%,
rgba(1, 38, 14, 1) 96%
);
background-repeat: repeat-x;
background-attachment: fixed;
}
#faqHeading {
font-family: "Roboto", sans-serif;
color: white;
font-size: 3vw;
}
#faqMain {
width: 70vw;
font-family: "Roboto", sans-serif;
margin-left: auto;
margin-right: auto;
}
#faqBoxes {
width: 50vw;
margin-left: auto;
margin-right: auto;
}
#faqDescription {
width: 40vw;
margin: 2vw;
margin-left: auto;
margin-right: auto;
font-size: 1vw;
padding: 1vw;
border-style: none;
border-radius: 15px;
background-color: #60bf89;
text-align: center;
}
#faqLinks {
width: 30%;
margin: 2vw;
margin-left: auto;
margin-right: auto;
padding: 1vw;
border-style: none;
border-radius: 15px;
background-color: #60bf89;
text-align: center;
display: flex;
align-items: center;
justify-content: space-around;
}
.accordion {
background-color: #03a64a;
cursor: pointer;
border: none;
width: 100%;
padding: 1vw;
outline: none;
text-align: left;
font-family: "Roboto", sans-serif;
transition: background-color 0.4s, color 0.4s;
border-radius: 15px 15px 15px 15px;
margin-bottom: 1vw;
font-size: 1vw;
color: white;
text-align: center;
}
.active {
border-radius: 15px 15px 0 0;
margin-bottom: 0;
}
.accordion:after {
content: "\2B9E";
float: left;
margin-right: 0.25vw;
color: black;
}
.active:after {
content: "\2B9F";
float: left;
margin-right: 0.25vw;
color: black;
}
.active,
.accordion:hover {
background-color: #05f26c;
color: black;
}
.panel {
background-color: #60bf89;
overflow: hidden;
padding: 0 1vw;
box-shadow: 0.05vw 0.1vw 0.2vw inset #01260e;
max-height: 0;
display: none;
transition: max-height 0.2s ease-in-out, border-radius 0.2s;
border-radius: 0 0 15px 15px;
font-family: "Roboto", sans-serif;
font-size: 1vw;
margin-bottom: 1vw;
}
.linkIcon {
width: 3vw;
}
.profile {
margin-top: 0vw;
background-color: aliceblue;
width: 40vw;
height: 20vw;
border-style: ridge;
border-color: lightgray;
border-radius: 2px;
border-width: calc(3px + 0.2vw);
display: flex;
justify-content: space-between;
}
.profileSpotlight {
width: 10vw;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 1vw;
margin-top: 1vw;
margin-bottom: 1vw;
}
.profilePicture {
border-style: ridge;
border-color: lightgray;
border-width: calc(2px + 0.1vw);
width: 10vw;
height: 10vw;
}
.username {
margin-top: 0.2vw;
margin-bottom: auto;
text-decoration: underline;
font-size: 1.2vw;
}
.title {
margin-top: 0.1vw;
margin-bottom: auto;
color: gray;
font-size: 1vw;
}
.qoute {
color: darkgray;
font-size: 1vw;
text-align: center;
margin-top: 0.5vw;
font-size: 1vw;
width: 110%;
}
.bio {
width: 28vw;
overflow: auto;
font-size: 0.95vw;
}
.profileBox {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2vw;
}
#faqDescription {
font-size: calc(8px + 0.2vw);
}
.accordion {
font-size: calc(8px + 0.2vw);
}
.panel {
font-size: calc(8px + 0.2vw);
}
function generateAd() {
let boxAd = document.querySelectorAll("div.loaded img.box-ad");
let longAd = document.querySelectorAll("div.loaded img.horizontal-ad");
let adLength = boxAd.length + longAd.length;
console.log(adLength);
console.log(boxAd);
console.log(longAd);
let boxSource = [
"https://i.imgur.com/D2amyrx.gif",
"https://i.imgur.com/6lwL89J.gif",
"https://i.imgur.com/3BVl25o.gif",
"https://i.imgur.com/G9rks66.gif",
"https://i.imgur.com/3iX998a.gif",
"https://i.imgur.com/d2vJnUK.gif",
"https://i.imgur.com/sFSqf1T.gif",
"https://i.imgur.com/AXivaJu.gif",
"https://i.imgur.com/XRxcIRR.gif",
"https://i.imgur.com/q0dQcMl.gif",
"https://i.imgur.com/22Znbql.gif",
"https://i.imgur.com/WAe9oS6.gif",
"https://i.imgur.com/OrJR4gu.gif",
"https://i.imgur.com/bdQGwxc.gif",
"https://i.imgur.com/lxTuMsK.gif",
"https://i.imgur.com/lu8g5wu.gif",
"https://i.imgur.com/riDBGKm.gif",
"https://i.imgur.com/opZyFIF.gif",
"https://i.imgur.com/LM3SPwK.gif",
"https://i.imgur.com/g4mZs0j.gif",
"https://i.imgur.com/3F7pF0j.gif",
"https://i.imgur.com/AtTQjSO.gif",
"https://i.imgur.com/a4Z18wH.gif",
"https://i.imgur.com/82RjrMs.gif",
"https://i.imgur.com/Liz4SdA.gif",
"https://i.imgur.com/D1sT4dZ.gif",
"https://i.imgur.com/jjLAZa8.gif"
];
let longSource = [
"https://i.imgur.com/P566Gjw.gif",
"https://i.imgur.com/flksq88.gif",
"https://i.imgur.com/1rNSKjn.gif",
"https://i.imgur.com/QooKTTE.gif",
"https://i.imgur.com/M0uNFOJ.gif",
"https://i.imgur.com/CdcqdwG.gif",
"https://i.imgur.com/vPlajyH.gif",
"https://i.imgur.com/vBCwEgT.gif",
"https://i.imgur.com/B5XXlDB.gif",
"https://i.imgur.com/7WNAfJB.gif",
"https://i.imgur.com/G8BN088.gif",
"https://i.imgur.com/uuAtWmG.gif",
"https://i.imgur.com/yfkpXJI.gif",
"https://i.imgur.com/dzsULyd.gif",
"https://i.imgur.com/KUNvaVx.gif",
"https://i.imgur.com/l1QSg0K.gif",
"https://i.imgur.com/fwLxJA7.gif",
"https://i.imgur.com/MY1imxM.gif",
"https://i.imgur.com/eEZA5bN.gif",
"https://i.imgur.com/v362I8X.gif",
"https://i.imgur.com/tRkqzWd.gif",
"https://i.imgur.com/PFsGelg.gif",
"https://i.imgur.com/7yUIBzu.gif",
"https://i.imgur.com/NUHtBie.gif",
"https://i.imgur.com/3ZsrZq2.gif",
"https://i.imgur.com/YIY1tRQ.gif",
"https://i.imgur.com/p56N0kt.gif",
"https://i.imgur.com/9wZCflT.gif",
"https://i.imgur.com/W7yJx50.gif",
"https://i.imgur.com/86CMwgz.gif",
"https://i.imgur.com/QIaweiQ.gif",
"https://i.imgur.com/gykT9Uq.gif",
"https://i.imgur.com/xEsTktn.gif",
"https://i.imgur.com/nbqKOqH.gif",
"https://i.imgur.com/Hiow6SJ.gif",
"https://i.imgur.com/ysaOze0.gif",
"https://i.imgur.com/kPxtL1O.gif",
"https://i.imgur.com/wRBxyFC.gif",
"https://i.imgur.com/Jo59DjU.gif",
"https://i.imgur.com/DlrwTFx.gif",
"https://i.imgur.com/Ui7XBm3.gif",
"https://i.imgur.com/S7bmN7M.gif",
"https://i.imgur.com/4gk0OL1.gif",
"https://i.imgur.com/MfxUnXF.gif",
"https://i.imgur.com/6UoPUEI.gif",
"https://i.imgur.com/i2ZorMn.gif",
"https://i.imgur.com/8bP72wj.gif",
"https://i.imgur.com/Yg3AIK3.gif",
"https://i.imgur.com/z4c7lQp.gif",
"https://i.imgur.com/MyGAKXh.gif",
"https://i.imgur.com/jbQbYqH.gif"
];
for (let i = 0; i < boxAd.length; i++) {
console.log("Current iteration of box ad generation: " + i);
let numberAd = Math.floor(Math.random() * boxSource.length);
boxAd[i].src = boxSource[numberAd];
boxSource.splice(numberAd, 1);
}
for (let i = 0; i < longAd.length; i++) {
console.log("Current iteration of horizontal ad generation: " + i);
let numberAd = Math.floor(Math.random() * longSource.length);
longAd[i].src = longSource[numberAd];
longSource.splice(numberAd, 1);
}
}
function switchPage(arg1) {
let allPages = document.querySelectorAll(".page");
let targetPage = document.getElementById(arg1);
let defaultHeader = document.getElementById("header");
let body = document.body;
allPages.forEach((element) => {
element.style.display = "none";
element.classList.remove("loaded");
});
targetPage.style.display = "block";
targetPage.classList.add("loaded");
generateAd();
if (arg1 == "faq") {
defaultHeader.style.display = "none";
body.id = "faqBody";
} else {
defaultHeader.style.display = "block";
body.id = "defaultBody";
}
}
function compileList() {
let h1 = document.querySelectorAll(".name");
let ul = document.getElementById("articleList");
console.log(h1);
for (let i = 0; i < h1.length; i++) {
h1[i].id = i;
let headerText = h1[i].textContent;
console.log(headerText);
let linkText = headerText;
let linkTarget = i;
let linkClass = "navlink";
let listObject = document.createElement("li");
let listClass = "listItem";
let linkItem = document.createElement("a");
let linkNode = document.createTextNode(linkText);
let unorderedList = document.getElementById("articleList");
linkItem.appendChild(linkNode);
linkItem.href = "#" + i;
linkItem.className = linkClass;
listObject.appendChild(linkItem);
listObject.className = listClass;
unorderedList.appendChild(listObject);
}
}
function compileEntityList() {
let h1 = document.querySelectorAll(".entityName");
let ul = document.getElementById("entityArticleList");
console.log(h1);
for (let i = 0; i < h1.length; i++) {
h1[i].id = "entity" + i;
let headerText = h1[i].textContent;
console.log(headerText);
let linkText = headerText;
let linkClass = "navlink";
let listObject = document.createElement("li");
let listClass = "listItem";
let linkItem = document.createElement("a");
let linkNode = document.createTextNode(linkText);
linkItem.appendChild(linkNode);
linkItem.href = "#entity" + i;
linkItem.className = linkClass;
listObject.appendChild(linkItem);
listObject.className = listClass;
ul.appendChild(listObject);
}
}
function compileLocalesList() {
let h1 = document.querySelectorAll(".localeName");
let ul = document.getElementById("localeArticleList");
console.log(h1);
for (let i = 0; i < h1.length; i++) {
h1[i].id = "locale" + i;
let headerText = h1[i].textContent;
console.log(headerText);
let linkText = headerText;
let linkClass = "navlink";
let listObject = document.createElement("li");
let listClass = "listItem";
let linkItem = document.createElement("a");
let linkNode = document.createTextNode(linkText);
linkItem.appendChild(linkNode);
linkItem.href = "#locale" + i;
linkItem.className = linkClass;
listObject.appendChild(linkItem);
listObject.className = listClass;
ul.appendChild(listObject);
}
}
function accordionMenu() {
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
panel.style.maxHeight = null;
} else {
panel.style.display = "block";
panel.style.maxHeight = panel.scrollHeight + "vw";
}
});
}
}
function fixSize() {
var panel = document.getElementsByClassName("panel");
for (let i = 0; i < panel.length; i++) {
panel[i].style.maxHeight = panel.scrollHeight + "vw";
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.