Started to add members

about.html

@@ -98,25 +98,43 @@
     </nav>
 
     <div>
-    <header style="background-color: rgba(219, 219, 219, 0.448); border-bottom-width: 3px; border-bottom-style: solid; border-top-width: 3px; border-top-style: solid;" class="shadow p-10 mb-3">
+      <header
-      <img id="background-image" src="./img/PfostenDynamics.png" style="display: block;
+        style="
-      margin-left: auto;
+          background-color: rgba(219, 219, 219, 0.448);
-      margin-right: auto; max-height:5cm" class="img-fluid">
+          border-bottom-width: 3px;
-      <h1 style="text-align: center; position: relative;"></h1>
+          border-bottom-style: solid;
-    </header>
+          border-top-width: 3px;
+          border-top-style: solid;
+        "
+        class="shadow p-10 mb-3"
+      >
+        <img
+          id="background-image"
+          src="./img/PfostenDynamics.png"
+          style="
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            max-height: 5cm;
+          "
+          class="img-fluid"
+        />
+        <h1 style="text-align: center; position: relative"></h1>
+      </header>
     </div>
 
     <div class="container">
       <div class="h5">
         <p class="text-center">
-        Pfostendynamics is a world leader in building electric bobbycars,
+          Pfostendynamics is a world leader in building electric bobbycars,
-        tackling some of the toughest electronic and mechanical challenges. We
+          tackling some of the toughest electronic and mechanical challenges. We
-        combine the principles of dumb ideas and too much free time,
+          combine the principles of dumb ideas and too much free time,
-        cutting-edge chinese electronics, and next-generation software for
+          cutting-edge chinese electronics, and next-generation software for
-        high-performance bobbycars equipped with BMS, Battery, and
+          high-performance bobbycars equipped with BMS, Battery, and
-        Microcontrollers. Pfostendynamics has an extraordinary and fast-growing
+          Microcontrollers. Pfostendynamics has an extraordinary and
-        technical team of engineers and scientists who seamlessly combine next
+          fast-growing technical team of engineers and scientists who seamlessly
-        level bullshit with bold engineering and crashing into things.
+          combine next level bullshit with bold engineering and crashing into
+          things.
         </p>
       </div>
 
@@ -126,17 +144,19 @@
           <a href="#Q1" class="text-decoration-none"
             >Q: Why does Pfosten Dynamics make electric bobbycars?</a
           >
-          <br>
+          <br />
           <a href="#Q2" class="text-decoration-none"
             >Q: What makes Pfostendynamics unique?</a
           >
-          <br>
+          <br />
           <a href="#Q3" class="text-decoration-none"
             >Q: When can I buy a electric bobbycar?</a
           >
           <br>
+          <a href="#team" class="text-decoration-none h5" style="padding-left: 20px;">Our team</a>
+          <br />
         </div>
-        <br>
+        <br />
         <div id="Q1">
           <a>Q: Why does Pfosten Dynamics make electric bobbycars?</a>
           <p>A: Because we can</p>
@@ -158,11 +178,62 @@
         <div id="Q3">
           <a>Q: When can I buy a electric bobbycar?</a>
           <p>
-            A: For now these are not up for sale, but you can self buld yourself one.
+            A: For now these are not up for sale, but you can self buld yourself
+            one.
           </p>
         </div>
       </div>
     </div>
+    <div id="team" class="container" style="border-top: 5px; border-top-style: solid">
+      <br />
+      <div id="about-pic">
+        <img
+          src="./img/about.jpg"
+          class="img-fluid rounded mx-auto d-block shadow"
+          style="max-width: 99%; border: 5px solid"
+        />
+      </div>
+      <br />
+      <div class="container">
+        <ul class="list-unstyled">
+          <li class="media">
+            <img class="mr-3 img-fluid shadow rounded" src="./img/members/feedc0de.jpg" style="max-height: 150px"/>
+            <div class="media-body">
+              <h5 class="mt-0 mb-1">feedc0de</h5>
+              feedcode text
+            </div>
+          </li>
+          <li class="media">
+            <img class="mr-3 img-fluid shadow rounded" src="./img/members/peterp.jpg" style="max-height: 300px"/>
+            <div class="media-body">
+              <h5 class="mt-0 mb-1">peterp</h5>
+              peterp text
+            </div>
+          </li>
+          <li class="media">
+            <img class="mr-3 img-fluid shadow rounded" src="./img/members/greyhash.jpg" style="max-height: 300px"/>
+            <div class="media-body">
+              <h5 class="mt-0 mb-1">greyhash</h5>
+              greyhash text
+            </div>
+          </li>
+          <li class="media">
+            <img class="mr-3 img-fluid shadow rounded" src="./img/members/mick.jpg" style="max-height: 300px"/>
+            <div class="media-body">
+              <h5 class="mt-0 mb-1">mick</h5>
+              mick text
+            </div>
+          </li>
+          <li class="media">
+            <img class="mr-3 img-fluid shadow rounded" src="./img/members/commanderred.jpg" style="max-height: 300px"/>
+            <div class="media-body">
+              <h5 class="mt-0 mb-1">CommanderRed</h5>
+              Commanderred text
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
 
     <!-- Optional JavaScript; choose one of the two! -->