updating

index.html

@@ -14,12 +14,12 @@
 
             <ul class="menu-items">
 
-                <li><img width="30" height="30" src="https://img.icons8.com/external-kmg-design-detailed-outline-kmg-design/64/external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design.png" alt="external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design"/><a href="#">Dashboard</a></li>
-                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/speech-bubble-with-dots--v1.png" alt="speech-bubble-with-dots--v1"/><a href="#">Messenger</a></li>
-                <li><img width="30" height="30" src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/external-Calendar-cenima-flatart-icons-outline-flatarticons.png" alt="external-Calendar-cenima-flatart-icons-outline-flatarticons"/><a href="#">Calendar</a></li>
-                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/data-configuration.png" alt="data-configuration"/><a href="#">Database</a></li>
-                <li><img width="30" height="30" src="https://img.icons8.com/pastel-glyph/64/bar-chart--v2.png" alt="bar-chart--v2"/><a href="#">Attendance</a></li>
-                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/settings.png" alt="settings"/><a href="#">Settings</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/external-kmg-design-detailed-outline-kmg-design/64/external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design.png" alt="external-dashboard-user-interface-kmg-design-detailed-outline-kmg-design"/><a href="#" class="m-item">Dashboard</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/speech-bubble-with-dots--v1.png" alt="speech-bubble-with-dots--v1"/><a href="#" class="m-item">Messenger</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/external-flatart-icons-outline-flatarticons/64/external-Calendar-cenima-flatart-icons-outline-flatarticons.png" alt="external-Calendar-cenima-flatart-icons-outline-flatarticons"/><a href="#" class="m-item">Calendar</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/data-configuration.png" alt="data-configuration"/><a href="#" class="m-item">Database</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/pastel-glyph/64/bar-chart--v2.png" alt="bar-chart--v2"/><a href="#" class="m-item">Attendance</a></li>
+                <li><img width="30" height="30" src="https://img.icons8.com/ios/50/settings.png" alt="settings"/><a href="#" class="m-item" >Settings</a></li>
             </ul>
         </div>
         <div class="hero">
@@ -55,7 +55,7 @@ <h2 class="list-heading">Email</h2>
                         <!-- List of students goes here -->
                         <li onclick="showProfile('shafi')">
                             <div class="div">1.</div>
-                            <div>MD Shafi</div>
+                            <div>Md Shafi</div>
                             <div>22A31A43G0</div>
                             <div>male</div>
                             <div>[email protected]</div></li>

scripts.js

@@ -14,7 +14,8 @@ const studentProfiles = {
         personalMail: '[email protected]',
         aicteCertificates: 3,
         linkedin: 'https://www.linkedin.com/in/shafi-mohammad9/',
-        github: 'https://github.com/ShafiMohammad09'
+        github: 'https://github.com/ShafiMohammad09',
+        instagram: 'https://www.instagram.com/iam_shafi_mohammad/'
     },
     Sashank: {
         name: 'P Sashank rao',
@@ -30,7 +31,8 @@ const studentProfiles = {
         personalMail: '[email protected]',
         aicteCertificates: 3,
         linkedin: 'https://www.linkedin.com/in/janedoe/',
-        github: 'https://github.com/janedoe'
+        github: 'https://github.com/janedoe',
+        instagram:'https://www.instagram.com/psashankrao/'
     }
     // Add more profiles as needed
 };
@@ -47,6 +49,11 @@ function showProfile(studentName) {
             <div class="profileCard">
                 <img src="${selectedStudent.profilePic}" alt="${selectedStudent.name}'s Profile" class="profilePic">
                 <h2>${selectedStudent.name}</h2>
+                <div class='social'>
+                <p> <span class="ans"> <a href="${selectedStudent.linkedin}" target="_blank"><img width="40" height="40" src="https://img.icons8.com/ios-filled/50/linkedin.png" alt="linkedin"/></a></span></p>
+                <p><span class="ans"> <a href="${selectedStudent.github}" target="_blank"><img width="40" height="40" src="https://img.icons8.com/ios-glyphs/30/github.png" alt="github"/></a></span></p>
+                <p><span class="ans"> <a href="${selectedStudent.instagram}" target="_blank"><img width="40" height="40" src="https://img.icons8.com/material-outlined/48/instagram-new--v1.png" alt="instagram-new--v1"/></a></span></p>
+                </div>
                <div class="profileCard-Data> 
                 <p class="age" >Age: <span class="ans">${selectedStudent.age}</span></p>
                 <p>Grade: <span class="ans"> ${selectedStudent.grade}</span> </p>
@@ -58,8 +65,6 @@ function showProfile(studentName) {
                 <p>College Mail: <span class="ans"> ${selectedStudent.collegeMail}</span></p>
                 <p>Personal Mail: <span class="ans"> ${selectedStudent.personalMail}</span></p>
                 <p>No. of AICTE Certificates: <span class="ans"> ${selectedStudent.aicteCertificates}</span></p>
-                <p>LinkedIn: <span class="ans"> <a href="${selectedStudent.linkedin}" target="_blank">${selectedStudent.linkedin}</a></span>/p>
-                <p>GitHub: <span class="ans"> <a href="${selectedStudent.github}" target="_blank">${selectedStudent.github}</a></span></p>
                 <!-- Add more profile details as needed -->
                 </div>
             </div>
@@ -84,4 +89,10 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 });
 
+document.querySelectorAll('.m-item').forEach(function(item) {
+    item.addEventListener('click', function () {
+        alert("sorry 😅, Can't reach at the moment");
+    });
+});
+
 

styles.css

@@ -243,6 +243,10 @@ body{
   color: #00000088;
 }
 
+.social {
+  display: flex;
+
+}
 .bar-line{
   height: 0.5px;
   border: 1px solid rgba(0, 0, 0, 0.618);