Import current Christ IT static site
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
.old/
|
||||||
|
tmp/
|
||||||
|
Microsoft.PowerShell.Core/
|
||||||
|
gracepress/
|
||||||
|
.codex-*.tmp
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
# christit.com
|
||||||
|
|
||||||
|
Static Christ IT homepage.
|
||||||
|
|
||||||
|
This repo tracks the public site files for `https://christit.com`. Runtime or generated service directories are intentionally excluded, including the internal GracePress catalog under `/gracepress`.
|
||||||
|
|
||||||
|
## Workflow
|
||||||
|
|
||||||
|
- Use Git for normal rollback and history.
|
||||||
|
- Keep generated catalogs, service data, and private backend surfaces out of this repo.
|
||||||
|
- If a risky manual edit needs a temporary snapshot, place it in an external archive safe outside the repo after the matching Git commit is pushed.
|
||||||
|
|
||||||
|
## Current Direction
|
||||||
|
|
||||||
|
The homepage should stay small, fast, and static. It should introduce Christ IT as technical service for the kingdom of Jesus Christ and link to active public projects such as Technical Services Exchange, GracePress, the public Git platform, ChristP2P, and Jason Eugene Garrison's resume site.
|
||||||
+442
@@ -0,0 +1,442 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Digital NFC Business Cards | Christ IT</title>
|
||||||
|
<meta name="description" content="Upgrade your networking with custom NFC digital business cards from Christ IT in Clarksville, TN.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
|
||||||
|
padding: 12px 28px; font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.nav-links { display: flex; gap: 20px; align-items: center; }
|
||||||
|
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-body); }
|
||||||
|
.nav-link:hover { color: var(--primary); }
|
||||||
|
|
||||||
|
/* Theme Switch */
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- PLACEHOLDER STYLES --- */
|
||||||
|
.img-placeholder {
|
||||||
|
background-color: var(--bg-offset);
|
||||||
|
border: 2px dashed var(--text-light);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
color: var(--text-light);
|
||||||
|
min-height: 300px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.img-placeholder i { font-size: 3rem; margin-bottom: 15px; color: var(--primary); opacity: 0.5; }
|
||||||
|
.img-placeholder p { font-size: 0.9rem; margin-top: 10px; max-width: 80%; }
|
||||||
|
|
||||||
|
/* --- HERO --- */
|
||||||
|
.hero { padding: 80px 0; background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body)); }
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; }
|
||||||
|
.hero-content p { font-size: 1.2rem; color: var(--text-body); margin-bottom: 30px; }
|
||||||
|
|
||||||
|
/* --- PROBLEM VS SOLUTION --- */
|
||||||
|
.vs-section { padding: 100px 0; }
|
||||||
|
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
|
||||||
|
.vs-card {
|
||||||
|
background: var(--bg-card); border: 1px solid var(--border);
|
||||||
|
border-radius: 8px; padding: 40px; box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.vs-card.bad { border-top: 4px solid #ef4444; }
|
||||||
|
.vs-card.good { border-top: 4px solid var(--primary); transform: scale(1.02); box-shadow: var(--shadow-md); }
|
||||||
|
.vs-card h3 { font-size: 1.8rem; margin-bottom: 20px; }
|
||||||
|
|
||||||
|
/* --- HOW IT WORKS --- */
|
||||||
|
.how-section { background: var(--bg-offset); padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
|
||||||
|
.step-card { text-align: center; }
|
||||||
|
.step-number {
|
||||||
|
width: 40px; height: 40px; background: var(--primary); color: white;
|
||||||
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||||||
|
font-family: 'Oswald', sans-serif; font-size: 1.2rem; margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
.step-card h4 { font-size: 1.5rem; margin-bottom: 10px; }
|
||||||
|
|
||||||
|
/* --- FOOTER --- */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid, .vs-grid, .step-grid { grid-template-columns: 1fr; }
|
||||||
|
.hero-content { text-align: center; }
|
||||||
|
.vs-card.good { transform: scale(1); }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="index.html" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<a href="index.html" style="font-weight: 600; font-size: 0.9rem; color: var(--text-dark);">Back to Home</a>
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1>The Business Card Is <span class="text-primary">Dead.</span></h1>
|
||||||
|
<p>
|
||||||
|
Stop handing out paper cards that end up in the trash. Upgrade to a premium custom NFC card. Just tap it to a client's smartphone, and your contact info and website instantly drop onto their screen.
|
||||||
|
</p>
|
||||||
|
<a href="#order" class="btn">Build My Card <i class="fa-solid fa-arrow-right"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<i class="fa-solid fa-camera"></i>
|
||||||
|
<strong>HERO IMAGE PLACEHOLDER</strong>
|
||||||
|
<p>A close-up action shot. A hand holding a sleek, black plastic NFC card with a glossy logo, tapping it against the back of an iPhone. The iPhone screen should be glowing, showing a contact card dropping in.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="vs-section container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>The Problem vs. <span class="text-primary">The Solution</span></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vs-grid">
|
||||||
|
<div class="vs-card bad">
|
||||||
|
<h3>The Old Way</h3>
|
||||||
|
<div class="img-placeholder" style="min-height: 200px; margin-bottom: 20px; border-color: #fca5a5;">
|
||||||
|
<i class="fa-solid fa-box-open" style="color: #ef4444;"></i>
|
||||||
|
<strong>PROBLEM IMAGE</strong>
|
||||||
|
<p>A messy desk. A rubber-banded stack of outdated, bent paper business cards. Maybe someone crossing out an old phone number with a pen on one of them.</p>
|
||||||
|
</div>
|
||||||
|
<ul style="list-style: none; color: var(--text-body);">
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-xmark" style="color:#ef4444; margin-right:10px;"></i> You have to buy 500 at a time.</li>
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-xmark" style="color:#ef4444; margin-right:10px;"></i> If your phone number changes, they all go in the trash.</li>
|
||||||
|
<li><i class="fa-solid fa-xmark" style="color:#ef4444; margin-right:10px;"></i> Clients lose them in their truck or wallet.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vs-card good">
|
||||||
|
<h3 class="text-primary">The Smart Way</h3>
|
||||||
|
<div class="img-placeholder" style="min-height: 200px; margin-bottom: 20px; border-color: #93c5fd;">
|
||||||
|
<i class="fa-solid fa-id-card" style="color: var(--primary);"></i>
|
||||||
|
<strong>SOLUTION IMAGE</strong>
|
||||||
|
<p>A single, premium PVC card standing upright or resting on a very clean, modern surface. It looks expensive and indestructible.</p>
|
||||||
|
</div>
|
||||||
|
<ul style="list-style: none; color: var(--text-body);">
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check" style="color:var(--primary); margin-right:10px;"></i> You only need one physical card.</li>
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check" style="color:var(--primary); margin-right:10px;"></i> Update your info digitally anytime.</li>
|
||||||
|
<li><i class="fa-solid fa-check" style="color:var(--primary); margin-right:10px;"></i> Your info goes straight into their phone's address book.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="how-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>How It <span class="text-primary">Works</span></h2>
|
||||||
|
<p>No apps to download. No Bluetooth pairing. It works natively on modern Apple and Android phones.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step-grid">
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="img-placeholder" style="min-height: 250px; margin-bottom: 20px;">
|
||||||
|
<i class="fa-solid fa-wifi"></i>
|
||||||
|
<strong>STEP 1 IMAGE</strong>
|
||||||
|
<p>Graphic or photo illustrating the "Tap". The card hovering slightly over a phone, with stylized wireless waves connecting them.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h4>Tap the Card</h4>
|
||||||
|
<p style="color: var(--text-body);">Tap your custom card to the back of your client's smartphone. The built-in NFC chip instantly wakes up their screen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="img-placeholder" style="min-height: 250px; margin-bottom: 20px;">
|
||||||
|
<i class="fa-solid fa-mobile-screen"></i>
|
||||||
|
<strong>STEP 2 IMAGE</strong>
|
||||||
|
<p>Mockup of a mobile phone screen showing a clean, professional "One-Page Website" hub with a photo, bio, and service links.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h4>Profile Opens</h4>
|
||||||
|
<p style="color: var(--text-body);">Their browser automatically opens your Digital Profile, showing your headshot, bio, and important links.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="step-card">
|
||||||
|
<div class="img-placeholder" style="min-height: 250px; margin-bottom: 20px;">
|
||||||
|
<i class="fa-solid fa-address-book"></i>
|
||||||
|
<strong>STEP 3 IMAGE</strong>
|
||||||
|
<p>Close up mockup of an iPhone contact card being saved, highlighting the "Save to Contacts" button being pressed.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h4>Save Contact</h4>
|
||||||
|
<p style="color: var(--text-body);">With one button press, your name, number, email, and website are permanently saved in their phone's contacts.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="order" class="container" style="padding: 100px 0; text-align: center;">
|
||||||
|
<h2 style="font-size: 2.5rem; margin-bottom: 20px;">Ready to Upgrade?</h2>
|
||||||
|
<p style="font-size: 1.1rem; color: var(--text-body); max-width: 600px; margin: 0 auto 40px;">
|
||||||
|
I design the card, program the chip, and handle the web hosting. You just tap it. View my pricing packages on the main page to get started.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
|
||||||
|
<a href="index.html#services" class="btn btn-accent">View Consulting Services</a>
|
||||||
|
<button class="btn btn-outline secure-contact-btn" data-type="phone">Call for a Quote</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="index.html" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology and digital branding solutions in Clarksville, TN.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
if (currentTheme === 'dark') { root.setAttribute('data-theme', 'dark'); }
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const contactKey = 43;
|
||||||
|
const contactValues = {
|
||||||
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
||||||
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
||||||
|
};
|
||||||
|
|
||||||
|
function revealContact(type) {
|
||||||
|
const encoded = contactValues[type];
|
||||||
|
if (!encoded) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildContactLink(type) {
|
||||||
|
const value = revealContact(type);
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
link.rel = "nofollow";
|
||||||
|
link.textContent = value;
|
||||||
|
link.style.textDecoration = "none";
|
||||||
|
link.style.color = "inherit";
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
function revealInlineContact(el, type) {
|
||||||
|
const link = buildContactLink(type);
|
||||||
|
if (link) {
|
||||||
|
el.replaceWith(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const secureEmail = document.getElementById("secure-email");
|
||||||
|
const securePhone = document.getElementById("secure-phone");
|
||||||
|
|
||||||
|
if (secureEmail) {
|
||||||
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (securePhone) {
|
||||||
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const type = btn.dataset.type;
|
||||||
|
const value = revealContact(type);
|
||||||
|
|
||||||
|
if (type === "email") {
|
||||||
|
window.location.href = `mailto:${value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "phone") {
|
||||||
|
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,576 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Client Support | Christ IT Services</title>
|
||||||
|
<meta name="description" content="Secure client-support connection tools for active Christ IT consulting engagements.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--bg-offset);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-call {
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: white !important;
|
||||||
|
border: 2px solid #1f2937;
|
||||||
|
}
|
||||||
|
.btn-call:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- CONTENT --- */
|
||||||
|
.connect-hero { padding: 60px 0 40px; text-align: center; }
|
||||||
|
.connect-hero h1 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
.connect-hero p {
|
||||||
|
max-width: 700px; margin: 0 auto; font-size: 1.1rem;
|
||||||
|
background: var(--bg-highlight); padding: 20px; border-radius: 8px;
|
||||||
|
border-left: 4px solid var(--accent); text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connect-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connect-card {
|
||||||
|
background: var(--bg-card); border-radius: 12px; padding: 30px;
|
||||||
|
border: 1px solid var(--border); box-shadow: var(--shadow-sm);
|
||||||
|
transition: 0.3s; display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.connect-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
|
||||||
|
|
||||||
|
.card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
|
||||||
|
.card-header i { font-size: 2rem; color: var(--primary); }
|
||||||
|
.card-title h3 { font-size: 1.4rem; margin: 0; }
|
||||||
|
.card-title span { font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
|
||||||
|
.card-desc { font-size: 0.95rem; margin-bottom: 25px; flex-grow: 1; }
|
||||||
|
|
||||||
|
/* --- QR CODE --- */
|
||||||
|
.qr-wrapper {
|
||||||
|
text-align: center; margin-bottom: 20px;
|
||||||
|
padding: 10px; background: white; border-radius: 8px;
|
||||||
|
border: 1px solid var(--border); display: inline-block;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.qr-wrapper img { width: 120px; height: 120px; display: block; }
|
||||||
|
.qr-label { font-size: 0.75rem; color: #666; margin-top: 5px; font-weight: 500; }
|
||||||
|
|
||||||
|
/* --- HELP & UTILS --- */
|
||||||
|
.help-toggle {
|
||||||
|
text-align: center; margin-top: 20px; font-size: 0.9rem; font-weight: 600;
|
||||||
|
color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
|
||||||
|
}
|
||||||
|
.help-toggle:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.help-content {
|
||||||
|
display: none; background: var(--bg-offset); margin-top: 15px;
|
||||||
|
padding: 20px; border-radius: 8px; font-size: 0.9rem; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.help-content ol { padding-left: 20px; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
background: #1e293b; color: #e2e8f0; padding: 15px;
|
||||||
|
border-radius: 6px; font-family: monospace; font-size: 0.8rem;
|
||||||
|
margin-bottom: 10px; word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- INFO BLOCK --- */
|
||||||
|
.info-block {
|
||||||
|
background: var(--bg-offset);
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
|
||||||
|
.info-card {
|
||||||
|
background: var(--bg-card); padding: 40px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border-left: 5px solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER --- */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; margin-top: auto; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom {
|
||||||
|
margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155;
|
||||||
|
text-align: center; font-size: 0.9rem; color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="index.html" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="40" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<a href="index.html" style="font-weight: 600; font-size: 0.9rem; color: var(--text-dark);">Back to Home</a>
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container connect-hero">
|
||||||
|
<h1>Client <span class="text-primary">Support</span></h1>
|
||||||
|
<p>
|
||||||
|
You have been invited to open a secure support session as part of an active Christ IT engagement.
|
||||||
|
<strong>Only proceed if you are on the phone with Christ IT.</strong>
|
||||||
|
This software can allow me to view your screen and control your mouse with your permission.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container connect-grid">
|
||||||
|
|
||||||
|
<div class="connect-card" style="border-top: 4px solid var(--accent);">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-solid fa-headset"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Assistant</h3>
|
||||||
|
<span>Windows Support Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
Best for active consulting sessions. Does not install a permanent service.
|
||||||
|
</p>
|
||||||
|
<a href="#" id="win-assist" class="btn">Download Assistant</a>
|
||||||
|
|
||||||
|
<div class="help-toggle" onclick="toggleHelp('help-tray')">
|
||||||
|
<i class="fa-solid fa-circle-question"></i> "I Don't See It?"
|
||||||
|
</div>
|
||||||
|
<div id="help-tray" class="help-content">
|
||||||
|
<p>The Assistant runs in the <strong>System Tray</strong> (bottom right, near the clock).</p>
|
||||||
|
<ol>
|
||||||
|
<li>Click the <strong>Up Arrow (^)</strong> to expand your icons.</li>
|
||||||
|
<li>Look for a <strong>Gray Server Icon</strong> with a tiny <strong>Gold Lock</strong>.</li>
|
||||||
|
<li>Right-click that icon if you need to close the connection manually.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Windows Agent</h3>
|
||||||
|
<span>Unattended Access</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
Installs a background service for ongoing management. Best for servers.
|
||||||
|
</p>
|
||||||
|
<a href="#" id="win-64" class="btn btn-outline" style="margin-bottom:10px;">Download 64-bit</a>
|
||||||
|
<div style="display:flex; gap:10px;">
|
||||||
|
<a href="#" id="win-32" class="btn btn-outline" style="font-size: 0.8rem; padding: 8px;">32-bit</a>
|
||||||
|
<a href="#" id="win-arm" class="btn btn-outline" style="font-size: 0.8rem; padding: 8px;">ARM64</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="help-toggle" onclick="toggleHelp('help-smartscreen')">
|
||||||
|
<i class="fa-solid fa-circle-question"></i> Blocked by SmartScreen?
|
||||||
|
</div>
|
||||||
|
<div id="help-smartscreen" class="help-content">
|
||||||
|
<p>Windows may try to protect you because this is a custom-built tool. Follow these steps to allow it:</p>
|
||||||
|
<ol>
|
||||||
|
<li>When the blue window appears, click the <strong>"More Info"</strong> text link.</li>
|
||||||
|
<li>A new button will appear at the bottom. Click <strong>"Run Anyway"</strong>.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-apple"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>macOS</h3>
|
||||||
|
<span>Apple Support</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
Select your Mac processor type below.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="#" id="mac-apple" class="btn btn-outline" style="margin-bottom:10px;">Apple Silicon (M1/M2/M3)</a>
|
||||||
|
<a href="#" id="mac-intel" class="btn btn-outline" style="font-size: 0.85rem; padding: 8px;">Intel Mac (Older)</a>
|
||||||
|
|
||||||
|
<div class="help-toggle" onclick="toggleHelp('help-mac')">
|
||||||
|
<i class="fa-solid fa-circle-question"></i> "Unidentified Developer"?
|
||||||
|
</div>
|
||||||
|
<div id="help-mac" class="help-content">
|
||||||
|
<p>To bypass the security warning:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Open your <strong>Downloads</strong> folder.</li>
|
||||||
|
<li><strong>Right-Click</strong> (or Control-Click) the installer file.</li>
|
||||||
|
<li>Select <strong>Open</strong> from the menu.</li>
|
||||||
|
<li>Click <strong>Open</strong> in the warning box.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-linux"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Linux / BSD</h3>
|
||||||
|
<span>Terminal Script</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">Paste this command into your terminal (requires sudo/root).</p>
|
||||||
|
<div class="code-box" id="linux-install">Loading...</div>
|
||||||
|
<button class="btn btn-outline" onclick="copyLinux()">Copy Command</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-android"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Android</h3>
|
||||||
|
<span>Mobile Support</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="qr-wrapper">
|
||||||
|
<img id="android-qr" src="" alt="Scan for Android App">
|
||||||
|
<div class="qr-label">Scan for Play Store</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="card-desc">
|
||||||
|
Search for "MeshCentral Agent" on the Play Store.
|
||||||
|
</p>
|
||||||
|
<a href="https://play.google.com/store/search?q=meshcentral+agent&c=apps" target="_blank" class="btn btn-outline">
|
||||||
|
<i class="fa-brands fa-google-play"></i> Open Play Store
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="info-block">
|
||||||
|
<div class="container info-grid">
|
||||||
|
|
||||||
|
<div class="info-card">
|
||||||
|
<h3 style="margin-bottom:15px; font-size: 1.8rem;">Before We Connect</h3>
|
||||||
|
<p style="margin-bottom:20px; font-size:1.1rem; line-height:1.6;">
|
||||||
|
Please ensure you have spoken with Jason directly before downloading these tools.
|
||||||
|
Unsolicited connection requests will be rejected for security.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; padding: 0;">
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>Close Personal Files:</strong> Please close any sensitive banking or personal documents.</li>
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>Stay Online:</strong> Do not close the laptop lid or disconnect from Wi-Fi.</li>
|
||||||
|
<li><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>I Am Here:</strong> You will be able to see my mouse moving. You can take back control at any time by moving your mouse.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<h2 style="font-size: 2.5rem; margin-bottom: 10px;">Active Clients</h2>
|
||||||
|
<div style="font-size: 4rem; font-weight: 700; color: var(--primary); line-height: 1;"><i class="fa-solid fa-lock"></i></div>
|
||||||
|
<div style="font-size: 1.2rem; margin-bottom: 25px; color: var(--text-body);">Use By Request Only</div>
|
||||||
|
|
||||||
|
<p style="max-width: 400px; margin: 0 auto 30px; color: var(--text-body);">
|
||||||
|
This page is for scheduled support during consulting work, assessment follow-up, or approved client troubleshooting.
|
||||||
|
If you are not already working with Christ IT, please call first.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="btn btn-call secure-contact-btn" data-type="phone" style="max-width: 300px; margin: 0 auto; background: var(--text-dark); color:white; border:none;">
|
||||||
|
<i class="fa-solid fa-phone"></i> Call Christ IT
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="index.html" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology solutions to Clarksville and the region from Nashville to Hopkinsville.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Services. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') { root.setAttribute('data-theme', 'dark'); }
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const contactKey = 43;
|
||||||
|
const contactValues = {
|
||||||
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
||||||
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
||||||
|
};
|
||||||
|
|
||||||
|
function revealContact(type) {
|
||||||
|
const encoded = contactValues[type];
|
||||||
|
if (!encoded) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildContactLink(type) {
|
||||||
|
const value = revealContact(type);
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
link.rel = "nofollow";
|
||||||
|
link.textContent = value;
|
||||||
|
link.style.textDecoration = "none";
|
||||||
|
link.style.color = "inherit";
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
function revealInlineContact(el, type) {
|
||||||
|
const link = buildContactLink(type);
|
||||||
|
if (link) {
|
||||||
|
el.replaceWith(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const secureEmail = document.getElementById("secure-email");
|
||||||
|
const securePhone = document.getElementById("secure-phone");
|
||||||
|
|
||||||
|
if (secureEmail) {
|
||||||
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (securePhone) {
|
||||||
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const type = btn.dataset.type;
|
||||||
|
const value = revealContact(type);
|
||||||
|
|
||||||
|
if (type === "email") {
|
||||||
|
window.location.href = `mailto:${value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "phone") {
|
||||||
|
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- MESH CENTRAL LOGIC ---
|
||||||
|
const INVITE_CODE = "gU@QURzRvnwBSFv5DHTn1CdrmzdaBRSWWAutgm1ospy4EkhM65cnf3nrmuIqigw5Z51BJj75H0Sd1eD1jIz3janAXc2XMk05nGoR2rWp4ExQaBLHDicWtoledouNFm6BEehVvISE2UOFChHNbpC8elD3D3RU53lGvKYmiv5bHSjOPriJL4U4WfQarXrfmflwD$jJi90=";
|
||||||
|
const BASE_URL = "https://mesh.christit.com";
|
||||||
|
|
||||||
|
function buildUrl(id) {
|
||||||
|
return `${BASE_URL}/meshagents?id=${id}&c=${INVITE_CODE}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply Links
|
||||||
|
document.getElementById('win-assist').href = buildUrl(10006) + "&ac=1";
|
||||||
|
document.getElementById('win-64').href = buildUrl(4);
|
||||||
|
document.getElementById('win-32').href = buildUrl(3);
|
||||||
|
document.getElementById('win-arm').href = buildUrl(43);
|
||||||
|
|
||||||
|
// MacOS Links (Separated)
|
||||||
|
// ID 29 = Apple Silicon (ARM64) - Standard for Mesh
|
||||||
|
// ID 5 = Intel (Universal/Older MPKG)
|
||||||
|
document.getElementById('mac-apple').href = buildUrl(29);
|
||||||
|
document.getElementById('mac-intel').href = buildUrl(5);
|
||||||
|
|
||||||
|
// Android Play Store Search (Static)
|
||||||
|
const playStoreUrl = "https://play.google.com/store/search?q=meshcentral+agent&c=apps";
|
||||||
|
|
||||||
|
// Generate QR Code for Play Store Search URL
|
||||||
|
const qrImg = document.getElementById('android-qr');
|
||||||
|
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(playStoreUrl)}`;
|
||||||
|
|
||||||
|
// Linux Logic
|
||||||
|
const linuxInst = `(wget "${BASE_URL}/meshagents?script=1&c=${INVITE_CODE}" --no-check-certificate -O ./meshinstall.sh || wget "${BASE_URL}/meshagents?script=1&c=${INVITE_CODE}" --no-proxy --no-check-certificate -O ./meshinstall.sh) && chmod 755 ./meshinstall.sh && sudo -E ./meshinstall.sh`;
|
||||||
|
document.getElementById('linux-install').innerText = linuxInst;
|
||||||
|
|
||||||
|
// UI Functions
|
||||||
|
function toggleHelp(id) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el.style.display = (el.style.display === 'block') ? 'none' : 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyLinux() {
|
||||||
|
navigator.clipboard.writeText(linuxInst).then(() => {
|
||||||
|
alert("Command copied!");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,473 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Connect | Christ IT Connections</title>
|
||||||
|
<meta name="description" content="Secure Remote Support Connection for Christ IT Clients.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES (MATCHING MAIN SITE) --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--bg-offset);
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- HERO & GRID --- */
|
||||||
|
.connect-hero { padding: 60px 0 40px; text-align: center; }
|
||||||
|
.connect-hero h1 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
.connect-hero p {
|
||||||
|
max-width: 700px; margin: 0 auto; font-size: 1.1rem;
|
||||||
|
background: var(--bg-highlight); padding: 20px; border-radius: 8px;
|
||||||
|
border-left: 4px solid var(--accent); text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connect-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connect-card {
|
||||||
|
background: var(--bg-card); border-radius: 12px; padding: 30px;
|
||||||
|
border: 1px solid var(--border); box-shadow: var(--shadow-sm);
|
||||||
|
transition: 0.3s; display: flex; flex-direction: column;
|
||||||
|
}
|
||||||
|
.connect-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md); }
|
||||||
|
|
||||||
|
.card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
|
||||||
|
.card-header i { font-size: 2rem; color: var(--primary); }
|
||||||
|
.card-title h3 { font-size: 1.4rem; margin: 0; }
|
||||||
|
.card-title span { font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
|
||||||
|
.card-desc { font-size: 0.95rem; margin-bottom: 25px; flex-grow: 1; }
|
||||||
|
|
||||||
|
/* --- DETAILED HELP SECTIONS --- */
|
||||||
|
.help-toggle {
|
||||||
|
text-align: center; margin-top: 20px; font-size: 0.9rem; font-weight: 600;
|
||||||
|
color: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
|
||||||
|
}
|
||||||
|
.help-toggle:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.help-content {
|
||||||
|
display: none; background: var(--bg-offset); margin-top: 15px;
|
||||||
|
padding: 20px; border-radius: 8px; font-size: 0.9rem; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.help-content ol { padding-left: 20px; margin-bottom: 15px; }
|
||||||
|
.help-content li { margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.help-diagram {
|
||||||
|
background: #fff; padding: 10px; border: 1px solid #ddd;
|
||||||
|
text-align: center; margin: 10px 0; border-radius: 4px;
|
||||||
|
}
|
||||||
|
.help-diagram img { max-width: 100%; height: auto; }
|
||||||
|
.help-caption { font-size: 0.8rem; color: #666; margin-top: 5px; font-style: italic; }
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
background: #1e293b; color: #e2e8f0; padding: 15px;
|
||||||
|
border-radius: 6px; font-family: monospace; font-size: 0.8rem;
|
||||||
|
margin-bottom: 10px; word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- INFO BLOCK (Pricing/Expectations) --- */
|
||||||
|
.info-block {
|
||||||
|
background: var(--bg-offset);
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
|
||||||
|
.info-card {
|
||||||
|
background: var(--bg-card); padding: 40px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border-left: 5px solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER (MATCHING MAIN SITE) --- */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; margin-top: auto; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom {
|
||||||
|
margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155;
|
||||||
|
text-align: center; font-size: 0.9rem; color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="index.html" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="40" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<a href="index.html" style="font-weight: 600; font-size: 0.9rem; color: var(--text-dark);">Back to Home</a>
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container connect-hero">
|
||||||
|
<h1>Secure <span class="text-primary">Connection</span></h1>
|
||||||
|
<p>
|
||||||
|
You have been invited to install a remote support agent.
|
||||||
|
<strong>Only proceed if you are on the phone with Christ IT.</strong>
|
||||||
|
This software allows me to view your screen and control your mouse to resolve technical issues.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container connect-grid">
|
||||||
|
|
||||||
|
<div class="connect-card" style="border-top: 4px solid var(--accent);">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-solid fa-headset"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Assistant</h3>
|
||||||
|
<span>Windows Support Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
The best option for one-time help. It does not install a permanent service. It only connects while the app is open.
|
||||||
|
</p>
|
||||||
|
<a href="#" id="win-assist" class="btn">Download Assistant</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Windows Agent</h3>
|
||||||
|
<span>Unattended Access</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
Installs a background service for ongoing management and updates. Best for servers or contract clients.
|
||||||
|
</p>
|
||||||
|
<a href="#" id="win-64" class="btn btn-outline" style="margin-bottom:10px;">Download 64-bit</a>
|
||||||
|
<div style="display:flex; gap:10px;">
|
||||||
|
<a href="#" id="win-32" class="btn btn-outline" style="font-size: 0.8rem; padding: 8px;">32-bit</a>
|
||||||
|
<a href="#" id="win-arm" class="btn btn-outline" style="font-size: 0.8rem; padding: 8px;">ARM64</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="help-toggle" onclick="toggleHelp('help-smartscreen')">
|
||||||
|
<i class="fa-solid fa-circle-question"></i> Blocked by SmartScreen?
|
||||||
|
</div>
|
||||||
|
<div id="help-smartscreen" class="help-content">
|
||||||
|
<p>Windows may try to protect you because this is a custom-built tool. Follow these steps to allow it:</p>
|
||||||
|
<ol>
|
||||||
|
<li>When the blue window appears, click the <strong>"More Info"</strong> text link.</li>
|
||||||
|
|
||||||
|
<li>A new button will appear at the bottom. Click <strong>"Run Anyway"</strong>.</li>
|
||||||
|
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-apple"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>macOS</h3>
|
||||||
|
<span>Universal Installer</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">
|
||||||
|
Compatible with Intel and Apple Silicon (M1/M2/M3) Macs.
|
||||||
|
</p>
|
||||||
|
<a href="#" id="mac-univ" class="btn btn-outline">Download Installer</a>
|
||||||
|
|
||||||
|
<div class="help-toggle" onclick="toggleHelp('help-mac')">
|
||||||
|
<i class="fa-solid fa-circle-question"></i> "Unidentified Developer"?
|
||||||
|
</div>
|
||||||
|
<div id="help-mac" class="help-content">
|
||||||
|
<p>Apple blocks apps that aren't from the App Store by default. To bypass:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Locate the downloaded file in your <strong>Downloads</strong> folder.</li>
|
||||||
|
<li><strong>Right-Click</strong> (or Control-Click) the file icon.</li>
|
||||||
|
<li>Select <strong>Open</strong> from the menu.</li>
|
||||||
|
<li>In the pop-up warning, click <strong>Open</strong> again to confirm.</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="connect-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<i class="fa-brands fa-linux"></i>
|
||||||
|
<div class="card-title">
|
||||||
|
<h3>Linux / BSD</h3>
|
||||||
|
<span>Terminal Script</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="card-desc">Paste this command into your terminal (requires sudo/root).</p>
|
||||||
|
<div class="code-box" id="linux-install">Loading...</div>
|
||||||
|
<button class="btn btn-outline" onclick="copyLinux()">Copy Command</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="info-block">
|
||||||
|
<div class="container info-grid">
|
||||||
|
|
||||||
|
<div class="info-card">
|
||||||
|
<h3 style="margin-bottom:15px; font-size: 1.8rem;">Before We Connect</h3>
|
||||||
|
<p style="margin-bottom:20px; font-size:1.1rem; line-height:1.6;">
|
||||||
|
Please ensure you have spoken with Jason directly before downloading these tools.
|
||||||
|
Unsolicited connection requests will be rejected for security.
|
||||||
|
</p>
|
||||||
|
<ul style="list-style: none; padding: 0;">
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>Close Personal Files:</strong> Please close any sensitive banking or personal documents.</li>
|
||||||
|
<li style="margin-bottom:10px;"><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>Stay Online:</strong> Do not close the laptop lid or disconnect from Wi-Fi.</li>
|
||||||
|
<li><i class="fa-solid fa-check text-accent" style="margin-right:10px;"></i> <strong>I Am Here:</strong> You will be able to see my mouse moving. You can take back control at any time by moving your mouse.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<h2 style="font-size: 2.5rem; margin-bottom: 10px;">Simple Pricing</h2>
|
||||||
|
<div style="font-size: 4rem; font-weight: 700; color: var(--primary); line-height: 1;">$150</div>
|
||||||
|
<div style="font-size: 1.2rem; margin-bottom: 25px; color: var(--text-body);">Flat Rate Per Remote Session</div>
|
||||||
|
|
||||||
|
<p style="max-width: 400px; margin: 0 auto 30px; color: var(--text-body);">
|
||||||
|
Includes full diagnostics, virus removal, speed optimization, and software repair.
|
||||||
|
<strong>"Whether it takes 5 minutes, 5 hours, or 5 days."</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="tel:2708898272" class="btn btn-call" style="max-width: 300px; margin: 0 auto; background: var(--text-dark); color:white; border:none;">
|
||||||
|
<i class="fa-solid fa-phone"></i> Call (270) 889-8272
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="index.html" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology solutions to Clarksville and the region from Nashville to Hopkinsville.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> jason@christit.com</p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <a href="tel:2708898272" style="text-decoration:none; color:inherit;">(270) 889-8272</a></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Connections. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') { root.setAttribute('data-theme', 'dark'); }
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- MESH CENTRAL LOGIC ---
|
||||||
|
const BASE_URL = "https://mesh.christit.com";
|
||||||
|
const MESH_ID = "bh6wZtSrbmuRK0aCLMszdnuXxNmFKkx2T8YtfXWG4PdgHQJj86eij4yCzzWvE@WC6yr0WeZS8q496aFlQxj4zaeeltbchtF9T@8UtLukIpUqV39W8ima8Jsw@F4hztGAEDAvVimpgXr8GFUpw@trsXbxH0NdSg==";
|
||||||
|
|
||||||
|
function parseUriArgs() {
|
||||||
|
var args = {};
|
||||||
|
var query = window.location.search.substring(1);
|
||||||
|
var vars = query.split("&");
|
||||||
|
for (var i = 0; i < vars.length; i++) {
|
||||||
|
var pair = vars[i].split("=");
|
||||||
|
if (typeof args[pair[0]] === "undefined") {
|
||||||
|
args[pair[0]] = decodeURIComponent(pair[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return args;
|
||||||
|
}
|
||||||
|
|
||||||
|
var urlargs = parseUriArgs();
|
||||||
|
var keyStr = (urlargs.key) ? ('&key=' + urlargs.key) : "";
|
||||||
|
|
||||||
|
function buildUrl(id, flags, extra) {
|
||||||
|
return `${BASE_URL}/meshagents?id=${id}&meshid=${MESH_ID}&installflags=${flags||0}${keyStr}${extra||''}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply Links
|
||||||
|
document.getElementById('win-assist').href = buildUrl(10006, 0, '&ac=0');
|
||||||
|
document.getElementById('win-64').href = buildUrl(4);
|
||||||
|
document.getElementById('win-32').href = buildUrl(3);
|
||||||
|
document.getElementById('win-arm').href = buildUrl(43);
|
||||||
|
document.getElementById('mac-univ').href = `${BASE_URL}/meshosxagent?id=10005&meshid=${MESH_ID}${keyStr}`;
|
||||||
|
|
||||||
|
// Linux Logic
|
||||||
|
const meshid_safe = MESH_ID;
|
||||||
|
const linuxInst = `(wget "${BASE_URL}/meshagents?script=1${keyStr}" --no-check-certificate -O ./meshinstall.sh || wget "${BASE_URL}/meshagents?script=1${keyStr}" --no-proxy --no-check-certificate -O ./meshinstall.sh) && chmod 755 ./meshinstall.sh && sudo -E ./meshinstall.sh ${BASE_URL} '${meshid_safe}'`;
|
||||||
|
document.getElementById('linux-install').innerText = linuxInst;
|
||||||
|
|
||||||
|
// UI Functions
|
||||||
|
function toggleHelp(id) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el.style.display = (el.style.display === 'block') ? 'none' : 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyLinux() {
|
||||||
|
navigator.clipboard.writeText(linuxInst).then(() => {
|
||||||
|
alert("Command copied!");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+742
@@ -0,0 +1,742 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Christ IT Services | Technology Projects for Ministry</title>
|
||||||
|
<meta name="description" content="Custom technology project help for churches, ministries, and outreach organizations that need practical tools built with stewardship and purpose.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230f172a'/%3E%3Crect x='15' y='31' width='10' height='22' rx='4' fill='%23f8fafc'/%3E%3Ccircle cx='20' cy='21' r='6' fill='%23e67e22'/%3E%3Crect x='39' y='12' width='10' height='42' rx='4' fill='%230056b3'/%3E%3Crect x='29' y='25' width='28' height='9' rx='4' fill='%230056b3'/%3E%3Crect x='42' y='14' width='4' height='38' rx='2' fill='%233b82f6' opacity='.35'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- 2. BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent { background-color: var(--accent); color: white; }
|
||||||
|
.btn-accent:hover { background-color: #d35400; color: white !important; }
|
||||||
|
|
||||||
|
.btn-call {
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: white !important;
|
||||||
|
border: 2px solid #1f2937;
|
||||||
|
}
|
||||||
|
.btn-call:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-windows {
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
width: 100%; padding: 15px;
|
||||||
|
background-color: #0078D7; color: white;
|
||||||
|
font-weight: 600; border-radius: 4px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.btn-windows:hover { background-color: #005a9e; color: white; }
|
||||||
|
|
||||||
|
/* --- 3. NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 20px; align-items: center; }
|
||||||
|
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-body); }
|
||||||
|
.nav-link:hover { color: var(--primary); }
|
||||||
|
|
||||||
|
.brand-logo svg {
|
||||||
|
display: block;
|
||||||
|
width: 214px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Switch */
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- 4. HERO SECTION --- */
|
||||||
|
.hero {
|
||||||
|
padding: 80px 0 140px;
|
||||||
|
background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body));
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: ""; position: absolute; inset: 0;
|
||||||
|
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||||
|
background-size: 30px 30px; opacity: 0.5; pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 4rem; margin-bottom: 20px; }
|
||||||
|
.hero-content p {
|
||||||
|
font-size: 1.25rem; color: var(--text-body); margin-bottom: 0; max-width: 90%;
|
||||||
|
border-left: 4px solid var(--accent); padding-left: 20px;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
position: relative; width: 100%; aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%; background: var(--bg-card);
|
||||||
|
border: 8px solid var(--bg-body); box-shadow: var(--shadow-md); overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* --- 5. FLOATING ICON BAR --- */
|
||||||
|
.icon-bar-wrapper { margin-top: -70px; position: relative; z-index: 10; }
|
||||||
|
.icon-bar {
|
||||||
|
background: var(--bg-card); border-radius: 8px;
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.icon-box {
|
||||||
|
padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
|
||||||
|
border-right: 1px solid var(--border); transition: 0.2s;
|
||||||
|
}
|
||||||
|
.icon-box:last-child { border-right: none; }
|
||||||
|
.icon-box:hover { background: var(--bg-offset); }
|
||||||
|
.icon-box i { font-size: 2rem; color: var(--primary); margin-bottom: 5px; }
|
||||||
|
.icon-box h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-dark); }
|
||||||
|
.icon-box span { font-size: 0.9rem; color: var(--text-body); }
|
||||||
|
|
||||||
|
.king-section {
|
||||||
|
margin-top: 80px;
|
||||||
|
padding: 86px 0;
|
||||||
|
color: white;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(0, 61, 107, 0.9)),
|
||||||
|
radial-gradient(circle at top right, rgba(230, 126, 34, 0.28), transparent 34%);
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.king-content {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.king-mark {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(230, 126, 34, 0.18);
|
||||||
|
border: 1px solid rgba(230, 126, 34, 0.55);
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 1.35rem;
|
||||||
|
}
|
||||||
|
.king-section h2 {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: white;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
.king-section p {
|
||||||
|
color: rgba(255, 255, 255, 0.86);
|
||||||
|
font-size: 1.17rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
.king-section strong {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 6. SERVICES SECTION --- */
|
||||||
|
.section { padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.service-card {
|
||||||
|
background: var(--bg-card); padding: 30px 20px; border-radius: 8px;
|
||||||
|
border: 1px solid var(--border); transition: 0.3s; text-align: center;
|
||||||
|
}
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.service-card i { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
|
||||||
|
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-dark); line-height: 1.3; }
|
||||||
|
|
||||||
|
.service-card ul { list-style: none; margin: 20px auto 0; padding: 0; max-width: 320px; }
|
||||||
|
.service-card li {
|
||||||
|
margin-bottom: 8px; font-size: 0.9rem; color: var(--text-body);
|
||||||
|
display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; line-height: 1.4;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.service-card li::before { content: "•"; color: var(--accent); font-weight: bold; font-size: 1.2rem; line-height: 1; }
|
||||||
|
|
||||||
|
.project-path {
|
||||||
|
background: var(--bg-offset);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.path-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.path-step {
|
||||||
|
padding: 34px 28px;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.path-step:last-child { border-right: 0; }
|
||||||
|
.path-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: white;
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.path-step h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.path-step p {
|
||||||
|
color: var(--text-body);
|
||||||
|
font-size: 0.98rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 7. BIO SECTION --- */
|
||||||
|
.bio-section { padding: 100px 0 60px; background: var(--bg-card); }
|
||||||
|
.bio-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
|
||||||
|
|
||||||
|
.bio-img-box {
|
||||||
|
width: 100%; aspect-ratio: 16/9;
|
||||||
|
background: #000; border-radius: 8px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 8. MISSION / FAITH SECTION --- */
|
||||||
|
.mission-section {
|
||||||
|
background: var(--primary); color: white;
|
||||||
|
padding: 60px 0; text-align: center;
|
||||||
|
}
|
||||||
|
.mission-content { max-width: 800px; margin: 0 auto; }
|
||||||
|
.mission-verse {
|
||||||
|
font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: #fff;
|
||||||
|
}
|
||||||
|
.mission-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
|
||||||
|
|
||||||
|
/* --- 9. SHORTS SCROLLER --- */
|
||||||
|
.video-section { background: var(--bg-offset); border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.shorts-scroller {
|
||||||
|
display: flex; gap: 20px; overflow-x: auto; padding: 20px 0;
|
||||||
|
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
.shorts-scroller::-webkit-scrollbar { height: 8px; }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-track { background: var(--bg-offset); }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
|
||||||
|
|
||||||
|
.short-card {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 240px;
|
||||||
|
aspect-ratio: 9/16;
|
||||||
|
background: black; border-radius: 12px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md); border: 1px solid var(--border);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.short-card iframe { width: 100%; height: 100%; border: none; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr; text-align: center; }
|
||||||
|
.hero-content p { margin: 0 auto 40px; border-left: none; padding: 0; }
|
||||||
|
.hero-image { width: 300px; height: 300px; margin: 0 auto; }
|
||||||
|
.icon-bar { grid-template-columns: 1fr 1fr; }
|
||||||
|
.icon-box { border-bottom: 1px solid var(--border); }
|
||||||
|
.icon-box:nth-child(2) { border-right: none; }
|
||||||
|
.king-section { margin-top: 50px; padding: 64px 0; }
|
||||||
|
.king-section h2 { font-size: 2.6rem; }
|
||||||
|
.path-step { border-right: 0; border-bottom: 1px solid var(--border); }
|
||||||
|
.path-step:last-child { border-bottom: 0; }
|
||||||
|
.bio-layout { grid-template-columns: 1fr; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.brand-logo svg { width: 176px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="#" class="brand-logo" aria-label="Christ IT home">
|
||||||
|
<svg viewBox="0 0 258 80" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="christ-it-logo-title">
|
||||||
|
<title id="christ-it-logo-title">Christ IT</title>
|
||||||
|
<text x="0" y="62" font-family="Montserrat, Oswald, Arial, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(140, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#services" class="nav-link">Projects</a>
|
||||||
|
<a href="#process" class="nav-link">Process</a>
|
||||||
|
<a href="#about" class="nav-link">About</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1><span class="text-primary">Technology Projects</span><br>For Kingdom Work</h1>
|
||||||
|
<p>
|
||||||
|
Christ IT helps churches, ministries, and outreach organizations turn mission-driven ideas into practical digital tools,
|
||||||
|
workflows, websites, and systems that real people can use.
|
||||||
|
</p>
|
||||||
|
<div style="margin-top: 25px; font-size: 0.95rem; color: var(--text-body); font-weight: 500;">
|
||||||
|
<i class="fa-solid fa-location-dot text-primary"></i> Locally Owned & Operated in Clarksville, TN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="jason.JPG" alt="Jason Garrison IT consultant">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container icon-bar-wrapper">
|
||||||
|
<div class="icon-bar">
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-lightbulb"></i>
|
||||||
|
<h4>Project Concepting</h4>
|
||||||
|
<span>Shape the idea</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||||
|
<h4>Custom Builds</h4>
|
||||||
|
<span>Make it usable</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-bullhorn"></i>
|
||||||
|
<h4>Outreach Systems</h4>
|
||||||
|
<span>Reach and serve people</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-seedling"></i>
|
||||||
|
<h4>Stewardship</h4>
|
||||||
|
<span>Keep it sustainable</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="king-section" aria-labelledby="christ-king-title">
|
||||||
|
<div class="container king-content">
|
||||||
|
<div class="king-mark" aria-hidden="true">
|
||||||
|
<i class="fa-solid fa-cross"></i>
|
||||||
|
</div>
|
||||||
|
<h2 id="christ-king-title">Christ Is King</h2>
|
||||||
|
<p>
|
||||||
|
Christ IT is a Christ-centered project before it is a technology project.
|
||||||
|
The work matters because people matter: churches, ministries, and outreach teams need tools that serve the mission, honor the Lord, and help the body of Christ care for real needs with wisdom and stewardship.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Mission-Focused <span class="text-primary">Technology Help</span></h2>
|
||||||
|
<p>Custom project help for churches and outreach teams that need useful tools, clear planning, and honest technical execution.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-church"></i>
|
||||||
|
<h3>Church & Ministry Websites</h3>
|
||||||
|
<p>Simple, maintainable web presences that help people find information, connect, give, register, volunteer, or take the next step.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Landing pages, ministry pages, events, and resource hubs</li>
|
||||||
|
<li>Domain, hosting, SSL, and email stewardship</li>
|
||||||
|
<li>Clear content structure for visitors and members</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-hands-helping"></i>
|
||||||
|
<h3>Custom Outreach Tools</h3>
|
||||||
|
<p>Lightweight tools for the odd, important work that does not fit inside a normal church-management or website package.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Request forms, directories, catalogs, and signups</li>
|
||||||
|
<li>Volunteer coordination and internal dashboards</li>
|
||||||
|
<li>Workflows built around the way your ministry actually serves</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-photo-film"></i>
|
||||||
|
<h3>Media & Communication Systems</h3>
|
||||||
|
<p>Practical help with the systems that carry your message: video, publishing, newsletters, social sharing, and resource libraries.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Content workflows and publishing pipelines</li>
|
||||||
|
<li>Video libraries, sermon archives, and outreach media</li>
|
||||||
|
<li>Newsletter, link hub, and communication cleanup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-compass-drafting"></i>
|
||||||
|
<h3>Project Planning & Stewardship</h3>
|
||||||
|
<p>Before money gets spent, I can help clarify what should be built, what can be simplified, and what should be avoided entirely.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Plain-English project planning</li>
|
||||||
|
<li>Vendor and platform guidance</li>
|
||||||
|
<li>Sustainable tools a ministry can afford and maintain</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="process" class="section project-path">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>From Burden To <span class="text-accent">Buildable Plan</span></h2>
|
||||||
|
<p>You do not need a polished proposal or technical vocabulary. Bring the need, the rough idea, or the outreach problem, and we can shape it into a practical path forward.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="path-grid">
|
||||||
|
<div class="path-step">
|
||||||
|
<div class="path-icon"><i class="fa-solid fa-comments"></i></div>
|
||||||
|
<h3>Listen First</h3>
|
||||||
|
<p>We talk through the people being served, the ministry burden, and what would actually help instead of starting with software.</p>
|
||||||
|
</div>
|
||||||
|
<div class="path-step">
|
||||||
|
<div class="path-icon"><i class="fa-solid fa-route"></i></div>
|
||||||
|
<h3>Map The Path</h3>
|
||||||
|
<p>The idea becomes a clear plan: what to build, what to reuse, what to avoid, and how to keep the scope sustainable.</p>
|
||||||
|
</div>
|
||||||
|
<div class="path-step">
|
||||||
|
<div class="path-icon"><i class="fa-solid fa-hammer"></i></div>
|
||||||
|
<h3>Build What Helps</h3>
|
||||||
|
<p>Web pages, forms, dashboards, directories, media workflows, or custom systems are built around the real work.</p>
|
||||||
|
</div>
|
||||||
|
<div class="path-step">
|
||||||
|
<div class="path-icon"><i class="fa-solid fa-hand-holding-heart"></i></div>
|
||||||
|
<h3>Hand It Off Well</h3>
|
||||||
|
<p>The finished project should be understandable, maintainable, and useful after the build is complete.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="about" class="bio-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bio-layout">
|
||||||
|
<div class="bio-img-box">
|
||||||
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/rA67d1ga9G8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-primary" style="letter-spacing: 2px; margin-bottom: 10px; font-weight:700;">WHY CHRIST IT EXISTS</h4>
|
||||||
|
<h2 style="font-size: 3rem; margin-bottom: 25px;">Building Tools That <span class="text-primary">Serve People</span></h2>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 20px; font-size: 1.1rem;">
|
||||||
|
My name is Jason Garrison. After more than 20 years in commercial IT, I want to use what I have learned in a more intentional way: helping churches, ministries, and outreach organizations build practical tools that support real service.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 30px;">
|
||||||
|
I am not trying to sell churches a bloated platform or turn every need into a monthly subscription. I want to help good people do good work with technology they can understand, afford, and sustain.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||||||
|
<button class="btn secure-contact-btn" data-type="email">Talk Through An Idea</button>
|
||||||
|
<a href="https://jasoneugenegarrison.com" class="btn btn-outline">View Resume <i class="fa-solid fa-id-card"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mission-section">
|
||||||
|
<div class="container mission-content">
|
||||||
|
<div class="mission-verse">"For we are God’s handiwork, created in Christ Jesus to do good works, which God prepared in advance for us to do." — Ephesians 2:10</div>
|
||||||
|
<p class="mission-text">
|
||||||
|
At Christ IT, technology is the craft, but service is the calling. My hope is to use practical technical skill to support Kingdom work, strengthen outreach, and help ministries serve people with clarity and care.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="field-notes" class="section video-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Christ IT <span class="text-primary">Field Notes</span></h2>
|
||||||
|
<p>Short videos, observations, and practical lessons from hands-on technical work.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shorts-scroller">
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/oBWBItt8ZVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="#" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Helping churches, ministries, and outreach organizations turn mission-driven ideas into practical technology projects.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Services. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') ||
|
||||||
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const contactKey = 43;
|
||||||
|
const contactValues = {
|
||||||
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
||||||
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
||||||
|
};
|
||||||
|
|
||||||
|
function revealContact(type) {
|
||||||
|
const encoded = contactValues[type];
|
||||||
|
if (!encoded) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildContactLink(type) {
|
||||||
|
const value = revealContact(type);
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
link.rel = "nofollow";
|
||||||
|
link.textContent = value;
|
||||||
|
link.style.textDecoration = "none";
|
||||||
|
link.style.color = "inherit";
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
function revealInlineContact(el, type) {
|
||||||
|
const link = buildContactLink(type);
|
||||||
|
if (link) {
|
||||||
|
el.replaceWith(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const secureEmail = document.getElementById("secure-email");
|
||||||
|
const securePhone = document.getElementById("secure-phone");
|
||||||
|
|
||||||
|
if (secureEmail) {
|
||||||
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (securePhone) {
|
||||||
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const type = btn.dataset.type;
|
||||||
|
const value = revealContact(type);
|
||||||
|
|
||||||
|
if (type === "email") {
|
||||||
|
window.location.href = `mailto:${value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "phone") {
|
||||||
|
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+658
@@ -0,0 +1,658 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Christ IT | Field-Tested Infrastructure</title>
|
||||||
|
<meta name="description" content="Independent IT Field Engineer serving Oak Grove, KY and Clarksville, TN. Specializing in Low Voltage, Linux Systems, and Hardware Repair.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES (THEME ENGINE) --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode (Default) */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode Overrides */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a; /* Deep Navy/Black */
|
||||||
|
--bg-offset: #1e293b; /* Lighter Navy */
|
||||||
|
--bg-highlight: #172554; /* Deep Blue Highlight */
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc; /* White/Off-White */
|
||||||
|
--text-body: #cbd5e1; /* Light Grey */
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6; /* Brighter Blue for Dark Mode */
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- 2. BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent { background-color: var(--accent); color: white; }
|
||||||
|
.btn-accent:hover { background-color: #d35400; color: white !important; }
|
||||||
|
|
||||||
|
.btn-windows {
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
width: 100%; padding: 15px;
|
||||||
|
background-color: #0078D7; color: white;
|
||||||
|
font-weight: 600; border-radius: 4px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.btn-windows:hover { background-color: #005a9e; color: white; }
|
||||||
|
|
||||||
|
/* --- 3. NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
/* Dark/Light Toggle Button */
|
||||||
|
.theme-toggle {
|
||||||
|
background: transparent; border: 1px solid var(--border);
|
||||||
|
color: var(--text-body);
|
||||||
|
width: 40px; height: 40px; border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background-color: var(--bg-offset);
|
||||||
|
color: var(--primary); border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 4. HERO SECTION --- */
|
||||||
|
.hero {
|
||||||
|
padding: 80px 0 140px;
|
||||||
|
background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body));
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: ""; position: absolute; inset: 0;
|
||||||
|
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||||
|
background-size: 30px 30px; opacity: 0.5; pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 4rem; margin-bottom: 20px; }
|
||||||
|
.hero-content p {
|
||||||
|
font-size: 1.25rem; color: var(--text-body); margin-bottom: 35px; max-width: 90%;
|
||||||
|
border-left: 4px solid var(--accent); padding-left: 20px;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
position: relative; width: 100%; aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%; background: var(--bg-card);
|
||||||
|
border: 8px solid var(--bg-body); box-shadow: var(--shadow-md); overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* --- 5. FLOATING ICON BAR --- */
|
||||||
|
.icon-bar-wrapper { margin-top: -70px; position: relative; z-index: 10; }
|
||||||
|
.icon-bar {
|
||||||
|
background: var(--bg-card); border-radius: 8px;
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.icon-box {
|
||||||
|
padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
|
||||||
|
border-right: 1px solid var(--border); transition: 0.2s;
|
||||||
|
}
|
||||||
|
.icon-box:last-child { border-right: none; }
|
||||||
|
.icon-box:hover { background: var(--bg-offset); }
|
||||||
|
.icon-box i { font-size: 2rem; color: var(--primary); margin-bottom: 5px; }
|
||||||
|
.icon-box h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-dark); }
|
||||||
|
.icon-box span { font-size: 0.9rem; color: var(--text-body); }
|
||||||
|
|
||||||
|
/* --- 6. SERVICES SECTION --- */
|
||||||
|
.section { padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
|
||||||
|
.service-card {
|
||||||
|
background: var(--bg-card); padding: 40px; border-radius: 8px;
|
||||||
|
border: 1px solid var(--border); transition: 0.3s;
|
||||||
|
}
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.service-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 20px; }
|
||||||
|
.service-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--text-dark); }
|
||||||
|
.service-card ul { list-style: none; margin-top: 20px; }
|
||||||
|
.service-card li {
|
||||||
|
margin-bottom: 8px; font-size: 0.95rem; color: var(--text-body);
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
}
|
||||||
|
.service-card li::before { content: "•"; color: var(--accent); font-weight: bold; font-size: 1.2rem; }
|
||||||
|
|
||||||
|
/* --- 7. REMOTE SUPPORT SECTION --- */
|
||||||
|
.remote-section {
|
||||||
|
background-color: var(--bg-highlight);
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.remote-layout {
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 40px;
|
||||||
|
}
|
||||||
|
.remote-text h2 { font-size: 2.5rem; margin-bottom: 15px; }
|
||||||
|
.remote-text p { font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; }
|
||||||
|
|
||||||
|
.mc-card {
|
||||||
|
background: var(--bg-card); width: 100%; max-width: 350px;
|
||||||
|
padding: 25px; border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
|
||||||
|
.mc-header i { font-size: 24px; color: #0078D7; }
|
||||||
|
.mc-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
|
||||||
|
.mc-subtitle { font-size: 0.85rem; color: var(--text-body); display: block; }
|
||||||
|
.mc-body { font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 20px; }
|
||||||
|
.mc-footer-link { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; color: #0078D7; text-decoration: underline; }
|
||||||
|
|
||||||
|
/* --- 8. PRICING SECTION --- */
|
||||||
|
.bg-offset { background-color: var(--bg-offset); }
|
||||||
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
|
||||||
|
.price-card {
|
||||||
|
background: var(--bg-card); padding: 40px 30px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border: 1px solid transparent;
|
||||||
|
display: flex; flex-direction: column; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
|
||||||
|
.price-card.featured { border-top: 4px solid var(--accent); position: relative; }
|
||||||
|
.price-card.featured::before {
|
||||||
|
content: "Most Common"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
|
||||||
|
background: var(--accent); color: white; padding: 4px 12px; font-size: 0.75rem;
|
||||||
|
text-transform: uppercase; font-weight: bold; border-radius: 20px;
|
||||||
|
}
|
||||||
|
.price-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; font-family: 'Oswald', sans-serif; }
|
||||||
|
.price-amount { font-size: 3rem; color: var(--text-dark); font-weight: 700; line-height: 1; margin-bottom: 5px; }
|
||||||
|
.price-meta { font-size: 0.9rem; color: var(--text-body); margin-bottom: 25px; font-weight: 500; }
|
||||||
|
.price-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
|
||||||
|
.price-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
|
||||||
|
.price-list li i { color: var(--primary); }
|
||||||
|
|
||||||
|
/* --- 9. VIDEO SHORTS --- */
|
||||||
|
.video-section { background: var(--bg-card); border-bottom: 1px solid var(--border); }
|
||||||
|
.video-shorts-container {
|
||||||
|
width: 100%; max-width: 400px; background: #000;
|
||||||
|
margin: 0 auto; min-height: 600px; border-radius: 12px;
|
||||||
|
overflow: hidden; display: flex; align-items: center; justify-content: center;
|
||||||
|
border: 4px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 10. BIO & FOOTER --- */
|
||||||
|
.bio-section { padding: 100px 0; background: var(--bg-offset); }
|
||||||
|
.bio-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
|
||||||
|
.bio-img-box {
|
||||||
|
width: 100%; aspect-ratio: 4/5;
|
||||||
|
background: #e5e7eb; border-radius: 8px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom {
|
||||||
|
margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155;
|
||||||
|
text-align: center; font-size: 0.9rem; color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- RESPONSIVE --- */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr; text-align: center; }
|
||||||
|
.hero-content p { margin: 0 auto 40px; border-left: none; padding: 0; }
|
||||||
|
.hero-image { width: 300px; height: 300px; margin: 0 auto; }
|
||||||
|
.icon-bar { grid-template-columns: 1fr 1fr; }
|
||||||
|
.icon-box { border-bottom: 1px solid var(--border); }
|
||||||
|
.icon-box:nth-child(2) { border-right: none; }
|
||||||
|
.remote-layout { flex-direction: column; text-align: center; }
|
||||||
|
.bio-layout { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.hero-content h1 { font-size: 3rem; }
|
||||||
|
.icon-bar { grid-template-columns: 1fr; }
|
||||||
|
.icon-box { border-right: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="#" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<div>
|
||||||
|
<button class="theme-toggle" id="theme-toggle" aria-label="Toggle Dark Mode">
|
||||||
|
<i class="fa-solid fa-moon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1><span class="text-primary">Real Tech Support</span>
|
||||||
|
|
||||||
|
|
||||||
|
For Real Problems</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Stop struggling with slow computers, messy cables, and confusing networks. Whether you need a simple laptop repair or a complete business network overhaul, I provide honest, skilled technical labor right here in Oak Grove and Clarksville. No geek-speak, just results.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; md:justify-content: flex-start;">
|
||||||
|
<a href="#pricing" class="btn btn-accent">See Pricing <i class="fa-solid fa-tag"></i></a>
|
||||||
|
<a href="#services" class="btn btn-outline">Our Services <i class="fa-solid fa-arrow-down"></i></a>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 25px; font-size: 0.95rem; color: var(--text-body); font-weight: 500;">
|
||||||
|
<i class="fa-solid fa-location-dot text-primary"></i> Locally Owned & Operated in Oak Grove, KY
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="https://via.placeholder.com/800x800/f3f4f6/999999?text=Jason+Garrison" alt="Jason Garrison Field Engineer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container icon-bar-wrapper">
|
||||||
|
<div class="icon-bar">
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||||
|
<h4>Hardware Repair</h4>
|
||||||
|
<span>PCs, Laptops & Servers</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-network-wired"></i>
|
||||||
|
<h4>Infrastructure</h4>
|
||||||
|
<span>Low-Voltage & Cabling</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-bars-progress"></i>
|
||||||
|
<h4>Project Management</h4>
|
||||||
|
<span>Planning & Execution</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-user-shield"></i>
|
||||||
|
<h4>Consulting</h4>
|
||||||
|
<span>Independent & Secure</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Professional IT <span class="text-primary">Services</span></h2>
|
||||||
|
<p>Bringing enterprise standards to your home or small business. Reliable, secure, and independent technical support.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-house-laptop"></i>
|
||||||
|
<h3>Residential Tech Support</h3>
|
||||||
|
<p>Professional-grade repair for the home. I treat your personal computer with the same care and precision as a corporate server.</p>
|
||||||
|
<ul>
|
||||||
|
<li><span class="text-accent">•</span> Hardware Repair & Upgrades</li>
|
||||||
|
<li><span class="text-accent">•</span> Virus & Malware Removal</li>
|
||||||
|
<li><span class="text-accent">•</span> Data Recovery & Transfer</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-diagram-project"></i>
|
||||||
|
<h3>Structured Cabling</h3>
|
||||||
|
<p>Your network is only as good as the physical wire. Professional low-voltage installation, termination, and certification.</p>
|
||||||
|
<ul>
|
||||||
|
<li><span class="text-accent">•</span> Cat6 Ethernet Drops</li>
|
||||||
|
<li><span class="text-accent">•</span> Starlink & WISP Mounting</li>
|
||||||
|
<li><span class="text-accent">•</span> Rack Cleanup & Management</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-building-shield"></i>
|
||||||
|
<h3>Commercial Infrastructure</h3>
|
||||||
|
<p>Reliable technology foundations for small businesses and churches. I manage the network hardware so you can focus on your mission.</p>
|
||||||
|
<ul>
|
||||||
|
<li><span class="text-accent">•</span> Network Design & Stability</li>
|
||||||
|
<li><span class="text-accent">•</span> Server Room Maintenance</li>
|
||||||
|
<li><span class="text-accent">•</span> Secure Guest Wi-Fi Setup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Professional IT <span class="text-primary">Services</span></h2>
|
||||||
|
<p>Bringing enterprise standards to your home or small business. Reliable, secure, and independent technical support.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-laptop-medical"></i>
|
||||||
|
<h3>Computer Repair</h3>
|
||||||
|
<p>Don't replace it when it can be fixed. I breathe new life into aging hardware and rescue critical data from failing drives.</p>
|
||||||
|
<ul>
|
||||||
|
<li>LCD Screen Replacement</li>
|
||||||
|
<li>Hard Drive to SSD Upgrades</li>
|
||||||
|
<li>Virus & Malware Removal</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-diagram-project"></i>
|
||||||
|
<h3>Network Cabling</h3>
|
||||||
|
<p>Professional low-voltage installation for homes and businesses. Neat, labeled, and tested to gigabit standards.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Cat6 Ethernet Drops</li>
|
||||||
|
<li>Security Camera Installation</li>
|
||||||
|
<li>Rack Cleanup & Management</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-brands fa-linux"></i>
|
||||||
|
<h3>Linux & Servers</h3>
|
||||||
|
<p>Enterprise-grade self-hosting solutions. Take back control of your data with private cloud infrastructure.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Proxmox & Virtualization</li>
|
||||||
|
<li>Ubuntu Server Management</li>
|
||||||
|
<li>Docker Container Deployment</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="remote-section">
|
||||||
|
<div class="container remote-layout">
|
||||||
|
<div class="remote-text">
|
||||||
|
<h2>Need Help <span class="text-primary">Right Now?</span></h2>
|
||||||
|
<p>Skip the travel fee. If you have a working internet connection, I can connect securely to your computer and fix many software, email, and virus issues instantly. If you haven't connected before, download the assistant on the right.</p>
|
||||||
|
<a href="https://connect.christit.com" class="btn btn-accent">
|
||||||
|
Launch Remote Support <i class="fa-solid fa-headset"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mc-card">
|
||||||
|
<div class="mc-header">
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<div>
|
||||||
|
<div class="mc-title">Assistant</div>
|
||||||
|
<span class="mc-subtitle">Windows Support Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mc-body">
|
||||||
|
Assistant is a Windows system tray tool that can be used when help is needed.
|
||||||
|
This is not an agent that runs in the background; it connects to the server only when requested.
|
||||||
|
</div>
|
||||||
|
<a href="https://mesh.christit.com/agentinvite" class="btn-windows">
|
||||||
|
<i class="fa-solid fa-download"></i> Download Assistant for Windows
|
||||||
|
</a>
|
||||||
|
<a href="#" class="mc-footer-link">Blocked? See Instructions</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pricing" class="section bg-offset">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Transparent <span class="text-accent">Pricing</span></h2>
|
||||||
|
<p>Simple, flat-rate pricing. You always know what you're paying before the work begins.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-grid">
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Remote Support</div>
|
||||||
|
<div class="price-amount">$100</div>
|
||||||
|
<div class="price-meta">Flat Rate Per Incident</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Virus & Malware Removal</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Software Troubleshooting</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Email Configuration</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Printer Setup</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://connect.christit.com" class="btn btn-outline" style="justify-content:center;">Book Remote</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card featured">
|
||||||
|
<div class="price-title text-accent">On-Site Service</div>
|
||||||
|
<div class="price-amount">$75</div>
|
||||||
|
<div class="price-meta">Per Hour (1hr Minimum)</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Hardware Repair & Upgrades</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Network Cabling (Cat6)</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Wi-Fi Mesh Installation</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Custom PC Builds</li>
|
||||||
|
</ul>
|
||||||
|
<a href="mailto:support@christit.com" class="btn" style="background: var(--accent); justify-content:center;">Schedule Visit</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Advanced Projects</div>
|
||||||
|
<div class="price-amount">$150+</div>
|
||||||
|
<div class="price-meta">Starting Base Rate</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Data Recovery</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Server Configuration</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Advanced Networking</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Board Level Repair</li>
|
||||||
|
</ul>
|
||||||
|
<a href="mailto:support@christit.com" class="btn btn-outline" style="justify-content:center;">Request Quote</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section video-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Christ IT <span class="text-primary">Shorts</span></h2>
|
||||||
|
<p>Quick tips, repairs, and updates from the field.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="video-shorts-container">
|
||||||
|
<div style="text-align:center; color: #666; padding: 20px;">
|
||||||
|
<i class="fa-solid fa-mobile-screen" style="font-size: 4rem; margin-bottom: 20px; color: #444;"></i>
|
||||||
|
<p style="color: #999;">Paste Playlist Code Here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bio-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bio-layout">
|
||||||
|
<div class="bio-img-box">
|
||||||
|
<img src="https://via.placeholder.com/600x800/f3f4f6/999999?text=Field+Engineer+Photo" style="width:100%; height:100%; object-fit:cover;">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-primary" style="letter-spacing: 2px; margin-bottom: 10px; font-weight:700;">MEET THE ENGINEER</h4>
|
||||||
|
<h2 style="font-size: 3rem; margin-bottom: 25px;">Experience You Can <span class="text-primary">Trust</span></h2>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 20px; font-size: 1.1rem;">
|
||||||
|
My name is Jason Garrison. I am a Field Engineer and IT Contractor with over two decades of experience in the trenches of technology.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 30px;">
|
||||||
|
I started Christ IT to provide honest, skilled labor to a world that often overcharges and under-delivers.
|
||||||
|
Whether I am terminating fiber optic cable for a commercial build-out or soldering a power jack on a laptop,
|
||||||
|
I treat every ticket with the same level of integrity. I am not a salesman; I am the guy who fixes it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a href="mailto:support@christit.com" class="btn">Hire Me For A Project</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="#" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology solutions to the Oak Grove and Clarksville communities.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> support@christit.com</p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Oak Grove, KY & Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Connections. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const icon = toggleBtn.querySelector('i');
|
||||||
|
const root = document.documentElement;
|
||||||
|
|
||||||
|
// Check local storage or system preference
|
||||||
|
const currentTheme = localStorage.getItem('theme') ||
|
||||||
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
icon.classList.remove('fa-moon');
|
||||||
|
icon.classList.add('fa-sun');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
icon.classList.remove('fa-sun');
|
||||||
|
icon.classList.add('fa-moon');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
icon.classList.remove('fa-moon');
|
||||||
|
icon.classList.add('fa-sun');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+692
@@ -0,0 +1,692 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Christ IT | Field-Tested Infrastructure</title>
|
||||||
|
<meta name="description" content="Independent IT Field Engineer serving Clarksville, TN and the region from Nashville to Hopkinsville. Specializing in Low Voltage, Linux Systems, and Hardware Repair.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- 2. BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent { background-color: var(--accent); color: white; }
|
||||||
|
.btn-accent:hover { background-color: #d35400; color: white !important; }
|
||||||
|
|
||||||
|
.btn-call {
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: white !important;
|
||||||
|
border: 2px solid #1f2937;
|
||||||
|
}
|
||||||
|
.btn-call:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-windows {
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
width: 100%; padding: 15px;
|
||||||
|
background-color: #0078D7; color: white;
|
||||||
|
font-weight: 600; border-radius: 4px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.btn-windows:hover { background-color: #005a9e; color: white; }
|
||||||
|
|
||||||
|
/* --- 3. NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 20px; align-items: center; }
|
||||||
|
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-body); }
|
||||||
|
.nav-link:hover { color: var(--primary); }
|
||||||
|
|
||||||
|
/* Theme Switch */
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- 4. HERO SECTION --- */
|
||||||
|
.hero {
|
||||||
|
padding: 80px 0 140px;
|
||||||
|
background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body));
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: ""; position: absolute; inset: 0;
|
||||||
|
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||||
|
background-size: 30px 30px; opacity: 0.5; pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 4rem; margin-bottom: 20px; }
|
||||||
|
.hero-content p {
|
||||||
|
font-size: 1.25rem; color: var(--text-body); margin-bottom: 35px; max-width: 90%;
|
||||||
|
border-left: 4px solid var(--accent); padding-left: 20px;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
position: relative; width: 100%; aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%; background: var(--bg-card);
|
||||||
|
border: 8px solid var(--bg-body); box-shadow: var(--shadow-md); overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* --- 5. FLOATING ICON BAR --- */
|
||||||
|
.icon-bar-wrapper { margin-top: -70px; position: relative; z-index: 10; }
|
||||||
|
.icon-bar {
|
||||||
|
background: var(--bg-card); border-radius: 8px;
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.icon-box {
|
||||||
|
padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
|
||||||
|
border-right: 1px solid var(--border); transition: 0.2s;
|
||||||
|
}
|
||||||
|
.icon-box:last-child { border-right: none; }
|
||||||
|
.icon-box:hover { background: var(--bg-offset); }
|
||||||
|
.icon-box i { font-size: 2rem; color: var(--primary); margin-bottom: 5px; }
|
||||||
|
.icon-box h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-dark); }
|
||||||
|
.icon-box span { font-size: 0.9rem; color: var(--text-body); }
|
||||||
|
|
||||||
|
/* --- 6. SERVICES SECTION --- */
|
||||||
|
.section { padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.service-card {
|
||||||
|
background: var(--bg-card); padding: 30px 20px; border-radius: 8px;
|
||||||
|
border: 1px solid var(--border); transition: 0.3s;
|
||||||
|
}
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.service-card i { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
|
||||||
|
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-dark); line-height: 1.3; }
|
||||||
|
|
||||||
|
.service-card ul { list-style: none; margin-top: 15px; padding: 0; }
|
||||||
|
.service-card li {
|
||||||
|
margin-bottom: 8px; font-size: 0.9rem; color: var(--text-body);
|
||||||
|
display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
|
||||||
|
}
|
||||||
|
.service-card li::before { content: "•"; color: var(--accent); font-weight: bold; font-size: 1.2rem; line-height: 1; }
|
||||||
|
|
||||||
|
/* --- 7. REMOTE SUPPORT (Updated Alignment) --- */
|
||||||
|
.remote-section {
|
||||||
|
background-color: var(--bg-highlight); padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.remote-layout {
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 40px;
|
||||||
|
}
|
||||||
|
.remote-text {
|
||||||
|
text-align: center; /* CENTER ALIGNMENT */
|
||||||
|
display: flex; flex-direction: column; align-items: center; /* Center Flex Items */
|
||||||
|
}
|
||||||
|
.remote-text h2 { font-size: 2.5rem; margin-bottom: 15px; }
|
||||||
|
.remote-text p { font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; }
|
||||||
|
|
||||||
|
.mc-card {
|
||||||
|
background: var(--bg-card); width: 100%; max-width: 350px;
|
||||||
|
padding: 25px; border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
|
||||||
|
.mc-header i { font-size: 24px; color: #0078D7; }
|
||||||
|
.mc-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
|
||||||
|
.mc-subtitle { font-size: 0.85rem; color: var(--text-body); display: block; }
|
||||||
|
.mc-body { font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 20px; }
|
||||||
|
.mc-footer-link { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; color: #0078D7; text-decoration: underline; }
|
||||||
|
|
||||||
|
/* --- 8. PRICING --- */
|
||||||
|
.bg-offset { background-color: var(--bg-offset); }
|
||||||
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
|
||||||
|
.price-card {
|
||||||
|
background: var(--bg-card); padding: 40px 30px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border: 1px solid transparent;
|
||||||
|
display: flex; flex-direction: column; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
|
||||||
|
.price-card.featured { border-top: 4px solid var(--accent); position: relative; }
|
||||||
|
.price-card.featured::before {
|
||||||
|
content: "Most Common"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
|
||||||
|
background: var(--accent); color: white; padding: 4px 12px; font-size: 0.75rem;
|
||||||
|
text-transform: uppercase; font-weight: bold; border-radius: 20px;
|
||||||
|
}
|
||||||
|
.price-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; font-family: 'Oswald', sans-serif; }
|
||||||
|
.price-amount { font-size: 3rem; color: var(--text-dark); font-weight: 700; line-height: 1; margin-bottom: 5px; }
|
||||||
|
.price-strike { font-size: 1.5rem; color: var(--text-light); text-decoration: line-through; margin-right: 10px; font-weight: 400; vertical-align: middle; }
|
||||||
|
.price-meta { font-size: 0.9rem; color: var(--text-body); margin-bottom: 25px; font-weight: 500; }
|
||||||
|
.price-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
|
||||||
|
.price-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
|
||||||
|
.price-list li i { color: var(--primary); }
|
||||||
|
|
||||||
|
/* --- 9. BIO SECTION (Moved UP) --- */
|
||||||
|
.bio-section { padding: 100px 0 60px; background: var(--bg-card); }
|
||||||
|
.bio-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
|
||||||
|
|
||||||
|
.bio-img-box {
|
||||||
|
width: 100%; aspect-ratio: 16/9; /* Widescreen for Main Video */
|
||||||
|
background: #000; border-radius: 8px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 10. MISSION / FAITH SECTION (New) --- */
|
||||||
|
.mission-section {
|
||||||
|
background: var(--primary); color: white;
|
||||||
|
padding: 60px 0; text-align: center;
|
||||||
|
}
|
||||||
|
.mission-content { max-width: 800px; margin: 0 auto; }
|
||||||
|
.mission-verse {
|
||||||
|
font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: #fff;
|
||||||
|
}
|
||||||
|
.mission-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
|
||||||
|
|
||||||
|
/* --- 11. SHORTS SCROLLER (Moved DOWN) --- */
|
||||||
|
.video-section { background: var(--bg-offset); border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.shorts-scroller {
|
||||||
|
display: flex; gap: 20px; overflow-x: auto; padding: 20px 0;
|
||||||
|
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
/* Hide scrollbar */
|
||||||
|
.shorts-scroller::-webkit-scrollbar { height: 8px; }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-track { background: var(--bg-offset); }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
|
||||||
|
|
||||||
|
.short-card {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 240px; /* REDUCED WIDTH -> Makes them "shorter" vertically while keeping ratio */
|
||||||
|
aspect-ratio: 9/16;
|
||||||
|
background: black; border-radius: 12px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md); border: 1px solid var(--border);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.short-card iframe { width: 100%; height: 100%; border: none; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr; text-align: center; }
|
||||||
|
.hero-content p { margin: 0 auto 40px; border-left: none; padding: 0; }
|
||||||
|
.hero-image { width: 300px; height: 300px; margin: 0 auto; }
|
||||||
|
.icon-bar { grid-template-columns: 1fr 1fr; }
|
||||||
|
.icon-box { border-bottom: 1px solid var(--border); }
|
||||||
|
.icon-box:nth-child(2) { border-right: none; }
|
||||||
|
.remote-layout { flex-direction: column; text-align: center; }
|
||||||
|
.bio-layout { grid-template-columns: 1fr; }
|
||||||
|
.nav-links { display: none; } /* Hide extra links on small mobile, keep theme toggle */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="#" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#services" class="nav-link">Services</a>
|
||||||
|
<a href="#pricing" class="nav-link">Pricing</a>
|
||||||
|
<a href="connections.html" class="nav-link" style="color: var(--accent);">Remote Support</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1><span class="text-primary">Real Tech Support</span><br>For Real Problems</h1>
|
||||||
|
<p>
|
||||||
|
Stop struggling with slow computers, messy cables, and confusing networks.
|
||||||
|
Whether you need a simple laptop repair or a complete business network overhaul,
|
||||||
|
I provide honest, skilled technical labor. No geek-speak, just results.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; md:justify-content: flex-start;">
|
||||||
|
<a href="#pricing" class="btn btn-accent">See Pricing <i class="fa-solid fa-tag"></i></a>
|
||||||
|
<button class="btn btn-call secure-contact-btn" data-type="phone">
|
||||||
|
Call or Text <i class="fa-solid fa-mobile-screen"></i>
|
||||||
|
</button>
|
||||||
|
<a href="#services" class="btn btn-outline">Our Services <i class="fa-solid fa-arrow-down"></i></a>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 25px; font-size: 0.95rem; color: var(--text-body); font-weight: 500;">
|
||||||
|
<i class="fa-solid fa-location-dot text-primary"></i> Locally Owned & Operated in Clarksville, TN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="jason2026.jpg" alt="Jason Garrison Field Engineer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container icon-bar-wrapper">
|
||||||
|
<div class="icon-bar">
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||||
|
<h4>Hardware Repair</h4>
|
||||||
|
<span>PCs, Laptops & Servers</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-network-wired"></i>
|
||||||
|
<h4>Infrastructure</h4>
|
||||||
|
<span>Low-Voltage & Cabling</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-bars-progress"></i>
|
||||||
|
<h4>Project Management</h4>
|
||||||
|
<span>Planning & Execution</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-user-shield"></i>
|
||||||
|
<h4>Consulting</h4>
|
||||||
|
<span>Independent & Secure</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Professional IT <span class="text-primary">Services</span></h2>
|
||||||
|
<p>Bringing enterprise standards to your home or small business. Service area: Nashville to Hopkinsville.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-house-laptop"></i>
|
||||||
|
<h3>Residential Tech Support</h3>
|
||||||
|
<p>Professional-grade repair for the home. I treat your personal computer with the same care as a corporate server.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Hardware Repair & Upgrades</li>
|
||||||
|
<li>Virus & Malware Removal</li>
|
||||||
|
<li>Data Recovery & Transfer</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-diagram-project"></i>
|
||||||
|
<h3>Commercial Infrastructure</h3>
|
||||||
|
<p>Reliable foundations for business. Professional low-voltage installation and termination for Gigabit speeds.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Cat6 Ethernet & Fiber Drops</li>
|
||||||
|
<li>Rack Cleanup & Management</li>
|
||||||
|
<li>Secure Guest Wi-Fi Setup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-cash-register"></i>
|
||||||
|
<h3>Business Operations</h3>
|
||||||
|
<p>Technology that drives your business forward. I handle the specialized hardware that keeps your customers happy.</p>
|
||||||
|
<ul>
|
||||||
|
<li>POS System Installation</li>
|
||||||
|
<li>Digital Menu Boards & Kiosks</li>
|
||||||
|
<li>Back Office Workstations</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-video"></i>
|
||||||
|
<h3>Security & Surveillance</h3>
|
||||||
|
<p>Protect your assets with professional security installations. Modern, accessible systems without monthly fees.</p>
|
||||||
|
<ul>
|
||||||
|
<li>IP Camera Installation (NVR)</li>
|
||||||
|
<li>Door Access Control</li>
|
||||||
|
<li>Remote Viewing Setup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="remote-section">
|
||||||
|
<div class="container remote-layout">
|
||||||
|
<div class="remote-text">
|
||||||
|
<h2>Need Help <span class="text-primary">Right Now?</span></h2>
|
||||||
|
<p>Skip the travel fee. If you have a working internet connection, I can connect securely to your computer and fix many software, email, and virus issues instantly. If you haven't connected before, download the assistant below.</p>
|
||||||
|
<a href="connections.html" class="btn btn-accent">
|
||||||
|
Launch Remote Support <i class="fa-solid fa-headset"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mc-card">
|
||||||
|
<div class="mc-header">
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<div>
|
||||||
|
<div class="mc-title">Assistant</div>
|
||||||
|
<span class="mc-subtitle">Windows Support Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mc-body">
|
||||||
|
Assistant is a Windows system tray tool that can be used when help is needed.
|
||||||
|
This is not an agent that runs in the background; it connects to the server only when requested.
|
||||||
|
</div>
|
||||||
|
<a href="https://mesh.christit.com/agentinvite" class="btn-windows">
|
||||||
|
<i class="fa-solid fa-download"></i> Download Assistant for Windows
|
||||||
|
</a>
|
||||||
|
<a href="#" class="mc-footer-link">Blocked? See Instructions</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pricing" class="section bg-offset">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Transparent <span class="text-accent">Pricing</span></h2>
|
||||||
|
<p>Simple, flat-rate pricing. You always know what you're paying before the work begins.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-grid">
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Remote Support</div>
|
||||||
|
<div class="price-amount">$150</div>
|
||||||
|
<div class="price-meta">Flat Rate Per Session</div>
|
||||||
|
<div style="flex-grow:1; margin-bottom: 20px; font-size: 0.9rem; color: var(--text-body); line-height: 1.5;">
|
||||||
|
<p>All the remote labor it takes to cleanup and do everything possible to improve a machine, answer questions, etc.</p>
|
||||||
|
<p style="margin-top:10px; font-style: italic;">"Whether it takes 5 minutes, 5 hours, or 5 days."</p>
|
||||||
|
</div>
|
||||||
|
<a href="connections.html" class="btn btn-outline" style="justify-content:center;">Book Remote</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card featured">
|
||||||
|
<div class="price-title text-accent">On-Site Service</div>
|
||||||
|
<div class="price-amount">
|
||||||
|
<span class="price-strike">$85</span>$75
|
||||||
|
</div>
|
||||||
|
<div class="price-meta">Per Hour (2hr Minimum)</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Hardware Repair & Upgrades</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Network Cabling (Cat6)</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Wi-Fi Mesh Installation</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Custom PC Builds</li>
|
||||||
|
</ul>
|
||||||
|
<button class="btn secure-contact-btn" data-type="email" style="background: var(--accent); justify-content:center; width:100%;">Schedule Visit</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Drop-Off Repair</div>
|
||||||
|
<div class="price-amount" style="font-size:2.2rem; margin-top:10px;">By Appt</div>
|
||||||
|
<div class="price-meta">Clarksville Location</div>
|
||||||
|
<div style="flex-grow:1; color: var(--text-body); font-size: 0.95rem; line-height:1.6; margin-bottom:20px;">
|
||||||
|
<p style="margin-bottom:15px;"><strong>Strictly by appointment only.</strong></p>
|
||||||
|
<p>Please call or text first to schedule a drop-off time. Secure, residential location.</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline secure-contact-btn" data-type="phone" style="justify-content:center; width:100%;">Call or Text</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bio-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bio-layout">
|
||||||
|
<div class="bio-img-box">
|
||||||
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/rA67d1ga9G8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-primary" style="letter-spacing: 2px; margin-bottom: 10px; font-weight:700;">MEET THE ENGINEER</h4>
|
||||||
|
<h2 style="font-size: 3rem; margin-bottom: 25px;">Experience You Can <span class="text-primary">Trust</span></h2>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 20px; font-size: 1.1rem;">
|
||||||
|
My name is Jason Garrison. I am a Field Engineer and IT Contractor with over two decades of experience in the trenches of technology.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 30px;">
|
||||||
|
I started Christ IT to provide honest, skilled labor to a world that often overcharges and under-delivers.
|
||||||
|
Whether I am terminating fiber optic cable for a commercial build-out or soldering a power jack on a laptop,
|
||||||
|
I treat every ticket with the same level of integrity. I am not a salesman; I am the guy who fixes it.
|
||||||
|
</p>
|
||||||
|
<button class="btn secure-contact-btn" data-type="email">Hire Me For A Project</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mission-section">
|
||||||
|
<div class="container mission-content">
|
||||||
|
<div class="mission-verse">"For we are God’s handiwork, created in Christ Jesus to do good works, which God prepared in advance for us to do." — Ephesians 2:10</div>
|
||||||
|
<p class="mission-text">
|
||||||
|
At Christ IT, technology is our trade, but service is our calling. We believe that doing a job right—with honesty, integrity, and patience—is a way to honor the Lord. When you call us, you aren't just getting a technician; you're getting a neighbor who cares.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section video-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Christ IT <span class="text-primary">Work Shorts</span></h2>
|
||||||
|
<p>Quick repairs, tips, and results from the field. (Swipe to see more)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shorts-scroller">
|
||||||
|
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/oBWBItt8ZVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="#" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology solutions to Clarksville and the region from Nashville to Hopkinsville.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span class="secure-email-display">jason@christit.com</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <a href="tel:2708898272" style="text-decoration:none;">(270) 889-8272</a></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Connections. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') ||
|
||||||
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SCRAPER PROTECTION ---
|
||||||
|
const secureEmail = "jason@christit.com";
|
||||||
|
const securePhone = "(270) 889-8272";
|
||||||
|
|
||||||
|
document.querySelectorAll('.secure-contact-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
const type = e.target.dataset.type;
|
||||||
|
if(type === 'email') window.location.href = `mailto:${secureEmail}`;
|
||||||
|
if(type === 'phone') window.location.href = `tel:${securePhone}`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+450
@@ -0,0 +1,450 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Jason E. Garrison | Infrastructure Specialist</title>
|
||||||
|
<meta name="description" content="Resume of Jason Eugene Garrison - 20+ Years IT Field Engineer & Infrastructure Specialist.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='0' y='0' width='64' height='64' rx='4' fill='%23b91c1c'/%3E%3Ctext x='50%25' y='50%25' dy='.35em' text-anchor='middle' font-family='sans-serif' font-weight='bold' font-size='32' fill='white'%3EJG%3C/text%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Roboto:wght@300;400;500;700&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- THEME VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Theme (Default) */
|
||||||
|
--primary: #b91c1c; /* Professional Deep Red */
|
||||||
|
--text-main: #374151; /* Charcoal */
|
||||||
|
--text-muted: #6b7280; /* Grey */
|
||||||
|
--bg-body: #f3f4f6; /* Light Grey */
|
||||||
|
--bg-paper: #ffffff; /* White Paper */
|
||||||
|
--bg-offset: #f9fafb; /* Very Light Grey */
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
/* Dark Theme (Softened) */
|
||||||
|
--primary: #ef4444; /* Softer Red */
|
||||||
|
--text-main: #e5e7eb; /* Off-White */
|
||||||
|
--text-muted: #9ca3af; /* Light Grey */
|
||||||
|
--bg-body: #111827; /* Deep Gunmetal */
|
||||||
|
--bg-paper: #1f2937; /* Lighter Gunmetal */
|
||||||
|
--bg-offset: #374151; /* Grey-Blue */
|
||||||
|
--border: #4b5563;
|
||||||
|
--shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-main);
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 40px 20px;
|
||||||
|
min-height: 100vh;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
a:hover { color: var(--primary); }
|
||||||
|
|
||||||
|
/* --- CONTAINER --- */
|
||||||
|
.resume-paper {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: var(--bg-paper);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
border-top: 8px solid var(--primary);
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- TOP ACTION BAR --- */
|
||||||
|
.action-bar {
|
||||||
|
background: var(--bg-offset);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding: 15px 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dl {
|
||||||
|
font-size: 0.85rem; font-weight: 700; color: var(--text-main);
|
||||||
|
padding: 8px 16px; border: 1px solid var(--border);
|
||||||
|
border-radius: 4px; display: flex; align-items: center; gap: 8px;
|
||||||
|
background: var(--bg-paper);
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn-dl:hover { color: var(--primary); border-color: var(--primary); }
|
||||||
|
|
||||||
|
#theme-toggle { min-width: 40px; justify-content: center; padding: 8px; }
|
||||||
|
|
||||||
|
/* --- HEADER --- */
|
||||||
|
header {
|
||||||
|
padding: 50px 60px 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
border-bottom: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-img {
|
||||||
|
width: 150px; height: 150px;
|
||||||
|
border-radius: 4px;
|
||||||
|
object-fit: cover;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 4px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||||
|
background: var(--bg-paper);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content h1 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--text-main);
|
||||||
|
line-height: 1.1;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content h2 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-grid {
|
||||||
|
display: flex; flex-wrap: wrap; gap: 15px 25px;
|
||||||
|
font-size: 0.9rem; font-weight: 500; color: var(--text-main);
|
||||||
|
}
|
||||||
|
.contact-item { display: flex; align-items: center; gap: 8px; }
|
||||||
|
.contact-item i { color: var(--primary); font-size: 1rem; }
|
||||||
|
|
||||||
|
.secure-link {
|
||||||
|
cursor: pointer; border-bottom: 1px dotted var(--text-muted);
|
||||||
|
}
|
||||||
|
.secure-link:hover { color: var(--primary); border-bottom-color: var(--primary); }
|
||||||
|
|
||||||
|
/* --- CONTENT --- */
|
||||||
|
.content-body { padding: 50px 60px; }
|
||||||
|
|
||||||
|
.section { margin-bottom: 50px; }
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--text-main);
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-left: 5px solid var(--primary);
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
display: flex; align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-text {
|
||||||
|
font-size: 1.1rem; color: var(--text-main); margin-bottom: 15px;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- EXPERIENCE --- */
|
||||||
|
.job-item { margin-bottom: 35px; padding-left: 20px; }
|
||||||
|
|
||||||
|
.job-head {
|
||||||
|
display: flex; justify-content: space-between; align-items: baseline;
|
||||||
|
margin-bottom: 5px; flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-title {
|
||||||
|
font-size: 1.25rem; font-weight: 700; color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-meta {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.95rem; color: var(--primary);
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-sub {
|
||||||
|
display: block; font-weight: 600; color: var(--text-muted);
|
||||||
|
font-size: 0.9rem; margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.job-desc ul { list-style: none; }
|
||||||
|
.job-desc li {
|
||||||
|
position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 1rem;
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
.job-desc li::before {
|
||||||
|
content: "•"; color: var(--primary); position: absolute; left: 0; font-weight: bold; font-size: 1.2rem; line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- EDUCATION BOX --- */
|
||||||
|
.edu-box {
|
||||||
|
background: var(--bg-offset);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edu-title { font-weight: 700; color: var(--text-main); margin-bottom: 5px; font-size: 1.1rem; }
|
||||||
|
.edu-sub { font-style: italic; color: var(--text-muted); margin-bottom: 15px; font-size: 0.9rem; }
|
||||||
|
.edu-text { margin-bottom: 15px; color: var(--text-main); }
|
||||||
|
|
||||||
|
/* --- FOOTER --- */
|
||||||
|
footer {
|
||||||
|
background: #111827;
|
||||||
|
color: #9ca3af;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- RESPONSIVE --- */
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
body { padding: 0; }
|
||||||
|
.resume-paper { margin: 0; box-shadow: none; border-top: none; }
|
||||||
|
.action-bar { justify-content: center; flex-wrap: wrap; }
|
||||||
|
header { flex-direction: column; text-align: center; padding: 40px 20px; }
|
||||||
|
.contact-grid { justify-content: center; }
|
||||||
|
.content-body { padding: 40px 20px; }
|
||||||
|
.job-head { flex-direction: column; gap: 5px; }
|
||||||
|
.profile-text, .job-item, .edu-box { padding-left: 0; margin-left: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- PRINT OVERRIDES (Force Light Mode) --- */
|
||||||
|
@media print {
|
||||||
|
body { background: white; color: black; padding: 0; }
|
||||||
|
.resume-paper { box-shadow: none; border: none; max-width: 100%; border-top: 5px solid #b91c1c; }
|
||||||
|
.action-bar { display: none; }
|
||||||
|
header, .content-body { padding: 20px 0; }
|
||||||
|
a { text-decoration: none; color: black; }
|
||||||
|
.job-meta { color: black; }
|
||||||
|
.section-title { border-left-color: black; }
|
||||||
|
.secure-link { border: none; color: black; }
|
||||||
|
|
||||||
|
/* Force variables */
|
||||||
|
:root {
|
||||||
|
--primary: #b91c1c !important;
|
||||||
|
--text-main: #000000 !important;
|
||||||
|
--text-muted: #444444 !important;
|
||||||
|
--bg-paper: #ffffff !important;
|
||||||
|
--bg-offset: #ffffff !important;
|
||||||
|
--border: #cccccc !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="resume-paper">
|
||||||
|
|
||||||
|
<div class="action-bar">
|
||||||
|
<a href="Resume_Jason_Eugene_Garrison.pdf" class="btn-dl" download>
|
||||||
|
<i class="fa-solid fa-file-pdf"></i> PDF
|
||||||
|
</a>
|
||||||
|
<a href="Resume_Jason_Eugene_Garrison.docx" class="btn-dl" download>
|
||||||
|
<i class="fa-solid fa-file-word"></i> DOCX
|
||||||
|
</a>
|
||||||
|
<button id="theme-toggle" class="btn-dl" title="Toggle Theme">
|
||||||
|
<i class="fa-solid fa-moon"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<img src="jason.JPG" alt="Jason Garrison" class="profile-img">
|
||||||
|
<div class="header-content">
|
||||||
|
<h1>Jason Eugene Garrison</h1>
|
||||||
|
<h2>IT Infrastructure Specialist</h2>
|
||||||
|
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-item"><i class="fa-solid fa-map-pin"></i> Oak Grove, KY</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fa-solid fa-phone"></i>
|
||||||
|
<span class="secure-link" id="show-ky">Show KY Number</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fa-solid fa-phone"></i>
|
||||||
|
<span class="secure-link" id="show-tn">Show TN Number</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fa-solid fa-envelope"></i>
|
||||||
|
<span class="secure-link" id="show-email">Show Email</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<i class="fa-solid fa-globe"></i>
|
||||||
|
<a href="https://www.jasoneugenegarrison.com">www.jasoneugenegarrison.com</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content-body">
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h3 class="section-title">Professional Profile</h3>
|
||||||
|
<p class="profile-text">
|
||||||
|
Field-proven IT Infrastructure Specialist with over 20 years of hands-on experience in network deployment, hardware diagnostics, and commercial support. I specialize in high-security environments and sensitive commercial infrastructure where technical failure isn't an option.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h3 class="section-title">Professional Experience</h3>
|
||||||
|
|
||||||
|
<div class="job-item">
|
||||||
|
<div class="job-head">
|
||||||
|
<div class="job-title">Independent Commercial IT Specialist</div>
|
||||||
|
<div class="job-meta">2019 – Present</div>
|
||||||
|
</div>
|
||||||
|
<span class="job-sub">Tennessee & Kentucky | Field Engineering</span>
|
||||||
|
<div class="job-desc">
|
||||||
|
<ul>
|
||||||
|
<li>Operate as a primary field engineer for national MSPs and direct commercial clients, executing high-stakes technical tickets in sensitive environments including healthcare facilities and correctional institutions.</li>
|
||||||
|
<li>Directly manage end-to-end infrastructure projects and large-scale hardware deployments.</li>
|
||||||
|
<li>Specialize in validating project scope and optimizing network design to reduce unnecessary material costs while ensuring maximum system efficiency.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="job-item">
|
||||||
|
<div class="job-head">
|
||||||
|
<div class="job-title">Owner & Lead Technician</div>
|
||||||
|
<div class="job-meta">2014 – 2019</div>
|
||||||
|
</div>
|
||||||
|
<span class="job-sub">Garrison Tech Services | Hopkinsville, KY</span>
|
||||||
|
<div class="job-desc">
|
||||||
|
<ul>
|
||||||
|
<li>Founded, scaled, and operated a top-rated independent computer repair business.</li>
|
||||||
|
<li>Built a profitable service business from the ground up, achieving market dominance in the local area through superior turnaround times and word-of-mouth referrals.</li>
|
||||||
|
<li>Personally diagnosed and repaired thousands of machines and managed all P&L, inventory logistics, and marketing strategies.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="job-item">
|
||||||
|
<div class="job-head">
|
||||||
|
<div class="job-title">Telecommunications Contractor</div>
|
||||||
|
<div class="job-meta">2011 – 2014</div>
|
||||||
|
</div>
|
||||||
|
<span class="job-sub">ISP Infrastructure | Indiana</span>
|
||||||
|
<div class="job-desc">
|
||||||
|
<ul>
|
||||||
|
<li>Distinguished as a top-tier contractor capable of selling and installing service packages simultaneously.</li>
|
||||||
|
<li>Managed end-to-end ISP installations, including pole climbing, line running, and in-home network configuration.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="job-item">
|
||||||
|
<div class="job-head">
|
||||||
|
<div class="job-title">Graphic Design & IT Consultant</div>
|
||||||
|
<div class="job-meta">2004 – 2009</div>
|
||||||
|
</div>
|
||||||
|
<span class="job-sub">Grace Evangelistic Ministries</span>
|
||||||
|
<div class="job-desc">
|
||||||
|
<ul>
|
||||||
|
<li>Directed the layout, design, and distribution of a bi-monthly newsletter for a large donor base.</li>
|
||||||
|
<li>Managed internal office IT infrastructure, ensuring uptime for administrative staff.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h3 class="section-title">Education & Background</h3>
|
||||||
|
<div class="edu-box">
|
||||||
|
<div class="edu-title">Self-Directed Professional Development</div>
|
||||||
|
<span class="edu-sub">Non-Traditional Education Path</span>
|
||||||
|
<p class="edu-text">
|
||||||
|
My education was driven by necessity, not a syllabus. Leaving the formal school system early and navigating life as a ward of the state required me to master the art of self-instruction.
|
||||||
|
</p>
|
||||||
|
<p class="edu-text" style="margin-bottom: 0;">
|
||||||
|
I have built my career on the ability to absorb, understand, and apply complex technical concepts without oversight.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" style="margin-bottom: 0;">
|
||||||
|
<h3 class="section-title">Professional Objective</h3>
|
||||||
|
<p class="profile-text">
|
||||||
|
After over two decades of successful independent contracting, I am seeking to transition into a dedicated, long-term role. At 45, I am operating at the peak of my technical capacity and possess the field-tested judgment that only comes from years of solving problems on the fly. I am looking for the right organization to invest my skills, work ethic, and loyalty in for the next major chapter of my career.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
© 2026 Jason Eugene Garrison
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME LOGIC ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const icon = toggleBtn.querySelector('i');
|
||||||
|
const root = document.documentElement;
|
||||||
|
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||||
|
if (savedTheme === 'dark') {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
icon.classList.replace('fa-moon', 'fa-sun');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.removeAttribute('data-theme');
|
||||||
|
icon.classList.replace('fa-sun', 'fa-moon');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
icon.classList.replace('fa-moon', 'fa-sun');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SCRAPER PROTECTION (Base64) ---
|
||||||
|
const e = "amFzb25ldWdlbmVnYXJyaXNvbkBpY2xvdWQuY29t";
|
||||||
|
const k = "KDI3MCkgODg5LTgwNzI=";
|
||||||
|
const t = "KDg2NSkgOTg1LTE2NDE=";
|
||||||
|
const decode = (s) => atob(s);
|
||||||
|
|
||||||
|
// Click-to-Reveal Handlers
|
||||||
|
document.getElementById('show-email').addEventListener('click', function() {
|
||||||
|
const val = decode(e);
|
||||||
|
this.innerHTML = `<a href="mailto:${val}">${val}</a>`;
|
||||||
|
this.classList.remove('secure-link');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('show-ky').addEventListener('click', function() {
|
||||||
|
const val = decode(k);
|
||||||
|
this.innerHTML = `<a href="tel:${val.replace(/\D/g,'')}">${val}</a>`;
|
||||||
|
this.classList.remove('secure-link');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('show-tn').addEventListener('click', function() {
|
||||||
|
const val = decode(t);
|
||||||
|
this.innerHTML = `<a href="tel:${val.replace(/\D/g,'')}">${val}</a>`;
|
||||||
|
this.classList.remove('secure-link');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+716
@@ -0,0 +1,716 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Christ IT Services | Field-Tested Infrastructure</title>
|
||||||
|
<meta name="description" content="Independent IT Field Engineer serving Clarksville, TN and the region from Nashville to Hopkinsville. Specializing in Low Voltage, Linux Systems, and Hardware Repair.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- 2. BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px;
|
||||||
|
padding: 12px 28px;
|
||||||
|
font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accent { background-color: var(--accent); color: white; }
|
||||||
|
.btn-accent:hover { background-color: #d35400; color: white !important; }
|
||||||
|
|
||||||
|
.btn-call {
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: white !important;
|
||||||
|
border: 2px solid #1f2937;
|
||||||
|
}
|
||||||
|
.btn-call:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-windows {
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||||
|
width: 100%; padding: 15px;
|
||||||
|
background-color: #0078D7; color: white;
|
||||||
|
font-weight: 600; border-radius: 4px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.btn-windows:hover { background-color: #005a9e; color: white; }
|
||||||
|
|
||||||
|
/* --- 3. NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.nav-links { display: flex; gap: 20px; align-items: center; }
|
||||||
|
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-body); }
|
||||||
|
.nav-link:hover { color: var(--primary); }
|
||||||
|
|
||||||
|
/* Theme Switch */
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- 4. HERO SECTION --- */
|
||||||
|
.hero {
|
||||||
|
padding: 80px 0 140px;
|
||||||
|
background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body));
|
||||||
|
position: relative; overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: ""; position: absolute; inset: 0;
|
||||||
|
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||||
|
background-size: 30px 30px; opacity: 0.5; pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 4rem; margin-bottom: 20px; }
|
||||||
|
.hero-content p {
|
||||||
|
font-size: 1.25rem; color: var(--text-body); margin-bottom: 35px; max-width: 90%;
|
||||||
|
border-left: 4px solid var(--accent); padding-left: 20px;
|
||||||
|
}
|
||||||
|
.hero-image {
|
||||||
|
position: relative; width: 100%; aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%; background: var(--bg-card);
|
||||||
|
border: 8px solid var(--bg-body); box-shadow: var(--shadow-md); overflow: hidden;
|
||||||
|
}
|
||||||
|
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
|
||||||
|
/* --- 5. FLOATING ICON BAR --- */
|
||||||
|
.icon-bar-wrapper { margin-top: -70px; position: relative; z-index: 10; }
|
||||||
|
.icon-bar {
|
||||||
|
background: var(--bg-card); border-radius: 8px;
|
||||||
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden; border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.icon-box {
|
||||||
|
padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
|
||||||
|
border-right: 1px solid var(--border); transition: 0.2s;
|
||||||
|
}
|
||||||
|
.icon-box:last-child { border-right: none; }
|
||||||
|
.icon-box:hover { background: var(--bg-offset); }
|
||||||
|
.icon-box i { font-size: 2rem; color: var(--primary); margin-bottom: 5px; }
|
||||||
|
.icon-box h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-dark); }
|
||||||
|
.icon-box span { font-size: 0.9rem; color: var(--text-body); }
|
||||||
|
|
||||||
|
/* --- 6. SERVICES SECTION --- */
|
||||||
|
.section { padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.services-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
.service-card {
|
||||||
|
background: var(--bg-card); padding: 30px 20px; border-radius: 8px;
|
||||||
|
border: 1px solid var(--border); transition: 0.3s;
|
||||||
|
}
|
||||||
|
.service-card:hover {
|
||||||
|
transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.service-card i { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
|
||||||
|
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-dark); line-height: 1.3; }
|
||||||
|
|
||||||
|
.service-card ul { list-style: none; margin-top: 15px; padding: 0; }
|
||||||
|
.service-card li {
|
||||||
|
margin-bottom: 8px; font-size: 0.9rem; color: var(--text-body);
|
||||||
|
display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
|
||||||
|
}
|
||||||
|
.service-card li::before { content: "•"; color: var(--accent); font-weight: bold; font-size: 1.2rem; line-height: 1; }
|
||||||
|
|
||||||
|
/* --- 7. REMOTE SUPPORT --- */
|
||||||
|
.remote-section {
|
||||||
|
background-color: var(--bg-highlight); padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.remote-layout {
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 40px;
|
||||||
|
}
|
||||||
|
.remote-text {
|
||||||
|
text-align: center;
|
||||||
|
display: flex; flex-direction: column; align-items: center;
|
||||||
|
}
|
||||||
|
.remote-text h2 { font-size: 2.5rem; margin-bottom: 15px; }
|
||||||
|
.remote-text p { font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; }
|
||||||
|
|
||||||
|
.mc-card {
|
||||||
|
background: var(--bg-card); width: 100%; max-width: 350px;
|
||||||
|
padding: 25px; border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.mc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
|
||||||
|
.mc-header i { font-size: 24px; color: #0078D7; }
|
||||||
|
.mc-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
|
||||||
|
.mc-subtitle { font-size: 0.85rem; color: var(--text-body); display: block; }
|
||||||
|
.mc-body { font-size: 0.9rem; color: var(--text-body); line-height: 1.5; margin-bottom: 20px; }
|
||||||
|
.mc-footer-link { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; color: #0078D7; text-decoration: underline; }
|
||||||
|
|
||||||
|
/* --- 8. PRICING --- */
|
||||||
|
.bg-offset { background-color: var(--bg-offset); }
|
||||||
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
|
||||||
|
.price-card {
|
||||||
|
background: var(--bg-card); padding: 40px 30px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border: 1px solid transparent;
|
||||||
|
display: flex; flex-direction: column; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
|
||||||
|
.price-card.featured { border-top: 4px solid var(--accent); position: relative; }
|
||||||
|
.price-card.featured::before {
|
||||||
|
content: "Most Common"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
|
||||||
|
background: var(--accent); color: white; padding: 4px 12px; font-size: 0.75rem;
|
||||||
|
text-transform: uppercase; font-weight: bold; border-radius: 20px;
|
||||||
|
}
|
||||||
|
.price-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; font-family: 'Oswald', sans-serif; }
|
||||||
|
.price-amount { font-size: 3rem; color: var(--text-dark); font-weight: 700; line-height: 1; margin-bottom: 5px; }
|
||||||
|
.price-strike { font-size: 1.5rem; color: var(--text-light); text-decoration: line-through; margin-right: 10px; font-weight: 400; vertical-align: middle; }
|
||||||
|
.price-meta { font-size: 0.9rem; color: var(--text-body); margin-bottom: 25px; font-weight: 500; }
|
||||||
|
.price-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
|
||||||
|
.price-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
|
||||||
|
.price-list li i { color: var(--primary); }
|
||||||
|
|
||||||
|
/* --- 9. BIO SECTION --- */
|
||||||
|
.bio-section { padding: 100px 0 60px; background: var(--bg-card); }
|
||||||
|
.bio-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
|
||||||
|
|
||||||
|
.bio-img-box {
|
||||||
|
width: 100%; aspect-ratio: 16/9;
|
||||||
|
background: #000; border-radius: 8px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 10. MISSION / FAITH SECTION --- */
|
||||||
|
.mission-section {
|
||||||
|
background: var(--primary); color: white;
|
||||||
|
padding: 60px 0; text-align: center;
|
||||||
|
}
|
||||||
|
.mission-content { max-width: 800px; margin: 0 auto; }
|
||||||
|
.mission-verse {
|
||||||
|
font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: #fff;
|
||||||
|
}
|
||||||
|
.mission-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
|
||||||
|
|
||||||
|
/* --- 11. SHORTS SCROLLER --- */
|
||||||
|
.video-section { background: var(--bg-offset); border-top: 1px solid var(--border); }
|
||||||
|
|
||||||
|
.shorts-scroller {
|
||||||
|
display: flex; gap: 20px; overflow-x: auto; padding: 20px 0;
|
||||||
|
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
.shorts-scroller::-webkit-scrollbar { height: 8px; }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-track { background: var(--bg-offset); }
|
||||||
|
.shorts-scroller::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
|
||||||
|
|
||||||
|
.short-card {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 240px;
|
||||||
|
aspect-ratio: 9/16;
|
||||||
|
background: black; border-radius: 12px; overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md); border: 1px solid var(--border);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.short-card iframe { width: 100%; height: 100%; border: none; }
|
||||||
|
|
||||||
|
/* FOOTER */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||||
|
|
||||||
|
/* RESPONSIVE */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid { grid-template-columns: 1fr; text-align: center; }
|
||||||
|
.hero-content p { margin: 0 auto 40px; border-left: none; padding: 0; }
|
||||||
|
.hero-image { width: 300px; height: 300px; margin: 0 auto; }
|
||||||
|
.icon-bar { grid-template-columns: 1fr 1fr; }
|
||||||
|
.icon-box { border-bottom: 1px solid var(--border); }
|
||||||
|
.icon-box:nth-child(2) { border-right: none; }
|
||||||
|
.remote-layout { flex-direction: column; text-align: center; }
|
||||||
|
.bio-layout { grid-template-columns: 1fr; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="#" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#services" class="nav-link">Services</a>
|
||||||
|
<a href="#pricing" class="nav-link">Pricing</a>
|
||||||
|
<a href="connections.html" class="nav-link" style="color: var(--accent);">Remote Support</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1><span class="text-primary">Real Tech Support</span><br>For Real Problems</h1>
|
||||||
|
<p>
|
||||||
|
Stop struggling with slow computers, messy cables, and confusing networks.
|
||||||
|
Whether you need a simple laptop repair or a complete business network overhaul,
|
||||||
|
I provide honest, skilled technical labor. No geek-speak, just results.
|
||||||
|
</p>
|
||||||
|
<div style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; md:justify-content: flex-start;">
|
||||||
|
<a href="#pricing" class="btn btn-accent">See Pricing <i class="fa-solid fa-tag"></i></a>
|
||||||
|
<button class="btn btn-call secure-contact-btn" data-type="phone">
|
||||||
|
Call or Text <i class="fa-solid fa-mobile-screen"></i>
|
||||||
|
</button>
|
||||||
|
<a href="#services" class="btn btn-outline">Our Services <i class="fa-solid fa-arrow-down"></i></a>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 25px; font-size: 0.95rem; color: var(--text-body); font-weight: 500;">
|
||||||
|
<i class="fa-solid fa-location-dot text-primary"></i> Locally Owned & Operated in Clarksville, TN
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-image">
|
||||||
|
<img src="jason.JPG" alt="Jason Garrison Field Engineer">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="container icon-bar-wrapper">
|
||||||
|
<div class="icon-bar">
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||||
|
<h4>Hardware Repair</h4>
|
||||||
|
<span>PCs, Laptops & Servers</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-network-wired"></i>
|
||||||
|
<h4>Infrastructure</h4>
|
||||||
|
<span>Low-Voltage & Cabling</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-bars-progress"></i>
|
||||||
|
<h4>Project Management</h4>
|
||||||
|
<span>Planning & Execution</span>
|
||||||
|
</div>
|
||||||
|
<div class="icon-box">
|
||||||
|
<i class="fa-solid fa-user-shield"></i>
|
||||||
|
<h4>Consulting</h4>
|
||||||
|
<span>Independent & Secure</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section id="services" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Professional IT <span class="text-primary">Services</span></h2>
|
||||||
|
<p>Bringing enterprise standards to your home or small business. Service area: Nashville to Hopkinsville.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services-grid">
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-house-laptop"></i>
|
||||||
|
<h3>Residential Tech Support</h3>
|
||||||
|
<p>Professional-grade repair for the home. I treat your personal computer with the same care as a corporate server.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Hardware Repair & Upgrades</li>
|
||||||
|
<li>Virus & Malware Removal</li>
|
||||||
|
<li>Data Recovery & Transfer</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-diagram-project"></i>
|
||||||
|
<h3>Commercial Infrastructure</h3>
|
||||||
|
<p>Reliable foundations for business. Professional low-voltage installation and termination for Gigabit speeds.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Cat6 Ethernet & Fiber Drops</li>
|
||||||
|
<li>Rack Cleanup & Management</li>
|
||||||
|
<li>Secure Guest Wi-Fi Setup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-cash-register"></i>
|
||||||
|
<h3>Business Operations</h3>
|
||||||
|
<p>Technology that drives your business forward. I handle the specialized hardware that keeps your customers happy.</p>
|
||||||
|
<ul>
|
||||||
|
<li>POS System Installation</li>
|
||||||
|
<li>Digital Menu Boards & Kiosks</li>
|
||||||
|
<li>Back Office Workstations</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="service-card">
|
||||||
|
<i class="fa-solid fa-video"></i>
|
||||||
|
<h3>Security & Surveillance</h3>
|
||||||
|
<p>Protect your assets with professional security installations. Modern, accessible systems without monthly fees.</p>
|
||||||
|
<ul>
|
||||||
|
<li>IP Camera Installation (NVR)</li>
|
||||||
|
<li>Door Access Control</li>
|
||||||
|
<li>Remote Viewing Setup</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="remote-section">
|
||||||
|
<div class="container remote-layout">
|
||||||
|
<div class="remote-text">
|
||||||
|
<h2>Need Help <span class="text-primary">Right Now?</span></h2>
|
||||||
|
<p>Skip the travel fee. If you have a working internet connection, I can connect securely to your computer and fix many software, email, and virus issues instantly. If you haven't connected before, download the assistant below.</p>
|
||||||
|
<a href="connections.html" class="btn btn-accent">
|
||||||
|
Launch Remote Support <i class="fa-solid fa-headset"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mc-card">
|
||||||
|
<div class="mc-header">
|
||||||
|
<i class="fa-brands fa-windows"></i>
|
||||||
|
<div>
|
||||||
|
<div class="mc-title">Assistant</div>
|
||||||
|
<span class="mc-subtitle">Windows Support Tool</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mc-body">
|
||||||
|
Assistant is a Windows system tray tool that can be used when help is needed.
|
||||||
|
This is not an agent that runs in the background; it connects to the server only when requested.
|
||||||
|
</div>
|
||||||
|
<a href="https://mesh.christit.com/agentinvite" class="btn-windows">
|
||||||
|
<i class="fa-solid fa-download"></i> Download Assistant for Windows
|
||||||
|
</a>
|
||||||
|
<a href="#" class="mc-footer-link">Blocked? See Instructions</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pricing" class="section bg-offset">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Transparent <span class="text-accent">Pricing</span></h2>
|
||||||
|
<p>Simple, flat-rate pricing. You always know what you're paying before the work begins.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-grid">
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Remote Support</div>
|
||||||
|
<div class="price-amount">$150</div>
|
||||||
|
<div class="price-meta">Flat Rate Per Session</div>
|
||||||
|
<div style="flex-grow:1; margin-bottom: 20px; font-size: 0.9rem; color: var(--text-body); line-height: 1.5;">
|
||||||
|
<p>All the remote labor it takes to cleanup and do everything possible to improve a machine, answer questions, etc.</p>
|
||||||
|
<p style="margin-top:10px; font-style: italic;">"Whether it takes 5 minutes, 5 hours, or 5 days."</p>
|
||||||
|
</div>
|
||||||
|
<a href="connections.html" class="btn btn-outline" style="justify-content:center;">Book Remote</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card featured">
|
||||||
|
<div class="price-title text-accent">On-Site Service</div>
|
||||||
|
<div class="price-amount">
|
||||||
|
<span class="price-strike">$85</span>$75
|
||||||
|
</div>
|
||||||
|
<div class="price-meta">Per Hour (2hr Minimum)</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Hardware Repair & Upgrades</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Network Cabling (Cat6)</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Wi-Fi Mesh Installation</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Custom PC Builds</li>
|
||||||
|
</ul>
|
||||||
|
<button class="btn secure-contact-btn" data-type="email" style="background: var(--accent); justify-content:center; width:100%;">Schedule Visit</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-title">Drop-Off Repair</div>
|
||||||
|
<div class="price-amount" style="font-size:2.2rem; margin-top:10px;">By Appt</div>
|
||||||
|
<div class="price-meta">Clarksville Location</div>
|
||||||
|
<div style="flex-grow:1; color: var(--text-body); font-size: 0.95rem; line-height:1.6; margin-bottom:20px;">
|
||||||
|
<p style="margin-bottom:15px;"><strong>Strictly by appointment only.</strong></p>
|
||||||
|
<p>Please call or text first to schedule a drop-off time. Secure, residential location.</p>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline secure-contact-btn" data-type="phone" style="justify-content:center; width:100%;">Call or Text</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bio-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="bio-layout">
|
||||||
|
<div class="bio-img-box">
|
||||||
|
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/rA67d1ga9G8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-primary" style="letter-spacing: 2px; margin-bottom: 10px; font-weight:700;">MEET THE ENGINEER</h4>
|
||||||
|
<h2 style="font-size: 3rem; margin-bottom: 25px;">Experience You Can <span class="text-primary">Trust</span></h2>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 20px; font-size: 1.1rem;">
|
||||||
|
My name is Jason Garrison. I am a Field Engineer and IT Contractor with over two decades of experience in the trenches of technology.
|
||||||
|
</p>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 30px;">
|
||||||
|
I started Christ IT to provide honest, skilled labor to a world that often overcharges and under-delivers.
|
||||||
|
Whether I am terminating fiber optic cable for a commercial build-out or soldering a power jack on a laptop,
|
||||||
|
I treat every ticket with the same level of integrity. I am not a salesman; I am the guy who fixes it.
|
||||||
|
</p>
|
||||||
|
<button class="btn secure-contact-btn" data-type="email">Hire Me For A Project</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mission-section">
|
||||||
|
<div class="container mission-content">
|
||||||
|
<div class="mission-verse">"For we are God’s handiwork, created in Christ Jesus to do good works, which God prepared in advance for us to do." — Ephesians 2:10</div>
|
||||||
|
<p class="mission-text">
|
||||||
|
At Christ IT, technology is our trade, but service is our calling. We believe that doing a job right—with honesty, integrity, and patience—is a way to honor the Lord. When you call us, you aren't just getting a technician; you're getting a neighbor who cares.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section video-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Christ IT <span class="text-primary">Work Shorts</span></h2>
|
||||||
|
<p>Quick repairs, tips, and results from the field. (Swipe to see more)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="shorts-scroller">
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/oBWBItt8ZVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="short-card">
|
||||||
|
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="#" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology solutions to Clarksville and the region from Nashville to Hopkinsville.</p>
|
||||||
|
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT Services. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') ||
|
||||||
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
|
||||||
|
if (currentTheme === 'dark') {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SCRAPER PROTECTION (Base64 Encoded) ---
|
||||||
|
// Email: jason@christit.com -> amFzb25AY2hyaXN0aXQuY29t
|
||||||
|
// Phone: (270) 889-8272 -> KDI3MCkgODg5LTgyNzI=
|
||||||
|
|
||||||
|
function decodeContact(str) {
|
||||||
|
return atob(str);
|
||||||
|
}
|
||||||
|
|
||||||
|
const encodedEmail = "amFzb25AY2hyaXN0aXQuY29t";
|
||||||
|
const encodedPhone = "KDI3MCkgODg5LTgyNzI=";
|
||||||
|
|
||||||
|
// Reveal in Footer on Click/Hover
|
||||||
|
document.getElementById('secure-email').addEventListener('click', function() {
|
||||||
|
this.textContent = decodeContact(encodedEmail);
|
||||||
|
this.style.cursor = 'default';
|
||||||
|
});
|
||||||
|
document.getElementById('secure-phone').addEventListener('click', function() {
|
||||||
|
const num = decodeContact(encodedPhone);
|
||||||
|
this.innerHTML = `<a href="tel:${num.replace(/\D/g,'')}" style="text-decoration:none; color:inherit;">${num}</a>`;
|
||||||
|
this.style.cursor = 'default';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle Buttons
|
||||||
|
document.querySelectorAll('.secure-contact-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
const type = e.target.dataset.type;
|
||||||
|
if(type === 'email') window.location.href = `mailto:${decodeContact(encodedEmail)}`;
|
||||||
|
if(type === 'phone') window.location.href = `tel:${decodeContact(encodedPhone)}`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-reveal for Humans (optional - slight delay)
|
||||||
|
setTimeout(() => {
|
||||||
|
document.getElementById('secure-email').textContent = decodeContact(encodedEmail);
|
||||||
|
const num = decodeContact(encodedPhone);
|
||||||
|
document.getElementById('secure-phone').innerHTML = `<a href="tel:${num.replace(/\D/g,'')}" style="text-decoration:none; color:inherit;">${num}</a>`;
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+503
@@ -0,0 +1,503 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>One-Page Websites | Christ IT</title>
|
||||||
|
<meta name="description" content="Clean, mobile-ready one-page websites for local professionals in Clarksville, TN.">
|
||||||
|
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 4V60C44 62.2 42.2 64 40 64H32C29.8 64 28 62.2 28 60V24H18C15.8 24 14 22.2 14 20V16C14 13.8 15.8 12 18 12H44Z' fill='%23004e92'/%3E%3Crect x='8' y='36' width='12' height='24' rx='2' fill='%23374151'/%3E%3Ccircle cx='14' cy='24' r='5' fill='%23f59e0b'/%3E%3C/svg%3E" type="image/svg+xml">
|
||||||
|
|
||||||
|
<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=Inter:wght@400;500;600&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- 1. GLOBAL VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Mode */
|
||||||
|
--bg-body: #ffffff;
|
||||||
|
--bg-offset: #f3f4f6;
|
||||||
|
--bg-highlight: #eef2ff;
|
||||||
|
--bg-card: #ffffff;
|
||||||
|
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #1f2937;
|
||||||
|
--text-body: #4b5563;
|
||||||
|
--text-light: #9ca3af;
|
||||||
|
|
||||||
|
--primary: #0056b3;
|
||||||
|
--primary-dark: #003d6b;
|
||||||
|
--accent: #e67e22;
|
||||||
|
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
--logo-text: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--bg-body: #0f172a;
|
||||||
|
--bg-offset: #1e293b;
|
||||||
|
--bg-highlight: #172554;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||||
|
|
||||||
|
--text-dark: #f8fafc;
|
||||||
|
--text-body: #cbd5e1;
|
||||||
|
--text-light: #94a3b8;
|
||||||
|
|
||||||
|
--primary: #3b82f6;
|
||||||
|
--primary-dark: #60a5fa;
|
||||||
|
|
||||||
|
--border: #334155;
|
||||||
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
--logo-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
color: var(--text-body);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-dark);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||||
|
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||||
|
|
||||||
|
/* --- BUTTONS --- */
|
||||||
|
.text-primary { color: var(--primary); }
|
||||||
|
.text-accent { color: var(--accent); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; gap: 10px; justify-content: center;
|
||||||
|
padding: 12px 28px; font-weight: 600; font-size: 1rem;
|
||||||
|
text-transform: uppercase; letter-spacing: 0.5px;
|
||||||
|
background-color: var(--primary); color: white;
|
||||||
|
border-radius: 4px; border: 2px solid transparent;
|
||||||
|
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: var(--primary-dark);
|
||||||
|
color: white !important; transform: translateY(-1px);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.btn-outline {
|
||||||
|
background-color: transparent; color: var(--text-dark);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-outline:hover {
|
||||||
|
background-color: var(--primary); border-color: var(--primary);
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- NAVIGATION --- */
|
||||||
|
nav {
|
||||||
|
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||||
|
position: sticky; top: 0; z-index: 100;
|
||||||
|
transition: background-color 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
|
||||||
|
.theme-switch-wrapper {
|
||||||
|
display: flex; align-items: center; gap: 10px;
|
||||||
|
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||||
|
}
|
||||||
|
.theme-switch {
|
||||||
|
position: relative; width: 50px; height: 26px;
|
||||||
|
background: var(--border); border-radius: 20px;
|
||||||
|
cursor: pointer; transition: 0.3s;
|
||||||
|
}
|
||||||
|
.theme-switch::after {
|
||||||
|
content: ""; position: absolute; top: 3px; left: 3px;
|
||||||
|
width: 20px; height: 20px; background: white;
|
||||||
|
border-radius: 50%; transition: 0.3s;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||||
|
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||||
|
|
||||||
|
/* --- PLACEHOLDER STYLES --- */
|
||||||
|
.img-placeholder {
|
||||||
|
background-color: var(--bg-offset);
|
||||||
|
border: 2px dashed var(--text-light);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
color: var(--text-light);
|
||||||
|
min-height: 300px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.img-placeholder i { font-size: 3rem; margin-bottom: 15px; color: var(--primary); opacity: 0.5; }
|
||||||
|
.img-placeholder p { font-size: 0.9rem; margin-top: 10px; max-width: 80%; }
|
||||||
|
|
||||||
|
/* --- HERO --- */
|
||||||
|
.hero { padding: 80px 0; background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body)); }
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
|
||||||
|
.hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.1; }
|
||||||
|
.hero-content p { font-size: 1.2rem; color: var(--text-body); margin-bottom: 30px; }
|
||||||
|
|
||||||
|
/* --- PROCESS & REQUIREMENTS --- */
|
||||||
|
.section { padding: 100px 0; }
|
||||||
|
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||||
|
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.req-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: start; }
|
||||||
|
.req-card {
|
||||||
|
background: var(--bg-card); border: 1px solid var(--border);
|
||||||
|
border-radius: 8px; padding: 40px; box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.req-card h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--text-dark); }
|
||||||
|
.req-list { list-style: none; margin-bottom: 20px; }
|
||||||
|
.req-list li { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px; }
|
||||||
|
.req-list i { color: var(--primary); font-size: 1.2rem; margin-top: 3px; }
|
||||||
|
|
||||||
|
.timeline-box {
|
||||||
|
background: var(--bg-offset); border-radius: 8px; padding: 30px;
|
||||||
|
border-left: 4px solid var(--accent);
|
||||||
|
}
|
||||||
|
.timeline-box h4 { font-size: 1.3rem; margin-bottom: 10px; }
|
||||||
|
|
||||||
|
/* --- PRICING & HOSTING --- */
|
||||||
|
.bg-offset { background-color: var(--bg-offset); }
|
||||||
|
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; justify-content: center; }
|
||||||
|
.price-card {
|
||||||
|
background: var(--bg-card); padding: 40px 30px; border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-sm); border: 1px solid transparent;
|
||||||
|
display: flex; flex-direction: column; transition: 0.3s;
|
||||||
|
max-width: 500px; margin: 0 auto; width: 100%;
|
||||||
|
}
|
||||||
|
.price-card.featured { border-top: 4px solid var(--accent); position: relative; }
|
||||||
|
.price-title { font-size: 1.25rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; font-family: 'Oswald', sans-serif; }
|
||||||
|
.price-amount { font-size: 3.5rem; color: var(--text-dark); font-weight: 700; line-height: 1; margin-bottom: 5px; }
|
||||||
|
.price-meta { font-size: 0.9rem; color: var(--text-body); margin-bottom: 25px; font-weight: 500; }
|
||||||
|
.price-list { list-style: none; margin-bottom: 30px; flex-grow: 1; }
|
||||||
|
.price-list li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 10px; }
|
||||||
|
.price-list li i { color: var(--primary); }
|
||||||
|
|
||||||
|
.hosting-banner {
|
||||||
|
margin-top: 40px; background: var(--bg-card); padding: 40px; border-radius: 8px;
|
||||||
|
border: 2px solid var(--primary); box-shadow: var(--shadow-md);
|
||||||
|
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
|
||||||
|
max-width: 900px; margin: 40px auto 0;
|
||||||
|
}
|
||||||
|
.hosting-banner-content {
|
||||||
|
display: flex; align-items: center; gap: 30px; flex: 1; min-width: 300px;
|
||||||
|
}
|
||||||
|
.hosting-banner-content i { font-size: 4rem; color: var(--primary); }
|
||||||
|
.hosting-price-box {
|
||||||
|
text-align: right; min-width: 180px;
|
||||||
|
padding-left: 30px; border-left: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- EXAMPLES SECTION --- */
|
||||||
|
.examples-grid {
|
||||||
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- FOOTER --- */
|
||||||
|
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||||
|
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||||
|
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||||
|
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hero-grid, .req-grid { grid-template-columns: 1fr; }
|
||||||
|
.hero-content { text-align: center; }
|
||||||
|
.nav-links { display: none; }
|
||||||
|
.hosting-banner { flex-direction: column; text-align: center; }
|
||||||
|
.hosting-banner-content { flex-direction: column; text-align: center; gap: 15px; }
|
||||||
|
.hosting-price-box { text-align: center; border-left: none; padding-left: 0; border-top: 2px solid var(--border); padding-top: 20px; width: 100%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<div class="container nav-inner">
|
||||||
|
<a href="index.html" class="logo" style="display:flex; align-items:center;">
|
||||||
|
<svg height="45" viewBox="0 0 340 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="0" y="62" font-family="Montserrat, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||||
|
<g transform="translate(200, 0)">
|
||||||
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||||
|
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||||
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||||
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<div style="display: flex; align-items: center; gap: 20px;">
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="index.html" class="nav-link">Home</a>
|
||||||
|
<a href="cards.html" class="nav-link">NFC Cards</a>
|
||||||
|
<a href="connections.html" class="nav-link">Remote Support</a>
|
||||||
|
</div>
|
||||||
|
<div class="theme-switch-wrapper">
|
||||||
|
<span>Dark Mode</span>
|
||||||
|
<div class="theme-switch" id="theme-toggle"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="container hero-grid">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1>Your Digital Storefront, <span class="text-primary">Simplified.</span></h1>
|
||||||
|
<p>
|
||||||
|
A massive, complicated 10-page website is overkill for most local businesses. You need a clean, mobile-optimized landing page that tells clients exactly who you are, what you do, and how to contact you.
|
||||||
|
</p>
|
||||||
|
<a href="#pricing" class="btn">View Packages <i class="fa-solid fa-arrow-down"></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="img-placeholder" style="aspect-ratio: 4/3;">
|
||||||
|
<i class="fa-solid fa-laptop-mobile"></i>
|
||||||
|
<strong>HERO IMAGE PLACEHOLDER</strong>
|
||||||
|
<p>A sleek workspace setup showing a laptop and a smartphone side-by-side. Both screens are brightly displaying a modern, clean, single-page website for a local contractor, emphasizing that the site looks perfect on both desktop and mobile.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="section container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>The Process & <span class="text-primary">Requirements</span></h2>
|
||||||
|
<p>I handle the technical heavy lifting, but I need your expertise to tell your story.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="req-grid">
|
||||||
|
<div class="req-card">
|
||||||
|
<h3>What You Provide</h3>
|
||||||
|
<p style="color: var(--text-body); margin-bottom: 20px;">To keep turnaround times fast and prices low, you are responsible for supplying the core content of the site.</p>
|
||||||
|
<ul class="req-list">
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-image"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Your Branding & Photos</strong><br>
|
||||||
|
<span style="font-size: 0.9rem; color: var(--text-body);">High-resolution files of your logo, headshots, and photos of your past work.</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-pen-nib"></i>
|
||||||
|
<div>
|
||||||
|
<strong>The Written Copy</strong><br>
|
||||||
|
<span style="font-size: 0.9rem; color: var(--text-body);">You provide the text for your bio, services, and contact info. <br><em style="color: var(--accent);">(Need help writing? Copywriting services are available for an extra fee.)</em></span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<i class="fa-solid fa-link"></i>
|
||||||
|
<div>
|
||||||
|
<strong>Your Links</strong><br>
|
||||||
|
<span style="font-size: 0.9rem; color: var(--text-body);">URLs for your social media pages, booking software, or existing Google Business profile.</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 20px;">
|
||||||
|
<div class="img-placeholder" style="min-height: 250px;">
|
||||||
|
<i class="fa-solid fa-list-check"></i>
|
||||||
|
<strong>PROCESS IMAGE PLACEHOLDER</strong>
|
||||||
|
<p>A top-down shot of a messy but productive desk. A notepad with a wireframe sketch of a website, some printed logo concepts, a cup of coffee, and a keyboard. It visually represents "gathering the pieces."</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-box">
|
||||||
|
<h4><i class="fa-solid fa-stopwatch text-accent"></i> Fast Turnaround Time</h4>
|
||||||
|
<p style="color: var(--text-body); font-size: 0.95rem;">
|
||||||
|
Once you submit all your text, images, and branding assets to me, your custom one-page website will be fully built, tested, and <strong>live within 3 to 5 business days</strong>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="pricing" class="section bg-offset">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Transparent <span class="text-accent">Pricing</span></h2>
|
||||||
|
<p>One flat fee to build it, and one simple yearly fee to keep it online.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-grid">
|
||||||
|
<div class="price-card featured">
|
||||||
|
<div class="price-title text-accent">Pro Digital Profile</div>
|
||||||
|
<div class="price-amount">$200</div>
|
||||||
|
<div class="price-meta">One-Time Design & Setup Fee</div>
|
||||||
|
<ul class="price-list">
|
||||||
|
<li><i class="fa-solid fa-check"></i> Custom One-Page Website Design</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Mobile & Desktop Optimized</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Contact Forms & Click-to-Call Buttons</li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Perfect Hub for <a href="cards.html" style="text-decoration: underline;">NFC Tap Cards</a></li>
|
||||||
|
<li><i class="fa-solid fa-check"></i> Minor text updates included</li>
|
||||||
|
</ul>
|
||||||
|
<button class="btn secure-contact-btn" data-type="email" style="background: var(--accent); justify-content:center; width:100%;">Start Building</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hosting-banner">
|
||||||
|
<div class="hosting-banner-content">
|
||||||
|
<i class="fa-solid fa-server"></i>
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; margin-bottom: 5px; color: var(--text-dark); font-family: 'Oswald', sans-serif; text-transform: uppercase;">The Only Hosting Plan You Need</h3>
|
||||||
|
<p style="color: var(--text-body); font-size: 1.05rem; line-height: 1.5;">Keep your new site online, secure, and lightning-fast. I handle your custom domain name renewals, SSL security certificates, server maintenance, and uptime monitoring. You never have to touch a line of code or deal with a massive hosting company's tech support.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hosting-price-box">
|
||||||
|
<div class="hosting-price-amount" style="font-size: 3rem; font-weight: 700; color: var(--text-dark); line-height: 1;">$60</div>
|
||||||
|
<div class="hosting-price-meta" style="font-size: 0.9rem; color: var(--text-body); font-weight: 500;">Per Year</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="portfolio" class="section container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2>Example <span class="text-primary">Sites</span></h2>
|
||||||
|
<p>Take a look at how other local professionals are using their one-page hubs.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="examples-grid">
|
||||||
|
<div class="img-placeholder" style="min-height: 350px;">
|
||||||
|
<i class="fa-solid fa-image"></i>
|
||||||
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 1</strong>
|
||||||
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A local plumber's site with a "Call Now" button prominent.</p>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="min-height: 350px;">
|
||||||
|
<i class="fa-solid fa-image"></i>
|
||||||
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 2</strong>
|
||||||
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A real estate agent's profile with a friendly headshot and links to their listings.</p>
|
||||||
|
</div>
|
||||||
|
<div class="img-placeholder" style="min-height: 350px;">
|
||||||
|
<i class="fa-solid fa-image"></i>
|
||||||
|
<strong>PORTFOLIO IMAGE PLACEHOLDER 3</strong>
|
||||||
|
<p>A mockup showing a completed website design displayed on a mobile phone screen. E.g., A local lawn care service with a gallery of nice lawns and a quote request form.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div style="max-width: 400px;">
|
||||||
|
<a href="index.html" class="footer-logo">CHRIST IT</a>
|
||||||
|
<p>Providing secure, independent technology and digital branding solutions in Clarksville, TN.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||||
|
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
© 2026 Christ IT. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME ENGINE ---
|
||||||
|
const toggleBtn = document.getElementById('theme-toggle');
|
||||||
|
const root = document.documentElement;
|
||||||
|
const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||||
|
if (currentTheme === 'dark') { root.setAttribute('data-theme', 'dark'); }
|
||||||
|
|
||||||
|
toggleBtn.addEventListener('click', () => {
|
||||||
|
const isDark = root.getAttribute('data-theme') === 'dark';
|
||||||
|
if (isDark) {
|
||||||
|
root.setAttribute('data-theme', 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
} else {
|
||||||
|
root.setAttribute('data-theme', 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const contactKey = 43;
|
||||||
|
const contactValues = {
|
||||||
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
||||||
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
||||||
|
};
|
||||||
|
|
||||||
|
function revealContact(type) {
|
||||||
|
const encoded = contactValues[type];
|
||||||
|
if (!encoded) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildContactLink(type) {
|
||||||
|
const value = revealContact(type);
|
||||||
|
if (!value) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
link.rel = "nofollow";
|
||||||
|
link.textContent = value;
|
||||||
|
link.style.textDecoration = "none";
|
||||||
|
link.style.color = "inherit";
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
function revealInlineContact(el, type) {
|
||||||
|
const link = buildContactLink(type);
|
||||||
|
if (link) {
|
||||||
|
el.replaceWith(link);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const secureEmail = document.getElementById("secure-email");
|
||||||
|
const securePhone = document.getElementById("secure-phone");
|
||||||
|
|
||||||
|
if (secureEmail) {
|
||||||
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (securePhone) {
|
||||||
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const type = btn.dataset.type;
|
||||||
|
const value = revealContact(type);
|
||||||
|
|
||||||
|
if (type === "email") {
|
||||||
|
window.location.href = `mailto:${value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "phone") {
|
||||||
|
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user