Merge pull request #194 from pandeyji711/contributor

fix search bar dark mode"
mdazfar2 · Jun 5, 2024 · 039075e · 039075e
2 parents c79bc4d + 2339b15
commit 039075e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/Official_Website/contributor-index.html b/Official_Website/contributor-index.html
@@ -20,7 +20,9 @@
     <header class="header">
 
         <div class="logo">
-            <img src="logo.png" alt="HelpOps-Hub Logo">
+            <a href="https://helpops-hub.vercel.app/"
+            ><img src="logo.png" alt="HelpOps-Hub Logo"
+          /></a>
         </div>
         <div>
 
@@ -108,12 +110,12 @@ <h1>Our Team</h1>
         </div>
         <div id="team-grid">
           <div class="team-member">
-            <div class="card1">
+            <div class="card">
               <div class="image-div">
                 <img src="Screenshot (251).png" alt="Azfar Alam" />
               </div>
               <div class="info-div">
-                <span class="badge founder">Founder</span>
+                <!-- <span class="badge founder">Founder</span> -->
                 <h2>Azfar Alam</h2>
                 <p>DevOps Engineer</p>
               </div>
@@ -123,14 +125,16 @@ <h2>Azfar Alam</h2>
               <a href="https://github.com/mdazfar2"><i class="fab fa-github"></i> GitHub</a>
               <a href="https://www.linkedin.com/in/md-azfar-alam/"><i class="fab fa-linkedin"></i>linkedin</a>
             </div>
+            <span class="badge founder">Founder</span>
+
           </div>
           <div class="team-member">
-            <div class="card2">
+            <div class="card">
               <div class="image-div">
                 <img src="Screenshot (250).png" alt="Anurag Pandey" />
               </div>
               <div class="info-div">
-                <span class="badge founder">Maintainer</span>
+                <!-- <span class="badge founder">Maintainer</span> -->
                 <h2>Anurag Pandey</h2>
                 <p>Software Engineer</p>
               </div>
@@ -140,6 +144,7 @@ <h2>Anurag Pandey</h2>
               <a href="https://github.com/pandeyji711"><i class="fab fa-github"></i> GitHub</a>
               <a href="https://www.linkedin.com/in/anuragpandey0711/"><i class="fab fa-linkedin"></i>linkedin</a>
             </div>
+            <span class="badge founder">Maintainer</span>
           </div>
         </div>
       </main>

diff --git a/Official_Website/contributor-style.css b/Official_Website/contributor-style.css
@@ -251,6 +251,7 @@ width: 40px;
   background-color: whitesmoke;
   border-radius: 20px;
   /* border: solid; */
+  background-color: #fff2f2;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   padding: 20px;
  /* background-color: gray; */
@@ -263,7 +264,27 @@ width: 40px;
 .team-member:hover{
   transform: scale(1.07);
 }
-
+.team-member2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: whitesmoke;
+  border-radius: 20px;
+  /* border: solid; */
+  background-color: #fff2ff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  padding: 20px;
+ /* background-color: gray; */
+ gap: 10px;
+  margin-left: 20px;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: 0.5s;
+}
+.team-member2:hover{
+  transform: scale(1.07);
+}
 .card1 {
   background-color: #fff0f0;
   padding: 2rem;
@@ -323,9 +344,9 @@ width: 40px;
 }
 
 .badge {
-  position: absolute;
-  top: 15px;
-  right: 15px;
+  position: relative;
+  bottom: 120px;
+  left:800 px;
   display: inline-block;
   padding: 2px 10px;
   border-radius: 20px;

diff --git a/Official_Website/dark_mode.css b/Official_Website/dark_mode.css
@@ -20,11 +20,15 @@ header.dark-mode {
 }
 
 #search-bar.dark-mode {
-    background-color: #333333;
+    background-color: #2c2c2c;
     color: #e0e0e0;
 }
 
 #folders-container div.dark-mode {
     background-color: #2c2c2c;
     border: 1px solid #444444;
+}
+
+#search-box.dark-mode{
+    background-color: #2c2c2c;
 }
diff --git a/Official_Website/darkmode.js b/Official_Website/darkmode.js
@@ -8,6 +8,7 @@ function toggleTheme() {
     icon.classList.toggle("dark-mode");
   });
   document.getElementById("search-bar").classList.toggle("dark-mode");
+  document.getElementById("search-box").classList.toggle("dark-mode");
   document.querySelectorAll("#folders-container div").forEach((folder) => {
     folder.classList.toggle("dark-mode");
   });