modifyed the css

This commit is contained in:
sageTheDM 2024-09-16 17:08:09 +02:00
parent 01fadc2ccf
commit 2ca055b4c1
3 changed files with 104 additions and 33 deletions

View file

@ -252,7 +252,7 @@ header a:hover {
}
/* Form styling */
form {
#contactForm {
max-width: 600px;
margin: 0 auto;
background: var(--input-background-color); /* Use the input background color variable */
@ -261,14 +261,14 @@ form {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}
form label {
#contactForm label {
color: var(--text-color); /* Use the text color variable */
display: block; /* Ensure labels are block elements */
margin-bottom: 5px; /* Add some space below labels */
}
form input,
form textarea {
#contactForm input,
#contactForm textarea {
color: var(--text-color); /* Use the text color variable */
background-color: var(--history-background-color); /* Use a contrasting background */
border: 1px solid var(--input-button-color); /* Use the input button color for borders */
@ -278,7 +278,7 @@ form textarea {
margin-bottom: 15px;
}
form button {
#contactForm button {
background-color: var(--input-button-color); /* Use the input button color */
color: var(--background-color); /* Use the background color for text */
border: none;
@ -288,6 +288,49 @@ form button {
transition: background-color 0.3s; /* Smooth transition for hover effect */
}
form button:hover {
#contactForm button:hover {
background-color: var(--input-button-hover-color); /* Use the hover color variable */
}
/* FAQ Section */
#faq {
max-width: 800px;
width: 90%;
margin-top: 50px;
padding: 20px;
background-color: #222;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#faq h2 {
text-align: center;
color: #00ccff;
font-size: 2em;
margin-bottom: 20px;
}
.faq-item {
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
background-color: #333;
}
.faq-item h3 {
color: #00ccff;
margin-bottom: 10px;
font-size: 1.5em;
}
.faq-item p {
color: #ddd;
font-size: 1.1em;
line-height: 1.5;
}
/* Add some hover effects for the FAQ items */
.faq-item:hover {
background-color: #444;
transition: background-color 0.3s;
}