Import current Christ IT static site
This commit is contained in:
+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>
|
||||
Reference in New Issue
Block a user