First Implementation

2026-05-13 01:32:52 +02:00 · 2026-05-13 01:31:50 +02:00 · 2026-05-13 01:30:41 +02:00 · 2026-05-13 01:29:17 +02:00 · 2026-05-13 01:27:55 +02:00 · 2026-05-13 01:26:09 +02:00
7 changed files with 158 additions and 301 deletions
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -1,183 +1,179 @@
 /* ====================================
   RESET
 ==================================== */
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
-/* ====================================
+  /* =========================
-   BODY
+     Farben
-==================================== */
+  ========================= */
 body {
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2937;
  line-height: 1.6;
-  background: linear-gradient(
+  :root {
-          135deg,
+    --bg: #eef2f7;
-          #eef2ff,
+    --white: #ffffff;
          #f8fafc
  );
-  min-height: 100vh;
+    --nav: #1e293b;
    --nav-hover: #334155;
-  /* sorgt dafür, dass Footer unten bleibt */
+    --primary: #2563eb;
-  display: flex;
+    --primary-hover: #1d4ed8;
  flex-direction: column;
 }
-/* ====================================
+    --text: #1e293b;
-   NAVIGATION
+    --text-light: #64748b;
 ==================================== */
 nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
-  padding: 1.5rem;
+    --border: #dbe4ee;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
 }
 nav div a {
  display: block;
  text-decoration: none;
  background: #2563eb;
  color: white;
  padding: 0.9rem 1.4rem;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
 }
 nav div a:hover,
 nav div a:focus {
  background: #1d4ed8;
  transform: translateY(-2px);
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
 }
 /* ====================================
   MAIN
 ==================================== */
 main {
  flex: 1;
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
 }
 /* ====================================
   ÜBERSCHRIFT
 ==================================== */
 h1 {
  text-align: center;
  color: #1e3a8a;
  margin-bottom: 2rem;
  font-size: 2.2rem;
 }
 /* ====================================
   BILD
 ==================================== */
 img {
  display: block;
  margin: 0 auto 2rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
 }
 /* ====================================
   TEXT
 ==================================== */
 p {
  font-size: 1.05rem;
 }
 /* ====================================
   FOOTER
 ==================================== */
 footer {
  background: #1e293b;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
 }
 footer a {
  color: white;
  text-decoration: none;
 }
 footer a:hover,
 footer a:focus {
  text-decoration: underline;
  outline: 2px solid white;
  outline-offset: 2px;
 }
 /* ====================================
   RESPONSIVE TABLET
 ==================================== */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: center;
  }
  /* =========================
     Body
  ========================= */
  body {
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
  }
  /* =========================
     Header
  ========================= */
  header {
    background-color: var(--nav);
  }
  /* =========================
     Logo / Bild
  ========================= */
  header img {
    object-fit: cover;
    background-color: white;
    border-radius: 14px;
  }
  /* =========================
     Navigation
  ========================= */
  nav {
    background-color: var(--nav);
  }
  nav a {
    text-decoration: none;
    color: #f1f5f9;
    font-weight: 600;
    border-radius: 10px;
    transition: 0.3s ease;
  }
  nav a:hover {
    background-color: var(--nav-hover);
    color: white;
  }
  /* =========================
     Suchfeld
  ========================= */
  input[type="text"],
  input[type="search"] {
    border: 1px solid var(--border);
    background-color: white;
    font-size: 1rem;
    border-radius: 12px;
  }
  input:focus {
    border-color: var(--primary);
  }
  /* =========================
     Buttons
  ========================= */
  button {
    background-color: var(--primary);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 12px;
    transition: 0.25s ease;
  }
  /* Hover Bewegung */
  button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
  }
  /* Klick-Effekt */
  button:active {
    transform: translateY(0px);
  }
  /* =========================
     Hauptinhalt
  ========================= */
  main {
-    margin: 1rem;
+    background-color: var(--white);
-    padding: 1.5rem;
+    border-radius: 24px;
  }
  /* =========================
     Überschriften
  ========================= */
  h1 {
-    font-size: 1.8rem;
+    color: var(--primary);
-  }
+    font-size: 3.5rem;
 }
 /* ====================================
   RESPONSIVE HANDY
 ==================================== */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
-  nav div a {
+  h2 {
-    width: 100%;
+    color: var(--primary);
    text-align: center;
  }
  /* =========================
     Texte
  ========================= */
  p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.08rem;
  }
  /* =========================
     Links
  ========================= */
  a {
    color: var(--primary);
    transition: 0.3s ease;
  }
  a:hover {
    color: var(--primary-hover);
  }
  /* =========================
     Footer
  ========================= */
  footer {
-    flex-direction: column;
+    background-color: var(--white);
-    text-align: center;
+  }
-    gap: 1rem;
+
  footer a {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
  }
  footer a:hover {
    color: var(--primary);
  }
 }
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -1,26 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
 <nav>
    <div>
        <a href="index.html">Homepage</a>
    </div>
    <div>
        <a href="anmeldung.html">Anmelden/Abmelden</a>
    </div>
    <div>
        <a href="registrierung.html">Registrieren</a>
    </div>
 </nav>
@@ -1,40 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
    <nav>
        <div>
            <a href="index.html">Homepage</a>
        </div>
        <div>
            <a href="anmeldung.html">Anmelden/Abmelden</a>
        </div>
        <div>
            <a href="registrierung.html">Registrieren</a>
        </div>
    </nav>
    <main>
        <h1>Nutzungsbedingungen</h1>
        <p>
            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. 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>
    </main>
@@ -1,40 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
    <nav>
        <div>
            <a href="index.html">Homepage</a>
        </div>
        <div>
            <a href="anmeldung.html">Anmelden/Abmelden</a>
        </div>
        <div>
            <a href="registrierung.html">Registrieren</a>
        </div>
    </nav>
    <main>
        <h1>Registrierung</h1>
        <p>
            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. 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>
    </main>
Author	SHA1	Message	Date
caroschulte02-alt	d440b98774	First Implementation	2026-05-13 01:32:52 +02:00
caroschulte02-alt	f1feb4677e	First Implementation	2026-05-13 01:31:50 +02:00
caroschulte02-alt	e7bc5a5709	First Implementation	2026-05-13 01:30:41 +02:00
caroschulte02-alt	dfb5076032	First Implementation	2026-05-13 01:29:17 +02:00
caroschulte02-alt	68b6ecdfc3	First Implementation	2026-05-13 01:27:55 +02:00
caroschulte02-alt	a3fe501282	First Implementation	2026-05-13 01:26:09 +02:00
caroschulte02-alt	1a80d3576f	First Implementation	2026-05-13 01:19:20 +02:00
caroschulte02-alt	60b6449ecd	First Implementation	2026-05-13 01:16:05 +02:00
caroschulte02-alt	45924e6cfb	First Implementation	2026-05-13 01:12:25 +02:00
caroschulte02-alt	cd1512eadf	First Implementation	2026-05-13 01:09:44 +02:00
caroschulte02-alt	71fc4c8184	First Implementation	2026-05-13 01:07:02 +02:00
caroschulte02-alt	a32b59825e	First Implementation	2026-05-13 01:03:48 +02:00
caroschulte02-alt	590ff7d916	First Implementation	2026-05-13 01:01:53 +02:00
caroschulte02-alt	51093d4995	First Implementation	2026-05-13 00:59:45 +02:00
caroschulte02-alt	c6e7cdf95c	First Implementation	2026-05-13 00:56:04 +02:00
caroschulte02-alt	d2a4c14c88	First Implementation	2026-05-13 00:54:22 +02:00
caroschulte02-alt	9d5a76973b	First Implementation	2026-05-12 21:56:26 +02:00