Eric Taylor
625201b78d
- Downloaded all 31 Unsplash images to photos/ directory - Found 14 URLs returning 404; replaced with working equivalents: about: book-room, hard-drives, forest-child human-body: digestive-system, human-eye inventions: gears (x2), lab-glassware maps/phenomena: old-map (x2), ornate-globe, earth-orbit natural-world: migrating-birds phenomena: lightning-storm, ferrofluid space: voyager-record - Updated all 8 HTML files to reference local photos/ instead of Unsplash CDN - Fixed broken ammonite clipart reference (fossil -> existing image) - Updated CSS clipart hover effects and responsive rules
140 lines
7.0 KiB
HTML
140 lines
7.0 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="photos/1506905925346-21bda4d32df4_900x300.jpg" 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>
|
|
|
|
<img src="img/compass-metal-vintage.png" alt="" class="clipart-divider">
|
|
|
|
<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="photos/1470071459604-3b5ec3a7fe05_500x300.jpg" alt="A sun-dappled forest" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/fern-leaf-vein-pattern.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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="photos/photo-1633451238042-85d93d267866_500x300.jpg" alt="Gears and mechanisms" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/lit-gold-bulb-icon.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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="photos/1534274988757-a28bf1a57c17_500x300.jpg" alt="Strange northern lights" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/crystal-rock-gemstone.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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="photos/photo-1520299607509-dcd935f9a839_500x300.jpg" alt="An old map on a weathered table" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/world-map-compass-drawing.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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="photos/1559757175-5700dde675bc_500x300.jpg" alt="An anatomical illustration" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/brain-hemisphere-artwork.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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="photos/1462332420958-a05d1e002413_500x300.jpg" alt="A spiral galaxy" class="card-image">
|
|
<div class="card-body">
|
|
<img src="img/solar-system-planets-orbit-illustration.png" alt="" style="max-width:50px; margin-bottom:4px;">
|
|
<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>
|
|
|
|
<img src="img/ancient-scroll-map-history.png" alt="" class="clipart-divider">
|
|
|
|
<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>
|