niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

First Implementation

Browse Source
This commit is contained in:
caroschulte02-alt
2026-05-13 00:59:45 +02:00
parent c6e7cdf95c
commit 51093d4995
1 changed files with 39 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/main.css
+39 -59
View File
@@ -1,79 +1,59 @@
/* 1. SCHRIFTART & HINTERGRUND */ /* Grund-Design der Navigations-Links */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f0f4f8; /* Heller, sauberer Hintergrund */
color: #333;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 2. BUTTONS (in der Nav) */
nav a { nav a {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
background-color: #2563eb; /* Blau */ font-family: Arial, sans-serif;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-weight: bold; font-weight: bold;
transition: background 0.3s; font-size: 14px;
/* Innenabstände für die Button-Optik */
padding: 8px 16px;
/* Abgerundete Ecken */
border-radius: 4px;
/* Standardfarben (Blau wie im Screenshot) */
background-color: #2563eb;
color: #ffffff;
/* Sanfter Übergang für Hover-Effekte */
transition: background-color 0.2s ease, transform 0.1s ease;
/* Trennung zwischen den Elementen */
margin: 0 4px;
} }
/* Hover-Zustand (wenn man mit der Maus drüberfährt) */
nav a:hover { nav a:hover {
background-color: #1d4ed8; /* Dunkleres Blau bei Hover */ background-color: #1d4ed8;
color: #ffffff;
} }
/* 3. RESPONSIVE NAVIGATION */ /* Fokus-Zustand (Wichtig für Tastatur-Bedienung/Accessibility) */
nav { nav a:focus {
background-color: white; outline: 3px solid #f59e0b; /* Orangefarbener Ring */
padding: 1rem; outline-offset: 2px;
display: flex;
justify-content: center;
gap: 15px;
border-bottom: 1px solid #ddd;
} }
@media (max-width: 600px) { /* Aktiv-Zustand (beim Klicken) */
nav { nav a:active {
flex-direction: column; /* Stapelt Buttons auf Handys */ transform: scale(0.95);
align-items: center;
}
nav a {
width: 80%; /* Buttons werden auf Handy breiter */
text-align: center;
}
} }
/* 4. CONTENT BEREICH (Main) */ /* Spezial-Klasse für den "Registrieren"-Button (Rot im Screenshot) */
main { nav a.register {
flex: 1; background-color: #ef4444;
padding: 20px;
max-width: 800px;
margin: 0 auto;
} }
/* 5. RESPONSIVE FOOTER */ nav a.register:hover {
footer { background-color: #dc2626;
background-color: #1e293b; /* Dunkles Grau/Blau */
color: white;
padding: 20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 10px;
} }
footer a { /* Spezial-Klasse für den "Anmelden"-Button (Orange-Rot) */
color: #fbbf24; /* Akzentfarbe für Links im Footer */ nav a.login {
text-decoration: none; background-color: #f97316;
} }
@media (max-width: 480px) { nav a.login:hover {
footer { background-color: #ea580c;
flex-direction: column;
text-align: center;
}
} }