Merge branch 'main' of https://github.com/DCS-CUSAT/dcs-frontend

about.html

@@ -58,7 +58,15 @@ <h1 class="logo me-auto"><a href="index.html">Mentor</a></h1>
             <li><a href="index.html">Home</a></li>
             <li><a class="active" href="about.html">About</a></li>
             <li><a href="courses.html">Courses</a></li>
-            <li><a href="trainers.html">Trainers</a></li>
+            <li class="dropdown">
+              <a href="#"
+                ><span>People</span> <i class="bi bi-chevron-down"></i
+              ></a>
+              <ul>
+                <li><a href="faculties.html ">Faculties</a></li>
+                <li><a href="staff.html">staff</a></li>
+              </ul>
+            </li>
             <li><a href="events.html">Events</a></li>
             <li><a href="pricing.html">Pricing</a></li>
 

assets/css/style.css

@@ -820,6 +820,7 @@ section {
   margin-bottom: 20px;
   background: #fff;
   border: 1px solid #eef0ef;
+  transition: transform 0.3s ease;
 }
 
 .trainers .member img {
@@ -867,6 +868,79 @@ section {
   margin: 0 2px;
 }
 
+.trainers .member:hover {
+  transform: scale(1.05);
+  cursor: pointer;
+}
+
+/* ------------------------------------------------------------- */
+/* Faculty info */
+/* ------------------------------------------------------------- */
+.member-card{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.member-card-image {
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.member-card-image img {
+  width: 75%;
+  height: 75%;
+  object-fit: cover;
+  border-radius: 5%;
+}
+
+.member-card-body{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.member-card {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* .member-card-image img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+} */
+
+.member-info {
+  margin-top: 10px;
+
+}
+
+.member-info p {
+  margin: 5px 0;
+}
+
+.member-info strong {
+  width: 120px; /* Adjust the width as needed */
+  display: inline-block;
+}
+.member-address {
+  display: flex;
+  align-items: flex-start;
+}
+address{
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
 /*--------------------------------------------------------------
 # Testimonials
 --------------------------------------------------------------*/