From 5bb646cbdee1cb4ed9939b1657d58d9ce6034b98 Mon Sep 17 00:00:00 2001
From: M S <mikethesnowman1@gmail.com>
Date: Tue, 23 Nov 2021 00:46:01 +1100
Subject: [PATCH] style test 2

---
 README.md | 122 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 92 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index f90bbc1..9c1a7d7 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,4 @@
-<style>
-a.button {
-  /* use inline-block because it respects padding */
-  display: inline-block;
-  /* padding creates clickable area around text (top/bottom, left/right) */
-  padding: 1em 3em;
-  /* round corners */
-  border-radius: 5px;
-  /* remove underline */
-  text-decoration: none;
-  /* set colors */
-  color: white;
-  background-color: #4E9CAF;
-}
-mdButton {
-  /* use inline-block because it respects padding */
-  display: inline-block;
-  /* padding creates clickable area around text (top/bottom, left/right) */
-  padding: 1em 3em;
-  /* round corners */
-  border-radius: 5px;
-  /* remove underline */
-  text-decoration: none;
-  /* set colors */
-  color: white;
-  background-color: #4E9CAF;
-}
-</style>
+
 
 <details>
 <summary><b>Table of Contents</b> (click to open)</summary>
@@ -66,8 +39,97 @@ Each lab module has been designed to provide you with exercises on a general top
 
 If you want to go through the labs in order, click on the button below.
 [Start Learning](./lab1/README.md)
-<br/><a href="./lab1/README.md" class="button">Start Lab-1</a>
-
+<div align="center">
+	<br>
+	<a href="./lab1/README.md">
+		<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
+      <foreignObject width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+          <style>
+            @keyframes rotate {
+              0% {
+                transform: rotate(3deg);
+              }
+              100% {
+                transform: rotate(-3deg);
+              }
+            }
+            @keyframes gradientBackground {
+              0% {
+                background-position: 0% 50%;
+              }
+              50% {
+                background-position: 100% 50%;
+              }
+              100% {
+                background-position: 0% 50%;
+              }
+            }
+            @keyframes fadeIn {
+              0% {
+                opacity: 0;
+              }
+              66% {
+                opacity: 0;
+              }
+              100% {
+                opacity: 1;
+              }
+            }
+            .container {
+              font-family:
+                system-ui,
+                -apple-system,
+                'Segoe UI',
+                Roboto,
+                Helvetica,
+                Arial,
+                sans-serif,
+                'Apple Color Emoji',
+                'Segoe UI Emoji';
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: center;
+              margin: 0;
+              width: 100%;
+              height: 400px;
+              background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
+              background-size: 600% 400%;
+              animation: gradientBackground 10s ease infinite;
+              border-radius: 10px;
+              color: white;
+              text-align: center;
+            }
+            h1 {
+              font-size: 50px;
+              line-height: 1.3;
+              letter-spacing: 5px;
+              text-transform: uppercase;
+              text-shadow:
+                0 1px 0 #efefef,
+                0 2px 0 #efefef,
+                0 3px 0 #efefef,
+                0 4px 0 #efefef,
+                0 12px 5px rgba(0, 0, 0, 0.1);
+              animation: rotate ease-in-out 1s infinite alternate;
+            }
+            p {
+              font-size: 20px;
+              text-shadow: 0 1px 0 #efefef;
+              animation: 5s ease 0s normal forwards 1 fadeIn;
+            }
+          </style>
+          <div class="container">
+            <h1>Made with HTML &amp; CSS<br/>not an animated GIF</h1>
+            <p>Click to see the source</p>
+          </div>
+        </div>
+      </foreignObject>
+    </svg>
+	</a>
+	<br>
+</div>
 
 # About this VM:
 In order to help you along your K8s learning path, this VM has been designed to be as lightweight aspossible and with collection of software pre-installed to make your learning experience much easier so you can focus on just using kubernetes.