Add initial HTML, CSS, and VSCode settings for the project
This commit is contained in:
parent
68a37aef17
commit
c41a14ef8f
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
89
login.html
Normal file
89
login.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#" aria-label="Startseite">
|
||||
<img class="logo" src="https://schmidts-backstuebchen.lms.backbuero.de/pluginfile.php/1/core_admin/logocompact/300x300/1783888825/Logo-SBS-4000px-PNG.png" alt="Schmidts Bestprogramm Logo">
|
||||
</a>
|
||||
|
||||
<div class="collapse navbar-collapse" id="mainNav">
|
||||
<ul class="navbar-nav ms-auto me-3 align-items-center gap-lg-2">
|
||||
<li class="nav-item"><a class="nav-link" href="#">Übersicht</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Bestellungen</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Retouren</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Kunden</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Berichte</a></li>
|
||||
</ul>
|
||||
<div class="d-flex gap-2">
|
||||
<a class="btn btn-outline-light" href="#">Hilfe</a>
|
||||
<a class="btn btn-danger" href="login.html">Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="page-content">
|
||||
<section class="wrapper container py-5">
|
||||
<div class="login-info">
|
||||
<p class="eyebrow">Serviceportal</p>
|
||||
<h2>Willkommen zurück!</h2>
|
||||
<p>Bitte loggen Sie sich ein, um fortzufahren.</p>
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<form action="login.php" method="post">
|
||||
<h2>Login</h2>
|
||||
<label for="username">Benutzername</label>
|
||||
<input id="username" type="text" name="username" placeholder="Benutzername" required>
|
||||
|
||||
<label for="password">Passwort</label>
|
||||
<input id="password" type="password" name="password" placeholder="Passwort" required>
|
||||
|
||||
<button type="submit">Anmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer mt-5">
|
||||
<div class="container py-4">
|
||||
<div class="row g-4 align-items-center">
|
||||
<div class="col-md-5 footer-brand">
|
||||
<img class="logo logo-small" src="https://www.webcore-consulting.de/assets/img/logo-white.svg" alt="Webcore Consulting Logo">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 footer-links">
|
||||
<h3>Navigation</h3>
|
||||
<a href="#">Bestellungen</a>
|
||||
<a href="#">Retouren</a>
|
||||
<a href="#">Support</a>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 footer-links">
|
||||
<h3>Kontakt</h3>
|
||||
<a href="mailto:service@schmidt.de">service@schmidt.de</a>
|
||||
<a href="tel:+490000000000">+49 000 000 000</a>
|
||||
<span>Mo–Fr, 08:00–18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom border-top mt-4 pt-3 text-center">
|
||||
<p class="mb-1">© 2026 Webcore Consulting</p>
|
||||
<p class="mb-0 small text-secondary">entwickelt von Webcore-Consulting</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
140
style.css
Normal file
140
style.css
Normal file
@ -0,0 +1,140 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f3f3f3;
|
||||
color: #222;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
max-width: 170px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.logo-small {
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.login-info {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 18px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 14px;
|
||||
background: #d93d3d;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background: #fff;
|
||||
padding: 30px 24px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.login-form form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.login-form input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.login-form input:focus {
|
||||
outline: 2px solid rgba(217, 61, 61, 0.2);
|
||||
border-color: #d93d3d;
|
||||
}
|
||||
|
||||
.login-form button {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 14px 18px;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: #101010;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-links h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.footer-links a,
|
||||
.footer-links span {
|
||||
color: #d3d3d3;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user