Converted about.html to .php

This commit is contained in:
CommanderRedYT
2020-11-24 14:29:57 +01:00
parent 6f916e6e7b
commit 00348ec460
2 changed files with 186 additions and 356 deletions

View File

@ -1,356 +0,0 @@
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="./darkmode.css" />
<link rel="stylesheet" href="./style.css" />
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<title>About | Pfosten Dynamics</title>
<link rel="icon" href="./img/favicon.png" />
</head>
<body onload="load()" class="couldDark">
<!--Begin Navbar-->
<nav
class="navbar navbar-expand-lg navbar-light bg-light couldDark"
id="navbar"
>
<div class="container">
<a class="navbar-brand" href="./"
><img
src="./img/PfostenDynamics.png"
style="max-height: 60px"
class="d-inline-block align-top"
alt=""
loading="lazy"
id="pfostendynamics"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNavDropdown"
>
<ul class="navbar-nav">
<li class="nav-item home canactive">
<a class="nav-link" href="./"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li
class="nav-item dropdown vehicles bobbycar bobbyquad bobbybob bobbyklo bobbyboot bobbyhubschrauber raupenfahrzeug canactive"
>
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Vehicles
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink"
>
<a class="dropdown-item" href="./bobbycar">Bobbycar</a>
<a class="dropdown-item" href="./bobbyquad">Bobbyquad</a>
<a class="dropdown-item" href="./bobbybob">Bobbybob</a>
<a class="dropdown-item" href="./bobbyklo">Bobbyklo</a>
<a class="dropdown-item" href="./bobbyboot">Bobbyboot</a>
<a class="dropdown-item" href="./bobbyhubschrauber"
>Bobbyhubschrauber</a
>
<a class="dropdown-item" href="./raupenfahrzeug"
>Raupenfahrzeug</a
>
</div>
</li>
<li class="nav-item careers canactive">
<a class="nav-link" href="./careers">Careers</a>
</li>
<li class="nav-item news canactive">
<a class="nav-link" href="./news">News</a>
</li>
<li class="nav-item about canactive">
<a class="nav-link" href="./about">About</a>
</li>
<li class="nav-item shop canactive">
<a class="nav-link" href="./shop">Shop</a>
</li>
<li class="nav-item impressum canactive">
<a class="nav-link" href="./impressum">Impressum</a>
</li>
</ul>
<a class="nav-link" href="#" onclick="darkMode()"
><img
id="darkModeImg"
class="img-fluid"
data-toggle="tooltip"
data-placement="top"
title="Toggle darkmode"
src=""
/></a>
</div>
</div>
<script src="./js/navbar.js"></script>
</nav>
<!--End Navbar-->
<div>
<header
style="background-color: rgba(219, 219, 219, 0.448)"
class="shadow p-10 mb-3"
>
<img
id="background-image"
src="./img/new-about.jpg"
style="
display: block;
margin-left: auto;
margin-right: auto;
border: 2px;
border-style: ridge;
border-color: gray;
"
class="img-fluid"
draggable="false"
ondragstart="return false;"
/>
<h1 style="text-align: center; position: relative"></h1>
</header>
</div>
<div class="container">
<br />
<div class="h5">
<p style="hyphens: auto; text-align: justify">
Pfostendynamics is a world leader in building electric bobbycars,
tackling some of the toughest electronic and mechanical challenges. We
combine the principles of dumb ideas and too much free time,
cutting-edge Chinese electronics, and next-generation software for
high-performance bobbycars equipped with BMS, Battery, and
micro-controllers. Pfostendynamics has an extraordinary and
fast-growing technical team of engineers and scientists who seamlessly
combine next level bullshit with bold engineering and crashing into
things.
</p>
</div>
<h2
class="mt-5 display-4 text-uppercase"
style="text-shadow: 1px 1px #686868"
>
FAQs about Pfosten Dynamics
</h2>
<div id="faq">
<div>
<a href="#Q1" class="text-decoration-none"
>Q: Why does Pfosten Dynamics make electric bobbycars?</a
>
<br />
<a href="#Q2" class="text-decoration-none"
>Q: What makes Pfostendynamics unique?</a
>
<br />
<a href="#Q3" class="text-decoration-none"
>Q: When can I buy an electric bobbycar?</a
>
<br />
<a href="./impressum" class="text-decoration-none">IMPRESSUM </a>
</div>
<br />
<div id="Q" class="h4" style="padding-left: 50px">
<div id="Q1">
<a>Q: Why does Pfosten Dynamics make electric bobbycars?</a>
<p>A: Because we can</p>
</div>
<div id="Q2">
<a>Q: What makes Pfostendynamics unique?</a>
<p>
A: One of the things that makes Pfostendynamics unique is the
ambition to build a electric bobbycar that does not go up in smoke
immediately. Peter Poetzi began tackling this problem before
anyone else of us. And weve been at it since almost 3 years.
Weve been inspired by and worked towards this goal for so long
that we have invented techniques to make bobbycars work that you
cant find in any textbook or technical article. The result is
that we now know how to build such bobbycars so that they work for
around 100 Kilometers without something breaking or needing for
repair.
</p>
</div>
<div id="Q3">
<a>Q: When can I buy an electric bobbycar?</a>
<p>
A: For now these are not up for sale, but you can self build
yourself one.
</p>
</div>
</div>
</div>
</div>
<div
id="about-us"
class="container"
style="border-top: 5px; border-top-style: solid"
>
<br />
<div id="about-pic">
<!--<img
src="./img/new-about.jpg"
class="img-fluid rounded mx-auto d-block shadow"
style="
max-width: 99%;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>-->
<h2
class="display-4"
style="text-shadow: 1px 1px #686868; margin-top: -30px"
>
Our Team
</h2>
</div>
<br />
<div class="container" id="team">
<ul class="list-unstyled">
<li class="media">
<img
class="mr-3 img-fluid shadow rounded"
src="./img/placeholder.jpg"
style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>
<div class="media-body">
<h3 class="mt-0 mb-1">feedc0de</h3>
feedcode text
</div>
</li>
<br />
<li class="media">
<div class="media-body">
<h3 class="mt-0 mb-1">peterp</h3>
peterp text
</div>
</li>
<br />
<li class="media">
<img
class="mr-3 img-fluid shadow rounded"
src="./img/members/greyhash.jpg"
style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>
<div class="media-body">
<h3 class="mt-0 mb-1">greyhash</h3>
greyhash text
</div>
</li>
<br />
<li class="media">
<img
class="mr-3 img-fluid shadow rounded"
src="./img/members/mick.jpg"
style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>
<div class="media-body">
<h3 class="mt-0 mb-1">mick</h3>
mick text
</div>
</li>
<br />
<li class="media">
<img
class="mr-3 img-fluid shadow rounded"
src="./img/members/commanderred.jpg"
style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>
<div class="media-body">
<h3 class="mt-0 mb-1">CommanderRed</h3>
Web-Pfosten (WEB-DESIGN)
</div>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script src="./js/main.js"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

186
about.php Normal file
View File

@ -0,0 +1,186 @@
<?php
define('PAGE_TITLE', 'ABOUT');
define('ACTIVE_MENUITEM', 'about');
require('includes/header.php');
?>
<div>
<header style="background-color: rgba(219, 219, 219, 0.448)" class="shadow p-10 mb-3">
<img id="background-image" src="./img/new-about.jpg" style="
display: block;
margin-left: auto;
margin-right: auto;
border: 2px;
border-style: ridge;
border-color: gray;
" class="img-fluid" draggable="false" ondragstart="return false;" />
<h1 style="text-align: center; position: relative"></h1>
</header>
</div>
<div class="container">
<br />
<div class="h5">
<p style="hyphens: auto; text-align: justify">
Pfostendynamics is a world leader in building electric bobbycars,
tackling some of the toughest electronic and mechanical challenges. We
combine the principles of dumb ideas and too much free time,
cutting-edge Chinese electronics, and next-generation software for
high-performance bobbycars equipped with BMS, Battery, and
micro-controllers. Pfostendynamics has an extraordinary and
fast-growing technical team of engineers and scientists who seamlessly
combine next level bullshit with bold engineering and crashing into
things.
</p>
</div>
<h2 class="mt-5 display-4 text-uppercase" style="text-shadow: 1px 1px #686868">
FAQs about Pfosten Dynamics
</h2>
<div id="faq">
<div>
<a href="#Q1" class="text-decoration-none">Q: Why does Pfosten Dynamics make electric bobbycars?</a>
<br />
<a href="#Q2" class="text-decoration-none">Q: What makes Pfostendynamics unique?</a>
<br />
<a href="#Q3" class="text-decoration-none">Q: When can I buy an electric bobbycar?</a>
<br />
<a href="./impressum" class="text-decoration-none">IMPRESSUM </a>
</div>
<br />
<div id="Q" class="h4" style="padding-left: 50px">
<div id="Q1">
<a>Q: Why does Pfosten Dynamics make electric bobbycars?</a>
<p>A: Because we can</p>
</div>
<div id="Q2">
<a>Q: What makes Pfostendynamics unique?</a>
<p>
A: One of the things that makes Pfostendynamics unique is the
ambition to build a electric bobbycar that does not go up in smoke
immediately. Peter Poetzi began tackling this problem before
anyone else of us. And weve been at it since almost 3 years.
Weve been inspired by and worked towards this goal for so long
that we have invented techniques to make bobbycars work that you
cant find in any textbook or technical article. The result is
that we now know how to build such bobbycars so that they work for
around 100 Kilometers without something breaking or needing for
repair.
</p>
</div>
<div id="Q3">
<a>Q: When can I buy an electric bobbycar?</a>
<p>
A: For now these are not up for sale, but you can self build
yourself one.
</p>
</div>
</div>
</div>
</div>
<div id="about-us" class="container" style="border-top: 5px; border-top-style: solid">
<br />
<div id="about-pic">
<!--<img
src="./img/new-about.jpg"
class="img-fluid rounded mx-auto d-block shadow"
style="
max-width: 99%;
border: 2px;
border-style: ridge;
border-color: gray;
"
draggable="false"
ondragstart="return false;"
/>-->
<h2 class="display-4" style="text-shadow: 1px 1px #686868; margin-top: -30px">
Our Team
</h2>
</div>
<br />
<div class="container" id="team">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3 img-fluid shadow rounded" src="./img/placeholder.jpg" style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
" draggable="false" ondragstart="return false;" />
<div class="media-body">
<h3 class="mt-0 mb-1">feedc0de</h3>
feedcode text
</div>
</li>
<br />
<li class="media">
<div class="media-body">
<h3 class="mt-0 mb-1">peterp</h3>
peterp text
</div>
</li>
<br />
<li class="media">
<img class="mr-3 img-fluid shadow rounded" src="./img/members/greyhash.jpg" style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
" draggable="false" ondragstart="return false;" />
<div class="media-body">
<h3 class="mt-0 mb-1">greyhash</h3>
greyhash text
</div>
</li>
<br />
<li class="media">
<img class="mr-3 img-fluid shadow rounded" src="./img/members/mick.jpg" style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
" draggable="false" ondragstart="return false;" />
<div class="media-body">
<h3 class="mt-0 mb-1">mick</h3>
mick text
</div>
</li>
<br />
<li class="media">
<img class="mr-3 img-fluid shadow rounded" src="./img/members/commanderred.jpg" style="
max-height: 150px;
border: 2px;
border-style: ridge;
border-color: gray;
" draggable="false" ondragstart="return false;" />
<div class="media-body">
<h3 class="mt-0 mb-1">CommanderRed</h3>
Web-Pfosten (WEB-DESIGN)
</div>
</li>
</ul>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
<script src="./js/main.js"></script>
<script>
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>