added blog

This commit is contained in:
Tristan Smith 2024-09-21 03:47:42 -04:00
parent cc2d019ec2
commit acb3998068
2 changed files with 85 additions and 0 deletions

65
blog/index.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>monotreme.org</title>
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<table>
<!-- Header -->
<tr>
<td colspan="2" class="header">
<h1>Save the monotremes</h1>
</td>
</tr>
<!-- Navigation -->
<tr>
<td colspan="2" class="nav">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<a href="/contact/">Contact</a>
</td>
</tr>
<!-- Main Content and Sidebar -->
<tr>
<!-- Sidebar -->
<td class="sidebar">
<p><strong>Quick Links</strong></p>
<ul>
<li><a href="/platypus/">The Noble Platypus</a></li>
<li><a href="/echidna/">The Royal Echidna</a></li>
<li><a href="/monotremes/">About Monotremes</a></li>
</ul>
</td>
<!-- Main Content Area -->
<td class="content">
<h2>Our First Blog Post: The Fascinating World of Monotremes</h2>
<p class="blog-date">Posted on September 21, 2024</p>
<div class="blog-entry">
<p>Welcome to our blog, where we dive into the incredible world of monotremes! Monotremes are unique mammals that lay eggs, a trait they share with reptiles. However, they are warm-blooded, have fur, and nurse their young like all other mammals.</p>
<p>In this first post, well introduce you to two of the most famous monotremes: the platypus and the echidna. Both species have captivated scientists and wildlife enthusiasts for centuries due to their unusual combination of traits. Stay tuned as we explore their habitats, behaviors, and conservation efforts in more detail in future posts.</p>
<p>Did you know? The platypus uses its bill to sense electrical signals emitted by prey while underwater. Talk about a superpower!</p>
</div>
<img src="../platypus.png" alt="platypus" class="blog-img">
<img src="../echidna.png" alt="echidna" class="blog-img">
</td>
</tr>
<!-- Footer -->
<tr>
<td colspan="2" class="footer">
<p>&copy; 2024 monotreme.org</p>
</td>
</tr>
</table>
</body>
</html>

View file

@ -144,3 +144,23 @@ body {
.more-about-monotremes p { .more-about-monotremes p {
margin: 10px 0; margin: 10px 0;
} }
/* Blog entry styling */
.blog-entry {
background-color: #f9f9f9; /* Light gray background */
border-left: 4px solid #ffa07a; /* Coral border */
padding: 15px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.blog-date {
color: #999;
font-style: italic;
margin-bottom: 10px;
}
.blog-img {
max-width: 100%;
height: auto;
margin-top: 20px;
}