Moved header and navbar into own .php files

This commit is contained in:
2020-11-24 13:46:38 +01:00
parent 2aed30dd0a
commit c437102f09
3 changed files with 123 additions and 121 deletions

25
includes/header.php Normal file
View File

@@ -0,0 +1,25 @@
<!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>Home | Pfosten Dynamics</title>
<link rel="icon" href="./img/favicon.png" />
</head>
<body onload="load()" class="couldDark">
<?php require('navbar.php') ?>

97
includes/navbar.php Normal file
View File

@@ -0,0 +1,97 @@
<!--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-->

View File

@@ -1,124 +1,4 @@
<!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>Home | 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-->
<?php require('includes/header.php'); ?>
<br />
<br />
<br />