rattatwinko/INF6B
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new website, for the project i have the "erdmännchen" its a funny creature

Browse Source
This commit is contained in:
rattatwinko
2026-05-27 10:42:34 +02:00
parent f0f31e774d
commit 16d0d5009c
8 changed files with 312 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/website/about.html
+35
View File
@@ -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>
html/website/behavior.html
+34
View File
@@ -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 &amp; 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>
html/website/gallery.html
+37
View File
@@ -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>
html/website/index.html
+46
View File
@@ -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&dash;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>
html/website/styles/index.css
+113
View File
@@ -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;
}
html/wm/box/index.html
+29 -14
View File
@@ -14,21 +14,36 @@
</div>
<div class="body-text">
<p>
<ul>
<li>Österreichs Fußballnationalteam hat für die Fußball-WM-Endrunde 2026 in Kanada, Mexiko und den USA in Washington das große Los gezogen und trifft auf Titelverteidiger Argentinien mit Superstar Lionel Messi.</li>
<li>Zudem gibt es ein brisantes Wiedersehen mit Algerien und eine Premiere gegen den WM-Debütanten Jordanien.</li>
<li>Spielplan:
<ul>
<li>17.06. - Österreich gegen Jordanien, 6:00 Uhr, San Francisco</li>
<li>22.06. - Österreich gegen Argentinien, 19:00 Uhr, Dallas</li>
<li>28.06. - Österreich gegen Algerien, 4:00 Uhr, Kansas City</li>
</ul>
</li>
<li>Das malerisch an der Steilküste über dem Pazifik gelegene Ritz-Carlton Bacara wird zumindest während der Gruppenspiele gegen Jordanien (17. Juni), Argentinien (22. Juni) und Algerien (28. Juni) die Heimat von David Alaba und Co. sein.</li>
<li>Die in Einzelhäuser aufgeteilte, über 360 Zimmer verfügende Anlage spielt alle „Stückln“ — allein der Blick auf den pazifischen Ozean sollte zur Tiefenentspannung zwischen den heißen Partien genügen.</li>
</ul>
<p>Österreichs Fußballnationalteam hat für die Fußball-WM-Endrunde 2026 in Kanada, Mexiko und den USA in Washington das große Los gezogen und trifft auf Titelverteidiger Argentinien mit Superstar Lionel Messi.
Zudem gibt es ein brisantes Wiedersehen mit Algerien und eine Premiere gegen den WM-Debütanten Jordanien.
</p>
</div>
<h2>Spielplan:</h2>
<div class="container">
<div class="ibox0">
<strong>17.06. Österreich gegen Jordanien</strong>
<br>
<strong>6.00 Uhr San Francisco</strong>
</div>
<div class="ibox1">
<strong>22.06. Österreich gegen Argentinien</strong>
<br>
<strong>19:00 Uhr Dallas</strong>
</div>
<div class="ibox2">
<strong>28.06. Österreich gegen Algerien</strong>
<br>
<strong>4:00 Uhr Kansas City</strong>
</div>
</div>
<h3>Abschlusstext</h3>
<div class="body-text">
<p>Das malerisch an der Steilküste über dem Pazifik gelegene Ritz-Carlton Bacara wird zumindest während der Gruppenspiele gegen Jordanien (17. Juni), Argentinien (22. Juni) und Algerien (28. Juni) die Heimat von David Alaba und Co. sein. Die in Einzelhäuser aufgeteilte über 360 Zimmer verfügende Anlage spielt alle „Stückln“. Allein der Blick hinaus auf den pazifischen Ozean sollte zur Tiefenentspannung zwischen den heißen Partien genügen.</p>
</div>
</body>
</html>
html/wm/box/styles/index.css
+17 -13
View File
@@ -1,3 +1,8 @@
h1 h2 h3 {
text-align: center;
justify-content: center;
}
.banner img {
height: 300px;
width: 100%;
@@ -17,19 +22,18 @@
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.body-text ul {
margin: 0;
padding-left: 1.25rem;
list-style: disc;
color: inherit;
/* von moodle */
.container {
display: flex; /* Aktiviert Flexbox */
justify-content: space-between; /* Verteilt die Inhalte mit Abstand */
gap: 10px; /* Abstand zwischen den Inhalten */
}
.body-text ul ul {
padding-left: 1rem;
list-style: circle;
}
.body-text li {
margin: 0.5rem 0;
padding-right: 0.25rem;
.ibox0 .ibox1 .ibox2 {
flex: 1; /* Alle Boxen sind gleich breit */
background-color: aqua;
padding-left: 40px;
padding-right: 40px;
text-align: center;
}
html/wm/box.tar.gz → html/wm/boxbox.tar.gz
View File