vesper/freibier.ccHomepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Pulled changes from online

Browse source
This commit is contained in:
sven 2020-12-09 13:52:40 +01:00
parent 96b40656d9
commit acc77aff2b
3 changed files with 356 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
index.html Normal file
View file

@ -0,0 +1,63 @@
<!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://test.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>Willkommen bei Freibier.cc</h2>
<p>Wir sind zwei Regensburger Brauer, die es sich zur Aufgabe gemacht haben freies Bier zu brauen. Das heißt, wir veröffentlichen alle unsere Rezepte und Protokolle online.</p>
<p>Hier kannst Du nachschauen, welche Rohstoffe wir für welches Bier verwendet haben: Welches Malz, welcher Hopfen, welcher Hefestamm und wieviel genau wovon.
Du kannst jedes unserer Rezepte auch selbst nachbrauen. Scanne einfach den Code auf einer unserer Flaschen, oder folge dem Link auf der Flasche
(zusammengesetzt aus <a href="https://frbr.cc/mhd/">https://frbr.cc/mhd/</a> und dem Mindesthaltbarkeitsdatum),
und Du erfährst chargengenau, wie Dein Bier gebraut wurde.</p>
<p>Ein Programmierer würde sagen unser Produkt ist open source. <br />
Ein Verbraucherschützer würde es transparent nennen. <br />
Wir sagen es ist frei: <strong>frei gebraut - frei verfügbar - frei verkäuflich. Und lecker!</strong></p>
<h2>Brauen im Waschraum <br /> - wie alles begann </h2>
<p>Vor drei Jahren suchte ich einen trockenen Lagerraum. Als ich ein Angebot
besichtigte, begleitete mich Michael. Es handelte sich um den Waschraum der
ehemaligen Tierfuttermittelfabrik im Regensburger Hafen .
Als wir in dem komplett
gefliesten Raum mit abgemauerter Duschwanne standen, meinte Michael:“Das ist
kein Lagerraum, das ist eine Brauerei. “Innerhalb weniger Tage war alles mit unseren
Lebensgefährtinnen und dem Vermieter abgeklärt. Wir haben dann das nötige
Equipment besorgt und die Waschraumbrauerei in Betrieb genommen .</p>
<p>> jetzt <a href="wieallesbegann.html">weiterlesen...</a></p>
</div>
<div class="column right">
<h2>Aktuelles </h2>
<p>In Kürze beginnen wir mit dem Verkauf unserer Produkte. Dann findet ihr hier aktuelle Informationen zu unseren Bieren, Events und Geschichten rund ums Bier.</p>
<h2>Händler </h2>
<p>In Kürze beginnen wir mit dem Verkauf unserer Produkte. Dann listen wir hier die Händler, bei denen ihr unsere Biere beziehen könnt.</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>

280
style/freibier.css Normal file
View file

@ -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%;
}
}

18
style/freibier.css~
View file

@ -18,17 +18,18 @@ h2 {color: black;
font-family: 'HKGroteskRegular';
font-weight: bold;
font-style: normal;
font-size: 130%;
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: underline; color: fuchsia; }
a:visited { text-decoration: underline; color: purple; }
a:hover { text-decoration: underline; color: navy; }
a:active { text-decoration: underline; color: navy; }
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;
@ -51,6 +52,7 @@ pre {color: grey;
font-weight: normal;
font-style: normal;
font-size: 100%; }
strong {font-family: 'HKGroteskBold'; }
#wrapper {background: white;
display: block;
margin: 0 auto;
@ -70,6 +72,10 @@ pre {color: grey;
.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%;
@ -139,6 +145,7 @@ pre {color: grey;
}
.header li a {
font-family: 'HKGroteskRegular';
display: block;
padding: 1em 1em;
border-right: 1px solid #f4f4f4;
@ -148,6 +155,7 @@ pre {color: grey;
.header li a:hover,
.header .menu-btn:hover {
font-family: 'HKGroteskRegular';
background-color: #f4f4f4;
text-decoration: underline; color: navy;
}