From bf40ba91e9a25ce7bb5945698e7647eb2d973ba8 Mon Sep 17 00:00:00 2001 From: DST81 Date: Thu, 26 Feb 2026 13:27:46 +0100 Subject: [PATCH] Spielen und Ausprobieren mit Responsive Design --- assets/css/custom.css | 35 +++++++++++++++++++++++++++++++++++ index.html | 13 ++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index e69de29..e6949b5 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -0,0 +1,35 @@ + +body { + background: white; + color: black; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} +p.image { + text-align: center; +} + + +@media (min-width: 768px) { + body { + background-color: steelblue; + color: white; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } +} +@media (min-width: 1200px) { + body { + background-color: darkblue; + color: white; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + } + p { + column-count: 2; + column-gap: 2rem; + } + p.dotted { + column-gap: 2rem; + column-rule: 5px dotted black; + outline-style: dotted; + } + +} diff --git a/index.html b/index.html index 5ea1fd1..374fefd 100644 --- a/index.html +++ b/index.html @@ -8,12 +8,23 @@

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 + +

Go to Main Page Go to Second Page
- + + + + + + + +