|
Tags: Replaced Manual revert |
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| /* Basic style for the entire page */
| |
| body {
| |
| padding: 20px;
| |
| background-color: #fff9e6; /* Light yellow background for the page */
| |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern and readable font */
| |
| color: #333; /* Dark gray text color for good contrast */
| |
| line-height: 1.6; /* Improved text readability */
| |
| margin: 0;
| |
| }
| |
|
| |
| /* Style for the main banner */
| |
| #main_banner {
| |
| background-color: #ffeb3b; /* Light yellow for a prominent banner */
| |
| margin: 0;
| |
| padding: 20px; /* More space for better appearance */
| |
| text-align: center; /* Center text */
| |
| border-radius: 12px; /* Rounded corners for a modern look */
| |
| box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Soft shadow for emphasis */
| |
| font-size: 2em; /* Increased font size for importance */
| |
| font-weight: bold; /* Highlight text */
| |
| color: #333; /* Dark gray text color for contrast */
| |
| }
| |
|
| |
| /* Style for navigation menu */
| |
| nav {
| |
| padding: 15px;
| |
| background-color: #fff3e0; /* Light orange background for navigation */
| |
| border-radius: 8px; /* Rounded corners for a modern look */
| |
| border-bottom: 3px solid #ffca28; /* Light yellow bottom border */
| |
| margin-bottom: 20px; /* Space below navigation */
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow for separation */
| |
| }
| |
|
| |
| /* Navigation list style */
| |
| nav ul {
| |
| list-style: none; /* Remove default bullet points */
| |
| padding: 0; /* Remove default padding */
| |
| margin: 0; /* Remove default margin */
| |
| display: flex; /* Display list items in a row */
| |
| justify-content: center; /* Center align list items */
| |
| }
| |
|
| |
| /* Navigation link style */
| |
| nav li {
| |
| margin: 0 15px; /* Space between list items */
| |
| }
| |
|
| |
| /* Style for links in the navigation menu */
| |
| nav a {
| |
| color: #ff6f00; /* Light orange color for links */
| |
| text-decoration: none; /* No underline for a modern look */
| |
| font-weight: bold; /* Highlight links */
| |
| }
| |
|
| |
| nav a:hover {
| |
| text-decoration: underline; /* Underline on hover */
| |
| color: #e64a19; /* Darker orange color on hover */
| |
| }
| |
|
| |
| /* Style for main content area */
| |
| main {
| |
| padding: 20px;
| |
| background-color: #ffffff; /* White background for contrasting content */
| |
| border-radius: 12px; /* Rounded corners for a modern look */
| |
| box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* Soft shadow for emphasis */
| |
| }
| |
|
| |
| /* Style for lists */
| |
| ul {
| |
| padding-left: 20px; /* Space on the left side of the list */
| |
| }
| |
|
| |
| li {
| |
| margin-bottom: 12px; /* Space between list items */
| |
| font-size: 1.1em; /* Increased font size for better readability */
| |
| }
| |
|
| |
| /* Style for the footer */
| |
| footer {
| |
| padding: 15px;
| |
| background-color: #ffeb3b; /* Light yellow for the footer */
| |
| text-align: center; /* Center text */
| |
| border-top: 3px solid #ffca28; /* Light yellow top border */
| |
| margin-top: 20px; /* Space above footer */
| |
| box-shadow: 0 -4px 8px rgba(0,0,0,0.1); /* Soft shadow for separation */
| |
| font-size: 0.9em; /* Smaller font size for the footer */
| |
| color: #333; /* Dark gray text color for contrast */
| |
| }
| |
|
| |
| /* Responsive design for navigation menu on small screens */
| |
| @media (max-width: 768px) {
| |
| nav ul {
| |
| flex-direction: column; /* Stack list items vertically on smaller screens */
| |
| align-items: center; /* Center align list items */
| |
| }
| |
|
| |
| nav li {
| |
| margin: 10px 0; /* Space between list items when stacked */
| |
| }
| |
| }
| |