boxen wm beispiel

2026-04-27 12:48:36 +02:00
parent c68082c1a7
commit e181656f04
5 changed files with 158 additions and 142 deletions
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/index.css">
+    <title>WM-Boxen (divs)</title>
+</head>
+<body>
+    <h1>Österreich bei der WM</h1>
+
+    <div class="banner">
+        <img src="images/banner.jpeg">
+    </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>
+    </div>
+</body>
+</html>
@@ -0,0 +1,35 @@
+.banner img {
+    height: 300px;
+    width: 100%;
+    object-fit: cover;
+    object-position: top center;
+    display: block;
+}
+
+.body-text {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  color: #222;
+  line-height: 1.5;
+  font-size: 16px;
+  padding: 18px;
+  background: #fff;
+  border-radius: 8px;
+  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;
+}
+
+.body-text ul ul {
+  padding-left: 1rem;
+  list-style: circle;
+}
+
+.body-text li {
+  margin: 0.5rem 0;
+  padding-right: 0.25rem;
+}