From 669090e0cd5465fb49015e87f3e188512530cea2 Mon Sep 17 00:00:00 2001 From: DST81 Date: Thu, 26 Feb 2026 14:17:48 +0100 Subject: [PATCH] Spielen und Ausprobieren mit Responsive Design Teil 2 --- assets/css/custom.css | 22 ++++++++++++++++++++++ index.html | 25 ++++++++++++++++++++++--- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index e6949b5..5e6ecc5 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -6,6 +6,21 @@ body { } p.image { text-align: center; +} +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color: dodgerblue; +} +.container div { + background-color:#f1f1f1; + margin: 10px; + padding: 20px; + font-size: 30px; + color: black; + flex: 1 1 100%; + text-align: center; } @@ -15,6 +30,9 @@ p.image { color: white; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } + .container div { + flex: 1 1 calc(50% - 40px); + } } @media (min-width: 1200px) { body { @@ -31,5 +49,9 @@ p.image { column-rule: 5px dotted black; outline-style: dotted; } + .container div { + flex: 1 1 calc(25% - 20px); + } } + diff --git a/index.html b/index.html index 374fefd..4a93cbc 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,21 @@ + My Web Page @@ -9,9 +24,13 @@

Hello From Main Page

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum Blumen - -

+

Lorem ipsum Blumen

+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Go to Main Page Go to Second Page