190 lines
14 KiB
HTML
190 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Intrusive Thoughts</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link href="style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="overflow-auto d-flex flex-column dvh-100">
|
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
|
|
<img class="bi me-2" src="/assets/logo.svg" height="36">
|
|
<span class="fs-4">Intrusive Thoughts</span>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#header-navbar" aria-controls="header-navbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div id="header-navbar" class="collapse navbar-collapse justify-content-end">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/">Collective</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/people.html">People</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/contact.html">Contact</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://intrusive-thoughts.itch.io/"><span class="fa-brands fa-itch-io fa-xl" /></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://bsky.app/profile/intrusivegames.bsky.social"><span class="fa-brands fa-bluesky fa-xl"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="mt-5"></div>
|
|
<div id="gameDemoCarousel" class="mt-3 carousel slide" data-bs-ride="carousel" data-bs-interval="6000">
|
|
<div class="carousel-indicators">
|
|
<!-- <button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 1"></button> -->
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="The House Always Wins 2"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="1" aria-label="The House Always Wins 3"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="2" aria-label="Coyote Summer 1"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="3" aria-label="Coyote Summer 2"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="4" aria-label="The Great I Am 1"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="5" aria-label="The Great I Am 2"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="6" aria-label="GFOLF 1"></button>
|
|
<button type="button" data-bs-target="#gameDemoCarousel" data-bs-slide-to="7" aria-label="GFOLF 2"></button>
|
|
</div>
|
|
<div class="carousel-inner">
|
|
<!-- <div class="carousel-item active"> -->
|
|
<!-- <div class="carousel-fit"> -->
|
|
<!-- <div class="ratio ratio-16x9 d-block"> -->
|
|
<!-- <iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen anonymous></iframe> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
<!-- <div class="carousel-caption d-none d-md-block text-light bg-black mb-3"> -->
|
|
<!-- <em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
<div class="carousel-item active">
|
|
<div class="carousel-fit">
|
|
<img src="/images/thaw_1.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/thaw_2.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">The House Always Wins <a class="fa-brands fa-itch-io" href="https://duncangibbs.itch.io/thaw"></a></span> <span class="fs-6 text-secondary">by Duncan Gibbs</span></em>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/coyote_summer_1.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></span></em>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/coyote_summer_2.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">Coyote Summer <a class="fa-brands fa-itch-io" href="https://intrusive-thoughts.itch.io/coyote-summer"></a></span></em>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/the_great_i_am_1.jpg" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/the_great_i_am_2.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">The Great I Am <a class="fa-brands fa-itch-io" href="https://whitman-la-torra.itch.io/the-great-i-am"> </a></span> <span class="fs-6 text-secondary">by Whitman La Torra</span></em>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/gfolf_1.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item">
|
|
<div class="carousel-fit">
|
|
<img src="/images/gfolf_2.png" class="d-block">
|
|
</div>
|
|
<div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
|
|
<em><span class="h5">GFOLF: Combat Golf Action <a class="fa-brands fa-git-alt" href="https://git.intrusive.games/krampus/gfolf2"> </a></span> <span class="fs-6 text-secondary">by Rob Kelly</span></em>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="prev">
|
|
<i class="h1 fa-solid fa-chevron-left" aria-hidden="true"></i>
|
|
<!-- <span class="carousel-control-prev-icon" aria-hidden="true" /> -->
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#gameDemoCarousel" data-bs-slide="next">
|
|
<i class="h1 fa-solid fa-chevron-right" aria-hidden="true"></i>
|
|
<!-- <span class="carousel-control-next-icon" aria-hidden="true" /> -->
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
<main class="container mt-2 fs-4">
|
|
<div class="section pt-2 text-center">
|
|
<p>The</p>
|
|
<span class="h1 text-impact">INTRUSIVE THOUGHTS</span>
|
|
<span class="h1 text-impact">CREATIVE COLLECTIVE</span>
|
|
</div>
|
|
<div class="section px-5 text-center">
|
|
<p class="fading-container">
|
|
are artists, designers, developers, <span class="fading">creators, comrades, musicians, technicians, magicians, engineers, entrepreneurs, philosophers, scientists, doctors, poets, warriors, line cooks, private investigators, teachers, train conductors, renegades, fugitives, captains of ships, streetfighters, economists, browsers, mid-sized luxury sedans, animals, out-of-place artifacts, team leaders, billionaires, stalactites, small rodents, firefighters, losers, bowlers, shamans, frameworks, architects, camels, nudists, and so on, and so forth</span>
|
|
</p>
|
|
<p>
|
|
who assembled as a collectively-organized independent games studio at their secret headquarters in the city of Albuquerque, New Mexico in the summer of 2024 so that by combining their collective efforts they might produce for your enjoyment something
|
|
</p>
|
|
</div>
|
|
</main>
|
|
<div class="h2 text-impact flex-fill">interesting.</div>
|
|
<footer class="pt-5">
|
|
<div class="container text-center text-muted text-small">
|
|
<p>
|
|
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
|
|
</p>
|
|
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
|
|
<script>
|
|
// Update copyright year automatically
|
|
document.getElementById('year').textContent = new Date().getFullYear();
|
|
</script>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz " crossorigin="anonymous"></script>
|
|
<script>
|
|
document.querySelectorAll('.fading').forEach(el => {
|
|
const words = el.textContent.trim().split(/,/);
|
|
el.innerHTML = "";
|
|
for(let i = 0; i < words.length; i++) {
|
|
el.innerHTML += `<span style="opacity: ${1.0 - i / (words.length)}; font-size: calc(1.5rem * ${1.0 - i / (words.length + 16)});">${words[i]}, </span>`;
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|