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

Merge pull request 'Last Implementation' (#6) from designcss into dev

Browse Source 
Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
niklas.ortmann
2026-05-13 18:00:19 +02:00
parent bf06df461d d497ea4fc3
commit 58f7be9d52
1 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/main.css
+75 -20
View File
@@ -3,7 +3,13 @@ main {
max-width:1200px; max-width:1200px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
font-family: Arial; font-family: Arial, sans-serif;
}
body {
background-color: #eef2f7;
color: #1f2937;
margin: 0;
} }
.flexbox { .flexbox {
@@ -14,11 +20,17 @@ main {
} }
.container { .container {
border: 1px solid white; background-color: white;
padding: 15px; border-radius: 8px;
border-radius: 8px; padding: 15px;
background-color: coral; border: 1px solid #dbe3ec;
transition: transform 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.container:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
} }
.category-link { .category-link {
@@ -26,16 +38,30 @@ main {
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
padding: 10px; padding: 12px;
background-color: blue; background-color: #2563eb;
color: white; color: white;
border-radius: 4px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 10px;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.category-link:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
} }
.article-link a { .article-link a {
color: blue; color: #1f2937;
text-decoration: none; text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
.article-link a:hover {
color: #2563eb;
text-decoration: underline;
} }
@@ -58,9 +84,10 @@ main {
width: 90%; width: 90%;
max-width: 450px; max-width: 450px;
padding: 30px; padding: 30px;
border: 1px solid white; border: 1px solid #dbe3ec;
border-radius: 10px; border-radius: 10px;
background-color: white; background-color: white;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
} }
.logo-wrapper { .logo-wrapper {
@@ -76,13 +103,22 @@ main {
.login-container h1 { .login-container h1 {
text-align: center; text-align: center;
margin-bottom: 25px; margin-bottom: 25px;
font-size: 1.5rem; font-size: 1.7rem;
color: #1e293b;
} }
.input-label { .input-label {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
color: #1f2937;
}
.input-label {
margin-bottom: 5px;
font-weight: bold;
width: 100%;
color: #1f2937;
} }
.login-input { .login-input {
@@ -92,38 +128,57 @@ main {
border: 1px solid white; border: 1px solid white;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
font-size: 1rem;
}
.login-input:focus {
outline: none;
border-color: #2563eb;
} }
.checkbox-wrapper { .checkbox-wrapper {
margin-bottom: 20px; margin-bottom: 20px;
color: #1f2937;
} }
.login-button { .login-button {
width: 100%; width: 100%;
padding: 12px; padding: 12px;
background-color: blue; background-color: #2563eb;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
font-weight: bold;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
} }
.login-button:hover { .login-button:hover {
background-color: blue; background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
} }
.register-link { .register-link {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
font-size: 0.9rem; font-size: 0.9rem;
color: #1f2937;
}
.register-link a {
color: #2563eb;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
.register-link a:hover {
color: #1d4ed8;
text-decoration: underline;
} }
/* Versteckt das doppelte Label fuer Screenreader/Accessibility */ /* Versteckt das doppelte Label fuer Screenreader/Accessibility */
.screenreader-only { .screenreader-only {
display: none; display: none;
} }
body {
background-color: coral;
}