Eric Taylor
8033792e6b
- Static HTML/CSS/JS site with late-90s/early-2000s hidden-gem feel - White background, serif fonts (Georgia), drop-shadow images, colored section bars - 8 pages: Home, Natural World, Inventions, Phenomena, Maps & Places, Human Body, Space, About - Fun 90s touches: fake visitor counter, 'Best viewed at 1024x768', Konami code easter egg - All content fact-checked and corrected across all pages - Key corrections: Pando age, patent numbers, neutron star density, synesthesia history, DRC/Greenland size comparison, Derinkuyu depth, rogue planet designation, and many more
129 lines
6.4 KiB
HTML
129 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Dangerous Wonder — A Field Guide to Everything Worth Knowing. Exploring the natural world, inventions, strange phenomena, maps, the human body, and the cosmos.">
|
|
<title>Dangerous Wonder — A Field Guide to Everything Worth Knowing</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper-wide">
|
|
|
|
<header class="site-header">
|
|
<h1 class="site-title"><a href="index.html">Dangerous Wonder</a></h1>
|
|
<p class="site-subtitle">A Field Guide to Everything Worth Knowing</p>
|
|
</header>
|
|
|
|
<nav class="site-nav">
|
|
<ul>
|
|
<li><a href="index.html" class="active">Home</a></li>
|
|
<li><a href="natural-world.html">Natural World</a></li>
|
|
<li><a href="inventions.html">Inventions</a></li>
|
|
<li><a href="phenomena.html">Phenomena</a></li>
|
|
<li><a href="maps.html">Maps & Places</a></li>
|
|
<li><a href="human-body.html">Human Body</a></li>
|
|
<li><a href="space.html">Space</a></li>
|
|
<li><a href="about.html">About</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div style="margin: 28px 0 24px; text-align: center;">
|
|
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&h=300&fit=crop" alt="A vast mountain landscape stretching toward the horizon" style="width:100%; max-width:900px; border: 3px solid #fff; box-shadow: 3px 4px 8px rgba(0,0,0,0.28);">
|
|
<p class="figure-caption">The world is vast. Most of it remains undiscovered — by you.</p>
|
|
</div>
|
|
|
|
<div class="content-section">
|
|
<p class="drop-cap">Welcome to <strong>Dangerous Wonder</strong>, a compendium of the curious, the marvellous, and the quietly astonishing. Since 1999, we have been cataloguing the overlooked corners of knowledge — the things your textbooks forgot, the phenomena your teachers never mentioned, the maps of places that exist only in the margins.<br><br>This site is a map of wonders. Follow any path that calls to you. There are no wrong turns.</p>
|
|
</div>
|
|
|
|
<hr class="dk-rule">
|
|
|
|
<h2 class="section-header" style="text-align:center;">Where Shall You Begin?</h2>
|
|
|
|
<div class="card-grid">
|
|
|
|
<a href="natural-world.html" class="card">
|
|
<span class="card-header-bar" style="background:#2d6a2d; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=500&h=300&fit=crop" alt="A sun-dappled forest" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">The Natural World</div>
|
|
<div class="card-text">Forests, oceans, creatures, and the hidden logic of living things</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="inventions.html" class="card">
|
|
<span class="card-header-bar" style="background:#b8860b; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1581093458791-9d42e3c7e117?w=500&h=300&fit=crop" alt="Gears and mechanisms" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">Inventions & Ideas</div>
|
|
<div class="card-text">The machines and notions that reshaped the world</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="phenomena.html" class="card">
|
|
<span class="card-header-bar" style="background:#5c2d6e; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1534274988757-a28bf1a57c17?w=500&h=300&fit=crop" alt="Strange northern lights" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">Strange Phenomena</div>
|
|
<div class="card-text">Optical illusions, weird science, and things that shouldn't be</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="maps.html" class="card">
|
|
<span class="card-header-bar" style="background:#8b4513; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1524661135-423f33e021f6?w=500&h=300&fit=crop" alt="An old map on a weathered table" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">Maps & Places</div>
|
|
<div class="card-text">Real and imagined geographies, faraway lands</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="human-body.html" class="card">
|
|
<span class="card-header-bar" style="background:#a0522d; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1559757175-5700dde675bc?w=500&h=300&fit=crop" alt="An anatomical illustration" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">The Human Body</div>
|
|
<div class="card-text">The most remarkable machine you will ever inhabit</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="space.html" class="card">
|
|
<span class="card-header-bar" style="background:#1a3a5c; height:6px; display:block;"></span>
|
|
<img src="https://images.unsplash.com/photo-1462332420958-a05d1e002413?w=500&h=300&fit=crop" alt="A spiral galaxy" class="card-image">
|
|
<div class="card-body">
|
|
<div class="card-title">Space & Beyond</div>
|
|
<div class="card-text">Stars, planets, and the deep emptiness between everything</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<hr class="dk-rule">
|
|
|
|
<div class="did-you-know">
|
|
<strong>Did You Know?</strong><br>
|
|
The oldest known living organism is a bristlecone pine tree in the White Mountains of California. It is over 5,000 years old — older than the Great Pyramid of Giza. It has no name, and its exact location is kept secret to protect it from those who might do it harm.
|
|
</div>
|
|
|
|
<div class="ornament">§ § §</div>
|
|
|
|
<p class="text-center text-small" style="color:#8b7355; font-style:italic;">
|
|
<span class="easter-egg"> You found something hidden. The world rewards the attentive. </span>
|
|
There are wonders here that do not announce themselves. <a href="about.html">Learn more about this site.</a>
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<footer class="site-footer">
|
|
<div class="page-wrapper">
|
|
<p id="visitor-count" class="visitor-counter">You are visitor #000,000</p>
|
|
<p><small>Last updated: <span id="last-updated"></span></small></p>
|
|
<p>© 1999–2026 Dangerous Wonder. All rights reserved.</p>
|
|
<p class="footer-badge">Best viewed at 1024×768. Made with care, not with frameworks.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html> |