Merge pull request #1927 from Subhajit-2023-44/feature-branch-4

Add a User Profiles page done ! #1926
PriyaGhosal · Nov 10, 2024 · da1c47b · da1c47b
2 parents 490bb56 + 304c2da
commit da1c47b
Show file tree

Hide file tree

Showing 5 changed files with 439 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -553,6 +553,24 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
       <li><a href="./contact.html" class="navhover">Contact</a></li>
       <li><a href="#reviews" class="navhover">Reviews</a></li>
       <li><a href="auth.html" class="navhover">Sign In</a></li>
+       <!-- Profile Icon -->
+       <li class="nav-item no-underline">
+        <a href="./profile.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
+        <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Icon" style="width: 50px; height: 50px; border-radius: 50%; margin-top: -1px;">
+       </a>
+   </li>
+
+   <style>
+
+     /* Override the existing hover styles */
+     .navbar-nav .nav-item .profile-link:hover {
+         background-color: transparent !important; /* Remove background color */
+         border-radius: 0 !important; /* Reset border radius */
+         transform: none !important; /* Prevent scaling */
+     }
+
+   </style>
+
 
     </ul>
 

diff --git a/profile.html b/profile.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet" href="testp.css"> <!-- Link to your CSS file -->
+
+    <script src="testp.js" defer></script>
+
+    <title>Profile Page</title>
+
+</head>
+
+<body>
+
+    <div class="profile-container">
+
+        <div class="content-section">
+            <h2>Your Profile</h2>
+            <a href="index.html">
+                <i class="fas fa-home"></i>
+            </a>
+            <div class="profile-card">
+                <div class="profile-header">
+                    <img src="https://i.postimg.cc/NFFmtc9K/xnz-Mst5-V-400x400.jpg" alt="Profile Image" class="profile-image">
+
+                    <div class="profile-info">
+                        <h3 class="profile-name">Skylar Reed</h3>
+                        <p class="profile-email">Email: [email protected]</p>
+                        <p class="profile-phone">Phone: +987 654 3210</p>
+                        <p class="profile-bio">Joined: October 31, 2024</p>
+                        <p class="profile-bio">About Me: Hello!🙋🏻‍♂️ Join me as we explore the world together—one destination at a time! 😎</p>
+                        <p id="last-active">Last active: 31/10/2024, 11:12 PM</p>
+
+                    </div>
+
+                </div>
+                    <button class="edit-profile-btn edit_profiled">Edit Profile</button>
+                </a>
+            </div>
+        </div>
+
+        <div class="content-section">
+
+            <h2>Account Details</h2>
+            <div class="profile-details">
+                <div class="profile-detail-card" id="profileCard">
+                    <h3>Address</h3>
+                    <p id="addressText" contenteditable="false">789 Pine Lane, Austin, TX 73301</p>
+                    <a href="#"><button class="edit-profile-btn">Edit</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Change Password</h3>
+                    <p>*********63</p>
+                    <button class="edit-profile-btn">Change</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Privacy Settings</h3>
+                    <p>Visibility Status: Public</p>
+                    <a href="#">
+                    <button class="edit-profile-btn">Edit</button></a>
+                </div>
+
+                <div class="profile-detail-card">
+                    <h3>Recent Activity</h3>
+                    <p>Updated profile information</p>
+                    <a href="#">
+                    <button class="edit-profile-btn">View</button></a>
+                </div>
+
+            </div>
+        </div>
+
+        <section class="content-section">
+
+            <h2>Notifications</h2>
+            <div class="card">
+                <p>Your profile has been updated successfully!</p>
+
+                <button class="edit-profile-btn">View Notification</button>
+            </div>
+            <div class="card">
+                <p>Joshef Roy has sent you a friend request. Accept or decline?</p>
+
+                <button class="edit-profile-btn">View Notification</button>
+            </div>
+
+        </section>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -3121,3 +3121,41 @@ body {
   padding-left: 30px; /* get in touch padding for icon*/
 }
 /* fa icon end */
+
+
+.profile-icon {
+
+  border-radius: 50%;
+  position: relative;
+  margin-left: 20px; /* Adjust space between Login button and Profile icon */
+
+}
+
+.dropdown-menu {
+
+  display: none;
+  position: absolute;
+  top: 35px; /* Adjust based on the height of your navbar */
+  right: 0;
+  background-color: white;
+  color: black;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  z-index: 1;
+
+}
+
+.dropdown-menu a {
+
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+
+}
+
+.dropdown-menu a:hover {
+
+  background-color: #f1f1f1;
+
+}
+