Made previous exec accordion look better

acm-uiuc · Feb 4, 2025 · 88bd337 · 88bd337
1 parent c9c446b
commit 88bd337
Showing 1 changed file with 42 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,25 @@
 <meta name="theme-color" content="#ffffff">
 </head>
 
+<style>
+  /*Accordion bar style*/
+  .accordion-item {
+    background-color:#465ba0;
+  }
+
+   /*Accordion Button Active state style*/
+  .accordion-button:focus {
+    box-shadow: none;
+    background-color: #465ba0;
+  }
+
+  /* Change accordion body background color */
+  .accordion-body {
+    background-color: rgb(30,33,30); /* Light gray */
+    color: #333;
+  }
+</style>
+
 <body style="width:100%;color:rgb(0,0,0);background-color:rgba(255,255,255,0);overflow-x:hidden">
 
 	<div class="gm4html5_div_class" id="gm4html5_div_id">
@@ -103,38 +122,43 @@ <h3 class="name" style="color:rgb(255,255,255);margin-top:9px;">Studio</h3>
                 <p class="description" style="color:rgb(238,238,238);font-size:16px;">We run a student game production for those seeking professional development. Check it out!</p><a class="btn btn-secondary" role="button" href="https://gamebuilders-studio.itch.io/" target="_blank" style="margin-top:10px;background-color:#6b7fbe;font-family:'Fira Mono', monospace;"><strong>Projects</strong></a></div>
         </div>
     </div>
-    <div id="accordion" class="previous-exec" style="width:80%">
+    <div class="container text-center">
+      <h3 style="color:rgb(238,238,238)">Previous Exec</h3>
+  </div>
+    <div id="accordion" class="container-fluid" >
 
-        <div class="card">
-          <div class="card-header">
+        <div class="accordion-item">
+          <div class="accordion-header">
             <h5 class="text-center">
-              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
+              <button class="btn btn-link bg-primary text-white" data-toggle="collapse" data-target="#collapseOne">
                 Fall 2024 
               </button>
             </h5>
           </div>
           <div id="collapseOne" class="collapse" data-parent="#accordion" style="color:rgb(30,33,30)">
-            <div class="card-body">
-              <p class="text-center">
+            <div class="accordion-body">
+              <p class="text-center" style="color:rgb(238,238,238)">
                 Ethan, Gloria, Matthew, Rocky, Weija
               </p>
             </div>
           </div>
         </div>
 
-        <div class="card">
-            <div class="card-header">
-              <h5>
-                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo">
-                  Spring 2024
-                </button>
-              </h5>
-            </div>
-            <div id="collapseTwo" class="collapse" data-parent="#accordion">
-              <div class="card-body">
-                Jacky, Revan, Rocky, Roger, Charlie
-              </div>
+        <div class="accordion-item">
+          <div class="accordion-header">
+            <h5 class="text-center">
+              <button class="btn btn-link bg-primary text-white" data-toggle="collapse" data-target="#collapseTwo">
+                Spring 2024 
+              </button>
+            </h5>
+          </div>
+          <div id="collapseTwo" class="collapse" data-parent="#accordion" style="color:rgb(30,33,30)">
+            <div class="accordion-body">
+              <p class="text-center" style="color:rgb(238,238,238)">
+                Jacky, Roger, Charlie, Revan, Rocky
+              </p>
             </div>
+          </div>
         </div>
 
       </div>