<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JFI Productions | Immersive Theatre & Experiential Horror Events</title>
<meta name="description" content="JFI Productions creates immersive theatre, haunted house productions, experiential horror events, brand partnerships, and interactive storytelling experiences.">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #080808;
--card: #111111;
--card-light: #171717;
--text: #ffffff;
--muted: #b5b5b5;
--accent: #e32626;
--accent-dark: #9d1010;
--border: #292929;
}
body {
font-family: Arial, Helvetica, sans-serif;
background:
radial-gradient(circle at top right, rgba(150, 0, 0, 0.18), transparent 35%),
radial-gradient(circle at bottom left, rgba(80, 0, 0, 0.12), transparent 30%),
var(--bg);
color: var(--text);
line-height: 1.7;
}
a {
color: inherit;
text-decoration: none;
}
.profile-wrapper {
width: min(1180px, 92%);
margin: 60px auto;
}
/* HERO */
.profile-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #151515, #090909);
border: 1px solid var(--border);
border-radius: 22px;
padding: 55px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 50px;
align-items: center;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}
.profile-hero::before {
content: "";
position: absolute;
width: 350px;
height: 350px;
background: rgba(227, 38, 38, 0.08);
border-radius: 50%;
filter: blur(20px);
right: -100px;
top: -150px;
}
.logo-box {
position: relative;
z-index: 1;
background: #000;
border: 1px solid #333;
border-radius: 18px;
min-height: 220px;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box img {
max-width: 100%;
max-height: 180px;
object-fit: contain;
}
.hero-content {
position: relative;
z-index: 1;
}
.eyebrow {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 13px;
font-weight: 700;
margin-bottom: 10px;
}
.hero-content h1 {
font-size: clamp(38px, 6vw, 68px);
line-height: 1.05;
margin-bottom: 18px;
}
.hero-content h1 span {
color: var(--accent);
}
.hero-content p {
color: var(--muted);
font-size: 18px;
max-width: 750px;
margin-bottom: 28px;
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 22px;
border-radius: 8px;
font-weight: 700;
transition: 0.3s ease;
border: 1px solid var(--border);
}
.btn-primary {
background: var(--accent);
border-color: var(--accent);
}
.btn-primary:hover {
background: var(--accent-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: #151515;
}
.btn-secondary:hover {
background: #222;
transform: translateY(-2px);
}
/* SERVICES */
.section {
margin-top: 55px;
}
.section-heading {
margin-bottom: 25px;
}
.section-heading h2 {
font-size: 34px;
margin-bottom: 8px;
}
.section-heading p {
color: var(--muted);
}
.service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.service-card {
background: linear-gradient(145deg, #151515, #0e0e0e);
border: 1px solid var(--border);
border-radius: 14px;
padding: 25px;
min-height: 145px;
transition: 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
border-color: var(--accent);
}
.service-number {
color: var(--accent);
font-size: 13px;
font-weight: bold;
margin-bottom: 18px;
}
.service-card h3 {
font-size: 18px;
line-height: 1.35;
}
/* ABOUT */
.about-section {
display: grid;
grid-template-columns: 0.75fr 1.25fr;
gap: 30px;
align-items: stretch;
}
.about-title {
background: linear-gradient(145deg, #1a1a1a, #0c0c0c);
border: 1px solid var(--border);
border-radius: 18px;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-title h2 {
font-size: 40px;
line-height: 1.1;
}
.about-title strong {
color: var(--accent);
}
.about-text {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 35px;
color: #d0d0d0;
font-size: 16px;
}
/* STATS */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px 20px;
text-align: center;
}
.stat-number {
color: var(--accent);
font-size: 36px;
font-weight: 800;
margin-bottom: 5px;
}
.stat-label {
color: var(--muted);
font-size: 14px;
}
/* PRODUCTIONS */
.production-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.production {
padding: 12px 18px;
border: 1px solid #333;
border-radius: 50px;
background: #121212;
color: #ddd;
transition: 0.3s;
}
.production:hover {
border-color: var(--accent);
color: white;
}
/* SOCIAL */
.social-section {
margin-top: 55px;
background: linear-gradient(135deg, #171717, #0b0b0b);
border: 1px solid var(--border);
border-radius: 18px;
padding: 35px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.social-section h2 {
margin-bottom: 5px;
}
.social-section p {
color: var(--muted);
}
.social-links {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.social-link {
padding: 11px 18px;
border: 1px solid #333;
border-radius: 8px;
background: #111;
transition: 0.3s;
font-weight: 600;
}
.social-link:hover {
background: var(--accent);
border-color: var(--accent);
}
/* FOOTER */
footer {
text-align: center;
color: #777;
padding: 35px 10px;
font-size: 14px;
}
footer a {
color: #aaa;
}
footer a:hover {
color: var(--accent);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.profile-hero {
grid-template-columns: 1fr;
padding: 35px;
}
.logo-box {
max-width: 350px;
width: 100%;
margin: auto;
}
.service-grid,
.stats {
grid-template-columns: repeat(2, 1fr);
}
.about-section {
grid-template-columns: 1fr;
}
.social-section {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 600px) {
.profile-wrapper {
width: 94%;
margin: 25px auto;
}
.profile-hero {
padding: 25px;
border-radius: 16px;
}
.hero-content h1 {
font-size: 42px;
}
.hero-content p {
font-size: 16px;
}
.service-grid,
.stats {
grid-template-columns: 1fr;
}
.about-title,
.about-text,
.social-section {
padding: 25px;
}
.section-heading h2 {
font-size: 28px;
}
.btn {
width: 100%;
}
.buttons {
width: 100%;
}
}
</style>
</head>
<body>
<main class="profile-wrapper">
<!-- HERO -->
<section class="profile-hero">
<div class="logo-box">
<img
src="https://images.squarespace-cdn.com/content/v1/60512970fd267a2bc15021df/1616009553340-EVN9DAB4P7BVLH1LUH1Y/Just-Fix-It-Productions-logo-web-invert-no-back.png?format=1500w"
alt="JFI Productions Logo"
>
</div>
<div class="hero-content">
<div class="eyebrow">Immersive Entertainment</div>
<h1>
JFI <span>Productions</span>
</h1>
<p>
Creating immersive theatre, experiential horror events, interactive
storytelling, and unforgettable brand experiences.
</p>
<div class="buttons">
<a
href="https://www.jfiproductions.com/"
target="_blank"
rel="noopener"
class="btn btn-primary"
>
Visit Website
</a>
<a
href="#about"
class="btn btn-secondary"
>
Explore Profile
</a>
</div>
</div>
</section>
<!-- SERVICES -->
<section class="section">
<div class="section-heading">
<h2>What JFI Productions Does</h2>
<p>Creative experiences designed to immerse, engage, and captivate audiences.</p>
</div>
<div class="service-grid">
<div class="service-card">
<div class="service-number">01</div>
<h3>Immersive Theatre</h3>
</div>
<div class="service-card">
<div class="service-number">02</div>
<h3>Haunted House Productions</h3>
</div>
<div class="service-card">
<div class="service-number">03</div>
<h3>Experiential Horror Events</h3>
</div>
<div class="service-card">
<div class="service-number">04</div>
<h3>Brand Partnerships & Interactive Storytelling</h3>
</div>
</div>
</section>
<!-- ABOUT -->
<section class="section about-section" id="about">
<div class="about-title">
<div class="eyebrow">About The Company</div>
<h2>
Where <strong>Horror</strong> Meets Theatre.
</h2>
</div>
<div class="about-text">
<p>
JFI Productions is the creative team behind Creep LA, an immersive
horror anthology experience that has become a Halloween staple in
Los Angeles since 2015.
</p>
<br>
<p>
Known for its spine-tingling, interactive storytelling, Creep LA has
reached an audience of over 40,000 attendees, earning rave reviews for
its groundbreaking approach to immersive horror.
</p>
<br>
<p>
Utilizing spaces ranging from 8,000 to 15,000 square feet, with casts
of up to 30 performers, JFI Productions combines theatrical design,
multi-sensory environments, and a collaborative creative team to
deliver fresh, unforgettable experiences each season.
</p>
<br>
<p>
Past productions include large-scale brand partnerships, such as a
collaboration with CBS Studios for <strong>"Creep LA x Ghosts"</strong>,
as well as original concepts like Hollow House, Inside, Haus, Awake,
and LORE, a partnership with Amazon Prime Video.
</p>
<br>
<p>
JFI Productions continues to push the boundaries of immersive
entertainment, blending horror, theatre, and audience participation
into one-of-a-kind seasonal events.
</p>
</div>
</section>
<!-- STATS -->
<section class="section">
<div class="section-heading">
<h2>JFI Productions By The Numbers</h2>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-number" data-target="2015">0</div>
<div class="stat-label">Creep LA Launch Year</div>
</div>
<div class="stat-card">
<div class="stat-number" data-target="40000" data-suffix="+">0</div>
<div class="stat-label">Attendees Reached</div>
</div>
<div class="stat-card">
<div class="stat-number" data-target="15000" data-suffix="+">0</div>
<div class="stat-label">Maximum Event Square Feet</div>
</div>
<div class="stat-card">
<div class="stat-number" data-target="30" data-suffix="+">0</div>
<div class="stat-label">Performers Per Production</div>
</div>
</div>
</section>
<!-- PRODUCTIONS -->
<section class="section">
<div class="section-heading">
<h2>Featured Productions & Collaborations</h2>
<p>Original concepts and major entertainment brand collaborations.</p>
</div>
<div class="production-list">
<span class="production">Creep LA</span>
<span class="production">Creep LA x Ghosts</span>
<span class="production">Hollow House</span>
<span class="production">Inside</span>
<span class="production">Haus</span>
<span class="production">Awake</span>
<span class="production">LORE</span>
<span class="production">CBS Studios</span>
<span class="production">Amazon Prime Video</span>
</div>
</section>
<!-- SOCIAL -->
<section class="social-section">
<div>
<h2>Connect With JFI Productions</h2>
<p>Explore JFI Productions online and discover its immersive experiences.</p>
</div>
<div class="social-links">
<a
href="https://www.jfiproductions.com/"
target="_blank"
rel="noopener"
class="social-link"
>
Website
</a>
<a
href="https://www.facebook.com/JFIProductions/"
target="_blank"
rel="noopener"
class="social-link"
>
Facebook
</a>
<a
href="https://www.instagram.com/jfiproductions/"
target="_blank"
rel="noopener"
class="social-link"
>
Instagram
</a>
</div>
</section>
</main>
<footer>
© <span id="year"></span> JFI Productions.
All rights reserved.
<br>
<a href="https://www.jfiproductions.com/" target="_blank" rel="noopener">
www.jfiproductions.com
</a>
</footer>
<script>
// Dynamic copyright year
document.getElementById("year").textContent = new Date().getFullYear();
// Animated statistics
const counters = document.querySelectorAll(".stat-number");
const animateCounter = (counter) => {
const target = Number(counter.dataset.target);
const suffix = counter.dataset.suffix || "";
let current = 0;
const duration = 1600;
const startTime = performance.now();
function updateCounter(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Smooth easing
const ease = 1 - Math.pow(1 - progress, 3);
current = Math.floor(ease * target);
counter.textContent = current.toLocaleString() + suffix;
if (progress < 1) {
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target.toLocaleString() + suffix;
}
}
requestAnimationFrame(updateCounter);
};
// Trigger counter animation when statistics enter viewport
const observer = new IntersectionObserver(
(entries, observerInstance) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
counters.forEach(counter => {
animateCounter(counter);
});
observerInstance.disconnect();
}
});
},
{
threshold: 0.35
}
);
const statsSection = document.querySelector(".stats");
if (statsSection) {
observer.observe(statsSection);
}
</script>
</body>
</html>
