Add style to index page
This commit is contained in:
@ -107,9 +107,13 @@ if ($path == '') {
|
||||
<title>Mandanten - Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
|
||||
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
|
||||
<link rel="stylesheet" href="/res/style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Mandanten</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h3>Mandanten</h3>
|
||||
<p style="text-align: center;"><a href="/">Startseite</a></p>
|
||||
<table>
|
||||
<thead><tr><th>Name</th></tr></thead>
|
||||
<tbody>
|
||||
@ -118,7 +122,9 @@ if ($path == '') {
|
||||
} ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><a href="clients?format=json">JSON-Format</a></p>
|
||||
<p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<?php }
|
||||
|
||||
@ -116,9 +116,13 @@ if ($format === 'json') {
|
||||
<title>Downloads - Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
|
||||
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
|
||||
<link rel="stylesheet" href="/res/style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Downloads</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h3>Downloads</h3>
|
||||
<p style="text-align: center;"><a href="/">Startseite</a></p>
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Größe</th><th>Änderungsdatum</th></tr></thead>
|
||||
<tbody>
|
||||
@ -127,7 +131,9 @@ if ($format === 'json') {
|
||||
} ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<p><a href="files?format=json">JSON-Format</a></p>
|
||||
<p style="text-align: center;"><a href="?format=json">JSON-Format</a></p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<?php }
|
||||
|
||||
@ -5,27 +5,79 @@
|
||||
<title>Elwig - Elektronische Winzergenossenschaftsverwaltung</title>
|
||||
<link rel="icon" href="/favicon.ico" sizes="16x16 20x20 24x24 30x30 32x32 36x36 40x40 48x48 60x60 64x64 72x72 80x80 96x96 128x128 256x256"/>
|
||||
<link rel="stylesheet" href="/res/style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<div>
|
||||
<a href="https://elwig.at/"><img src="/res/elwig.png" alt="Elwig Logo"/></a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="/"><img src="/res/elwig.png" alt="Elwig Logo"/></a></li>
|
||||
<li><a href="/#">Start</a></li>
|
||||
<li><a href="/#über">Über</a></li>
|
||||
<li><a href="/#genossenschaften">Genossenschaften</a></li>
|
||||
<li><a href="/files/">Downloads</a></li>
|
||||
<li><a href="https://git.necronda.net/winzer/">Quellcode</a></li>
|
||||
</ul>
|
||||
<div/>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="home background">
|
||||
<a href="#über">
|
||||
<div>
|
||||
<img src="/res/elwig.png" alt="Elwig"/>
|
||||
<div style="max-width: 16em;">
|
||||
<h1>Elwig</h1>
|
||||
<h2>Elektronische Winzergenossenschaftsverwaltung</h2>
|
||||
<h2>Elektronische Winzer­genossenschafts­verwaltung</h2>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section class="about">
|
||||
<span id="über"/>
|
||||
<h3>Elwig</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore etdolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="picture-1"/>
|
||||
|
||||
<section class="clients">
|
||||
<span id="genossenschaften"/>
|
||||
<h3>Die Genossenschaften</h3>
|
||||
<p>
|
||||
<a href="/clients">Mandanten</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="picture-2"/>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<a href="/" class="img"><img src="/res/elwig.png" alt="Elwig"/></a>
|
||||
<p class="copyright">Copyright © 2024 Lorenz Stechauner</p>
|
||||
<a href="https://elwig.at/"><img src="/res/elwig.png" alt="Elwig"/></a>
|
||||
<p>
|
||||
<strong>Impressum</strong><br/>
|
||||
Lorenz Stechauner, Thomas Hilscher<br/>
|
||||
Österreich (Austria)<br/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Kontakt</strong><br/>
|
||||
E-Mail: <a href="mailto:contact@necronda.net">contact@necronda.net</a><br/>
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
www/res/images/Italien-1.jpg
Normal file
BIN
www/res/images/Italien-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
BIN
www/res/images/Italien-2.jpg
Normal file
BIN
www/res/images/Italien-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
BIN
www/res/images/Italien-3.jpg
Normal file
BIN
www/res/images/Italien-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
@ -1,7 +1,11 @@
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: 'Arial', sans-serif;
|
||||
box-sizing: border-box;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -15,6 +19,7 @@ header {
|
||||
height: 3em;
|
||||
border-bottom: 1px solid #C0C0C0;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
header img {
|
||||
@ -24,6 +29,13 @@ header img {
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav > *:first-child,
|
||||
nav > *:last-child {
|
||||
flex: 100px 1 1;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
@ -36,15 +48,183 @@ nav ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav li {
|
||||
|
||||
}
|
||||
|
||||
nav li a {
|
||||
text-decoration: none;
|
||||
padding: 1em;
|
||||
padding: 1em 2em;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
nav li a:hover {
|
||||
color: #A040C0;
|
||||
}
|
||||
|
||||
main span[id] {
|
||||
position: relative;
|
||||
top: -8em;
|
||||
}
|
||||
|
||||
p a {
|
||||
color: #A040C0;
|
||||
}
|
||||
|
||||
main .home {
|
||||
height: 100vh;
|
||||
background: url("/res/images/Italien-1.jpg") no-repeat bottom center fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
main .picture-1 {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: url("/res/images/Italien-2.jpg") no-repeat bottom center fixed;
|
||||
background-size: cover;
|
||||
height: 24em;
|
||||
}
|
||||
|
||||
main .picture-2 {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background: url("/res/images/Italien-3.jpg") no-repeat bottom center fixed;
|
||||
background-size: cover;
|
||||
height: 24em;
|
||||
}
|
||||
|
||||
main .home a {
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
top: calc(32vh - 1em);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main .home a > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
transition: top 0.25s, font-size 0.25s;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
backdrop-filter: blur(16px);
|
||||
padding: 1em 0.5em;
|
||||
border-radius: 3em;
|
||||
}
|
||||
|
||||
main .home a > div:hover {
|
||||
font-size: 1.675em;
|
||||
top: calc(32vh - 1.5em);
|
||||
}
|
||||
|
||||
main .home img {
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
}
|
||||
|
||||
main .home h1 {
|
||||
font-size: 3.5em;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
main .home h2 {
|
||||
font-size: 1.125em;
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main section {
|
||||
padding: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
main section p,
|
||||
main section table {
|
||||
max-width: 1000px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
main section p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
main section h3 {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
main .about {
|
||||
border-top: 1em solid #C0F080;
|
||||
border-bottom: 1em solid #C0F080;
|
||||
}
|
||||
|
||||
main .clients {
|
||||
border-top: 1em solid #C0F080;
|
||||
border-bottom: 1em solid #C0F080;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 0.125em 0.5em;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 8em;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
background-color: #404040;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
footer img {
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
footer a {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1032px) {
|
||||
nav li a {
|
||||
padding: 1em;
|
||||
}
|
||||
main section p,
|
||||
main section table {
|
||||
margin: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
footer {
|
||||
flex-direction: column;
|
||||
height: unset;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
footer > *:not(:first-child) {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.home {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
nav li:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
nav li:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
nav li:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user