Merge pull request #25 from Bot-detector/make-the-site-pretty

Make the site pretty

src/components/AccountInformation.vue

@@ -1,8 +1,13 @@
 <template>
     <v-container>
         <div class='background'>
+            <div class='topbanner'>
+                <img class='topbanner' contain width='65%' src='../assets/top.gif'>
+            </div>
         <div class="main">
-            <h1 style='text-align: center;'>TBD: OSRS Account Search</h1>
+            <div class='headerimage'>
+                <h1><img class='headerimage1' contain width='35px' src='../assets/GameAssets/runefullhelm.png'>OSRS Account Search<img class='headerimage2' contain width='35px' src='../assets/GameAssets/runefullhelm.png'></h1>
+            </div>
             <p class = 'description'>
                 If you would like to learn more about an Old School Runescape account, type in the name below. We cannot provide information with 24 hours of a sighting of a player, therefore we cannot provide latest locations and latest gear information for an account.
             </p>
@@ -30,6 +35,9 @@
             </div>
 
         </div>
+        <div class='bottombanner'>
+            <img class='bottombanner' contain width='65%' src='../assets/bottom.gif'>
+        </div>
         </div>
     </v-container>
 </template>
@@ -85,6 +93,44 @@
 
 <style scoped>
 
+div.headerimage {
+  position: relative;
+  text-align: center;
+  padding-top: 10px;
+}
+
+img.headerimage1 {
+  position: relative;
+  right: 10px;
+  top: 5px;
+}
+img.headerimage2 {
+  position: relative;
+  left: 10px;
+  transform: scaleX(-1);
+  top: 5px;
+}
+
+img.topbanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.topbanner {
+  position: relative;
+  text-align: center;
+}
+
+img.bottombanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.bottombanner {
+  position: relative;
+  text-align: center;
+}
+
 div.background {
     background-image: url('../assets/background.jpg');
     background-position: center;
@@ -118,13 +164,14 @@ p.field {
 }
 
 div.main {
-  width:60%;
-  padding-bottom: 700px;
-  margin-right: auto;
-  margin-bottom: 2%;
-  margin-left: auto;
-  color: #1F1B12;
-  background-color: #B9A170;
+    margin-top: -1%;
+    margin-bottom: -1%;
+    width:60%;
+    padding-bottom: 300px;
+    margin-right: auto;
+    margin-left: auto;
+    color: #1F1B12;
+    background-color: #B9A170;
 }
 
 hr.break {

src/components/BannedAccounts.vue

@@ -1,9 +1,14 @@
 <template>
     <v-container>
         <div class='background'>
+            <div class='topbanner'>
+                <img class='topbanner' contain width='65%' src='../assets/top.gif'>
+            </div>
         <div class='main'>
             <div>
-                <h1>TBD: Banned Accounts</h1>
+              <div class='headerimage'>
+                <h1><img class='headerimage1' contain width='35px' src='../assets/GameAssets/Skull.png'>Banned Accounts<img class='headerimage2' contain width='35px' src='../assets/GameAssets/Skull.png'></h1>
+              </div>
                 <p class = 'description'>
                     Uh oh, you caught us! We'll be building this page soon enough. Check back later!
                 </p>
@@ -15,13 +20,54 @@
                 <p>bans go here</p>
             </div>
         </div>
+        <div class='bottombanner'>
+            <img class='bottombanner' contain width='65%' src='../assets/bottom.gif'>
+        </div>
         </div>
     </v-container>
 </template>
 
 
 <style scoped>
 
+div.headerimage {
+  position: relative;
+  text-align: center;
+  padding-top: 10px;
+}
+
+img.headerimage1 {
+  position: relative;
+  right: 10px;
+  top: 5px;
+  transform: scaleX(-1);
+}
+img.headerimage2 {
+  position: relative;
+  left: 10px;
+  top: 5px;
+}
+
+img.topbanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.topbanner {
+  position: relative;
+  text-align: center;
+}
+
+img.bottombanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.bottombanner {
+  position: relative;
+  text-align: center;
+}
+
 div.background {
     background-image: url('../assets/background.jpg');
     background-position: center;
@@ -31,13 +77,15 @@ div.background {
 
 
 div.main {
-  width: 60%;
-  text-align: center;
-  padding-bottom: 500px;
-  margin-right: auto;
-  margin-left: auto;
-  color: #1F1B12;
-  background-color: #B9A170;
+    margin-top: -1%;
+    margin-bottom: -1%;
+    width: 60%;
+    text-align: center;
+    padding-bottom: 500px;
+    margin-right: auto;
+    margin-left: auto;
+    color: #1F1B12;
+    background-color: #B9A170;
 }
 
 hr.break {

src/components/ContactUs.vue

@@ -1,9 +1,15 @@
 <template>
     <v-container>
       <div class='background'>
+        <div class='topbanner'>
+            <img class='topbanner' contain width='65%' src='../assets/top.gif'>
+        </div>
         <div class="main">
 
-            <h1>Contact Us</h1>
+            <div class='headerimage'>
+                <h1><img class='headerimage1' contain width='35px' src='../assets/GameAssets/contact.png'>Contact Us<img class='headerimage2' contain width='35px' src='../assets/GameAssets/contact.png'></h1>
+            </div>
+
             <p class = 'description'>
                 If you're looking to get in touch with us, feel free to message any of the following links at your convenience. They are monitored on a weekly basis, and we will try to respond as quickly as we can!
             </p>
@@ -19,12 +25,54 @@
             </p>
 
           </div>
+            <div class='bottombanner'>
+              <img class='bottombanner' contain width='65%' src='../assets/bottom.gif'>
+            </div>
         </div>
     </v-container>
 </template>
 
 <style scoped>
 
+div.headerimage {
+  position: relative;
+  text-align: center;
+  padding-top: 10px;
+}
+
+img.headerimage1 {
+  position: relative;
+  right: 10px;
+  top: 5px;
+}
+
+img.headerimage2 {
+  position: relative;
+  left: 10px;
+  transform: scaleX(-1);
+  top: 5px;
+}
+
+img.topbanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.topbanner {
+  position: relative;
+  text-align: center;
+}
+
+img.bottombanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.bottombanner {
+  position: relative;
+  text-align: center;
+}
+
 div.background {
     background-image: url('../assets/background.jpg');
     background-position: center;
@@ -33,11 +81,12 @@ div.background {
 }
 
 div.main {
+  margin-top: -1%;
+  margin-bottom: -1%;
   width: 60%;
   text-align: center;
-  padding-bottom: 700px;
+  padding-bottom: 300px;
   margin-right: auto;
-  margin-bottom: 2%;
   margin-left: auto;
   color: #1F1B12;
   background-color: #B9A170;

src/components/Contributors.vue

@@ -1,9 +1,13 @@
 <template>
     <v-container>
       <div class='background'>
+          <div class='topbanner'>
+            <img class='topbanner' contain width='65%' src='../assets/top.gif'>
+          </div>
         <div class="main">
-
-            <h1>Contributors and Supporters of the Bot Detector Plugin</h1>
+            <div class='headerimage'>
+                <h1><img class='headerimage1' contain width='35px' src='../assets/GameAssets/coins.png'>Contributors and Supporters of the Bot Detector Plugin<img class='headerimage2' contain width='35px' src='../assets/GameAssets/coins.png'></h1>
+            </div>
             <p class = 'description'>The Bot Detector Plugin is an open-source plugin with many highly-dedicated supporters and contributors. Some notable figures of the plugin and its development are noted here, and are added on a manual basis.
                 If you believe that your name is missing, and would like for it to be added - please contact Ferrariic. Thank you to everyone that has supported the production of this plugin, and to everyone that has allowed for it to come to fruition.
             </p>
@@ -72,12 +76,53 @@
                 </div>
               </div>
             </div>
+              <div class='bottombanner'>
+                <img class='bottombanner' contain width='65%' src='../assets/bottom.gif'>
+              </div>
             </div>
     </v-container>
 </template>
 
 <style scoped>
 
+div.headerimage {
+  position: relative;
+  text-align: center;
+  padding-top: 10px;
+}
+
+img.headerimage1 {
+  position: relative;
+  right: 10px;
+  top: 5px;
+  transform: scaleX(-1);
+}
+img.headerimage2 {
+  position: relative;
+  left: 10px;
+  top: 5px;
+}
+
+img.topbanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.topbanner {
+  position: relative;
+  text-align: center;
+}
+
+img.bottombanner {
+  position: relative;
+  z-index: 2;
+}
+
+div.bottombanner {
+  position: relative;
+  text-align: center;
+}
+
 div.background {
     background-image: url('../assets/background.jpg');
     background-position: center;
@@ -86,10 +131,11 @@ div.background {
 }
 
 div.main {
+  margin-top: -1%;
+  margin-bottom: -1%;
   width:60%;
   text-align: center;
   margin-right: auto;
-  margin-bottom: 2%;
   margin-left: auto;
   color: #1F1B12;
   background-color: #B9A170;