updated styling to userinfo page

MajinB10 · Feb 10, 2023 · 506293f · 506293f
1 parent 326dc8a
commit 506293f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/logout.js b/logout.js
@@ -1,8 +1,8 @@
 $(document).ready(function () {
     if ((localStorage.getItem("username") != null) &&(localStorage.getItem("pwd") != null) ){
-        let content = `<h1 id="userinfo-username">${localStorage.getItem("username")}</h1>
-            <h2 id="userinfo-userEmail">${localStorage.getItem("useremail")}</h2>
-            <h2 id="userinfo-userPoints">Total Points:${localStorage.getItem("points")}</h2>`;
+        let content = `<div id="user-details"><h1 id="userinfo-username">Username:${localStorage.getItem("username")}</h1>
+            <h2 id="userinfo-userEmail">Email:${localStorage.getItem("useremail")}</h2>
+            <h2 id="userinfo-userPoints">Total Points:${localStorage.getItem("points")}</h2></div>   <div id="logoutpos"><button id="logout" onclick="">LogOut</button><div>`;
 
         document.getElementById("userinfo").innerHTML += content
     }

diff --git a/style.css b/style.css
@@ -731,10 +731,7 @@ footer .copyright {
 #account-made .alert {
     font-weight: bold;
 }
-#userinfo {
-    padding: 10%;
-    font-size: 2000%;
-}
+
 #signup{
     background-color: plum;
     border: none;
@@ -759,7 +756,56 @@ footer .copyright {
 #signuppos {
     padding-top: 10px;
 }
+#logout {
+    background-color: plum;
+    border: none;
+    color: black;
+    padding: 10px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 15px;
+    font-weight: 700;
+    cursor: pointer;   
+    transition: 0.3s ease;
+    border-radius: 4px;
+}
+#logout:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+    transform: translateY(-3px);
+    background-color: black;
+    color: white;
+    transition: 0.3s ease;
+}
+
+#userinfo {
+    padding: 10%;
+    font-size: 2000%;
+    padding-left: 30%;
+    display: flex;
+}
+#user-details {
+    padding-top: 8%;
 
+}
+#userinfo-username {
+    padding-left: 100%;
+    display: flex;
+    font-size: 20px;
+}
+#userinfo-userPoints {
+    padding-left: 100%;
+    display: flex;
+    font-size: 20px;
+}
+#userinfo-userEmail {
+    padding-left: 100%;
+    display: flex;
+    font-size: 20px;
+}
+#logoutpos {
+    padding-right: 100px;
+}
 
 /* Media */
 @media (max-width: 799px) {

diff --git a/userinfo.html b/userinfo.html
@@ -48,10 +48,10 @@
 
 <div id="userinfo">
   <i><i class="fa fa-user-secret user user-p"></i></i>
-  
+
 
 </div>
-<button id="logout" onclick="">LogOut</button>
+
 
 
 </body>