117 lines
2.5 KiB
CSS
117 lines
2.5 KiB
CSS
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f4f9;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: center; /* Horizontale Zentrierung */
|
|
align-items: center; /* Vertikale Zentrierung */
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Zentriert die Inhalte im Container */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.link {
|
|
display: flex; /* Flexbox für den Link */
|
|
align-items: center; /* Vertikale Ausrichtung von Bild und Text */
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #007BFF;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
transition: background 0.3s ease;
|
|
width: 100%; /* Link nimmt die volle Breite im Container ein */
|
|
justify-content: center; /* Zentriert den Text horizontal im Link */
|
|
}
|
|
|
|
.link:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.link img {
|
|
width: 20px; /* Größe des Logos */
|
|
height: 20px; /* Höhe des Logos */
|
|
margin-right: 8px; /* Abstand zwischen Logo und Text */
|
|
}
|
|
|
|
.message {
|
|
background: #f9f9f9;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.message strong {
|
|
font-size: 16px;
|
|
color: #007BFF;
|
|
}
|
|
|
|
.message p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.message small {
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Zentriert die Form-Inhalte horizontal */
|
|
gap: 10px;
|
|
width: 100%; /* Maximale Breite der Form */
|
|
}
|
|
|
|
form input, form textarea {
|
|
width: 90%; /* Eingabefelder nehmen 90% der Breite ein */
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
box-sizing: border-box; /* Verhindert, dass Padding die Größe beeinflusst */
|
|
}
|
|
|
|
form textarea {
|
|
height: 100px; /* Größeres Textfeld */
|
|
resize: none; /* Deaktiviert Größenänderungen durch den Benutzer */
|
|
}
|
|
|
|
form button {
|
|
width: 50%; /* Sende-Knopf nimmt 50% der Form-Breite ein */
|
|
padding: 10px;
|
|
background: #007BFF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
form button:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
#charCount {
|
|
font-size: 12px;
|
|
color: #666;
|
|
text-align: right; /* Rechtsbündig unter dem Textfeld */
|
|
width: 90%;
|
|
} |