diff --git a/Katalog.htm b/Katalog.htm
new file mode 100644
index 0000000..0865708
--- /dev/null
+++ b/Katalog.htm
@@ -0,0 +1,84 @@
+
+
+
+
+
+ Katalog
+
+
+
+
+
Katalog
+
+
+
+
Eingabe
+
+
+
+
+
+
+
+
+
+
+
+
+ Go
+
+
+
Ausgabe
+
+
+ ProductId
+ 1
+
+
+ Titel
+ Die Bibel 2
+
+
+ Author
+ Mr. IchBinEinAuthor
+
+
+ Contry
+ Atlantis
+
+
+ Link
+ lmgtfy.de
+
+
+ Language
+ latein
+
+
+ Pages
+ 42
+
+
+ Year
+ 2021
+
+
+ Category
+ Dies ist ein Beispiel für einen viiiiiiiiiiiiiiiiieeeeeeeeeeeeeeeellllllllllllllllllll zzzzzuuuuuuuuu llllllllllllaaaaaaaaannnnnnnnnnggeeeeeeeennnnnnn TTTTTTeeeeeeeeeeeeeeexxxxxxxxxxxxt
+
+
+ ImageLink
+ DiesIstEinBild.png
+
+
+ LendTime
+ 30
+
+
+ LendType
+ Buch
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index aceb69e..62740fa 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,9 @@
Bücherwurm WebInterface
-
-
-
+
+
diff --git a/scss/main.css b/scss/main.css
new file mode 100644
index 0000000..cda7952
--- /dev/null
+++ b/scss/main.css
@@ -0,0 +1,17 @@
+body {
+ background-color: bisque;
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: (1fr)[5];
+ grid-template-columns: repeat(5, 1fr);
+ grid-gap: 20px;
+ -ms-grid-row: 5;
+ grid-row: 5;
+ padding-left: 1%;
+ padding-right: 1%;
+}
+
+h1 {
+ text-align: center;
+}
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/scss/main.css.map b/scss/main.css.map
new file mode 100644
index 0000000..783b17a
--- /dev/null
+++ b/scss/main.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "AAAA,AAAA,IAAI,CAAA;EACA,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,QAAQ,EAAE,IAAI;EACd,QAAQ,EAAE,CAAC;EACX,YAAY,EAAE,EAAE;EAChB,aAAa,EAAG,EAAE;CACrB;;AACD,AAAA,EAAE,CAAA;EACE,UAAU,EAAE,MAAM;CACrB",
+ "sources": [
+ "main.scss"
+ ],
+ "names": [],
+ "file": "main.css"
+}
\ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
index 3a02ffe..f54db83 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,3 +1,13 @@
-.theme-1 {
- background-color: #ddd333;
-}
\ No newline at end of file
+body{
+ background-color: bisque;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-gap: 20px;
+ grid-row: 5;
+ padding-left: 1%;
+ padding-right: 1%;
+}
+h1{
+ text-align: center;
+}
+
diff --git a/scss/menu.css b/scss/menu.css
new file mode 100644
index 0000000..8787ae6
--- /dev/null
+++ b/scss/menu.css
@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=menu.css.map */
\ No newline at end of file
diff --git a/scss/menu.css.map b/scss/menu.css.map
new file mode 100644
index 0000000..5403b2e
--- /dev/null
+++ b/scss/menu.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "",
+ "sources": [
+ "menu.scss"
+ ],
+ "names": [],
+ "file": "menu.css"
+}
\ No newline at end of file
diff --git a/scss/style.css b/scss/style.css
new file mode 100644
index 0000000..85d4c1b
--- /dev/null
+++ b/scss/style.css
@@ -0,0 +1,85 @@
+body {
+ background-color: bisque;
+ display: -ms-grid;
+ display: grid;
+ -ms-grid-columns: (1fr)[5];
+ grid-template-columns: repeat(5, 1fr);
+ grid-gap: 20px;
+ -ms-grid-row: 5;
+ grid-row: 5;
+ padding-left: 1%;
+ padding-right: 1%;
+}
+
+.Titel {
+ text-align: center;
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 5;
+ grid-column: 1 / 6;
+ -ms-grid-row: 1;
+ grid-row: 1;
+}
+
+.Eingabe {
+ -ms-grid-column: 1;
+ -ms-grid-column-span: 2;
+ grid-column: 1 / 3;
+ -ms-grid-row: 2;
+ -ms-grid-row-span: 4;
+ grid-row: 2/6;
+ background-color: lightgrey;
+ border: 1px solid black;
+}
+
+.Eingabe #go {
+ margin-left: 40%;
+ margin-top: 5%;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ width: 100px;
+ height: 30px;
+}
+
+.Ausgabe {
+ -ms-grid-column: 3;
+ -ms-grid-column-span: 3;
+ grid-column: 3 / 6;
+ -ms-grid-row: 2;
+ -ms-grid-row-span: 4;
+ grid-row: 2/6;
+ background-color: lightgray;
+ border: 1px solid black;
+}
+
+h2, h1 {
+ text-align: center;
+}
+
+textarea {
+ resize: none;
+ overflow: auto;
+ width: 90%;
+ height: 3%;
+ margin-left: 5%;
+}
+
+table {
+ margin-left: 3%;
+ margin-right: 3%;
+ scroll-behavior: auto;
+}
+
+table td, table tr {
+ border: 1px solid black;
+}
+
+table .fix .headcol {
+ position: absolute;
+ width: 5em;
+ left: 0;
+ top: auto;
+ border-top-width: 1px;
+ margin-top: -1px;
+}
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/scss/style.css.map b/scss/style.css.map
new file mode 100644
index 0000000..f5471e8
--- /dev/null
+++ b/scss/style.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "AAAA,AAAA,IAAI,CACA;EACI,gBAAgB,EAAE,MAAM;EACxB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,QAAQ,EAAE,IAAI;EACd,QAAQ,EAAE,CAAC;EACX,YAAY,EAAE,EAAE;EAChB,aAAa,EAAG,EAAE;CAErB;;AACL,AAAA,MAAM,CACF;EACI,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,CAAC;CAGd;;AACL,AAAA,QAAQ,CACJ;EACI,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,GAAG;EACb,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,eAAe;CAS1B;;AAdL,AAMQ,QANA,CAMA,GAAG,CACH;EACI,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,IAAI;CACf;;AAGT,AAAA,QAAQ,CACJ;EACI,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,GAAG;EACb,gBAAgB,EAAE,SAAS;EAC3B,MAAM,EAAE,eAAe;CAC1B;;AACL,AAAA,EAAE,EAAC,EAAE,CACD;EACA,UAAU,EAAE,MAAM;CACjB;;AAEL,AAAA,QAAQ,CACJ;EACA,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,EAAE;EACV,WAAW,EAAE,EAAE;CACd;;AAEL,AAAA,KAAK,CAAA;EACD,WAAW,EAAE,EAAE;EACf,YAAY,EAAE,EAAE;EAChB,eAAe,EAAE,IAAI;CAgBxB;;AAnBD,AAII,KAJC,CAID,EAAE,EAJN,KAAK,CAIG,EAAE,CACN;EACI,MAAM,EAAE,eAAe;CAC1B;;AAPL,AAUQ,KAVH,CAQD,IAAI,CAEA,QAAQ,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,GAAG;EACV,IAAI,EAAE,CAAC;EACP,GAAG,EAAE,IAAI;EACT,gBAAgB,EAAE,GAAG;EACrB,UAAU,EAAE,IAAI;CACjB",
+ "sources": [
+ "style.scss"
+ ],
+ "names": [],
+ "file": "style.css"
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..2da3973
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,76 @@
+body
+ {
+ background-color: bisque;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-gap: 20px;
+ grid-row: 5;
+ padding-left: 1%;
+ padding-right: 1%;
+
+ }
+.Titel
+ {
+ text-align: center;
+ grid-column: 1 / 6;
+ grid-row: 1;
+ //background-color: lightgreen;
+
+ }
+.Eingabe
+ {
+ grid-column: 1 / 3;
+ grid-row: 2/6;
+ background-color: lightgrey;
+ border: 1px solid black;
+ #go
+ {
+ margin-left: 40%;
+ margin-top: 5%;
+ align-items: center;
+ width: 100px;
+ height: 30px;
+ }
+ }
+
+.Ausgabe
+ {
+ grid-column: 3 / 6;
+ grid-row: 2/6;
+ background-color: lightgray;
+ border: 1px solid black;
+ }
+h2,h1
+ {
+ text-align: center;
+ }
+
+textarea
+ {
+ resize: none;
+ overflow: auto;
+ width: 90%;
+ height: 3%;
+ margin-left: 5%;
+ }
+
+table{
+ margin-left: 3%;
+ margin-right: 3%;
+ scroll-behavior: auto;
+ td, tr
+ {
+ border: 1px solid black;
+ }
+ .fix
+ {
+ .headcol {
+ position: absolute;
+ width: 5em;
+ left: 0;
+ top: auto;
+ border-top-width: 1px;
+ margin-top: -1px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/scss/tables.css b/scss/tables.css
new file mode 100644
index 0000000..ad87c53
--- /dev/null
+++ b/scss/tables.css
@@ -0,0 +1 @@
+/* No CSS *//*# sourceMappingURL=tables.css.map */
\ No newline at end of file
diff --git a/scss/tables.css.map b/scss/tables.css.map
new file mode 100644
index 0000000..c53e20a
--- /dev/null
+++ b/scss/tables.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "",
+ "sources": [
+ "tables.scss"
+ ],
+ "names": [],
+ "file": "tables.css"
+}
\ No newline at end of file