diff --git a/.brackets.json b/.brackets.json
new file mode 100644
index 0000000..63275cd
--- /dev/null
+++ b/.brackets.json
@@ -0,0 +1,13 @@
+{
+ "sass.enabled": false,
+ "path": {
+ "scss/*": {
+ "sass.enabled": true,
+ "sass.options": {
+ "outputDir": "../",
+ "sourceComments": false,
+ "outputStyle": "compressed"
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index eb9f903..31b2836 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
-# web-bey
+# Website for beyerstedt.de
-Simple static landing page for beyerstedt.de
\ No newline at end of file
+Simple static landing page using some hand-written HTML and CSS.
+No framework, no third-party resources, just a few KB of code.
+
+Because I'm a bit lazy, the CSS is generated from SASS code.
+Build the files in the `scss` directory and put the output in the root directory.
+(Deployment can omit the directory and just put the html and css files on a server.)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..23e13f8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Familie Beyerstedt
+
+
+
+
+
+
+ Familie Beyerstedt
+
+ Webseiten der Familienmitglieder
+
+
+ Services für die Familie
+
+
+
+
+
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..8a48c67
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,100 @@
+$footer_height: 55px;
+$footer_margin: 20px;
+$footer_paddingtop: 15px;
+$footer_paddingbtn: 10px;
+$body_maxwidth: 650px;
+
+html {
+ box-sizing: border-box;
+}
+* {
+ box-sizing: inherit;
+}
+
+body {
+ font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+ line-height: 1.5em;
+ margin: 0;
+ margin-bottom: $footer_height + $footer_margin + $footer_paddingtop + $footer_paddingbtn;
+}
+.container {
+ max-width: $body_maxwidth;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media all and (max-width: $body_maxwidth+2*8px) {
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+}
+
+html {
+ box-sizing: border-box;
+ position: relative;
+ min-height: 100%;
+}
+
+h1, h2, h3, h4 {
+ font-weight: 300;
+ line-height: 1.2em;
+}
+p, li {
+ line-height: 1.5em;
+}
+
+h1 {
+ padding: 30px 0;
+ font-size: 3em;
+ text-align: center;
+
+ @media all and (max-width: 450px) {
+ padding: 15px 0;
+ font-size: 2.2em;
+ }
+}
+
+
+main {
+ margin-top: 50px;
+}
+
+footer {
+ width: 100%;
+ height: $footer_height;
+
+ font-size: 0.8rem;
+ margin-top: $footer_margin;
+ padding-top: $footer_paddingtop;
+ padding-bottom: $footer_paddingbtn;
+ background-color: #bebebe;
+ color: #000;
+}
+
+footer .container {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -moz-flex;
+ display: -webkit-flex;
+ display: flex;
+
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ @media all and (max-width: 450px) {
+ flex-direction: column;
+ text-align: center;
+ }
+}
+
+/* make footer sticky */
+html {
+ position: relative;
+ min-height: 100%;
+}
+footer {
+ position: absolute;
+ bottom: 0;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..809e66b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,3 @@
+html {box-sizing:border-box}*{box-sizing:inherit}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5em;margin:0;margin-bottom:100px}.container{max-width:650px;margin-left:auto;margin-right:auto}@media all and (max-width: 666px){.container{margin-left:8px;margin-right:8px}}html {box-sizing:border-box;position:relative;min-height:100%}h1,h2,h3,h4{font-weight:300;line-height:1.2em}p,li{line-height:1.5em}h1{padding:30px 0;font-size:3em;text-align:center}@media all and (max-width: 450px){h1{padding:15px 0;font-size:2.2em}}main{margin-top:50px}footer{width:100%;height:55px;font-size:0.8rem;margin-top:20px;padding-top:15px;padding-bottom:10px;background-color:#bebebe;color:#000}footer .container{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}@media all and (max-width: 450px){footer .container{flex-direction:column;text-align:center}}html{position:relative;min-height:100%}footer{position:absolute;bottom:0}
+
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/style.css.map b/style.css.map
new file mode 100644
index 0000000..3c79941
--- /dev/null
+++ b/style.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "file": "style.css",
+ "sources": [
+ "scss/style.scss"
+ ],
+ "mappings": "GAMA,AAAA,MAAM,AAAA,CACJ,UAAU,CAAE,UAAW,CACxB,AACD,AAAA,CAAC,AAAC,CACA,UAAU,CAAE,OAAQ,CACrB,AAED,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,0KAA2K,CACxL,WAAW,CAAE,KAAM,CACnB,MAAM,CAAE,CAAE,CACV,aAAa,CAAE,KAAc,CAC9B,AACD,AAAA,UAAU,AAAC,CACT,SAAS,CAhBK,KAAK,CAiBnB,WAAW,CAAE,IAAK,CAClB,YAAY,CAAE,IAAK,CAMpB,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAL3B,AAAA,UAAU,AAAC,CAMP,WAAW,CAAE,GAAI,CACjB,YAAY,CAAE,GAAI,CAErB,CAED,AAAA,MAAM,AAAA,CACJ,UAAU,CAAE,UAAW,CACvB,QAAQ,CAAE,QAAS,CACnB,UAAU,CAAE,IAAK,CAClB,AAED,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,AAAC,CACb,WAAW,CAAE,GAAI,CACjB,WAAW,CAAE,KAAM,CACpB,AACD,AAAA,CAAC,CAAE,AAAA,EAAE,AAAC,CACJ,WAAW,CAAE,KAAM,CACpB,AAED,AAAA,EAAE,AAAC,CACD,OAAO,CAAE,MAAO,CAChB,SAAS,CAAE,GAAI,CACf,UAAU,CAAE,MAAO,CAMpB,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAL3B,AAAA,EAAE,AAAC,CAMC,OAAO,CAAE,MAAO,CAChB,SAAS,CAAE,KAAM,CAEpB,CAGD,AAAA,IAAI,AAAC,CACH,UAAU,CAAE,IAAK,CAClB,AAED,AAAA,MAAM,AAAC,CACL,KAAK,CAAE,IAAK,CACZ,MAAM,CA9DQ,IAAI,CAgElB,SAAS,CAAE,MAAO,CAClB,UAAU,CAhEI,IAAI,CAiElB,WAAW,CAhEO,IAAI,CAiEtB,cAAc,CAhEI,IAAI,CAiEtB,gBAAgB,CAAE,OAAQ,CAC1B,KAAK,CAAE,IAAK,CACb,AAED,AAAO,MAAD,CAAC,UAAU,AAAC,CAChB,OAAO,CAAE,WAAY,CACrB,OAAO,CAAE,QAAS,CAClB,OAAO,CAAE,WAAY,CACrB,OAAO,CAAE,SAAU,CACnB,OAAO,CAAE,YAAa,CACtB,OAAO,CAAE,IAAK,CAEd,cAAc,CAAE,GAAI,CACpB,iBAAiB,CAAE,IAAK,CACxB,SAAS,CAAE,IAAK,CAChB,eAAe,CAAE,aAAc,CAMhC,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAb3B,AAAO,MAAD,CAAC,UAAU,AAAC,CAcd,cAAc,CAAE,MAAO,CACvB,UAAU,CAAE,MAAO,CAEtB,CAGD,AAAA,IAAI,AAAC,CACH,QAAQ,CAAE,QAAS,CACnB,UAAU,CAAE,IAAK,CAClB,AACD,AAAA,MAAM,AAAC,CACL,QAAQ,CAAE,QAAS,CACnB,MAAM,CAAE,CAAE,CACX",
+ "names": []
+}
\ No newline at end of file