From f58bf0443d71f7476c7fdb7a6e1dc9c3d61da412 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Sat, 4 Sep 2021 18:14:59 +0200
Subject: Add Container Element

---
 css/xengineering.css | 25 +++++++++++++++++++++++++
 html/template.html   | 12 ++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/css/xengineering.css b/css/xengineering.css
index 18bfbf7..0224dc1 100644
--- a/css/xengineering.css
+++ b/css/xengineering.css
@@ -19,6 +19,10 @@ main {
   background-color: white;
 }
 
+h1 {
+  text-align: center;
+}
+
 a {
   text-decoration: none;
   color: blue;
@@ -62,6 +66,27 @@ pre {
   border-radius: 5px;
 }
 
+main div {
+  color: black;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  padding: 10px;
+  border-radius: 5px;
+}
+
+main div:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+main div h3 {
+  margin-top: 0px;
+  text-align: center;
+}
+
+main div p {
+  margin-bottom: 0px;
+  text-align: center;
+}
+
 
 /******************************************************************************/
 
diff --git a/html/template.html b/html/template.html
index 9c1b5a8..eaaf9e7 100644
--- a/html/template.html
+++ b/html/template.html
@@ -25,12 +25,24 @@
 
 		<main>
 			<h1>libweb</h1>
+
 			<p>A repository with reusable components for web development.</p>
+
 			<p>This is a link to <a href="https://example.com">example.com</a>.</p>
+
+			<p>Have a look at this beautiful code:</p>
 			<pre><code>#!/usr/bin/python3
 
 print("This is just some example code!")
 </code></pre>
+
+			<p>Sometimes it is quite nice to put things into containers:</p>
+			<a href="https://xengineering.eu">
+				<div href="https://xengineering.eu">
+					<h3>This is a Container</h3>
+					<p>Containers are very good.</p>
+				</div>
+			</a>
 		</main>
 
 		<script>
-- 
cgit v1.2.3-70-g09d2