david/FrontendDavid
0
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

meow

Browse source
This commit is contained in:
Naumann 2020-06-05 12:54:44 +02:00
parent 14ae5f284f
commit 3eedb66984
2 changed files with 159 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
Katalog.htm Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Katalog</title>
<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />
</head>
<body>
<div class="Titel">
<h1>Katalog</h1>
</div>
<div class="Eingabe">
<h2>Eingabe</h2>
<textarea name="Titel" id="text" placeholder="Titel"></textarea>
<textarea name="Author" id="text" placeholder="Author"></textarea>
<textarea name="Country" id="text" placeholder="Country"></textarea>
<textarea name="Linnk" id="text" placeholder="Link"></textarea>
<textarea name="Language" id="text" placeholder="Language"></textarea>
<textarea name="Pages" id="text" placeholder="Pages"></textarea>
<textarea name="Year" id="text" placeholder="Year"></textarea>
<textarea name="Category" id="text" placeholder="Category"></textarea>
<textarea name="ImageLink" id="text" placeholder="ImageLink"></textarea>
<textarea name="LendTime" id="text" placeholder="LendTime"></textarea>
<textarea name="LendType" id="text" placeholder="LendType"></textarea>
<button id="go">Go</button>
</div>
<div class="Ausgabe">
<h2>Ausgabe</h2>
<table>
<tr>
<td class ="fix">ProductId</td>
<td>1</td>
</tr>
<tr>
<td class="fix">Titel</td>
<td>Die Bibel 2</td>
</tr>
<tr>
<td class="fix">Author</td>
<td>Mr. IchBinEinAuthor</td>
</tr>
<tr>
<td class="fix">Contry</td>
<td>Atlantis</td>
</tr>
<tr>
<td class="fix">Link</td>
<td>lmgtfy.de</td>
</tr>
<tr>
<td class="fix">Language</td>
<td>latein</td>
</tr>
<tr>
<td class="fix">Pages</td>
<td>42</td>
</tr>
<tr>
<td class="fix">Year</td>
<td>2021</td>
</tr>
<tr>
<td class="fix">Category</td>
<td>Dies ist ein Beispiel für einen viiiiiiiiiiiiiiiiieeeeeeeeeeeeeeeellllllllllllllllllll zzzzzuuuuuuuuu llllllllllllaaaaaaaaannnnnnnnnnggeeeeeeeennnnnnn TTTTTTeeeeeeeeeeeeeeexxxxxxxxxxxxt</td>
</tr>
<tr>
<td class="fix">ImageLink</td>
<td>DiesIstEinBild.png</td>
</tr>
<tr>
<td class="fix">LendTime</td>
<td>30</td>
</tr>
<tr>
<td class="fix">LendType</td>
<td>Buch</td>
</tr>
</table>
</div>
</body>
</html>

75
scss/style.scss Normal file
View file

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