Update styles.css

Author: Tejashri-Taral

Website/styles.css

@@ -226,4 +226,96 @@ button#toggle-languages:hover {
         flex: 1 1 100%; 
         max-width: 100%;
     }
-}
+}
+#contributors {
+    padding: 40px;
+    background-color: #f9f9f9;
+    text-align: center;
+}
+
+#contributors h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+/* Container for contributors grid */
+#contributors-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* Reduced space between contributors */
+    justify-content: center;
+    padding: 20px; /* Padding around the grid */
+    background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Subtle gradient background */
+}
+
+/* Styling for individual contributor div */
+.contributor {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    max-width: 180px; /* Adjusted width for better visuals */
+    border: none; /* Remove default border */
+    border-radius: 15px; /* More rounded corners */
+    padding: 15px;
+    background: #ffffff; /* White background */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow for depth */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
+}
+
+.contributor:hover {
+    transform: translateY(-8px); /* Slight lift effect on hover */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for contributor's image */
+.contributor-image {
+    width: 110px; /* Adjusted size */
+    height: 110px; /* Adjusted size */
+    border-radius: 50%; /* Circular image */
+    object-fit: cover; /* Ensure image covers area without distortion */
+    border: 3px solid #0366d6; /* Border around the image */
+    transition: border-color 0.3s ease; /* Smooth border color change */
+}
+
+.contributor-image:hover {
+    border-color: #024c8c; /* Darker border color on hover */
+}
+
+/* Styling for the GitHub profile link */
+.contributor-info {
+    margin-top: 10px; /* Adjusted space between image and link */
+}
+
+.contributor-github {
+    text-decoration: none;
+    color: #0366d6; /* GitHub blue color */
+    font-size: 14px; /* Slightly smaller font size */
+    font-weight: bold; /* Bold font */
+    background: linear-gradient(135deg, #f0f4f8, #cfd9e5); /* Gradient background */
+    padding: 8px 12px; /* Adjusted padding around the link */
+    border-radius: 20px; /* Rounded button shape */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for button */
+    transition: background 0.3s ease, color 0.3s ease; /* Smooth transition effects */
+}
+
+.contributor-github:hover {
+    background: #0366d6; /* Darker background on hover */
+    color: #ffffff; /* White text color on hover */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
+}
+
+/* Styling for the heading with class 'contri-heading' */
+.contri-heading {
+    font-size: 2.5rem; /* Increase font size */
+    font-weight: 900; /* Bold font weight */
+    color: #2c3e50; /* Dark color for better contrast */
+   
+}
+
+
+
+
+
+