From 0de11573b0a4b81d34e9b5005341e746cb4777f2 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Sat, 27 Nov 2021 14:14:51 +0100
Subject: Implement .card and footer

---
 css/xengineering.css  | 25 +++++++++++++++++++++++++
 html/test_simple.html | 27 ++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/css/xengineering.css b/css/xengineering.css
index a931a02..4a322ed 100644
--- a/css/xengineering.css
+++ b/css/xengineering.css
@@ -181,6 +181,27 @@ pre {
   border-radius: 0.5em;
 }
 
+footer {
+  height: 3vh;
+  background-color: rgba(0,0,0,0);
+}
+
+.card {
+  margin-top: 1vh;
+  margin-bottom: 1vh;
+  padding: 1em;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  border-radius: 0.5em;
+}
+
+.card-first-item {
+  margin-top: 0px;
+}
+
+.card-last-item {
+  margin-bottom: 0px;
+}
+
 /******************************************************************************/
 
 
@@ -203,6 +224,10 @@ body {
   padding-right: 20vw;
 }
 
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
 }
 
 /******************************************************************************/
diff --git a/html/test_simple.html b/html/test_simple.html
index 7f01842..f771b29 100644
--- a/html/test_simple.html
+++ b/html/test_simple.html
@@ -137,7 +137,32 @@ echo "I am $(whoami)"
 </pre>
 
 		<!-- .card -->
-		<div class="card"></div>
+		<div class="card">
+			<h3 class="card-first-item">This is a Card</h3>
+			<p>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.</p>
+			<h3>This is a Card</h3>
+			<p class="card-last-item">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.</p>
+		</div>
+
+		<footer></footer>
 
 		<script src="../js/xengineering.js"></script>
 
-- 
cgit v1.2.3-70-g09d2