Updated CSS and page layout -> Header

src/main/resources/static/css/style.css

@@ -183,6 +183,7 @@ main .badgesBlock{
 }
 
 footer {
+    z-index: 99;
     bottom: 0%;
     left: 0%;
     position: fixed;

src/main/resources/static/css/templatingstyle.css

-* {
-    margin:0;
-    padding:0;
-}
-body {
-    background: linear-gradient(135deg, #9f74be, #3e126b);
-    height: 100svh;
-}
-
-main {
-    background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
-    border-radius: 1vw;
-    margin-inline: 5%;
-    margin-block: 5%;
-    width: auto;
-    padding-block: 2svh;
-    padding-inline: 1vw;
-    box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
-    @media only screen and (max-device-width: 500px) {
-        min-height: 90svh;
-    }
-
-    @media only screen and (min-device-width: 1000px) {
-        margin-block: 2.5%
-    }
-}
-
-
 /* Header */
 .headerBar {
     /*border-bottom: 2px rgb(230, 230, 230) solid;*/

src/main/resources/static/css/userProfile.css

 /* AUTHOR: Gabriel Copat*/
+
+/*FONTS, TYPOGRAPHY & BACKGROUNDS*/
+* {
+    margin: 0;
+    padding: 0;
+
+    & h1, & h2 {
+        letter-spacing: 0.25vw;
+        line-height: 1.3;
+        text-align: center;
+        color: white;
+        text-justify: inter-word;
+    }
+}
+@media only screen and (max-device-width: 500px) {
+    /*ADJUSTING FOR SMALLER SCREENS*/
+    * {
+        & h1, & h2 { text-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1svh;}
+        & p { line-height: 1.1; color: white;}
+    }
+}
+
+body {
+    background: linear-gradient(135deg, #9f74be, #3e126b);
+    height: 100svh;
+}
+main {
+    background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
+    border-radius: 1vw;
+    margin-inline: 5%;
+    /*margin-block: 5%;*/
+    width: auto;
+    padding-block: 2svh;
+    margin-top: 6em;
+    padding-inline: 1vw;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+}
+
+
 .userInfo {
     display: flex;
     flex-direction: column;
-    padding: min(2vw, 4em);
+    /*padding: min(2vw, 4em);*/
     text-align: center;
 
     & #userPicture {
@@ -27,22 +66,15 @@
     -ms-scrollbar-darkshadow-color: transparent;
 }
 #badgesBar {
-    /* border-radius: 1vw; */
     display: grid;
     grid-template-areas:
         "header"
         "badges";
     overflow-x: scroll;
     overflow-y: hidden;
-    scrollbar-width: none;
-    scrollbar-color: transparent transparent;
     color: white;
     padding-bottom: 2%;
-    z-index: 99999;
-    /* margin-right: 10px; */
-    /*background: linear-gradient(to bottom, transparent, darkgoldenrod 200%);*/
-    @media only screen and (
-        min-device-width: 501px) {
+    @media only screen and (min-device-width: 501px) {
         height: 24vw;
     }
     & h2 {
@@ -54,7 +86,9 @@
         box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh 1vw -1vw;
         border-bottom: #36454F solid 2px;
         font-size: 4vw;
-        width: 25%;
+        width: 7em;
+        height: 1.2em;
+
     }
     & #allBadgesContainer {
         margin-top: 3svh;
@@ -62,8 +96,7 @@
         height: 10svh;
         align-content: center;
         display: flex;
-        @media only screen and (
-            min-device-width: 501px) {
+        @media only screen and (min-device-width: 501px) {
             height: 20vw;
             margin-top: 6vw;
         }
@@ -71,9 +104,8 @@
     & .badgeImg {
         margin-inline: 3vw;
         height: 8svh;
-        z-index: 999;
-        @media only screen and (
-            min-device-width: 501px) {
+        z-index: 50;
+        @media only screen and (min-device-width: 501px) {
             height: 15vw;
         }
         transition: 0.3s ease-out 100ms;
@@ -131,15 +163,13 @@
     width: 100%;
     /*padding-top: 1svh;*/
 
-    @media only screen and (
-        min-device-width: 501px) {
+    @media only screen and (min-device-width: 501px) {
         height: 28vw;
         margin-bottom: 0;
         padding-bottom: 5svh;
     }
     & h1 {
         font-size: 3em;
-        color: white;
         box-shadow: rgba(0, 0, 0, 0.7) 0 2vw 2vw -2vw;
         border-bottom: #36454F solid 2px;
         border-top: #36454F solid 2px;
@@ -153,14 +183,12 @@
     & .dragonImg {
         height: 10svh;
         width: 16svh;
-        @media only screen and (
-            min-device-width: 501px) {
+        @media only screen and (min-device-width: 501px) {
             height: 22vw;
             width: 30vw;
         }
 
     }
-
     & .dragonFill {
         position: absolute;
         overflow: hidden;
@@ -171,3 +199,32 @@
         overflow: hidden;
     }
 }
+header {
+    z-index: 99;
+    top: 0.5svh;
+    left: 0;
+    position: fixed;
+    width: 100vw;
+    justify-content: center;
+    display: flex;
+}
+header .footerBar {
+    display: flex;
+    list-style: none;
+    border-radius: 1vw;
+    overflow: hidden;
+    justify-content: space-evenly;
+    background-color: rgba(0, 0, 0, 0.7);
+}
+header .footerButton {
+    padding: 1vw;
+    text-align: center;
+    /*flex: 1 1;*/
+    color:crimson;
+    background-color: rgba(31, 31, 31, 0.7);
+    font-size: 2.5em;
+    width: 15vw;
+}
+header .footerButton:hover {
+    background-color: #36454F;
+}
\ No newline at end of file

src/main/resources/templates/rewards/userProfile.html

@@ -4,11 +4,19 @@
     <meta charset="UTF-8">
     <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
     <link rel="stylesheet" th:href="@{/css/userProfile.css}">
-    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">
+<!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
 </head>
 <body>
 
-<header></header>
+<header>
+    <ul class="footerBar">
+        <li class="footerButton"><b>Home</b></li>
+        <li class="footerButton"><b>About</b></li>
+        <li class="footerButton"><b>Map</b></li>
+        <li class="footerButton"><b>Facilities</b></li>
+        <li class="footerButton"><b>Search</b></li>
+    </ul>
+</header>
 
 <main>
     <!--PICTURE - DATA - BADGES -->
@@ -54,7 +62,9 @@
 
 </main>
 
-<footer></footer>
+<footer>
+
+</footer>