diff --git a/style/freibier.css~ b/style/freibier.css~
new file mode 100644
index 0000000..99e06d6
--- /dev/null
+++ b/style/freibier.css~
@@ -0,0 +1,280 @@
+body	{background: #E8E8E8;         
+	font-family: 'HKGroteskRegular';
+        font-weight: normal;
+        font-style: normal; 
+        font-size: 100%;}
+p	{color: black; 
+	font-family: 'HKGroteskRegular';
+	font-weight: normal;
+	font-style: normal; 
+	font-size: 100%;
+	display: block; } 
+h1	{color: black; 
+        font-family: 'HKGroteskRegular';
+        font-weight: bold;
+        font-style: normal; 
+        font-size: 150%;}
+h2      {color: black; 
+        font-family: 'HKGroteskRegular';
+        font-weight: bold;
+        font-style: normal; 
+        font-size: 130%;
+	padding-top: 3em; 
+	text-transform: uppercase;}
+h3      {color: black; 
+        font-family: 'HKGroteskRegular';
+        font-weight: bold;
+        font-style: normal; 
+        font-size: 110%; }
+a:link  {text-decoration: none; font-family: 'HKGroteskBold'; color: fuchsia; }
+a:visited  {text-decoration: none;font-family: 'HKGroteskBold'; color: purple; }
+a:hover  {text-decoration: none; font-family: 'HKGroteskBold'; color: navy; }
+a:active  {text-decoration: none; font-family: 'HKGroteskBold'; color: navy; }
+td	{color: black; 
+        font-family: 'HKGroteskRegular';
+        font-weight: normal;
+        font-style: normal; 
+        font-size: 100%;
+        text-align: left; }
+th      {color: black; 
+        font-family: 'HKGroteskRegular';
+        font-weight: normal;
+        font-style: normal; 
+        font-size: 100%; 
+	text-align: left; }
+input	{color: grey; 
+        font-family: 'HKGroteskRegular';
+        font-weight: normal;
+        font-style: normal; 
+        font-size: 100%; }
+pre     {color: grey; 
+        font-family: 'HKGroteskRegular';
+        font-weight: normal;
+        font-style: normal; 
+        font-size: 100%; }
+strong {font-family: 'HKGroteskBold'; }
+#wrapper {background: white;
+      	display: block; 
+	margin: 0 auto; 
+ 	margin-left: auto;
+  	margin-right: auto;
+  	width: 80%;}
+.footer {position: static;
+  	left: 0;
+  	bottom: 0;
+    	background-color: grey;
+	width: 100%;
+  	color: white;
+	text-align: center;}
+	
+.footer a:link  { text-decoration: none; color: white; }
+.footer a:visited  { text-decoration: none; color: white; }
+.footer a:hover  { text-decoration: underline; color: navy; }
+.footer a:active  { text-decoration: underline; color: fuchsia; }
+
+.none {display: none;}
+
+.bold {font-family: HKGroteskBold;}
+
+.logo {
+	background-color: grey;
+	width: 100%;
+	height: auto;
+	display: flex; 
+    	justify-content: center; 
+    	align-items: center;
+	position: relative;}
+
+.column {
+  float: left;
+}
+
+.left {
+  width: 42%;
+  padding-left: 15%;
+  padding-right: 8%;
+}
+
+.right {
+  width: 15%;
+  padding-left: 5%;
+  padding-right: 15%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Centered text */
+.centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2vw;
+  color: lime; 
+  font-family: 'HKGroteskRegular';
+  font-weight: normal;
+  font-style: normal; }
+
+/* header */
+
+.header {
+  background-color: #fff;
+  display: block;
+  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
+  position: relative;
+  width: inherit;
+  color: black; 
+  font-family: 'HKGroteskRegular';
+  font-weight: normal;
+  font-style: normal; 
+  font-size: 100%;
+  padding:0px;
+}
+
+.header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.header li a {
+  font-family: 'HKGroteskRegular';
+  display: block;
+  padding: 1em 1em;
+  border-right: 1px solid #f4f4f4;
+  text-decoration: none;
+}
+
+
+.header li a:hover,
+.header .menu-btn:hover {
+  font-family: 'HKGroteskRegular';
+  background-color: #f4f4f4;
+  text-decoration: underline; color: navy;
+}
+
+.header .logo {
+  display: block;
+  float: left;
+  font-size: 2em;
+  padding: 2em 10em;
+  text-decoration: none;
+}
+
+/* menu */
+
+.header .menu {
+  clear: both;
+  max-height: 0;
+  transition: max-height .2s ease-out;
+}
+
+/* menu icon */
+
+.header .menu-icon {
+  cursor: pointer;
+  display: inline-block;
+  float: right;
+  padding: 28px 20px;
+  position: relative;
+  user-select: none;
+}
+
+.header .menu-icon .navicon {
+  background: #333;
+  display: block;
+  height: 2px;
+  position: relative;
+  transition: background .2s ease-out;
+  width: 18px;
+}
+
+.header .menu-icon .navicon:before,
+.header .menu-icon .navicon:after {
+  background: #333;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  transition: all .2s ease-out;
+  width: 100%;
+}
+
+.header .menu-icon .navicon:before {
+  top: 5px;
+}
+
+.header .menu-icon .navicon:after {
+  top: -5px;
+}
+
+/* menu btn */
+
+.header .menu-btn {
+  display: none;
+}
+
+.header .menu-btn:checked ~ .menu {
+  max-height: 240px;
+}
+
+.header .menu-btn:checked ~ .menu-icon .navicon {
+  background: transparent;
+}
+
+.header .menu-btn:checked ~ .menu-icon .navicon:before {
+  transform: rotate(-45deg);
+}
+
+.header .menu-btn:checked ~ .menu-icon .navicon:after {
+  transform: rotate(45deg);
+}
+
+.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
+.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
+  top: 0;
+}
+
+@media (min-width: 54em) {
+  .header li {
+    float: left;
+  }
+  .header li a {
+    color: black;
+    padding: 20px 40px;
+  }
+  .header .menu {
+    clear: none;
+    float: right;
+    max-height: none;
+  }
+  .header .menu-icon {
+    display: none;
+  }
+}
+@media (max-width: 54em) {
+  .column {
+    width: 94%;
+  }
+  .centered {
+    display: none;
+  }
+  .left{
+  padding-left: 3%;
+  padding-right: 3%;
+  }
+  .right{
+  padding-left: 3%;
+  padding-right: 3%;
+  }
+  #wrapper{
+  width: 95%;
+  }
+}
diff --git a/template.html b/template.html
new file mode 100644
index 0000000..fb3b8fd
--- /dev/null
+++ b/template.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>freibier.cc</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" media="screen" href="https://freibier.cc/style/fonts/HKGrotesk_2466/hk-grotesk.css" type="text/css"/>
+    <link rel="stylesheet" href="./style/freibier.css">
+  </head>
+  <body>
+<div id="wrapper">
+
+<div class="header">
+  <input class="menu-btn" type="checkbox" id="menu-btn" />
+  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+  <ul class="menu">
+    <li><a href="/mhd/">Rezepte</a></li>
+    <li><a href="/shop/">Shop</a></li>
+    <li><a href="/diveers/">Wer wir sind</a></li>
+    <li><a href="/blog/">Blog</a></li>
+  </ul>
+</div>
+
+	<div class="logo">
+		<img src="img/logo_freibier_cc_w.svg" alt="freibier.cc">
+		 <div class="centered">frei gebraut – frei verfügbar – frei verkäuflich</div>
+	</div>
+
+<div class="row">
+  <div class="column left">
+    <h2>Title links </h2>
+    <p> Text </p>
+  </div>
+  <div class="column right">
+    <h2> Title rechts </h2>
+    <p> Text </p>
+  </div>
+</div>
+
+	<div class="footer"><p><a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutzerklärung</a></p></div>
+</div>
+</body>
+</html>
diff --git a/werwirsind.html b/werwirsind.html
new file mode 100644
index 0000000..fb3b8fd
--- /dev/null
+++ b/werwirsind.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>freibier.cc</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" media="screen" href="https://freibier.cc/style/fonts/HKGrotesk_2466/hk-grotesk.css" type="text/css"/>
+    <link rel="stylesheet" href="./style/freibier.css">
+  </head>
+  <body>
+<div id="wrapper">
+
+<div class="header">
+  <input class="menu-btn" type="checkbox" id="menu-btn" />
+  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+  <ul class="menu">
+    <li><a href="/mhd/">Rezepte</a></li>
+    <li><a href="/shop/">Shop</a></li>
+    <li><a href="/diveers/">Wer wir sind</a></li>
+    <li><a href="/blog/">Blog</a></li>
+  </ul>
+</div>
+
+	<div class="logo">
+		<img src="img/logo_freibier_cc_w.svg" alt="freibier.cc">
+		 <div class="centered">frei gebraut – frei verfügbar – frei verkäuflich</div>
+	</div>
+
+<div class="row">
+  <div class="column left">
+    <h2>Title links </h2>
+    <p> Text </p>
+  </div>
+  <div class="column right">
+    <h2> Title rechts </h2>
+    <p> Text </p>
+  </div>
+</div>
+
+	<div class="footer"><p><a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutzerklärung</a></p></div>
+</div>
+</body>
+</html>
diff --git a/werwirsind.html~ b/werwirsind.html~
new file mode 100644
index 0000000..44a0241
--- /dev/null
+++ b/werwirsind.html~
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>freibier.cc</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" media="screen" href="https://freibier.cc/style/fonts/HKGrotesk_2466/hk-grotesk.css" type="text/css"/>
+    <link rel="stylesheet" href="./style/freibier.css">
+  </head>
+  <body>
+<div id="wrapper">
+
+<div class="header">
+  <input class="menu-btn" type="checkbox" id="menu-btn" />
+  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+  <ul class="menu">
+    <li><a href="/mhd/">Rezepte</a></li>
+    <li><a href="/shop/">Shop</a></li>
+    <li><a href="/diveers/">Wer wir sind</a></li>
+    <li><a href="/blog/">Blog</a></li>
+  </ul>
+</div>
+
+	<div class="logo">
+		<img src="img/logo_freibier_cc_w.svg" alt="freibier.cc">
+		 <div class="centered">frei gebraut – frei verfügbar – frei verkäuflich</div>
+	</div>
+
+<div class="row">
+  <div class="column left">
+    <h2>Willkommwn bei Freibier.cc</h2>
+    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <h2>Brauen im Waschraum <br /> - wie alles begann </h2>
+    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  </div>
+  <div class="column right">
+    <h2>Brauen im Waschraum <br /> - wie alles begann </h2>
+    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  </div>
+</div>
+
+	<div class="footer"><p><a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutzerklärung</a></p></div>
+</div>
+</body>
+</html>
diff --git a/wieallesbegann.html b/wieallesbegann.html
new file mode 100644
index 0000000..3c6ad09
--- /dev/null
+++ b/wieallesbegann.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>freibier.cc</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" media="screen" href="https://freibier.cc/style/fonts/HKGrotesk_2466/hk-grotesk.css" type="text/css"/>
+    <link rel="stylesheet" href="./style/freibier.css">
+  </head>
+  <body>
+<div id="wrapper">
+
+<div class="header">
+  <input class="menu-btn" type="checkbox" id="menu-btn" />
+  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+  <ul class="menu">
+    <li><a href="/mhd/">Rezepte</a></li>
+    <li><a href="/shop/">Shop</a></li>
+    <li><a href="/diveers/">Wer wir sind</a></li>
+    <li><a href="/blog/">Blog</a></li>
+  </ul>
+</div>
+
+	<div class="logo">
+		<img src="img/logo_freibier_cc_w.svg" alt="freibier.cc">
+		 <div class="centered">frei gebraut – frei verfügbar – frei verkäuflich</div>
+	</div>
+
+<div class="row">
+  <div class="column left">
+    <h2>Wie alles begann <br />- brauen im Waschraum </h2>
+    <p> Text </p>
+  </div>
+  <div class="column right">
+    <h2> Title rechts </h2>
+    <p> Text </p>
+  </div>
+</div>
+
+	<div class="footer"><p><a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutzerklärung</a></p></div>
+</div>
+</body>
+</html>
diff --git a/wieallesbegann.html~ b/wieallesbegann.html~
new file mode 100644
index 0000000..fb3b8fd
--- /dev/null
+++ b/wieallesbegann.html~
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>freibier.cc</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" media="screen" href="https://freibier.cc/style/fonts/HKGrotesk_2466/hk-grotesk.css" type="text/css"/>
+    <link rel="stylesheet" href="./style/freibier.css">
+  </head>
+  <body>
+<div id="wrapper">
+
+<div class="header">
+  <input class="menu-btn" type="checkbox" id="menu-btn" />
+  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
+  <ul class="menu">
+    <li><a href="/mhd/">Rezepte</a></li>
+    <li><a href="/shop/">Shop</a></li>
+    <li><a href="/diveers/">Wer wir sind</a></li>
+    <li><a href="/blog/">Blog</a></li>
+  </ul>
+</div>
+
+	<div class="logo">
+		<img src="img/logo_freibier_cc_w.svg" alt="freibier.cc">
+		 <div class="centered">frei gebraut – frei verfügbar – frei verkäuflich</div>
+	</div>
+
+<div class="row">
+  <div class="column left">
+    <h2>Title links </h2>
+    <p> Text </p>
+  </div>
+  <div class="column right">
+    <h2> Title rechts </h2>
+    <p> Text </p>
+  </div>
+</div>
+
+	<div class="footer"><p><a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutzerklärung</a></p></div>
+</div>
+</body>
+</html>