Felix #1
2 changed files with 159 additions and 0 deletions
84
Katalog.htm
Normal file
84
Katalog.htm
Normal 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
75
scss/style.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue