Skip to content

Instantly share code, notes, and snippets.

@ludoplex
Last active April 13, 2026 04:27
Show Gist options
  • Select an option

  • Save ludoplex/b06281d8a393a1aeddf0b606185e0261 to your computer and use it in GitHub Desktop.

Select an option

Save ludoplex/b06281d8a393a1aeddf0b606185e0261 to your computer and use it in GitHub Desktop.
Old Glory Arms temp deploy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Old Glory Arms — Long-Range Precision Rifles & Services</title>
<meta name="description" content="Old Glory Arms — Taking the guesswork out of long-range shooting. Custom precision rifles, scope dial-in services, and the OG Ballistics app.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#c4a44a;--gold-light:#e8c84a;--bg:#0a0a0a;--surface:#111;--surface2:#1a1a1a;--text:#e8e0d0;--text-dim:#999;--border:#2a2a2a;--red:#8b2020}
body{font-family:'Source Sans 3',sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
h1,h2,h3,h4{font-family:'Cinzel',serif;letter-spacing:2px}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-light)}
img{max-width:100%}
.nav{background:rgba(10,10,10,0.95);backdrop-filter:blur(10px);padding:12px 0;position:fixed;width:100%;top:0;z-index:100;border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo-area{display:flex;align-items:center;gap:15px}
.logo-area img{height:55px;filter:brightness(0) invert(1)}
.logo-area h1{font-size:18px;color:var(--gold);letter-spacing:4px;text-transform:uppercase}
.logo-area .tagline{font-size:10px;color:var(--text-dim);letter-spacing:2px;display:block;margin-top:-2px}
.nav-links{display:flex;gap:28px;flex-wrap:wrap}
.nav-links a{color:var(--text);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.nav-links a:hover{color:var(--gold)}
.mobile-menu{display:none;cursor:pointer;color:var(--gold);font-size:24px}
.hero{margin-top:80px;min-height:70vh;background:linear-gradient(135deg,rgba(10,10,10,0.85),rgba(20,15,5,0.9));display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 50%,rgba(196,164,74,0.05) 0%,transparent 60%)}
.hero-content{z-index:1;padding:40px 20px}
.hero h2{font-size:56px;color:var(--gold);letter-spacing:8px;margin-bottom:15px;text-shadow:0 2px 20px rgba(196,164,74,0.2)}
.hero .subtitle{font-size:20px;color:var(--text-dim);max-width:650px;margin:0 auto 30px;font-weight:300;letter-spacing:1px}
.hero .cta{display:inline-block;background:var(--gold);color:var(--bg);padding:14px 40px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:3px;border:none;cursor:pointer;transition:all .3s;margin:5px}
.hero .cta:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 4px 20px rgba(196,164,74,0.3)}
.divider{width:80px;height:2px;background:var(--gold);margin:0 auto 20px;opacity:0.5}
section{max-width:1200px;margin:80px auto;padding:0 20px}
section h2{font-size:36px;color:var(--gold);margin-bottom:15px;text-align:center}
section .section-sub{text-align:center;color:var(--text-dim);margin-bottom:50px;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px}
.card{background:var(--surface);border:1px solid var(--border);padding:35px;border-radius:4px;transition:all .3s;position:relative;overflow:hidden}
.card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.4)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .3s}
.card:hover::before{opacity:1}
.card h3{color:var(--gold);margin-bottom:12px;font-size:22px}
.card p{color:var(--text-dim);line-height:1.8;font-size:15px}
.card .price{color:var(--gold);font-size:24px;font-weight:700;margin-top:20px;font-family:'Cinzel',serif}
.card ul{list-style:none;margin:15px 0;padding:0}
.card ul li{padding:6px 0;color:var(--text-dim);font-size:14px;position:relative;padding-left:20px}
.card ul li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:10px;top:8px}
.card .card-cta{display:inline-block;margin-top:15px;padding:10px 25px;border:1px solid var(--gold);color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:2px;transition:all .3s}
.card .card-cta:hover{background:var(--gold);color:var(--bg)}
.service-tier{display:flex;gap:15px;margin-top:15px;flex-wrap:wrap}
.tier{background:var(--surface2);border:1px solid var(--border);padding:12px 18px;border-radius:3px;flex:1;min-width:140px}
.tier .tier-name{color:var(--gold);font-weight:600;font-size:14px}
.tier .tier-price{color:var(--text);font-size:20px;font-weight:700;margin-top:4px;font-family:'Cinzel',serif}
.tier .tier-desc{color:var(--text-dim);font-size:12px;margin-top:4px}
.how-it-works{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:40px;margin-top:40px}
.how-it-works h3{color:var(--gold);margin-bottom:20px;font-size:20px;text-align:center}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:25px}
.step{text-align:center;padding:15px}
.step-num{display:inline-block;width:40px;height:40px;line-height:40px;background:var(--gold);color:var(--bg);font-weight:700;border-radius:50%;margin-bottom:10px;font-family:'Cinzel',serif}
.step h4{color:var(--text);font-size:14px;margin-bottom:5px;letter-spacing:1px}
.step p{color:var(--text-dim);font-size:13px}
.app-section{background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:4px;padding:60px 40px;text-align:center;position:relative;overflow:hidden}
.app-section h2{border:none;margin-bottom:10px}
.app-section .app-desc{color:var(--text-dim);max-width:600px;margin:0 auto 25px;font-size:16px;line-height:1.8}
.app-features{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin:25px 0}
.app-feature{color:var(--text-dim);font-size:14px}
.app-feature span{color:var(--gold);font-weight:600}
.app-install-steps{max-width:500px;margin:30px auto 0;text-align:left}
.app-install-steps h3{color:var(--gold);font-size:18px;margin-bottom:15px;text-align:center}
.install-step{display:flex;gap:15px;margin-bottom:12px;align-items:flex-start}
.install-step .num{background:var(--gold);color:var(--bg);width:28px;height:28px;border-radius:50%;text-align:center;line-height:28px;font-weight:700;font-size:14px;flex-shrink:0}
.install-step p{color:var(--text-dim);font-size:14px;line-height:1.6}
.btn{display:inline-block;background:var(--gold);color:var(--bg);padding:16px 45px;font-size:14px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:3px;transition:all .3s;border:2px solid var(--gold);margin:5px}
.btn:hover{background:transparent;color:var(--gold)}
.btn-outline{background:transparent;color:var(--gold);border:2px solid var(--gold)}
.btn-outline:hover{background:var(--gold);color:var(--bg)}
.contact-section{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:50px 40px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-info h3{color:var(--gold);margin-bottom:20px}
.contact-item{display:flex;gap:12px;margin-bottom:18px;align-items:flex-start}
.contact-item .icon{color:var(--gold);font-size:18px;flex-shrink:0;width:24px;text-align:center}
.contact-item p{color:var(--text-dim);font-size:15px;line-height:1.6}
.contact-item a{color:var(--gold)}
.contact-form h3{color:var(--gold);margin-bottom:20px}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;padding:12px;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:14px;margin-bottom:12px;border-radius:3px;font-family:inherit}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold);outline:none}
.contact-form textarea{height:100px;resize:vertical}
.contact-form button{background:var(--gold);color:var(--bg);border:none;padding:14px 40px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:2px;cursor:pointer;transition:all .3s;width:100%}
.contact-form button:hover{background:var(--gold-light)}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-text p{margin-bottom:15px;color:var(--text-dim);font-size:15px;line-height:1.9}
.about-image{background:var(--surface);border:1px solid var(--border);border-radius:4px;height:300px;display:flex;align-items:center;justify-content:center}
.about-image img{max-height:250px;filter:brightness(0) invert(1);opacity:0.8}
.merch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.merch-item{background:var(--surface);border:1px solid var(--border);padding:40px 25px;text-align:center;border-radius:4px;transition:all .3s}
.merch-item:hover{border-color:var(--gold)}
.merch-icon{font-size:36px;margin-bottom:15px}
.merch-item h3{color:var(--gold);font-size:18px;margin-bottom:8px}
.merch-item p{color:var(--text-dim);font-size:14px;margin-bottom:15px}
.social-links{display:flex;gap:20px;justify-content:center;margin:20px 0}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;color:var(--text-dim);font-size:18px;transition:all .3s}
.social-links a:hover{border-color:var(--gold);color:var(--gold)}
footer{background:var(--surface);padding:50px 20px;text-align:center;border-top:1px solid var(--border);margin-top:80px}
footer .footer-logo{height:60px;filter:brightness(0) invert(1);opacity:0.6;margin-bottom:15px}
footer p{color:#555;font-size:14px}
footer .footer-links{margin:15px 0}
footer .footer-links a{color:var(--text-dim);margin:0 15px;font-size:13px;text-transform:uppercase;letter-spacing:1px}
@media(max-width:768px){
.hero h2{font-size:32px;letter-spacing:4px}
.nav-links{display:none}
.mobile-menu{display:block}
.about-content,.contact-grid{grid-template-columns:1fr}
.merch-grid{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
section{margin:50px auto}
}
</style>
</head>
<body>
<nav class="nav"><div class="nav-inner">
<div class="logo-area"><img src="logo.png" alt="Old Glory Arms"><div><h1>Old Glory Arms</h1><span class="tagline">Precision Long-Range Firearms</span></div></div>
<div class="nav-links">
<a href="#firearms">Firearms</a>
<a href="#services">Services</a>
<a href="#merch">Merchandise</a>
<a href="#app">OG Ballistics</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<div class="mobile-menu" onclick="document.querySelector('.nav-links').style.display=document.querySelector('.nav-links').style.display==='flex'?'none':'flex';document.querySelector('.nav-links').style.flexDirection='column';document.querySelector('.nav-links').style.position='absolute';document.querySelector('.nav-links').style.top='70px';document.querySelector('.nav-links').style.right='20px';document.querySelector('.nav-links').style.background='rgba(10,10,10,0.98)';document.querySelector('.nav-links').style.padding='20px';document.querySelector('.nav-links').style.borderRadius='4px';document.querySelector('.nav-links').style.border='1px solid #2a2a2a'">&#9776;</div>
</div></nav>
<div class="hero"><div class="hero-content">
<div class="divider"></div>
<h2>Old Glory Arms</h2>
<p class="subtitle">Taking the guesswork out of long-range shooting. Every rifle dialed in. Every turret custom cut. Every shot counts.</p>
<a href="#firearms" class="cta">Explore Our Rifles</a>
<a href="#contact" class="cta" style="background:transparent;color:#c4a44a;border:2px solid #c4a44a">Get a Quote</a>
</div></div>
<section id="firearms"><h2>Firearms</h2>
<p class="section-sub">Guaranteed sub-MOA accuracy — dialed in and ready to shoot</p>
<div class="grid">
<div class="card"><h3>Build Your Own Long-Range Rifle</h3>
<p>Our goal is to take the guesswork out of long-range shooting. All of our rifle packages are guaranteed for long-range accuracy and are totally dialed in and ready to shoot. Whether you want an ultralight hunting rifle or a heavy weight chassis gun, we can get you taken care of.</p>
<ul>
<li>Optics professionally mounted — bases Loctited and torqued, rings lapped</li>
<li>Ballistic data collected, custom turret engraved or dope chart built</li>
<li>Ammunition included — factory or custom-developed</li>
<li>Copper-only options available</li>
<li>Guaranteed Sub-MOA rifle</li>
</ul>
<p class="price">Custom Build</p>
<a href="#contact" class="card-cta">Request a Quote →</a>
</div>
<div class="card"><h3>Custom Billet AR Platform</h3>
<p>Multi-caliber options in multiple barrel lengths and designs. Choose yours today and be ready for that 3-gun shoot, coyote hunt, or just have the coolest rifle in the group. Full color and configuration options.</p>
<p class="price">Configure Yours</p>
<a href="#contact" class="card-cta">Start Your Build →</a>
</div>
<div class="card"><h3>Used Firearms</h3>
<p>Quality pre-owned firearms marketplace. Our inventory is regularly updated. All firearms inspected and verified before listing.</p>
<p style="color:var(--gold);font-size:14px;margin-top:15px">📞 Call for current inventory</p>
<a href="tel:+13078812587" class="card-cta">Call (307) 881-2587 →</a>
</div>
</div>
<div class="how-it-works"><h3>How Custom Ballistic Turrets Work</h3>
<div class="steps">
<div class="step"><div class="step-num">1</div><h4>Tailored to You</h4><p>Made specifically for your rifle, ammunition, and typical shooting conditions</p></div>
<div class="step"><div class="step-num">2</div><h4>Yardage Markings</h4><p>Instead of generic MOA/MRAD clicks, markings correspond directly to distances</p></div>
<div class="step"><div class="step-num">3</div><h4>No Guesswork</h4><p>Eliminates mental calculations, data charts, and complex apps in the field</p></div>
<div class="step"><div class="step-num">4</div><h4>Simple Operation</h4><p>Rangefind the distance, dial the turret to match, hold dead on, and fire</p></div>
</div></div>
</section>
<section id="services"><h2>Services</h2>
<p class="section-sub">Professional rifle services — from scope mounting to full dial-in packages</p>
<div class="grid">
<div class="card"><h3>Dial-In Service</h3>
<p>We lap your rings, mount your scope, sight in, collect ballistic data, and dial it in at long distance. Custom dope charts and yardage turrets available.</p>
<div class="service-tier">
<div class="tier"><div class="tier-name">Basic</div><div class="tier-price">$450</div><div class="tier-desc">You supply the ammo</div></div>
<div class="tier"><div class="tier-name">Factory</div><div class="tier-price">$550</div><div class="tier-desc">We find what shoots best</div></div>
<div class="tier"><div class="tier-name">Custom Load</div><div class="tier-price">$650</div><div class="tier-desc">Full load development</div></div>
</div>
<a href="#contact" class="card-cta">Schedule Service →</a>
</div>
<div class="card"><h3>Rifle Break-In & Zeroing</h3>
<p>Proper barrel break-in smooths the bore for better consistency and accuracy. A 50-round process followed by sight-in.</p>
<div class="service-tier">
<div class="tier"><div class="tier-name">Full Mount + Break-In</div><div class="tier-price">$250</div><div class="tier-desc">+ ammo</div></div>
<div class="tier"><div class="tier-name">Break-In Only</div><div class="tier-price">$200</div><div class="tier-desc">+ ammo</div></div>
</div>
<a href="#contact" class="card-cta">Schedule Service →</a>
</div>
<div class="card"><h3>Firearm & Silencer Cleaning</h3>
<p>A clean, well-maintained firearm is safer and essential for functionality.</p>
<div class="service-tier">
<div class="tier"><div class="tier-name">Field Strip</div><div class="tier-price">$50</div></div>
<div class="tier"><div class="tier-name">Ultrasonic</div><div class="tier-price">$100</div></div>
<div class="tier"><div class="tier-name">Silencer</div><div class="tier-price">$75</div></div>
</div>
<a href="#contact" class="card-cta">Schedule Service →</a>
</div>
<div class="card"><h3>Scope Lapping & Mounting</h3>
<p>Precision lapping corrects imperfections, improves holding power, prevents scope damage, and ensures consistent zero for years.</p>
<div class="service-tier">
<div class="tier"><div class="tier-name">Lap + Bore Sight</div><div class="tier-price">$75</div></div>
<div class="tier"><div class="tier-name">Lap + Zero</div><div class="tier-price">$100</div><div class="tier-desc">+ ammo</div></div>
</div>
<a href="#contact" class="card-cta">Schedule Service →</a>
</div>
</div></section>
<section id="merch"><h2>Merchandise</h2>
<p class="section-sub">Patriotic Old Glory Arms apparel — proudly American</p>
<div class="merch-grid">
<div class="merch-item"><div class="merch-icon">👕</div><h3>T-Shirts</h3><p>Custom patriotic designs. Premium cotton.</p><a href="#contact" class="card-cta">Order Now →</a></div>
<div class="merch-item"><div class="merch-icon">🧢</div><h3>Hats</h3><p>Embroidered Old Glory Arms caps.</p><a href="#contact" class="card-cta">Order Now →</a></div>
<div class="merch-item"><div class="merch-icon">🏷️</div><h3>Decals</h3><p>Premium vinyl for trucks, cases, and gear.</p><a href="#contact" class="card-cta">Order Now →</a></div>
</div></section>
<section id="app"><div class="app-section">
<h2>OG Ballistics</h2>
<p class="app-desc">Our own ballistics calculator app. Precision drop tables, BC & MV truing, wind calculations, 2,400+ scope reticles, MOA & MRAD support, and location-aware atmospheric corrections — all in your pocket.</p>
<div class="app-features">
<div class="app-feature"><span></span> Drop Tables</div>
<div class="app-feature"><span></span> BC & MV Truing</div>
<div class="app-feature"><span></span> Wind Calc</div>
<div class="app-feature"><span></span> 2,400+ Reticles</div>
<div class="app-feature"><span></span> MOA & MRAD</div>
<div class="app-feature"><span></span> Kestrel Link</div>
</div>
<div class="app-install-steps">
<h3>Get the App</h3>
<div class="install-step"><div class="num">1</div><p>Download <strong>TestFlight</strong> from the App Store on your iPhone</p></div>
<div class="install-step"><div class="num">2</div><p>Open this link on your iPhone: <a href="https://testflight.apple.com/join/ogballistics" style="color:var(--gold)">TestFlight Beta Invite</a></p></div>
<div class="install-step"><div class="num">3</div><p>Tap <strong>"Accept"</strong> then <strong>"Install"</strong> to get OG Ballistics</p></div>
<div class="install-step"><div class="num">4</div><p>Open the app, set up your rifle profile, and start shooting!</p></div>
</div>
<p style="color:var(--gold);font-size:14px;margin:25px 0 15px;letter-spacing:2px">AVAILABLE SPRING 2026 ON THE APP STORE</p>
<a href="https://testflight.apple.com/join/ogballistics" class="btn">Join the Beta</a>
<a href="#contact" class="btn btn-outline">Questions? Contact Us</a>
</div></section>
<section id="contact"><h2>Contact Us</h2>
<p class="section-sub">Ready to get started? Reach out today.</p>
<div class="contact-section"><div class="contact-grid">
<div class="contact-info">
<h3>Get In Touch</h3>
<div class="contact-item"><div class="icon">📞</div><p><a href="tel:+13078812587">(307) 881-2587</a></p></div>
<div class="contact-item"><div class="icon">✉️</div><p><a href="mailto:jharoldson.impact@hotmail.com">jharoldson.impact@hotmail.com</a></p></div>
<div class="contact-item"><div class="icon">📍</div><p>Wheatland, Wyoming</p></div>
<div style="margin-top:25px">
<h3>Follow Us</h3>
<div class="social-links">
<a href="https://youtube.com" target="_blank" title="YouTube"></a>
<a href="https://instagram.com" target="_blank" title="Instagram">📷</a>
<a href="https://facebook.com" target="_blank" title="Facebook">f</a>
</div></div>
</div>
<div class="contact-form">
<h3>Send a Message</h3>
<form action="https://formspree.io/f/placeholder" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="tel" name="phone" placeholder="Phone Number">
<select name="service">
<option value="">What are you interested in?</option>
<option value="custom-rifle">Custom Long-Range Rifle</option>
<option value="ar-platform">Custom AR Platform</option>
<option value="dial-in">Scope Dial-In Service</option>
<option value="break-in">Rifle Break-In</option>
<option value="cleaning">Firearm Cleaning</option>
<option value="scope-mounting">Scope Lapping & Mounting</option>
<option value="used-firearms">Used Firearms</option>
<option value="merchandise">Merchandise</option>
<option value="app">OG Ballistics App</option>
<option value="other">Other</option>
</select>
<textarea name="message" placeholder="Tell us about your project or question..." required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div></div></section>
<section id="about"><h2>About Us</h2>
<p class="section-sub">Built on precision, driven by passion</p>
<div class="about-content">
<div class="about-text">
<p>At Old Glory Arms, we take the guesswork out of long-range shooting. Every rifle package we build is guaranteed for accuracy and completely dialed in — all you need to do is shoot.</p>
<p>From custom load development to precision turret cutting, we deliver rifles ready for the field. Whether you're investing in a new custom build or sending in your favorite rifle for a dial-in service, we make it perform at distance.</p>
<p>We also offer scope mounting, barrel break-in, firearm cleaning, and a growing line of patriotic merchandise. And with the launch of our OG Ballistics app, you'll have precision ballistic data in your pocket wherever you go.</p>
</div>
<div class="about-image"><img src="logo.png" alt="Old Glory Arms Eagle"></div>
</div></section>
<footer>
<img src="logo.png" alt="Old Glory Arms" class="footer-logo">
<div class="social-links">
<a href="https://youtube.com" target="_blank" title="YouTube"></a>
<a href="https://instagram.com" target="_blank" title="Instagram">📷</a>
<a href="https://facebook.com" target="_blank" title="Facebook">f</a>
</div>
<div class="footer-links">
<a href="#firearms">Firearms</a>
<a href="#services">Services</a>
<a href="#merch">Merch</a>
<a href="#app">OG Ballistics</a>
<a href="#contact">Contact</a>
</div>
<p style="margin-top:15px">&copy; 2026 Old Glory Arms. All rights reserved.</p>
<p style="color:#444;font-size:12px;margin-top:5px">Wheatland, Wyoming &bull; (307) 881-2587</p>
</footer>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment