diff --git a/js/headfoot.js b/js/headfoot.js
new file mode 100644
index 0000000000000000000000000000000000000000..7b6777796581487323cb71969504310c9ae8a514
--- /dev/null
+++ b/js/headfoot.js
@@ -0,0 +1,184 @@
+var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'./project'}, {'name':'Über das M4_LAB', 'link':'./index_Projektseite_M4_LAB.html'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Events', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Bürgerbeteiligung', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Login', 'combos':[], 'type':'', 'link':'./user/login'}];
+
+var hft_links = [{'url':'#', 'name':'Kontakt'},{'url':'#', 'name':'Impressum'},{'url':'#', 'name':'Datenschutz'}]
+
+var socialmedias = [{'url':'https://twitter.com/HFT_Presse', 'name': 'fa-twitter'}, {'url':'https://www.facebook.com/HfTStuttgart/', 'name': 'fa-facebook-square'}, {'url':'https://www.instagram.com/hft_stuttgart/', 'name': 'fa-instagram'}, {'url':'https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/', 'name': 'fa-linkedin'}, {'url':'https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA', 'name': 'fa-youtube'}];
+
+var footer_images = [{'src':'images/demo/bbf_logo.png', 'alt':'BMBF'}, {'src':'images/demo/ihs_logo.jpg', 'alt':'Innovative Hochschule'}]
+
+function prependChild(parent,child){
+ parent.insertBefore(child, parent.childNodes[0]);
+}
+
+/* function head()
+ * creates header and prepends it to the documents body
+ */
+
+function head(){
+ let headerdiv = document.createElement('div');
+ let alertdiv = document.createElement('div');
+ headerdiv.classList.add("wrapper","row1");
+ let navheader = document.createElement('header');
+ navheader.id = "header";
+ navheader.classList.add("clear");
+ let alertbutton = document.createElement('button');
+ alertbutton.type = "button";
+ alertbutton.classList.add("close");
+ alertbutton.setAttribute("data-dismiss", "alert");
+ alertbutton.innerHTML = "×";
+ alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use."
+ prependChild(alertdiv, alertbutton);
+ alertdiv.classList.add('alert','alert-danger', 'alert-dismissible', 'fade','show');
+ alertdiv.style = "text-align:center;";
+ navheader.appendChild(alertdiv);
+ let navbar = document.createElement('nav');
+ navbar.classList.add("navbar", "navbar-default");
+ let fluiddiv = document.createElement('div');
+ fluiddiv.classList.add("container-fluid");
+ let navbardiv = document.createElement('div');
+ navbardiv.classList.add("navbar-header");
+ let navelements = document.createElement('ul');
+ navelements.id="navelemente";
+ let logos = document.createElement('li');
+ let link_m4lab = document.createElement('a');
+ link_m4lab.href = "https://www.hft-stuttgart.de/Forschung/M4-Lab/";
+ link_m4lab.innerHTML = "<img src='images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>";
+ logos.appendChild(link_m4lab);
+ for (let i = 1; i<5; i++){
+ let link_tv = document.createElement('a');
+ link_tv.href = "https://www.hft-stuttgart.de/Forschung/M4-Lab/Teilvorhaben/Teilvorhaben-" + i;
+ link_tv.innerHTML = "<img src='images/M4_LAB_LOGO_TV_" + i + ".jpg' alt='Logo TV'>";
+ logos.appendChild(link_tv);
+ };
+ navelements.appendChild(logos);
+ for(let j = 0; j<menu.length; j++){
+ let headitem = document.createElement('li');
+ let itemtype = menu[j].type;
+ headitem.classList.add("nav-item")
+ let headlink = document.createElement('a');
+ headlink.href=menu[j].link;
+ headlink.id="navbarDropdown" + j;
+ headlink.classList.add('nav-link');
+ headlink.setAttribute("role", "button");
+ if(itemtype=='dropdown'){
+ headitem.classList.add("dropdown");
+ headlink.classList.add('dropdown-toggle');
+ headlink.setAttribute("data-toggle", "dropdown");
+ headlink.setAttribute("aria-haspopup", "true");
+ headlink.setAttribute("aria-expanded", "false");
+ }
+ headlink.innerHTML=menu[j].name;
+ if(itemtype=='dropdown'){
+ let combodiv = document.createElement('div');
+ combodiv.setAttribute("aria-labelledby",headlink.id);
+ combodiv.classList.add("dropdown-menu");
+ for(let k = 0; k< menu[j].combos.length; k++){
+ let combolink = document.createElement('a');
+ combolink.classList.add("dropdown-item");
+ combolink.href = menu[j].combos[k].link;
+ combolink.innerHTML = menu[j].combos[k].name;
+ combodiv.appendChild(combolink);
+ }
+ headlink.appendChild(combodiv);
+ }
+ headitem.appendChild(headlink);
+ navelements.appendChild(headitem);
+ }
+ let searchitem = document.createElement('li');
+ searchitem.classList.add("nav-item");
+ let searchinput = document.createElement('input');
+ searchinput.value='Suche...'
+ searchinput.type="text";
+ searchinput.classList.add("nav-item-suchfeld");
+ searchinput.setAttribute('onFocus', "this.value=(this.value=='search...')? '' : this.value");
+ searchitem.appendChild(searchinput);
+ let magnifier = document.createElement('input');
+ magnifier.type="image"
+ magnifier.src="images/Lupe_grau.png";
+ magnifier.width="25";
+ magnifier.height="25";
+ magnifier.alt="";
+ magnifier.id="sf_submit";
+ magnifier.value="search";
+ searchitem.appendChild(magnifier);
+ navelements.appendChild(searchitem);
+ navbardiv.appendChild(navelements);
+ fluiddiv.appendChild(navbardiv);
+ navbar.appendChild(fluiddiv);
+ navheader.appendChild(navbar);
+ headerdiv.appendChild(navheader);
+ prependChild(document.body, headerdiv);
+};
+
+/* function foot()
+ * creates footer and appends it to the documents body
+ */
+
+function foot(){
+ let footerdiv = document.createElement('div');
+ footerdiv.id="homepage";
+ footerdiv.classList.add("last", "clear");
+ footerdiv.innerHTML = "<hr>";
+ let containerdiv = document.createElement('div');
+ containerdiv.classList.add('flex-container');
+ let hftlink = document.createElement('a');
+ hftlink.classList.add("col-md-3");
+ hftlink.setAttribute('style','flex-basis: 400px;');
+ hftlink.href="https://www.hft-stuttgart.de";
+ let hftimage = document.createElement('img');
+ hftimage.src="images/demo/hft_logo.jpg";
+ hftimage.alt="Logo der Hochschule für Technik Stuttgart";
+ hftimage.height= '75';
+ hftlink.appendChild(hftimage);
+ containerdiv.appendChild(hftlink);
+ let contactdiv = document.createElement('div');
+ contactdiv.classList.add("col-md-3", "footer-unten")
+ contactdiv.setAttribute('style',"flex-basis:400px");
+ contactdiv.innerHTML="Hochschule für Technik Stuttgart";
+ let rowdiv = document.createElement('div');
+ rowdiv.classList.add("row");
+ for(let i = 0; i<hft_links.length; i++){
+ let coldiv = document.createElement('div');
+ coldiv.classList.add("col-md-3", "footer-unten");
+ let collink = document.createElement('a');
+ collink.innerHTML = hft_links[i].name;
+ collink.href = hft_links[i].url;
+ coldiv.appendChild(collink)
+ rowdiv.appendChild(coldiv);
+ }
+ contactdiv.appendChild(rowdiv);
+ containerdiv.appendChild(contactdiv);
+ let socialdiv = document.createElement('div');
+ socialdiv.classList.add("col-md-3");
+ socialdiv.setAttribute('style','flex-basis: 400px;');
+ let socialrow = document.createElement('div');
+ socialrow.id="socialmediabuttons";
+ for(let j = 0; j< socialmedias.length; j++){
+ let sociallink = document.createElement('a');
+ sociallink.href = socialmedias[j].url;
+ let socialcontent = document.createElement('i');
+ socialcontent.classList.add("fab", socialmedias[j].name);
+ sociallink.appendChild(socialcontent);
+ socialrow.appendChild(sociallink);
+ }
+ socialdiv.appendChild(socialrow);
+ containerdiv.appendChild(socialdiv);
+ let imagediv = document.createElement('div');
+ imagediv.classList.add("col-md-3");
+ imagediv.setAttribute("style", "flex-basis:400px;");
+ for (let k = 0; k< footer_images.length; k++){
+ let image = document.createElement('img');
+ image.src = footer_images[k].src;
+ image.width="100";
+ image.height= "50";
+ image.alt = footer_images[k].alt;
+ imagediv.appendChild(image);
+ }
+ containerdiv.appendChild(imagediv);
+ footerdiv.appendChild(containerdiv);
+ document.body.appendChild(footerdiv);
+};
+
+
+head();
+foot();