update Resume Wizard

Nikhileshmauje · Sep 13, 2024 · ceccac2 · ceccac2
1 parent 4388d31
commit ceccac2
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 11 deletions.
diff --git a/CSS/ResumeWizard.css b/CSS/ResumeWizard.css
@@ -197,4 +197,24 @@ footer nav ul li {
 footer nav ul li a {
   color: #000000;
   text-decoration: none;
+}
+
+#notification-popup {
+  display: none;
+  position: absolute;
+  top: 70px;
+  right: 20px;
+  width: 300px;
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  padding: 15px;
+  border-radius: 8px;
+  z-index: 1;
+}
+#notification-popup h3 {
+  margin-top: 0;
+}
+
+#notification-popup p {
+ margin: 10px 0;
 }
diff --git a/Pages/Resume-Wizard.html b/Pages/Resume-Wizard.html
@@ -16,14 +16,20 @@ <h1><a href="../index.html">UPSKILL</a></h1>
       </div>
       <nav>
         <ul>
-          <li><a href="#">Home</a></li>
+          <li><a href="../index.html">Home</a></li>
           <li><a href="#">Community</a></li>
-          <li><a href="#">Notifications</a></li>
+          <li><a href="#" id="notification-btn">Notifications</a></li>
           <li><a href="./profile.html" id="profile">Profile</a></li>
         </ul>
       </nav>
     </header>
 
+    <div id="notification-popup">
+      <h3>Notifications</h3>
+      <p>You have 3 new messages!</p>
+      <p>Your skill assessment results are ready.</p>
+    </div>
+
     <div class="main-body">
       <div class="left-body">
         <img src="../Images/template.jpeg" alt="image" />
@@ -36,13 +42,13 @@ <h1>Easily create a professional Resume</h1>
 
           <div>
             <p>
-              Fill in your details, select an appropriate template and download
-              your CV in no time.
+              Automatically Build Professional Resumes Based on Your Profile, <br>
+              Ensuring a Comprehensive Showcase of Your Skills!
             </p>
           </div>
 
           <div>
-            <button class="body-button">Create CV</button>
+            <button class="body-button">Generate Resume</button>
           </div>
         </div>
       </div>
@@ -51,21 +57,21 @@ <h1>Easily create a professional Resume</h1>
       <div class="step-head"><h2>How does it work?</h2></div>
       <div class="inside-steps">
         <div class="step">
-          <h3>Step 1: Select Template</h3>
+          <h3>Step 1: Fill in Your Profile</h3>
           <hr />
-          <p>Select a template and customize your Resume.</p>
+          <p>Input your details to automatically create your resume.</p>
         </div>
 
         <div class="step">
-          <h3>Step 2: Customization</h3>
+          <h3>Step 2: Select a Template</h3>
           <hr />
-          <p>Change the format according to your requirement</p>
+          <p>Choose a template that suits your style.</p>
         </div>
 
         <div class="step">
-          <h3>Step 3: Download CV</h3>
+          <h3>Step 3: Download Resume</h3>
           <hr />
-          <p>Download Resume quickly and edit it anytime</p>
+          <p>Download Resume quickly and edit it anytime.</p>
         </div>
       </div>
     </div>
@@ -82,5 +88,35 @@ <h3>Step 3: Download CV</h3>
         </nav>
       </div>
     </footer>
+
+    <script>
+      const notificationBtn = document.getElementById('notification-btn');
+      const notificationPopup = document.getElementById('notification-popup');
+
+      notificationBtn.addEventListener('mouseover', () => {
+        notificationPopup.style.display = 'block';
+      });
+
+      notificationBtn.addEventListener('click', () => {
+        if (notificationPopup.style.display === 'block') {
+          notificationPopup.style.display = 'none';
+        } else {
+          notificationPopup.style.display = 'block';
+        }
+      });
+
+      notificationPopup.addEventListener('mouseover', () => {
+        notificationPopup.style.display = 'block';
+      });
+
+      function checkIfShouldClose(event) {
+        if (!notificationPopup.contains(event.relatedTarget) && !notificationBtn.contains(event.relatedTarget)) {
+          notificationPopup.style.display = 'none';
+        }
+      }
+
+      notificationBtn.addEventListener('mouseout', checkIfShouldClose);
+      notificationPopup.addEventListener('mouseout', checkIfShouldClose);
+    </script>
   </body>
 </html>