rocket-3d/templates/assets/components/spiderpi-content.html

<div class="page-wrapper">
       <div class="info">
           <h1><span>Spider</span>Pi</h1>
           <p>Our garden hexapod.<br><br>
           <span>Learn about SpiderPi!</span></p>
           <div class="image">
               <img type=" image/webp" src="../img/sample-spiderpi.svg">
           </div>
           </div>
       <div class="spider-container">
           <div class="strip">
           <div class="about">
               <h3>About a Spider</h3>
               <p>SpiderPi is our garden hexapod, he is aimed to be a garden helper and a walking database of our ecosystem.<br>
                     Through object detection he will recognize what is happening around him and check a plant for pests and disseases and then execute measures of biodynamic pest- and dissease management.<br><br>
                     Currently SpiderPi is learning to walk on uneven ground and recognize his surroundings in order to operate within them.<br><br>
               <span>Be part of the journey !</span><br>
               #a dummy text</p>
               <div class="image">
               <video type="video/mp4" src="../img/sample-video.mp4"></video>
               <p>video</p>
               </div>
           </div>
       </div>
       <div class="strip2">
           <div class="products">
               <h3>Time-Line</h3>
               <div class="product">
                   <div class="image">
                       <img type=" image/webp" src="../img/sample-camera.jpg"/>
                   </div>
                   <h5>Eyes</h5>
                   <p>Our first challenge is to let SpiderPi detect his surroundings and navigate through them.<br><br>
                      We replaced his built in camera with a 360 and wrote an object detection program that enables him to navigate through his surroundings and respond to obstacles.<br>
                       We used the software X, camera X, sensors X, made X changes on the Spider.<br><br>
                       <span>Stay in touch !</span>
                       #a dummy text<br>
                   </p>
                   <div class="click">
                       <button><a href="#">Blog</a></button>
                       <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/pixelfed.svg"></a></button>
                       <button id="you"><a href="#"><img id="tube" type=" image/webp" src="../img/peertube.svg"></a></button>
                   </div>
               </div>
           </div>
           </div>
       </div>
   </div>