diff --git a/anmeldung.html b/anmeldung.html index 08a8dc6..45bd523 100644 --- a/anmeldung.html +++ b/anmeldung.html @@ -5,6 +5,7 @@ + Gästebuch diff --git a/css/main.css b/css/main.css index c9f08fb..46b14bd 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,183 @@ +/* ==================================== + RESET +==================================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ==================================== + BODY +==================================== */ body { - background-color: coral; + font-family: Arial, Helvetica, sans-serif; + color: #1f2937; + line-height: 1.6; + + background: linear-gradient( + 135deg, + #eef2ff, + #f8fafc + ); + + min-height: 100vh; + + /* sorgt dafür, dass Footer unten bleibt */ + display: flex; + flex-direction: column; +} + +/* ==================================== + NAVIGATION +==================================== */ +nav { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + + padding: 1.5rem; + + 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; + } + + main { + margin: 1rem; + padding: 1.5rem; + } + + h1 { + font-size: 1.8rem; + } +} + +/* ==================================== + RESPONSIVE HANDY +==================================== */ +@media (max-width: 480px) { + body { + font-size: 15px; + } + + nav div a { + width: 100%; + text-align: center; + } + + footer { + flex-direction: column; + text-align: center; + gap: 1rem; + } } \ No newline at end of file diff --git a/datenschutz.html b/datenschutz.html index 796b643..15c94a6 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -5,6 +5,7 @@ + Gästebuch diff --git a/impressum.html b/impressum.html index eb02980..d5b3856 100644 --- a/impressum.html +++ b/impressum.html @@ -5,6 +5,7 @@ + Gästebuch diff --git a/index.html b/index.html index 812a625..f44c5e6 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + Gästebuch @@ -12,41 +13,41 @@ - + -
+
-

Homepage

+

Homepage

- Gästebuch + Gästebuch -

- 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. -

+

+ 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. +

-
+
- + \ No newline at end of file diff --git a/nutzungsbedingungen.html b/nutzungsbedingungen.html index 804cc98..5204ed5 100644 --- a/nutzungsbedingungen.html +++ b/nutzungsbedingungen.html @@ -5,6 +5,7 @@ + Gästebuch diff --git a/registrierung.html b/registrierung.html index fce6d6f..b665459 100644 --- a/registrierung.html +++ b/registrierung.html @@ -5,6 +5,7 @@ + Gästebuch