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

2026-05-27 10:42:34 +02:00
parent f0f31e774d
commit 16d0d5009c
8 changed files with 312 additions and 28 deletions
@@ -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;
+}