Merge pull request #32 from Jcruz525/main

Fixing spacing in character select page
chavi362 · Jan 6, 2024 · b53da97 · b53da97
2 parents 7c6f51c + 750e3e4
commit b53da97
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/css/characters.css b/css/characters.css
@@ -1,6 +1,9 @@
 * {
   box-sizing: border-box;
 }
+.character-page{
+height: 100vh;
+}
 
 body {
   margin: 0%;
@@ -26,45 +29,50 @@ h1 {
 }
 
 .logo {
-  margin-top: -4%;
+  margin-top: -7%;
   margin-left: 40%;
   margin-right: 40%;
   width: 20%;
 }
 
 .character_photos {
   display: flex;
-  height: 80%;
+  height: 65%;
   width: 95%;
   justify-content: space-evenly;
+  align-items: center;
 }
 
 .hero {
   opacity: 0.5;
   margin-top: -2%;
+  height: 300px;
 }
 
 header {
-  margin-bottom: 4%;
+margin: 0;
 }
 
 .choose_your_hero {
-  margin-top: 9%;
+  margin: 0;
 }
 
 #hero1:hover {
-  width: 15%;
+  scale: 1.1;
   opacity: 1;
+  cursor: pointer;
 }
 
 #hero2:hover {
-  width: 15%;
+  scale: 1.1;
   opacity: 1;
+  cursor: pointer;
 }
 
 #hero3:hover {
-  width: 12%;
+  scale: 1.1;
   opacity: 1;
+  cursor: pointer;
 }
 
 @media only screen and (max-width: 1485px) {

diff --git a/css/iframe-hello-user.css b/css/iframe-hello-user.css
@@ -2,7 +2,8 @@
   margin-top: 2%;
   margin-left: 2%;
   float: left;
-  min-width: 100px;
+  min-width: 150px;
+  min-height: 40px;
   border-radius: 10px;
   border: 1px solid #ccc;
   color: #315bff;

diff --git a/html/characters.html b/html/characters.html
@@ -11,19 +11,19 @@
     <link rel="stylesheet" href="../css/characters.css" />
     <link rel="icon" href="../image/icyTower.png" />
 
-    <title>Choose charecter</title>
+    <title>Choose Character</title>
   </head>
 
   <body>
-    <iframe src="../html/iframe-hello-user.html" frameborder="0"></iframe>
-    <a href="../html/icy-tower-home.html">
-      <img src="../image/back.png" class="back"
-    /></a>
     <div class="character-page">
+      <iframe height="100px" width="200px" src="../html/iframe-hello-user.html" frameborder="0"></iframe>
+      <a href="../html/icy-tower-home.html">
+        <img src="../image/back.png" class="back"
+      /></a>
       <header>
         <img src="../image/icyTower.png" class="logo" />
         <div class="choose_your_hero">
-          <h1>Choose your character</h1>
+          <h1 class="choose_your_hero">Choose your character</h1>
         </div>
       </header>
 

diff --git a/js/iframe-hello-user.js b/js/iframe-hello-user.js
@@ -1,8 +1,6 @@
 function updateHeloUser() {
   currentUser = JSON.parse(sessionStorage.getItem('currentUser'));
   let spanFName = document.getElementById('user-first-name');
-  spanFName.innerHTML = 'hello ' + currentUser.firstName;
-  let spanUserName = document.getElementById('user-name');
-  spanUserName.innerHTML = currentUser.userName;
+  spanFName.innerHTML = 'Hello,' + currentUser.firstName;
 }
 updateHeloUser();