new website, for the project i have the "erdmännchen" its a funny creature
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Über Erdmännchen</title>
|
||||
<link rel="stylesheet" href="styles/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Über Erdmännchen</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<a href="index.html">Start</a>
|
||||
<a href="behavior.html">Verhalten</a>
|
||||
<a href="gallery.html">Galerie</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2>Beschreibung</h2>
|
||||
<p>Erdmännchen sind kleine Raubtiere mit schlanken Körpern, langen Schwänzen und auffälligen dunklen Augenringen. Ihr Fell ist meist hellbraun mit dunkleren Streifen am Rücken.</p>
|
||||
|
||||
<h3>Lebensweise</h3>
|
||||
<p>Sie sind tagaktiv und verbringen viel Zeit auf der Nahrungssuche. Erdmännchen leben in unterirdischen Bausystemen, die sie gemeinsam erweitern und instand halten.</p>
|
||||
<div class="image-about">
|
||||
<h3>Fortpflanzung</h3>
|
||||
<p>In einer Kolonie gibt es häufig ein dominantes Paar, das den Großteil des Nachwuchses zur Welt bringt; andere Gruppenmitglieder helfen bei Aufzucht und Schutz der Jungen.</p>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Suricata_suricatta_alias_Mirkat.jpg/960px-Suricata_suricatta_alias_Mirkat.jpg">
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Verhalten & Sozialstruktur</title>
|
||||
<link rel="stylesheet" href="styles/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Verhalten & Sozialstruktur</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<a href="index.html">Start</a>
|
||||
<a href="about.html">Über</a>
|
||||
<a href="gallery.html">Galerie</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h2>Soziale Rollen</h2>
|
||||
<p>Innerhalb der Kolonie übernehmen Individuen verschiedene Aufgaben: Wächter, Futtersucher, Babysitter und Baumeister. Wächter klettern auf erhöhte Stellen und geben Alarmrufe bei Gefahr.</p>
|
||||
<div class="behaviour-image">
|
||||
<h2>Kommunikation</h2>
|
||||
<p>Erdmännchen besitzen ein differenziertes Repertoire an Lauten — Warnrufe unterscheiden zwischen Lufträubern und Bodenräubern; außerdem nutzen sie Körperhaltung und Duftmarken zur Verständigung.</p>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Suricata_suricatta_Kaldari_01.jpg/960px-Suricata_suricatta_Kaldari_01.jpg">
|
||||
</div>
|
||||
|
||||
<h2>Jagd und Ernährung</h2>
|
||||
<p>Sie graben aktiv nach Insekten und kleinen Wirbeltieren. Beim Jagen arbeiten Gruppenmitglieder oft unabhängig, teilen aber wichtige Funde mit der Gruppe.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Galerie</title>
|
||||
<link rel="stylesheet" href="styles/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Galerie</h1>
|
||||
<nav>
|
||||
<a href="index.html">Start</a>
|
||||
<a href="about.html">Über</a>
|
||||
<a href="behavior.html">Verhalten</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="grid">
|
||||
<figure>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Suricata_suricatta_44885.jpg/960px-Suricata_suricatta_44885.jpg" alt="Erdmännchen Gruppe">
|
||||
<figcaption>Gruppe auf Wachtposten</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Suricata_suricatta_qtl1.jpg/960px-Suricata_suricatta_qtl1.jpg" alt="Stehendes Erdmännchen">
|
||||
<figcaption>Aufrechter Wachtposten</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Suricata_suricatta_Oliwa.JPG/960px-Suricata_suricatta_Oliwa.JPG" alt="Erdmännchen Nahaufnahme">
|
||||
<figcaption>Nahaufnahme</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Erdmännchen</title>
|
||||
<link rel="stylesheet" href="styles/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Erdmännchen (Suricata suricatta)</h1>
|
||||
<hr>
|
||||
<nav>
|
||||
<a href="about.html">Über Erdmännchen</a>
|
||||
<a href="behavior.html">Verhalten & Sozialstruktur</a>
|
||||
<a href="gallery.html">Galerie</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Suricata_suricatta_8.jpg/960px-Suricata_suricatta_8.jpg?_=20110802140032">
|
||||
<div>
|
||||
<p class="lead">Erdmännchen sind kleine, tagaktive Säugetiere aus der Familie der Mangusten, bekannt für ihre aufrechten Wachtposten und komplexe Sozialstruktur.</p>
|
||||
<p>Dieses kurze Infoportal bietet Fakten, Verhaltenserklärungen, Schutzstatus und eine kleine Galerie mit Bildern von Wikimedia Commons.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="facts">
|
||||
<h2>Kurzfakten</h2>
|
||||
<ul style="margin-left: 3em;">
|
||||
<li><strong>Wissenschaftlicher Name:</strong> Suricata suricatta</li>
|
||||
<li><strong>Größe:</strong> 25‐35 cm (ohne Schwanz)</li>
|
||||
<li><strong>Lebensraum:</strong> Halbwüsten und trockene Savannen im südlichen Afrika</li>
|
||||
<li><strong>Ernährung:</strong> Insekten, kleine Wirbeltiere, Eier, Wurzeln</li>
|
||||
<li><strong>Sozialverhalten:</strong> Leben in Kolonien mit arbeitsteiligen Rollen</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="conservation">
|
||||
<h2>Schutzstatus</h2>
|
||||
<p>Erdmännchen gelten derzeit nicht als stark gefährdet, doch Lebensraumverlust und Veränderungen in Ökosystemen können lokale Populationen beeinflussen.</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
:root{
|
||||
--bg:#f7f7f7;
|
||||
--accent:#2d6a4f;
|
||||
--text:#333;
|
||||
--card:#fff;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
font-family:system-ui,Arial,sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
body{
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
line-height:1.4;
|
||||
}
|
||||
|
||||
header{
|
||||
background:var(--accent);
|
||||
color:#fff;
|
||||
padding:12px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
nav{
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color:#d3d3d3;
|
||||
margin-right:10px;
|
||||
text-decoration:none;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
main{
|
||||
max-width:900px;
|
||||
margin:18px auto;
|
||||
padding:12px;
|
||||
}
|
||||
|
||||
section, article, .facts, .conservation {
|
||||
background:var(--card);
|
||||
padding:12px;
|
||||
border-radius:6px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.hero{
|
||||
display:flex;
|
||||
gap:12px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
width:180px;
|
||||
height:120px;
|
||||
object-fit:cover;
|
||||
border-radius:6px;
|
||||
}
|
||||
|
||||
.image-about,
|
||||
.behaviour-image{
|
||||
width:100%;
|
||||
max-width:420px;
|
||||
height:auto;
|
||||
overflow:hidden;
|
||||
border-radius:6px;
|
||||
background:#eee;
|
||||
display:block;
|
||||
margin:8px 0;
|
||||
}
|
||||
|
||||
.image-about img,
|
||||
.behaviour-image img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
|
||||
gap:10px;
|
||||
}
|
||||
|
||||
figure {
|
||||
background:var(--card);
|
||||
padding:8px;
|
||||
border-radius:6px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
figure img {
|
||||
width:100%;
|
||||
height:120px;
|
||||
object-fit:cover;
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align:center;
|
||||
color:#666;
|
||||
padding:12px;
|
||||
font-size:14px;
|
||||
}
|
||||
Reference in New Issue
Block a user