Skip to content

Instantly share code, notes, and snippets.

@dsoverby1986

dsoverby1986/anatomy.html

Created April 1, 2025 15:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dsoverby1986/bd73e61eb8254b52e238a298be2cc13a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dsoverby1986/bd73e61eb8254b52e238a298be2cc13a to your computer and use it in GitHub Desktop.
Download ZIP
Narwal Site
Raw
anatomy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anatomy - Narwhal: The Unicorn of the Sea</title>
<style>
:root {
--primary: #2E3B4E;
--secondary: #4ECDC4;
--accent: #FF6B6B;
--light: #F7FFF7;
--dark: #1A2639;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--light);
color: var(--dark);
}
header {
background-color: var(--primary);
color: white;
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
header::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at 30% 40%, rgba(78, 205, 196, 0.2), transparent 70%);
z-index: 1;
}
nav {
background-color: var(--dark);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
padding: 1rem 0;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
color: white;
text-decoration: none;
padding: 1rem 0;
display: block;
position: relative;
transition: color 0.3s;
}
.menu a:hover {
color: var(--secondary);
}
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
.menu a.active {
color: var(--secondary);
}
.menu a.active::after {
width: 100%;
}
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.page-desc {
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin: 2rem 0 1rem;
color: var(--primary);
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--secondary);
}
h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
color: var(--primary);
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.anatomy-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
align-items: center;
}
.anatomy-img {
width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.feature-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.feature-card h3 {
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.stat-container {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin: 2rem 0;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
.stat-item {
text-align: center;
padding: 1rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--secondary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
color: var(--dark);
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-column h3 {
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-column p, .footer-column a {
color: #ccc;
margin-bottom: 0.8rem;
display: block;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: #999;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
padding: 1rem;
}
.menu {
flex-direction: column;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.menu li {
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.menu a {
padding: 0.8rem 0;
}
.anatomy-hero {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Narwhal Anatomy & Biology</h1>
<p>Discover the unique physical characteristics of these Arctic specialists</p>
</div>
</header>
<nav>
<div class="nav-container">
<a href="index.html" class="logo">NarwhalWorld</a>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="anatomy.html" class="active">Anatomy</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behavior.html">Behavior</a></li>
<li><a href="habitat.html">Habitat</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="page-header">
<h1>Anatomy & Biology</h1>
<p class="page-desc">Narwhals have several unique physical characteristics that make them one of the most distinctive whale species in the world's oceans.</p>
</div>
<div class="anatomy-hero">
<div>
<h2>The Extraordinary Narwhal</h2>
<p>The narwhal (Monodon monoceros) belongs to the family Monodontidae, which it shares with only one other species, the beluga whale. The genus name "Monodon" is derived from Greek and means "one-tooth" while "monoceros" means "one-horn," both referring to the narwhal's distinctive tusk.</p>
<p>These medium-sized toothed whales are perfectly adapted for life in the extreme Arctic environment, with specialized features for deep diving, finding food in dark waters, and surviving in sub-zero temperatures.</p>
</div>
<img src="/api/placeholder/600/400" alt="Narwhal anatomy diagram" class="anatomy-img">
</div>
<div class="stat-container">
<h2>Narwhal By The Numbers</h2>
<div class="stat-grid">
<div class="stat-item">
<div class="stat-number">16</div>
<div class="stat-label">Feet in Length (adult males)</div>
</div>
<div class="stat-item">
<div class="stat-number">3,500</div>
<div class="stat-label">Pounds in Weight</div>
</div>
<div class="stat-item">
<div class="stat-number">10</div>
<div class="stat-label">Feet (maximum tusk length)</div>
</div>
<div class="stat-item">
<div class="stat-number">1,500</div>
<div class="stat-label">Meters (maximum dive depth)</div>
</div>
<div class="stat-item">
<div class="stat-number">50</div>
<div class="stat-label">Years (potential lifespan)</div>
</div>
</div>
</div>
<h2>Key Anatomical Features</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>The Iconic Tusk</h3>
<p>The most notable feature of the narwhal is its tusk, which is actually an elongated left canine tooth that protrudes from the upper jaw. The tusk grows in a counterclockwise spiral pattern and can reach lengths of up to 10 feet (3 meters).</p>
<p>Primarily males develop tusks, though about 15% of females may also grow smaller ones. Some rare males can develop two tusks. The tusk contains millions of nerve endings, suggesting it may serve as a sensory organ.</p>
</div>
<div class="feature-card">
<h3>Body Structure</h3>
<p>Narwhals have a streamlined body with no dorsal fin, which is an adaptation that helps them navigate under ice sheets. They have a relatively small head, a short snout, and a ridge along their back instead of a dorsal fin.</p>
<p>Their flippers are small and rounded, and they have a notched tail fin (fluke) that propels them through the water. Adult narwhals are mottled black and white, with older individuals appearing whiter as they age.</p>
</div>
<div class="feature-card">
<h3>Blubber Layer</h3>
<p>Narwhals have a thick layer of blubber (up to 4 inches or 10 cm) that constitutes up to 40% of their body weight. This blubber serves multiple essential functions:</p>
<ul>
<li>Insulation in frigid Arctic waters</li>
<li>Energy storage during periods of low food availability</li>
<li>Buoyancy control when diving</li>
<li>Protection from the physical environment</li>
</ul>
</div>
<div class="feature-card">
<h3>Breathing Adaptations</h3>
<p>Like all marine mammals, narwhals must surface to breathe air. However, they have remarkable diving abilities, capable of reaching depths of up to 1,500 meters (4,920 feet) and staying underwater for up to 25 minutes on a single breath.</p>
<p>These diving adaptations include high concentrations of myoglobin in their muscles to store oxygen, collapsible lungs that prevent nitrogen narcosis during deep dives, and the ability to slow their heart rate to conserve oxygen.</p>
</div>
<div class="feature-card">
<h3>Echolocation</h3>
<p>Narwhals navigate and hunt using echolocation, producing a series of clicks, whistles, and pulsed sounds that bounce off objects and return to them, providing information about their surroundings. This is particularly useful in the dark Arctic waters and when hunting under ice sheets.</p>
<p>Their echolocation abilities are highly sophisticated, allowing them to detect prey and navigate in complete darkness at extreme depths.</p>
</div>
<div class="feature-card">
<h3>Reproductive Biology</h3>
<p>Female narwhals reach sexual maturity around 8-9 years of age, while males mature later at about 12-16 years. The gestation period lasts approximately 14-15 months, and females typically give birth every three years.</p>
<p>Narwhal calves are born with a grayish-blue coloration and gradually develop the mottled black and white pattern as they mature. Calves stay with their mothers for about 20 months, learning essential survival skills.</p>
</div>
</div>
<h2>Lifecycle and Lifespan</h2>
<p>The average narwhal lives about 30-40 years in the wild, though some have been estimated to live up to 50 years. Their lifecycle can be broken down into several stages:</p>
<div class="feature-grid">
<div class="feature-card">
<h3>Calves (0-2 years)</h3>
<p>Newborn narwhals are about 5 feet (1.5 meters) long and weigh approximately 175 pounds (80 kg). They have a bluish-gray coloration and begin nursing immediately after birth. The milk is rich in fat to help the calves develop the blubber layer they need for Arctic waters.</p>
</div>
<div class="feature-card">
<h3>Juveniles (2-8 years)</h3>
<p>Young narwhals gradually develop independence but often remain with their mother's pod. Males begin developing their tusks during this period, though the tusk doesn't typically extend beyond the upper lip until later.</p>
</div>
<div class="feature-card">
<h3>Adults (8+ years)</h3>
<p>Adult narwhals reach their full size by about 8-10 years of age. Males continue tusk development, which can be influenced by testosterone levels. Fully mature adults engage in seasonal migrations, breeding, and may participate in social activities like "tusking" where males cross their tusks.</p>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>NarwhalWorld</h3>
<p>Your comprehensive resource for learning about the mysterious narwhal, featuring information about their anatomy, behavior, diet, and natural habitat.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a href="anatomy.html">Anatomy</a>
<a href="diet.html">Diet</a>
<a href="behavior.html">Behavior</a>
<a href="habitat.html">Habitat</a>
</div>
<div class="footer-column">
<h3>About This Site</h3>
<p>This website was created for educational purposes to share information about narwhals and their fascinating lives in the Arctic.</p>
<p>Images are placeholders and would be replaced with actual narwhal photography in a real site.</p>
</div>
</div>
<div class="copyright">
<p>© 2025 NarwhalWorld | All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Raw
behavior.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Behavior - Narwhal: The Unicorn of the Sea</title>
<style>
:root {
--primary: #2E3B4E;
--secondary: #4ECDC4;
--accent: #FF6B6B;
--light: #F7FFF7;
--dark: #1A2639;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--light);
color: var(--dark);
}
header {
background-color: var(--primary);
color: white;
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
header::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at 30% 40%, rgba(78, 205, 196, 0.2), transparent 70%);
z-index: 1;
}
nav {
background-color: var(--dark);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
padding: 1rem 0;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
color: white;
text-decoration: none;
padding: 1rem 0;
display: block;
position: relative;
transition: color 0.3s;
}
.menu a:hover {
color: var(--secondary);
}
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
.menu a.active {
color: var(--secondary);
}
.menu a.active::after {
width: 100%;
}
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.page-desc {
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin: 2rem 0 1rem;
color: var(--primary);
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--secondary);
}
h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
color: var(--primary);
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.behavior-hero {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
overflow: hidden;
margin: 2rem 0;
}
.behavior-hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.behavior-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(46, 59, 78, 0.5);
z-index: 0;
}
.behavior-hero-content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding: 2rem;
max-width: 800px;
}
.behavior-hero-content h2 {
color: white;
}
.behavior-hero-content h2::after {
background-color: var(--accent);
}
.behavior-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.behavior-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.behavior-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.behavior-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.behavior-content {
padding: 1.5rem;
}
.behavior-content h3 {
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.timeline {
margin: 4rem 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
background-color: var(--secondary);
transform: translateX(-50%);
}
.timeline-item {
margin-bottom: 2rem;
position: relative;
}
.timeline-content {
width: 45%;
padding: 1.5rem;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.timeline-content h3 {
margin-top: 0;
}
.timeline-left {
left: 0;
}
.timeline-right {
left: 55%;
}
.timeline-marker {
position: absolute;
background-color: var(--secondary);
width: 25px;
height: 25px;
border-radius: 50%;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.fact-box {
background-color: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 10px 10px 0;
}
.fact-box h3 {
margin-top: 0;
color: var(--primary);
}
.video-container {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin: 3rem 0;
text-align: center;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-column h3 {
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-column p, .footer-column a {
color: #ccc;
margin-bottom: 0.8rem;
display: block;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: #999;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
padding: 1rem;
}
.menu {
flex-direction: column;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.menu li {
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.menu a {
padding: 0.8rem 0;
}
.timeline::before {
left: 20px;
}
.timeline-content {
width: calc(100% - 50px);
left: 50px !important;
}
.timeline-marker {
left: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Narwhal Behavior</h1>
<p>Discover how these fascinating creatures live and interact in their Arctic environment</p>
</div>
</header>
<nav>
<div class="nav-container">
<a href="index.html" class="logo">NarwhalWorld</a>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="anatomy.html">Anatomy</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behavior.html" class="active">Behavior</a></li>
<li><a href="habitat.html">Habitat</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="page-header">
<h1>Animal Behavior</h1>
<p class="page-desc">Narwhals display fascinating behaviors adapted to their Arctic lifestyle and unique ecological niche.</p>
</div>
<div class="behavior-hero">
<img src="/api/placeholder/1200/500" alt="Pod of narwhals swimming together" class="behavior-hero-img">
<div class="behavior-hero-content">
<h2>Social Creatures of the Arctic</h2>
<p>Narwhals are highly social animals that typically travel in pods ranging from a few individuals to several hundred. Their complex social behaviors help them survive in one of Earth's most challenging environments.</p>
</div>
</div>
<h2>Key Behavioral Traits</h2>
<div class="behavior-grid">
<div class="behavior-card">
<img src="/api/placeholder/400/300" alt="Social structure of narwhals" class="behavior-img">
<div class="behavior-content">
<h3>Social Structure</h3>
<p>Narwhals are highly social creatures that typically travel in pods of 5-10 individuals, though gatherings of hundreds or even thousands have been observed during migrations. These pods often consist of animals of the same sex and age.</p>
<p>During summer months, narwhals often form larger aggregations in coastal areas and fjords, while in winter they disperse into smaller groups as they move to deeper offshore waters.</p>
</div>
</div>
<div class="behavior-card">
<img src="/api/placeholder/400/300" alt="Narwhal hunting for food" class="behavior-img">
<div class="behavior-content">
<h3>Feeding Behavior</h3>
<p>Narwhals are deep divers, often reaching depths of 800-1,500 meters to find prey. They can perform multiple deep dives per day, spending about 3 hours daily underwater hunting for food.</p>
<p>They primarily use echolocation to locate prey in the dark depths and employ suction feeding to capture their meals. Narwhals feed more intensively during winter months when they inhabit deeper waters.</p>
</div>
</div>
<div class="behavior-card">
<img src="/api/placeholder/400/300" alt="Narwhal predator protection" class="behavior-img">
<div class="behavior-content">
<h3>Predator Protection</h3>
<p>The main predators of narwhals are polar bears, orcas, and humans. When threatened, narwhals typically flee, though they may also form tight groups or freeze in place. Their ability to navigate under ice gives them some protection from orcas.</p>
<p>In the presence of killer whales, narwhals will often move very close to shorelines or into areas with dense ice cover where the larger orcas cannot follow.</p>
</div>
</div>
<div class="behavior-card">
<img src="/api/placeholder/400/300" alt="Narwhal migration patterns" class="behavior-img">
<div class="behavior-content">
<h3>Migration Patterns</h3>
<p>Narwhals follow seasonal migration patterns that are closely tied to ice formation and breakup. In summer, they move closer to coastal areas and fjords, while in winter they inhabit offshore areas with dense pack ice.</p>
<p>These migrations can cover hundreds of kilometers and are remarkably consistent year after year, suggesting strong cultural learning and memory within narwhal populations.</p>
</div>
</div>
</div>
<div class="fact-box">
<h3>Did You Know?</h3>
<p>Narwhals can dive deeper than almost any other marine mammal, reaching depths of up to 1,500 meters (4,900 feet). They can hold their breath for up to 25 minutes during these impressive dives, and their heart rate slows dramatically to conserve oxygen.</p>
</div>
<h2>Communication & Vocalizations</h2>
<p>Narwhals have a complex system of communication that helps them navigate, find food, and interact with each other in their Arctic environment:</p>
<div class="behavior-grid">
<div class="behavior-card">
<div class="behavior-content">
<h3>Clicks & Whistles</h3>
<p>Narwhals produce a variety of clicks, whistles, and pulsed sounds to communicate with each other. These vocalizations serve different purposes:</p>
<ul>
<li>Rapid clicks for echolocation and navigation</li>
<li>Whistles for social communication within pods</li>
<li>Pulsed sounds that may indicate emotional states</li>
</ul>
</div>
</div>
<div class="behavior-card">
<div class="behavior-content">
<h3>Echolocation</h3>
<p>Narwhals have one of the most sophisticated echolocation systems among marine mammals. Their clicking sounds bounce off objects and return to them, creating a detailed "sound map" of their surroundings.</p>
<p>This ability is crucial for finding prey in the dark Arctic waters and for navigating under ice sheets where visibility is limited or nonexistent.</p>
</div>
</div>
<div class="behavior-card">
<div class="behavior-content">
<h3>Tusk Communication</h3>
<p>Though not strictly vocalization, the narwhal's tusk may play a role in communication. Males have been observed crossing or rubbing tusks, a behavior known as "tusking." This may be related to establishing dominance hierarchies or determining social rank.</p>
<p>The highly innervated tusk may also serve as a sensory organ that can detect changes in water temperature, pressure, and possibly even the chemical composition of the water.</p>
</div>
</div>
</div>
<h2>Daily Life Cycle</h2>
<p>A narwhal's day typically follows patterns dictated by their need to breathe, find food, and maintain social bonds:</p>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content timeline-left">
<h3>Dawn</h3>
<p>Narwhals often increase activity around dawn, engaging in feeding dives. They may perform multiple dives during this period, taking advantage of the vertical migration of prey species.</p>
</div>
<div class="timeline-marker"></div>
</div>
<div class="timeline-item">
<div class="timeline-content timeline-right">
<h3>Mid-day</h3>
<p>During mid-day, narwhals may engage in social behaviors at the surface, including tusking (male-to-male tusk contact), breaching, and other forms of play or social bonding.</p>
</div>
<div class="timeline-marker"></div>
</div>
<div class="timeline-item">
<div class="timeline-content timeline-left">
<h3>Dusk</h3>
<p>Like dawn, dusk is another peak feeding time for narwhals. They perform deep dives, using echolocation to locate prey in the darkness of the Arctic waters.</p>
</div>
<div class="timeline-marker"></div>
</div>
<div class="timeline-item">
<div class="timeline-content timeline-right">
<h3>Night</h3>
<p>During the night, narwhals continue to dive for food but may alternate with periods of rest. Unlike humans, they don't sleep for extended periods but instead take short "naps" while remaining partially alert.</p>
</div>
<div class="timeline-marker"></div>
</div>
</div>
<div class="fact-box">
<h3>Sleeping Habits</h3>
<p>Like other whales, narwhals don't sleep in the same way humans do. They appear to take short "naps" of 5-10 minutes while remaining aware of their surroundings, and they must consciously remember to surface for air. This is known as unihemispheric sleep, where one half of the brain remains active while the other half rests.</p>
</div>
<h2>Reproduction & Parenting</h2>
<div class="behavior-grid">
<div class="behavior-card">
<div class="behavior-content">
<h3>Mating</h3>
<p>Narwhals typically mate in spring, around April to May. Males may compete for females, possibly using their tusks in displays of dominance. The exact role of the tusk in mating is still not fully understood, but it may play a role in female choice of mates.</p>
</div>
</div>
<div class="behavior-card">
<div class="behavior-content">
<h3>Gestation & Birth</h3>
<p>Female narwhals have a gestation period of about 14-15 months, one of the longest among cetaceans. Calves are typically born between July and August in the relatively warm coastal waters that narwhals inhabit during summer.</p>
</div>
</div>
<div class="behavior-card">
<div class="behavior-content">
<h3>Calf Rearing</h3>
<p>Narwhal calves nurse for about 20 months, learning essential survival skills from their mothers during this period. The milk is rich in fat, helping calves quickly develop the blubber layer needed for Arctic waters.</p>
<p>Young narwhals stay close to their mothers and learn migration routes, feeding techniques, and social behaviors through observation and experience.</p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>NarwhalWorld</h3>
<p>Your comprehensive resource for learning about the mysterious narwhal, featuring information about their anatomy, behavior, diet, and natural habitat.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a href="anatomy.html">Anatomy</a>
<a href="diet.html">Diet</a>
<a href="behavior.html">Behavior</a>
<a href="habitat.html">Habitat</a>
</div>
<div class="footer-column">
<h3>About This Site</h3>
<p>This website was created for educational purposes to share information about narwhals and their fascinating lives in the Arctic.</p>
<p>Images are placeholders and would be replaced with actual narwhal photography in a real site.</p>
</div>
</div>
<div class="copyright">
<p>© 2025 NarwhalWorld | All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Raw
diet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diet - Narwhal: The Unicorn of the Sea</title>
<style>
:root {
--primary: #2E3B4E;
--secondary: #4ECDC4;
--accent: #FF6B6B;
--light: #F7FFF7;
--dark: #1A2639;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--light);
color: var(--dark);
}
header {
background-color: var(--primary);
color: white;
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
header::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at 30% 40%, rgba(78, 205, 196, 0.2), transparent 70%);
z-index: 1;
}
nav {
background-color: var(--dark);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
padding: 1rem 0;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
color: white;
text-decoration: none;
padding: 1rem 0;
display: block;
position: relative;
transition: color 0.3s;
}
.menu a:hover {
color: var(--secondary);
}
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
.menu a.active {
color: var(--secondary);
}
.menu a.active::after {
width: 100%;
}
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.page-desc {
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin: 2rem 0 1rem;
color: var(--primary);
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--secondary);
}
h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
color: var(--primary);
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.diet-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
align-items: center;
}
.diet-img {
width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.food-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.food-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.food-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.food-img {
width: 100%;
height: 180px;
object-fit: cover;
}
.food-content {
padding: 1.5rem;
}
.food-content h3 {
margin-top: 0;
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.process-container {
margin: 3rem 0;
}
.process-steps {
display: flex;
flex-direction: column;
gap: 2rem;
margin: 2rem 0;
}
.process-step {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1.5rem;
align-items: center;
}
.step-number {
width: 80px;
height: 80px;
background-color: var(--secondary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
}
.step-content {
background: white;
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: relative;
}
.step-content::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
border-width: 10px 10px 10px 0;
border-style: solid;
border-color: transparent white transparent transparent;
}
.fact-container {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin: 2rem 0;
}
.fact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.fact-card {
background: rgba(78, 205, 196, 0.1);
border-left: 4px solid var(--secondary);
padding: 1.5rem;
border-radius: 0 10px 10px 0;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-column h3 {
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-column p, .footer-column a {
color: #ccc;
margin-bottom: 0.8rem;
display: block;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: #999;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
padding: 1rem;
}
.menu {
flex-direction: column;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.menu li {
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.menu a {
padding: 0.8rem 0;
}
.diet-hero {
grid-template-columns: 1fr;
}
.process-step {
grid-template-columns: 60px 1fr;
}
.step-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Narwhal Diet Information</h1>
<p>Learn what narwhals eat and how they hunt in the Arctic waters</p>
</div>
</header>
<nav>
<div class="nav-container">
<a href="index.html" class="logo">NarwhalWorld</a>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="anatomy.html">Anatomy</a></li>
<li><a href="diet.html" class="active">Diet</a></li>
<li><a href="behavior.html">Behavior</a></li>
<li><a href="habitat.html">Habitat</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="page-header">
<h1>Dietary Habits</h1>
<p class="page-desc">Narwhals have specialized feeding habits adapted to their Arctic environment and deep-diving abilities.</p>
</div>
<div class="diet-hero">
<div>
<h2>Feeding in the Deep</h2>
<p>Narwhals are primarily carnivorous and have a relatively specialized diet compared to other marine mammals. They feed mainly on fish, squid, and shrimp found in the deep waters of the Arctic Ocean.</p>
<p>These remarkable creatures are deep divers, often reaching depths of 800-1,500 meters (2,600-4,900 feet) to find their prey in the darkness of the ocean depths. Their diet changes seasonally as they follow the movements of their prey species.</p>
</div>
<img src="/api/placeholder/600/400" alt="Narwhal diving for food" class="diet-img">
</div>
<h2>What Do Narwhals Eat?</h2>
<p>Narwhals have a fairly specialized diet consisting primarily of these prey items:</p>
<div class="food-grid">
<div class="food-card">
<img src="/api/placeholder/400/300" alt="Greenland halibut" class="food-img">
<div class="food-content">
<h3>Greenland Halibut</h3>
<p>This deep-water flatfish is a primary food source for narwhals, especially during winter months. Greenland halibut typically live at depths of 500-2,000 meters, aligning perfectly with narwhals' diving abilities.</p>
</div>
</div>
<div class="food-card">
<img src="/api/placeholder/400/300" alt="Arctic cod" class="food-img">
<div class="food-content">
<h3>Arctic Cod</h3>
<p>Arctic cod is an important part of the narwhal diet, particularly during summer months. These fish are rich in oil and provide essential energy for narwhals in the cold Arctic environment.</p>
</div>
</div>
<div class="food-card">
<img src="/api/placeholder/400/300" alt="Squid" class="food-img">
<div class="food-content">
<h3>Squid</h3>
<p>Various species of squid form a significant portion of the narwhal diet. Narwhals are adept at catching these fast-moving cephalopods in the darkness of deep Arctic waters.</p>
</div>
</div>
<div class="food-card">
<img src="/api/placeholder/400/300" alt="Shrimp" class="food-img">
<div class="food-content">
<h3>Shrimp</h3>
<p>Deep-water shrimp species are commonly consumed by narwhals. These crustaceans are often found along the ocean floor where narwhals frequently forage.</p>
</div>
</div>
</div>
<div class="fact-container">
<h2>Interesting Feeding Facts</h2>
<div class="fact-grid">
<div class="fact-card">
<h3>Seasonal Feeding Patterns</h3>
<p>Narwhals tend to feed intensively during winter months when they spend time in offshore, deeper waters. During summer, they may eat less as they congregate in coastal areas and fjords.</p>
</div>
<div class="fact-card">
<h3>Benthic Foraging</h3>
<p>Narwhals are considered benthic feeders, meaning they often hunt near the ocean floor. Studies of their stomach contents show a high proportion of bottom-dwelling species.</p>
</div>
<div class="fact-card">
<h3>Tusk Usage in Feeding</h3>
<p>While not the primary function of the tusk, some research suggests narwhals may sometimes use their tusks to stun fish or "sift" through the seafloor sediment to find prey.</p>
</div>
</div>
</div>
<div class="process-container">
<h2>How Narwhals Hunt</h2>
<p>The narwhal hunting process is a remarkable demonstration of their specialized adaptations for Arctic life:</p>
<div class="process-steps">
<div class="process-step">
<div class="step-number">1</div>
<div class="step-content">
<h3>Deep Diving</h3>
<p>Narwhals begin their hunt by diving deep into the ocean, sometimes reaching depths of over 1,500 meters (4,900 feet). They can stay underwater for up to 25 minutes on a single breath, giving them ample time to locate prey.</p>
</div>
</div>
<div class="process-step">
<div class="step-number">2</div>
<div class="step-content">
<h3>Echolocation</h3>
<p>In the darkness of the deep ocean, narwhals use echolocation to find their prey. They emit a series of clicks that bounce off objects and return to them, providing a detailed "sound picture" of their surroundings and potential prey.</p>
</div>
</div>
<div class="process-step">
<div class="step-number">3</div>
<div class="step-content">
<h3>Suction Feeding</h3>
<p>Once prey is located, narwhals use a technique called suction feeding. They rapidly open their mouths, creating negative pressure that pulls the prey in, then close their mouths and expel water through their baleen plates, trapping the food inside.</p>
</div>
</div>
<div class="process-step">
<div class="step-number">4</div>
<div class="step-content">
<h3>Multiple Daily Dives</h3>
<p>Narwhals perform multiple deep dives per day for feeding, spending about 3 hours daily underwater actively hunting. They are most active with feeding during dawn and dusk.</p>
</div>
</div>
</div>
</div>
<h2>Adaptations for Deep-Water Feeding</h2>
<p>Narwhals have several specialized adaptations that allow them to be successful hunters in the extreme Arctic environment:</p>
<div class="feature-grid">
<div class="feature-card">
<h3>Oxygen Storage</h3>
<p>Narwhals have high concentrations of myoglobin in their muscles, allowing them to store large amounts of oxygen for deep dives. Their muscles can appear almost black due to this high myoglobin concentration.</p>
</div>
<div class="feature-card">
<h3>Collapsible Lungs</h3>
<p>Their lungs can collapse under pressure during deep dives, preventing nitrogen from dissolving in the bloodstream (which would cause decompression sickness) and reducing buoyancy for easier descent.</p>
</div>
<div class="feature-card">
<h3>Reduced Heart Rate</h3>
<p>During deep dives, narwhals can slow their heart rate from 60-70 beats per minute to just 10-20 beats per minute, conserving oxygen for extended hunting periods.</p>
</div>
<div class="feature-card">
<h3>Highly Sensitive Echolocation</h3>
<p>Narwhals have one of the most sophisticated echolocation systems among toothed whales, allowing them to detect prey in complete darkness and differentiate between similar species.</p>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>NarwhalWorld</h3>
<p>Your comprehensive resource for learning about the mysterious narwhal, featuring information about their anatomy, behavior, diet, and natural habitat.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a href="anatomy.html">Anatomy</a>
<a href="diet.html">Diet</a>
<a href="behavior.html">Behavior</a>
<a href="habitat.html">Habitat</a>
</div>
<div class="footer-column">
<h3>About This Site</h3>
<p>This website was created for educational purposes to share information about narwhals and their fascinating lives in the Arctic.</p>
<p>Images are placeholders and would be replaced with actual narwhal photography in a real site.</p>
</div>
</div>
<div class="copyright">
<p>© 2025 NarwhalWorld | All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Raw
habitat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Habitat - Narwhal: The Unicorn of the Sea</title>
<style>
:root {
--primary: #2E3B4E;
--secondary: #4ECDC4;
--accent: #FF6B6B;
--light: #F7FFF7;
--dark: #1A2639;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--light);
color: var(--dark);
}
header {
background-color: var(--primary);
color: white;
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
header::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at 30% 40%, rgba(78, 205, 196, 0.2), transparent 70%);
z-index: 1;
}
nav {
background-color: var(--dark);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
padding: 1rem 0;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
color: white;
text-decoration: none;
padding: 1rem 0;
display: block;
position: relative;
transition: color 0.3s;
}
.menu a:hover {
color: var(--secondary);
}
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
.menu a.active {
color: var(--secondary);
}
.menu a.active::after {
width: 100%;
}
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.page-header {
text-align: center;
margin-bottom: 2rem;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.page-desc {
max-width: 800px;
margin: 0 auto 2rem;
text-align: center;
}
h2 {
font-size: 2rem;
margin: 2rem 0 1rem;
color: var(--primary);
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--secondary);
}
h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
color: var(--primary);
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.map-container {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin: 2rem 0;
}
.map-img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.map-content {
padding: 1.5rem;
}
.habitat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.habitat-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.habitat-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.habitat-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.habitat-content {
padding: 1.5rem;
}
.habitat-content h3 {
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.conservation-banner {
background: linear-gradient(to right, var(--primary), var(--dark));
color: white;
padding: 3rem 2rem;
border-radius: 10px;
margin: 3rem 0;
position: relative;
overflow: hidden;
}
.conservation-banner::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('/api/placeholder/1200/400') center/cover no-repeat;
opacity: 0.2;
z-index: 0;
}
.conservation-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.conservation-content h2 {
color: white;
margin-bottom: 1.5rem;
}
.conservation-content h2::after {
background-color: var(--accent);
left: 50%;
transform: translateX(-50%);
}
.conservation-btn {
display: inline-block;
background-color: var(--accent);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
margin-top: 1rem;
}
.conservation-btn:hover {
background-color: var(--secondary);
transform: translateY(-2px);
}
.season-tabs {
display: flex;
margin: 2rem 0;
border-bottom: 2px solid var(--secondary);
}
.season-tab {
padding: 1rem 1.5rem;
background: white;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 1rem;
transition: background-color 0.3s;
}
.season-tab.active {
background-color: var(--secondary);
color: white;
}
.season-content {
display: none;
background: white;
padding: 2rem;
border-radius: 0 0 10px 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.season-content.active {
display: block;
}
.threat-container {
background: white;
border-radius: 10px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin: 2rem 0;
}
.threat-list {
margin-top: 1.5rem;
}
.threat-item {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
}
.threat-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.threat-icon {
width: 80px;
height: 80px;
background-color: rgba(78, 205, 196, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--secondary);
}
.threat-content h3 {
margin-top: 0;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-column h3 {
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-column p, .footer-column a {
color: #ccc;
margin-bottom: 0.8rem;
display: block;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: #999;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
padding: 1rem;
}
.menu {
flex-direction: column;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.menu li {
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.menu a {
padding: 0.8rem 0;
}
.season-tabs {
flex-direction: column;
}
.threat-item {
grid-template-columns: 1fr;
}
.threat-icon {
margin: 0 auto 1rem;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Narwhal Habitat</h1>
<p>Explore where narwhals live and the environments they thrive in</p>
</div>
</header>
<nav>
<div class="nav-container">
<a href="index.html" class="logo">NarwhalWorld</a>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="anatomy.html">Anatomy</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behavior.html">Behavior</a></li>
<li><a href="habitat.html" class="active">Habitat</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="page-header">
<h1>Natural Habitat</h1>
<p class="page-desc">Narwhals have a very specific habitat range, limited to the cold Arctic waters around Greenland, Canada, and Russia.</p>
</div>
<div class="map-container">
<img src="/api/placeholder/1200/500" alt="Map showing narwhal habitat range" class="map-img">
<div class="map-content">
<h2>Where Narwhals Live</h2>
<p>Narwhals are found exclusively in the Arctic waters of Canada, Greenland, Norway, and Russia. Their range is typically between 70°N and 80°N latitude, making them one of the northernmost dwelling marine mammals on Earth. The primary populations are concentrated in the Canadian Arctic Archipelago, West and East Greenland, and in the waters around Svalbard.</p>
<p>These remarkable creatures stay within the Arctic year-round, unlike some other Arctic marine mammals that migrate to warmer waters during winter months. Instead, narwhals follow seasonal migration patterns within the Arctic region, moving between different types of habitats as ice conditions change throughout the year.</p>
</div>
</div>
<h2>Key Habitat Types</h2>
<div class="habitat-grid">
<div class="habitat-card">
<img src="/api/placeholder/400/300" alt="Arctic fjords" class="habitat-img">
<div class="habitat-content">
<h3>Coastal Fjords & Inlets</h3>
<p>During summer months (July-September), narwhals often inhabit coastal fjords and inlets, particularly along the east coast of Baffin Island, northern Hudson Bay, and western Greenland. These sheltered areas provide protection and are often used as calving grounds.</p>
<p>The relatively warmer coastal waters during summer also offer increased food availability and safety from some predators like killer whales.</p>
</div>
</div>
<div class="habitat-card">
<img src="/api/placeholder/400/300" alt="Deep offshore Arctic waters" class="habitat-img">
<div class="habitat-content">
<h3>Deep Offshore Waters</h3>
<p>In winter months (October-June), narwhals move to deeper offshore waters, often at depths of 1,000-1,500 meters. These areas are typically covered with dense pack ice with only small openings (polynyas or leads) for breathing.</p>
<p>These deep waters are where narwhals find much of their winter food supply, including Greenland halibut and other deep-water fish species.</p>
</div>
</div>
<div class="habitat-card">
<img src="/api/placeholder/400/300" alt="Sea ice with polynyas" class="habitat-img">
<div class="habitat-content">
<h3>Polynyas & Leads</h3>
<p>Narwhals are highly adapted to living in areas with heavy ice cover. They utilize polynyas (recurring areas of open water surrounded by sea ice) and leads (linear cracks in sea ice) for breathing during winter.</p>
<p>Their ability to navigate under ice and find these breathing holes is crucial to their survival in the harsh Arctic winter environment.</p>
</div>
</div>
</div>
<h2>Seasonal Habitat Changes</h2>
<p>Narwhals move between different habitats throughout the year, following a predictable seasonal pattern:</p>
<div class="season-tabs">
<button class="season-tab active">Summer</button>
<button class="season-tab">Fall</button>
<button class="season-tab">Winter</button>
<button class="season-tab">Spring</button>
</div>
<div class="season-content active">
<h3>Summer Habitat (July-September)</h3>
<p>In summer, narwhals move into coastal fjords and bays when sea ice retreats. They often gather in large numbers in specific inlets and bays, with some areas hosting thousands of individuals. These coastal waters offer:</p>
<ul>
<li>Protection from predators like killer whales</li>
<li>Shallow waters suitable for calving</li>
<li>Access to certain prey species</li>
<li>Opportunities for social interaction</li>
</ul>
<p>Key summer habitats include Lancaster Sound, Admiralty Inlet, Eclipse Sound, and the fjords of East Greenland.</p>
</div>
<div class="season-content">
<h3>Fall Habitat (October-November)</h3>
<p>As sea ice begins to form in the fall, narwhals start their migration from coastal areas to deeper offshore waters. This transition period is characterized by:</p>
<ul>
<li>Increased feeding activity to build fat reserves for winter</li>
<li>Movement along traditional migration corridors</li>
<li>Gradual shift to deeper waters</li>
<li>Adaptation to increasing ice coverage</li>
</ul>
<p>During this period, narwhals often follow specific routes that have been used for generations, suggesting cultural knowledge passed between individuals and pods.</p>
</div>
<div class="season-content">
<h3>Winter Habitat (December-March)</h3>
<p>Winter represents the most extreme habitat conditions for narwhals. They spend this season in offshore areas with nearly complete ice coverage, where they:</p>
<ul>
<li>Rely on polynyas and leads (cracks in the ice) for breathing</li>
<li>Dive to extreme depths (1,000-1,500 meters) to feed</li>
<li>Navigate in complete darkness due to the polar night</li>
<li>Maintain smaller, more dispersed groups</li>
</ul>
<p>The Davis Strait, Baffin Bay, and northern Hudson Bay are key winter habitats for different narwhal populations.</p>
</div>
<div class="season-content">
<h3>Spring Habitat (April-June)</h3>
<p>As ice begins to break up in spring, narwhals prepare for their return migration to summer grounds. During this period:</p>
<ul>
<li>They follow the retreating ice edge</li>
<li>Begin to form larger social groups again</li>
<li>Take advantage of the spring phytoplankton bloom that increases food availability</li>
<li>Navigate through increasingly complex ice conditions</li>
</ul>
<p>The spring migration allows narwhals to gradually move from their deep-water wintering grounds to coastal summering areas, following ancient routes that may have been used for thousands of years.</p>
</div>
<div class="conservation-banner">
<div class="conservation-content">
<h2>Habitat Under Threat</h2>
<p>The Arctic is warming at more than twice the rate of the global average, dramatically altering narwhal habitat. Sea ice coverage has decreased by approximately 13% per decade since satellite records began in 1979.</p>
<p>These changes present significant challenges for narwhals, which have evolved specifically for life in icy Arctic waters.</p>
</div>
</div>
<div class="threat-container">
<h2>Major Threats to Narwhal Habitat</h2>
<p>Several human activities and environmental changes pose serious threats to narwhal habitat:</p>
<div class="threat-list">
<div class="threat-item">
<div class="threat-icon">❄️</div>
<div class="threat-content">
<h3>Climate Change</h3>
<p>Rising temperatures are causing rapid sea ice loss across the Arctic, fundamentally altering narwhal habitat. Reduced ice cover means:</p>
<ul>
<li>Fewer breathing holes in winter</li>
<li>Changes in prey distribution and abundance</li>
<li>Increased competition from southern species moving northward</li>
<li>Greater exposure to predators like killer whales</li>
</ul>
</div>
</div>
<div class="threat-item">
<div class="threat-icon">🛢️</div>
<div class="threat-content">
<h3>Industrial Development</h3>
<p>As sea ice retreats, previously inaccessible Arctic areas are opening for industrial activities:</p>
<ul>
<li>Oil and gas exploration creates disruptive noise pollution</li>
<li>Increased shipping traffic risks collisions and habitat disturbance</li>
<li>Mining operations can introduce pollutants into the marine environment</li>
<li>Infrastructure development may block traditional migration routes</li>
</ul>
</div>
</div>
<div class="threat-item">
<div class="threat-icon">🔊</div>
<div class="threat-content">
<h3>Noise Pollution</h3>
<p>Narwhals are particularly sensitive to noise disturbance:</p>
<ul>
<li>Seismic surveys for oil exploration can cause stress and displacement</li>
<li>Military sonar may interfere with narwhal echolocation</li>
<li>Increased shipping noise can mask communication signals</li>
<li>Narwhals may abandon important habitat areas due to noise stress</li>
</ul>
</div>
</div>
<div class="threat-item">
<div class="threat-icon">⚓</div>
<div class="threat-content">
<h3>Changing Hunting Practices</h3>
<p>Traditional subsistence hunting by Inuit communities is being impacted by changing conditions:</p>
<ul>
<li>Unpredictable ice conditions alter hunting patterns</li>
<li>Modern technology may increase hunting efficiency</li>
<li>Changes in governance and management practices</li>
<li>Market demands and economic pressures</li>
</ul>
</div>
</div>
</div>
</div>
<h2>Conservation Efforts</h2>
<p>Several initiatives are underway to protect narwhal habitat and ensure the survival of these unique Arctic mammals:</p>
<div class="habitat-grid">
<div class="habitat-card">
<div class="habitat-content">
<h3>Protected Areas</h3>
<p>Several marine protected areas have been established in key narwhal habitats, including Tallurutiup Imanga (Lancaster Sound) National Marine Conservation Area in Canada and the Northeast Greenland National Park.</p>
<p>These areas limit industrial activities and provide safe havens for narwhals and other Arctic species.</p>
</div>
</div>
<div class="habitat-card">
<div class="habitat-content">
<h3>Research & Monitoring</h3>
<p>Scientists are tracking narwhal populations and movements using satellite tags, acoustic monitoring, and aerial surveys to better understand how they use their habitat and how they're responding to environmental changes.</p>
<p>This research helps inform conservation measures and management decisions.</p>
</div>
</div>
<div class="habitat-card">
<div class="habitat-content">
<h3>Indigenous Co-Management</h3>
<p>Collaboration between scientists, government agencies, and Inuit communities is essential for effective narwhal conservation. Indigenous Knowledge provides valuable insights into narwhal behavior and habitat use over generations.</p>
<p>Co-management agreements help balance conservation needs with traditional subsistence practices.</p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>NarwhalWorld</h3>
<p>Your comprehensive resource for learning about the mysterious narwhal, featuring information about their anatomy, behavior, diet, and natural habitat.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a href="anatomy.html">Anatomy</a>
<a href="diet.html">Diet</a>
<a href="behavior.html">Behavior</a>
<a href="habitat.html">Habitat</a>
</div>
<div class="footer-column">
<h3>About This Site</h3>
<p>This website was created for educational purposes to share information about narwhals and their fascinating lives in the Arctic.</p>
<p>Images are placeholders and would be replaced with actual narwhal photography in a real site.</p>
</div>
</div>
<div class="copyright">
<p>© 2025 NarwhalWorld | All Rights Reserved</p>
</div>
</footer>
<script>
// Simple script to handle season tabs
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.season-tab');
const contents = document.querySelectorAll('.season-content');
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
// Remove active class from all tabs and contents
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));
// Add active class to clicked tab and corresponding content
tab.classList.add('active');
contents[index].classList.add('active');
});
});
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Narwhal - The Unicorn of the Sea</title>
<style>
:root {
--primary: #2E3B4E;
--secondary: #4ECDC4;
--accent: #FF6B6B;
--light: #F7FFF7;
--dark: #1A2639;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
background-color: var(--light);
color: var(--dark);
}
header {
background-color: var(--primary);
color: white;
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
header::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(circle at 30% 40%, rgba(78, 205, 196, 0.2), transparent 70%);
z-index: 1;
}
nav {
background-color: var(--dark);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: white;
text-decoration: none;
padding: 1rem 0;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-left: 1.5rem;
}
.menu a {
color: white;
text-decoration: none;
padding: 1rem 0;
display: block;
position: relative;
transition: color 0.3s;
}
.menu a:hover {
color: var(--secondary);
}
.menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary);
transition: width 0.3s;
}
.menu a:hover::after {
width: 100%;
}
.main-content {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.hero {
position: relative;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
margin-bottom: 3rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.hero img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, rgba(26, 38, 57, 0.7), rgba(26, 38, 57, 0.4));
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
padding: 0 2rem;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 800;
line-height: 1.2;
}
h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--primary);
position: relative;
padding-bottom: 0.5rem;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--secondary);
}
h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.section {
margin-bottom: 3rem;
}
.card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.card-content {
padding: 1.5rem;
}
.btn {
display: inline-block;
background-color: var(--secondary);
color: white;
padding: 0.8rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.btn:hover {
background-color: var(--accent);
transform: translateY(-2px);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.gallery-item {
position: relative;
border-radius: 10px;
overflow: hidden;
height: 250px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(26, 38, 57, 0.8);
color: white;
padding: 1rem;
transform: translateY(100%);
transition: transform 0.3s;
}
.gallery-item:hover .gallery-caption {
transform: translateY(0);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-card {
background: white;
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.info-card h3 {
border-bottom: 2px solid var(--secondary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.feature-icon {
background-color: var(--secondary);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.5rem;
}
footer {
background-color: var(--dark);
color: white;
padding: 3rem 0 2rem;
margin-top: 3rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-column h3 {
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: var(--secondary);
}
.footer-column p, .footer-column a {
color: #ccc;
margin-bottom: 0.8rem;
display: block;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: var(--secondary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
color: #999;
}
@media (max-width: 768px) {
.nav-container {
flex-direction: column;
padding: 1rem;
}
.menu {
flex-direction: column;
width: 100%;
text-align: center;
margin-top: 1rem;
}
.menu li {
margin: 0;
border-top: 1px solid rgba(255,255,255,0.1);
}
.menu a {
padding: 0.8rem 0;
}
h1 {
font-size: 2.5rem;
}
.hero {
height: 400px;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Narwhal: The Unicorn of the Sea</h1>
<p>Discover the fascinating world of these majestic Arctic marine mammals</p>
</div>
</header>
<nav>
<div class="nav-container">
<a href="index.html" class="logo">NarwhalWorld</a>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="anatomy.html">Anatomy</a></li>
<li><a href="diet.html">Diet</a></li>
<li><a href="behavior.html">Behavior</a></li>
<li><a href="habitat.html">Habitat</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="hero">
<img src="/api/placeholder/1200/500" alt="Narwhal swimming in Arctic waters">
<div class="hero-content">
<h1>Welcome to the World of Narwhals</h1>
<p>Explore the mysterious life of the ocean's most unique whale species</p>
<a href="gallery.html" class="btn">View Gallery</a>
</div>
</div>
<section class="section">
<h2>About Narwhals</h2>
<p>The narwhal (Monodon monoceros) is a medium-sized toothed whale that lives year-round in the Arctic waters around Greenland, Canada, and Russia. Narwhals are famous for their long, spiral tusks, which are actually elongated teeth that can grow up to 10 feet long.</p>
<p>These remarkable creatures are perfectly adapted to life in the Arctic, with specialized features that allow them to navigate, hunt, and survive in one of Earth's most challenging environments.</p>
<div class="info-grid">
<div class="info-card">
<h3>The Unicorn of the Sea</h3>
<p>Narwhals get their nickname from their distinctive long tusk, which resembles the mythical unicorn's horn. This tusk is actually an elongated tooth that spirals counterclockwise and can grow as long as 10 feet.</p>
</div>
<div class="info-card">
<h3>Arctic Specialists</h3>
<p>Narwhals have evolved to thrive in the extreme Arctic environment, with adaptations like a thick layer of blubber, the ability to dive to extreme depths, and navigation skills that allow them to find breathing holes in ice sheets.</p>
</div>
<div class="info-card">
<h3>Conservation Status</h3>
<p>While currently listed as "Least Concern" by the IUCN, narwhals face growing threats from climate change, which is rapidly altering their Arctic habitat, as well as from industrial activities and hunting.</p>
</div>
</div>
</section>
<section class="section">
<h2>Featured Sections</h2>
<div class="info-grid">
<a href="gallery.html" class="card">
<img src="/api/placeholder/400/200" alt="Narwhal gallery preview" style="width:100%; height:200px; object-fit:cover;">
<div class="card-content">
<h3>Image Gallery</h3>
<p>View stunning images of narwhals in their natural Arctic habitat.</p>
</div>
</a>
<a href="anatomy.html" class="card">
<img src="/api/placeholder/400/200" alt="Narwhal anatomy preview" style="width:100%; height:200px; object-fit:cover;">
<div class="card-content">
<h3>Anatomy & Biology</h3>
<p>Learn about the unique physical characteristics of narwhals.</p>
</div>
</a>
<a href="habitat.html" class="card">
<img src="/api/placeholder/400/200" alt="Narwhal habitat preview" style="width:100%; height:200px; object-fit:cover;">
<div class="card-content">
<h3>Natural Habitat</h3>
<p>Discover where narwhals live and the environments they thrive in.</p>
</div>
</a>
</div>
</section>
</div>
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>NarwhalWorld</h3>
<p>Your comprehensive resource for learning about the mysterious narwhal, featuring information about their anatomy, behavior, diet, and natural habitat.</p>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<a href="index.html">Home</a>
<a href="gallery.html">Gallery</a>
<a href="anatomy.html">Anatomy</a>
<a href="diet.html">Diet</a>
<a href="behavior.html">Behavior</a>
<a href="habitat.html">Habitat</a>
</div>
<div class="footer-column">
<h3>About This Site</h3>
<p>This website was created for educational purposes to share information about narwhals and their fascinating lives in the Arctic.</p>
<p>Images are placeholders and would be replaced with actual narwhal photography in a real site.</p>
</div>
</div>
<div class="copyright">
<p>© 2025 NarwhalWorld | All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment