diff --git a/Katalog.htm b/Katalog.htm
new file mode 100644
index 0000000..146d25d
--- /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/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..143e7ab
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,75 @@
+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%;
+ 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