silver-trail / index.html
Commandande Ra Di Oh Sol Gratton
Tell me about the old Yukon silver trail, long before the gold rush. - Initial Deployment
a356dac verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Forgotten Silver Trail of Yukon</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Lora:wght@400;600&display=swap');
body {
font-family: 'Lora', serif;
background-color: #f5f5f5;
color: #333;
}
.title-font {
font-family: 'Cinzel Decorative', serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1517825738774-7de9363ef735?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
}
.timeline-item::before {
content: '';
position: absolute;
left: -38px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #a38b6d;
border: 3px solid #7a6a51;
}
.map-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.map-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.artifact-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.timeline-item::before {
left: -28px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="bg-gray-900 text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="title-font text-2xl flex items-center">
<i class="fas fa-mountain mr-2"></i>
<span>Yukon Chronicles</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="#history" class="hover:text-amber-300 transition">History</a>
<a href="#timeline" class="hover:text-amber-300 transition">Timeline</a>
<a href="#artifacts" class="hover:text-amber-300 transition">Artifacts</a>
<a href="#legacy" class="hover:text-amber-300 transition">Legacy</a>
</div>
<button class="md:hidden text-xl" id="menuBtn">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden bg-gray-800 px-4 py-2" id="mobileMenu">
<a href="#history" class="block py-2 hover:text-amber-300 transition">History</a>
<a href="#timeline" class="block py-2 hover:text-amber-300 transition">Timeline</a>
<a href="#artifacts" class="block py-2 hover:text-amber-300 transition">Artifacts</a>
<a href="#legacy" class="block py-2 hover:text-amber-300 transition">Legacy</a>
</div>
</nav>
<!-- Hero Section -->
<header class="hero-image text-white py-20 md:py-32">
<div class="container mx-auto px-4 text-center">
<h1 class="title-font text-4xl md:text-6xl mb-4">The Forgotten Silver Trail</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Yukon's First Mineral Rush Before the Gold Fever</p>
<a href="#history" class="bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-full font-semibold transition inline-flex items-center">
Explore History <i class="fas fa-arrow-down ml-2"></i>
</a>
</div>
</header>
<!-- History Section -->
<section id="history" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="title-font text-3xl md:text-4xl mb-4">The Silver That Preceded Gold</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row items-center gap-8">
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1511499767150-a48a237f0083?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Yukon wilderness" class="rounded-lg shadow-xl w-full h-auto">
</div>
<div class="md:w-1/2">
<p class="text-lg mb-4">
Long before the Klondike Gold Rush captured the world's imagination in 1896, the Yukon Territory was home to a lesser-known but equally fascinating mineral rush - the Silver Trail of the 1870s and 1880s.
</p>
<p class="text-lg mb-4">
Indigenous peoples had long known of the mineral riches in the region, but it wasn't until the 1870s that prospectors began systematically exploring the area around what is now the community of Mayo. The discovery of rich silver veins in the Keno Hill area would spark a rush that predated the famous gold discoveries by nearly two decades.
</p>
<p class="text-lg">
The Silver Trail became a network of routes connecting mining camps, trading posts, and First Nations settlements throughout central Yukon. Unlike the later gold rush that brought tens of thousands, the silver miners were a more modest but determined group who established the territory's first permanent non-indigenous settlements.
</p>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section id="timeline" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="title-font text-3xl md:text-4xl mb-4">Chronicles of the Silver Trail</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="relative max-w-3xl mx-auto">
<!-- Timeline line -->
<div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-amber-600 transform -translate-x-1/2"></div>
<!-- Timeline items -->
<div class="space-y-8">
<!-- Item 1 -->
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
<div class="md:w-5/12 md:pr-8 md:text-right mb-4 md:mb-0">
<h3 class="font-bold text-xl text-amber-800">Pre-1870s</h3>
<p class="text-gray-700">Indigenous knowledge of mineral deposits</p>
</div>
<div class="md:w-5/12 md:pl-8">
<p>First Nations peoples including the Northern Tutchone had long known of and occasionally mined surface mineral deposits in the region, using materials for tools and trade.</p>
</div>
</div>
<!-- Item 2 -->
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
<div class="md:w-5/12 md:pr-8 md:text-right mb-4 md:mb-0 order-1">
<h3 class="font-bold text-xl text-amber-800">1874</h3>
<p class="text-gray-700">First recorded silver discovery</p>
</div>
<div class="md:w-5/12 md:pl-8 order-0">
<p>Prospector Arthur Harper, later known as the "Father of the Yukon," makes the first recorded silver discovery along the Stewart River, though it proves uneconomical to develop at the time.</p>
</div>
</div>
<!-- Item 3 -->
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
<div class="md:w-5/12 md:pr-8 md:text-right mb-4 md:mb-0">
<h3 class="font-bold text-xl text-amber-800">1882</h3>
<p class="text-gray-700">Keno Hill discovery</p>
</div>
<div class="md:w-5/12 md:pl-8">
<p>Prospectors discover rich silver veins in what becomes known as the Keno Hill area, sparking the first significant rush of miners into the region and establishing the Silver Trail network.</p>
</div>
</div>
<!-- Item 4 -->
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
<div class="md:w-5/12 md:pr-8 md:text-right mb-4 md:mb-0 order-1">
<h3 class="font-bold text-xl text-amber-800">1886</h3>
<p class="text-gray-700">Mayo established</p>
</div>
<div class="md:w-5/12 md:pl-8 order-0">
<p>The community of Mayo is established as a supply center for silver miners, becoming the first permanent non-indigenous settlement in central Yukon outside of Dawson City.</p>
</div>
</div>
<!-- Item 5 -->
<div class="relative pl-12 md:pl-0 md:flex justify-between timeline-item">
<div class="md:w-5/12 md:pr-8 md:text-right mb-4 md:mb-0">
<h3 class="font-bold text-xl text-amber-800">1896-1899</h3>
<p class="text-gray-700">Gold rush overshadows silver</p>
</div>
<div class="md:w-5/12 md:pl-8">
<p>The Klondike Gold Rush draws most miners away from silver prospects, though some operations continue throughout the gold rush era and beyond.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="title-font text-3xl md:text-4xl mb-4">The Silver Trail Network</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="map-container rounded-lg shadow-xl overflow-hidden">
<iframe class="map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1029163.1101788436!2d-136.50000000000003!3d63.5!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5148b1b6fc1d6e3f%3A0x1d3d1d3d1d3d1d3d!2sYukon%2C%20Canada!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
<div class="bg-gray-100 p-6 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-amber-800">Stewart River Route</h3>
<p>The main artery of the Silver Trail, following the Stewart River from its confluence with the Yukon River up to the Mayo mining district.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-amber-800">Keno Hill District</h3>
<p>Heart of the silver mining activity, named for a popular gambling game miners played while waiting out winter storms.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-amber-800">Mayo Landing</h3>
<p>Established as the main supply depot where goods were transferred from riverboats to overland transport to the mines.</p>
</div>
</div>
</div>
</section>
<!-- Artifacts Section -->
<section id="artifacts" class="py-16 bg-gray-100">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="title-font text-3xl md:text-4xl mb-4">Relics of the Silver Era</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
<p class="max-w-2xl mx-auto mt-4">These artifacts tell the story of Yukon's first mineral rush, preserved in museums and private collections.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Artifact 1 -->
<div class="artifact-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://images.unsplash.com/photo-1584735422189-080a5d1d003e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Silver ore sample" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2 text-amber-800">Keno Hill Silver Ore</h3>
<p class="text-gray-700 mb-4">A rich sample of galena ore from the early Keno Hill mines, showing the high silver content that attracted prospectors.</p>
<div class="flex items-center text-sm text-gray-600">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>Yukon Beringia Interpretive Centre</span>
</div>
</div>
</div>
<!-- Artifact 2 -->
<div class="artifact-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://images.unsplash.com/photo-1547989453-11e67ffb7225?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Miner's journal" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2 text-amber-800">1884 Miner's Journal</h3>
<p class="text-gray-700 mb-4">The personal diary of prospector William Moore, detailing daily life on the Silver Trail before the gold rush.</p>
<div class="flex items-center text-sm text-gray-600">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>MacBride Museum of Yukon History</span>
</div>
</div>
</div>
<!-- Artifact 3 -->
<div class="artifact-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
<img src="https://images.unsplash.com/photo-1551288043-b3da6ec9f90b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Silver ingot" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="font-bold text-xl mb-2 text-amber-800">First Silver Ingot</h3>
<p class="text-gray-700 mb-4">The first commercially produced silver ingot from Yukon, cast in 1885 at a small smelter near Mayo.</p>
<div class="flex items-center text-sm text-gray-600">
<i class="fas fa-map-marker-alt mr-2"></i>
<span>Dawson City Museum</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Legacy Section -->
<section id="legacy" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="title-font text-3xl md:text-4xl mb-4">Enduring Legacy</h2>
<div class="w-24 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-amber-50 border-l-4 border-amber-600 p-6 mb-8">
<p class="italic text-amber-900">
"The Silver Trail miners were the true pioneers of Yukon. They built the first permanent structures, established the first trade networks, and proved that mineral wealth could be extracted from this harsh land long before the world heard of Klondike gold."
</p>
<p class="text-right mt-2 font-semibold text-amber-800">— Dr. Eleanor Whitmore, Yukon Historian</p>
</div>
<p class="text-lg mb-6">
Though overshadowed by the spectacular Klondike Gold Rush, the Silver Trail era laid crucial foundations for Yukon's development. The routes established by silver prospectors became vital supply lines during the gold rush, and many gold rush stampeders actually followed trails first blazed by silver miners.
</p>
<p class="text-lg mb-6">
The Silver Trail also established Yukon's first mining laws and regulations, created the territory's first non-indigenous settlements outside trading posts, and demonstrated that year-round mining operations were possible in the harsh northern climate.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
<div class="bg-gray-100 p-6 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-amber-800">Modern Silver Trail</h3>
<p>Today, the Silver Trail is a designated historic route connecting the communities of Stewart Crossing, Mayo, and Keno City, where visitors can explore preserved mining sites and museums dedicated to this early chapter of Yukon history.</p>
</div>
<div class="bg-gray-100 p-6 rounded-lg">
<h3 class="font-bold text-lg mb-2 text-amber-800">Continued Mining</h3>
<p>Silver mining continues in the Keno Hill district to this day, making it one of the longest continuously operating mining districts in North America.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h3 class="title-font text-2xl flex items-center">
<i class="fas fa-mountain mr-2"></i>
<span>Yukon Chronicles</span>
</h3>
<p class="mt-2 text-gray-400">Preserving the stories of the North</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between">
<div class="mb-4 md:mb-0">
<p class="text-gray-400">&copy; 2023 Yukon Chronicles. All rights reserved.</p>
</div>
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
<a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CommanderGratton/silver-trail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>