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