Css

Author: steph1111

_layouts/team.html

@@ -13,10 +13,10 @@
     {% include navbar.html %}
     <section class="section has-text-centered has-background-black-bis" id="team">
         <div class="container">
-            <br>
-            <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
+            {% include team-showcase.html %}
+            <!-- <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
                 Our Team
-            </h2>
+            </h2> -->
             <div class="has-text-left">
                 <p>
                     Cabrillo Robotics Club (CRC) is a dedicated team of students from Cabrillo College in Aptos, California united by a mutual passion for robotics. We design and engineer cutting-edge solutions, drawing from the diverse experience and knowledge of our interdisciplinary members. The team is structured into four specialized subteams: Electrical, Mechanical, Software, and Marketing. This decentralized approach fosters autonomy within each division, allowing members to focus on their areas of expertise, while working collaboratively to create innovative and reliable robotic systems.

assets/css/style.scss

@@ -448,6 +448,32 @@
         }
     }
 
+    #team-showcase {
+        position: relative;
+        height: 50vh;
+        background: var(--black);
+    
+        .hero-background {
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            position: relative;
+        }
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-start;
+            padding: 2rem;
+        }
+    }
+
     #member {
         // this is for a shadow under the card, with the dark background it cant really be seen, consider making darker or removing
         -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);