Merge pull request #596 from Subhajit-2023-44/5

Add a User Profiles page done ! #588 🌟🌟🌟

src/index.html

@@ -860,6 +860,13 @@ <h3 style="text-align: center; margin-top: 3rem; font-size: 2rem;">Follow Us</h3
               class="fab fa-linkedin"></i></a>
           <a href="../contributor/contributor.html" title="Contributors">Our Contributors</a>
 
+                   <!-- Profile Icon -->
+
+                   <a href="/src/testp.html" class="profile-link" style="display: flex; align-items: center; text-decoration: none;">
+                    <img src="https://i.postimg.cc/tCL5Td4H/gold-membership-icon-default-avatar-profile-icon-membership-icon-social-media-user-image-illustratio.jpg" alt="Profile Icon" style="width: 35px; height: 35px; border-radius: 50%;  margin-top: -297px;">
+                   </a>
+
+
         </div>
       </div> 
      </div>

src/styles.css

@@ -76,3 +76,42 @@ html {
     transform: translateY(-5px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
+
+
+.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;
+
+  }
+
+

src/testp.css

@@ -0,0 +1,254 @@
+body {
+
+    font-family: 'Arial', sans-serif;
+    background: #1f2937; 
+    margin: 0;
+    padding: 0;
+    /*background-image: url(./assets/images/banner-bg.svg);*/
+
+}
+
+.fa-home {
+
+    position: absolute;
+    right: 190px;
+    top: 40px;
+    font-size: 25px;
+    color: #079874;
+
+}
+
+.fa-home:hover {
+
+    color: #076887; 
+
+}
+
+.profile-container {
+
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background: #1f2937; 
+    border-radius: 8px; 
+    box-shadow: 0 4px 10px rgb(0 0 0 / 40%); 
+    /*background-image: url(./assets/images/banner-bg.svg);*/
+
+}
+
+.navbar a:hover {
+
+    color: #0056b3; 
+
+}
+
+.profile-card {
+
+    text-align: left;
+    margin: 20px 0;
+    padding: 20px;
+    /*border: 1px solid #ddd;*/ /* Border for the card */
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea);
+
+}
+
+.profile-image {
+
+    border-radius: 50%; 
+    width: 170px;
+    height: 170px;
+    object-fit: cover;
+
+}
+
+.profile-name {
+
+    font-size: 24px;
+    margin: 10px 0;
+
+}
+
+.profile-bio {
+
+    font-size: 16px;
+    color: black; 
+
+}
+
+.edit-profile-btn {
+
+    background: linear-gradient(135deg, #079874, #076887); 
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s, transform 0.3s;
+
+}
+
+.edit-profile-btn:hover {
+
+    background-color: linear-gradient(135deg, #079874, #076887); 
+    transform: scale(1.05); 
+
+}
+
+.edit_profiled{
+
+    background: linear-gradient(135deg, #079874, #076887); 
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background 0.3s, transform 0.3s;
+    position: relative;
+    right: 40%;
+    left: 290px;
+
+}
+
+.content-section {
+
+    margin: 20px 0;
+
+}
+
+.content-section h2 {
+
+    font-size: 22px;
+    margin-bottom: 10px;
+    color: white;
+
+}
+
+.card {
+
+    background: #f9f9f9; 
+    margin-bottom: 15px;
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea); 
+
+}
+
+.card h3 {
+
+    font-size: 18px;
+    margin: 5px 0;
+
+}
+
+.card p {
+
+    font-size: 14px;
+    color: black;
+
+}
+
+
+.profile-details {
+
+    display: flex; 
+    flex-wrap: wrap; 
+    gap: 20px; 
+
+}
+
+.profile-detail-card {
+
+    flex: 1; /* Allow cards to grow and fill space */
+    min-width: 200px; 
+    background: #f9f9f9; 
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    text-align: center; 
+    background: linear-gradient(135deg, #ead6ee, #a0f1ea); 
+
+}
+
+.nav-links {
+
+    list-style-type: none; 
+    padding: 0; 
+    margin: 0;
+    text-align: right; 
+
+}
+
+.home-link {
+
+    float: right; 
+
+}
+
+.profile-header {
+
+    display: flex; 
+    align-items: center; 
+
+}
+
+.profile-image {
+    margin-right: 20px; 
+    margin-left: 50px;
+    margin-top: 30px;
+}
+
+.profile-info {
+
+    flex: 1; /* Allow this section to take the remaining space */
+    margin-left: 50px;
+
+}
+
+
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+
+    .navbar ul {
+
+        flex-direction: column; /* Stack navbar items on smaller screens */
+        align-items: center;
+
+    }
+
+    .profile-container {
+
+        padding: 10px; /* Reduce padding on smaller screens */
+
+    }
+
+    .profile-card {
+
+        margin: 10px 0; /* Reduce margin for smaller screens */
+
+    }
+
+    .content-section h2 {
+
+        font-size: 20px; /* Smaller headings */
+
+    }
+
+    .edit-profile-btn, .view-order-btn {
+
+        width: 100%; /* Full width buttons */
+        padding: 12px; /* Increase padding for easier tapping */
+
+    }
+
+    .footer {
+
+        font-size: 14px; /* Smaller footer text */
+
+    }
+
+}
+