From b90ac2b75f4e49c5d9d80c460c3daccd48fb1e89 Mon Sep 17 00:00:00 2001
From: Arona Jones <warlordjones@gmail.com>
Date: Tue, 6 Sep 2016 11:25:38 +0100
Subject: [PATCH] Write some stuff for the info box thing

---
 enl/index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/enl/index.html b/enl/index.html
index 0481413..111d87e 100644
--- a/enl/index.html
+++ b/enl/index.html
@@ -70,6 +70,40 @@
         #smurf {
             color: deepskyblue;
         }
+        
+        .typewriter {
+            overflow: hidden;
+            /* Ensures the content is not revealed until the animation */
+            border-right: .15em solid greenyellow;
+            /* The typwriter cursor */
+            white-space: nowrap;
+            margin: 0 auto;
+            /* Gives that scrolling effect as the typing happens */
+            letter-spacing: .15em;
+            /* Adjust as needed */
+            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
+        }
+        /* The typing effect */
+        
+        @keyframes typing {
+            from {
+                width: 0
+            }
+            to {
+                width: 100%
+            }
+        }
+        /* The typewriter cursor effect */
+        
+        @keyframes blink-caret {
+            from,
+            to {
+                border-color: transparent
+            }
+            50% {
+                border-color: greenyellow;
+            }
+        }
     </style>
 
     <title>ENL-EH</title>
@@ -88,21 +122,21 @@ padding-bottom: 50px;">
                             <br>
                             <img src="/images/enl/logo.png" style="height: 150px;" class="animated zoomIn">
                             <br>
-                            <h1 style="margin-top: -5px;" class="animated fadeIn">Enlightened East Hertfordshire</h1>
+                            <h3 style="margin-top: -5px;" class="animated fadeIn">Enlightened East Hertfordshire</h3>
                             <div class="divider"></div>
                             <br>
                         </div>
                         <!---TODO Animated code intro--->
                         <div class="dark">
                             <h4>Information: </h4>
-                            <p>Fun loving, yet dedicated. Ensuring the skies stay green, for your protection.</p>
+                            <p>For too long, the Resistance have considered this area a stronghold, standing unopposed. But they have grown complacent. Soft and arrogant. A storm is coming. A viridescent, emerald storm. Be prepared.
+                                <br>
+                                <br>Enlightened East Hertfordshire are fun loving, yet dedicated. No longer content with being the underdogs. And our bite is much worse than our bark. Join us, or stand against us, the choice is yours. Choose wisely.
+                                <br>
+                                <br> Ensuring the skies stay green, for your protection.</p>
 
                         </div>
                         <div class="light">
-                            <h4>Target Area:</h4>
-                            <h5 style="color: red" class="animated flash">&lt;ACCESS DENIED. USER UNAUTHORISED.&gt;</h5>
-                        </div>
-                        <div class="dark">
                             <h4>Nemeses:</h4>
                             <h5>Most Wanted:</h5>
                             <h5 style="text-align: left;"> <span id="smurf" style="text-align: left;">mormor1971</span></h5>
@@ -121,6 +155,10 @@ padding-bottom: 50px;">
                                 </li>
                             </ol>
                         </div>
+                        <div class="dark">
+                            <h4>Target Area:</h4>
+                            <h5 style="color: red" class="animated flash">&lt;ACCESS DENIED. USER UNAUTHORISED.&gt;</h5>
+                        </div>
                         <div class="light">
                             <h4>Comms:</h4>
                             <h5 style="color: red" class="animated flash">&lt;ACCESS DENIED. USER UNAUTHORISED.&gt;</h5>