Seahawk rov feature section

Author: steph1111

_data/seahawk-rov-features.yml

@@ -0,0 +1,14 @@
+- title: "Primary Manipulator"
+  description: "The primary manipulator is engineered for dynamic and reliable usage. It is mounted on the front of  ROV SeaHawk within  view of the multiple cameras. The custom-printed three-pronged jaws, and a flexible rubber interior, allow the operator to grasp irregularly shaped objects with ease. Once the object is secured, the piston may apply up to 70N of force to ensure the object of importance remains securely captured in the jaws. "
+  image: "https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg"
+
+- title: "T200 Thrusters"
+  description: "ROV SeaHawk uses eight Blue Robotics thrusters mounted with custom 3D-printed brackets in a configuration that enables all degrees of motion. The motors are shrouded with 3D-printed guards for increased safety. Using flow simulations, the Cabrillo Robotics Club minimized shroud impact on thrusters from a 23% to 15% reduction in efficiency compared to the initial prototype. The thrusters also use a lower voltage than their technical maximum. "
+  image: "https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg"
+- title: "Logic Tube"
+  description: "ROV SeaHawk is designed around a centralized 'logic tube.' The logic tube contains temperature and humidity sensors that are monitored by the software which alerts the pilot of any abnormalities for increased safety. It also encloses logic components and an auxiliary pivoting camera on a custom servo mount. The logic tube is completely waterproofed with specialized connectors and is vacuum sealed before every mission to ensure no leakage."
+  image: "https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg"
+
+- title: "Fish Release"
+  description: "To aid in environmental restoration efforts and species conservation, ROV SeaHawk includes a fish release. The specialized release system was carefully designed for the safe, secure transport, and gentle release of species. Fish may be placed in the containment area, then driven to the site where they may be released through a sliding gate on the bottom. The fish release may be used to assist in conservation projects such as repopulating the Northern Redbelly Dace."
+  image: "https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg"

_includes/seahawk-rov-feature-card.html

@@ -0,0 +1,12 @@
+
+<div class="grid" id="feature-grid">
+    {% for feature in site.data.seahawk-rov-features %}
+    <div class="column" id="feature-card">
+        <img src="{{ feature.image }}" alt="{{ feature.title }}" class="image"/>
+        <div class="feature-content">
+          <h3 class="feature-title">{{ feature.title }}</h3>
+          <p class="feature-description">{{ feature.description }}</p>
+        </div>
+      </div>
+    {% endfor %}
+  </div>

_includes/seahawk-rov-features.html

@@ -3,5 +3,6 @@
         <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
             ROV Features
         </h2>
+        {% include seahawk-rov-feature-card.html%}
     </div>
 </section>

_includes/seahawk.html

@@ -1,6 +1,6 @@
 <div class="container">
     <section class="hero" id="seahawk-info-graphic">
-        <figure class="hero-background" style="background-image: url('https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/14d24d1b212df580f18441c23426d07a719ebab4/assets/images/seahawk-II/seahawk-II-info-graphic.webp');">
+        <figure class="hero-background" style="background-image: url('https://raw.githubusercontent.com/CabrilloRoboticsClub/cabrillorobotics.github.io/what-a-theme-test/assets/images/seahawk/seahawk-info-graphic.webp');">
         </figure>
     </section>
 </div>

_site/assets/css/style.css

@@ -11,7 +11,7 @@
     --text: #a2a2a2;
     --seahawk-II: #fe5e20;
     --seahawk: #79bde8;
-    --hydrozoa: #3961e2;
+    --hydrozoa: #1a5ea5;
 }
 
 // Global settings
@@ -418,6 +418,39 @@ body { background-color: var(--background); }
     }
 }
 
+#feature-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    #feature-card {
+        display: flex;
+        flex-direction: column;
+        .image {
+            border-radius: 10px 10px 0px 0px;
+            overflow: hidden;
+            flex-shrink: 0;
+        }
+        .feature-content {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+        .feature-title {
+            font-size: 1.2rem;
+            text-align: center;
+            color: var(--header);
+            background-color: var(--seahawk);
+            padding: 10px;
+            margin: 0;
+            border-radius: 0px 0px 10px 10px;
+        }
+        .feature-description {
+            text-align: justify;
+            margin-top: 10px;
+        }
+    }
+}
+
 #robots {
     #robot-card {
         position: relative;