Merge pull request #1 from nivijha/main

live

css/card.css

@@ -0,0 +1,102 @@
+
+.team {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .team figure {
+    margin: 0;
+}
+
+.team .container {
+    max-width: 1400px;
+}
+
+  .card-faculty {
+    margin: 20px;
+    padding: 8px;
+    width: 200px;
+    background-color: #ffffff;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+  }
+
+  .card-faculty img {
+    display: block;
+    width: 100%;
+    height: 230px;
+  }
+
+  .card-coordinator {
+    margin: 20px;
+    padding: 8px;
+    width: 200px;
+    background-color: #ffffff;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
+  }
+
+  .card-coordinator img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .card-info {
+    padding: 15px 0 7px;
+    text-align: center;
+  }
+
+  .card-info h6 {
+    margin-bottom: 3px;
+    color: black;
+    font-size: 90%;
+    font-weight: 700;
+    font-family: "Poppins", sans-serif;
+    text-transform: capitalize;
+  }
+
+  .card-info span {
+    margin-bottom: 5px;
+    color: #888888;
+    font-size: 13px;
+    font-weight: 400;
+    font-family: "Poppins", sans-serif;
+  }
+
+  .card-info a {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin: 8px 2px 0;
+    color: #333333;
+    background-color: #f7f7f7;
+    border-radius: 50%;
+    font-size: 15px;
+    text-decoration: none;
+    line-height: 30px;
+    transition: all 0.5s;
+  }
+
+  .card-info a:hover:nth-child(1) {
+    color: #ffffff;
+    background-color: #1877f2;
+  }
+
+  .card-info a:hover:nth-child(2) {
+    color: #ffffff;
+    background-color: #e1306c;
+  }
+
+  .card-info a:hover:nth-child(3) {
+    color: #ffffff;
+    background-color: #1da1f2;
+  }
+
+  .card-info a:hover:nth-child(4) {
+    color: #ffffff;
+    background-color: #e60023;
+  }
+

css/contact.css

@@ -0,0 +1,104 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #222327;
+    padding: 0;
+    color: #e0e0e0; /* Adjust text color for better readability */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 20px; /* Add padding to container for better spacing */
+}
+
+h1 {
+    font-family: "Fjalla One", sans-serif;
+    margin-top: 30px;
+      line-height: 1.4;
+      font-size: 60px;
+      letter-spacing: 0.5px;
+      text-align: left;
+    color: white;
+}
+.contact-head{
+    font-size: 60px;
+    margin-top: 20px;
+}
+
+.card-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.card {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    width: 45%; /* Fixed width */
+    height: 270px; /* Fixed height */
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Align content to the top-left */
+    margin-bottom: 20px;
+}
+
+
+
+.card h2 {
+    background-color: #000000;
+    color: #fff;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    font-size: 18px;
+    width: 100%; /* Make the heading span the full width of the card */
+    box-sizing: border-box; /* Ensure padding is included within the width */
+}
+
+.card p {
+    font-size: 16px;
+    color: #333; /* Use darker color for better contrast against light background */
+}
+
+.highlight {
+    font-weight: bold;
+    color: #000;
+}
+
+main {
+    min-height: 100vh;
+    padding-bottom: 100px;
+}
+
+.footer {
+    position: relative;
+    bottom: 0;
+    padding-top: 100px;
+    color: #878282;
+    text-align: center; /* Center-align footer content */
+}
+
+@media (max-width: 768px) {
+    .card-container {
+        flex-direction: column;
+    }
+    .contact-head{
+        font-size: 40px;
+    }
+
+    .card {
+        width: 100%;
+    }
+}