|
Tags: Replaced Manual revert |
| (6 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: #fef9e9; /* Very light yellow background for a dreamy feel */
| |
| 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 */
| |
| #firstHeading {
| |
| background: linear-gradient(to right, #f9d423, #ff4e50); /* Gradient from soft yellow to pinkish red */
| |
| 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: 2.5em; /* Increased font size for importance */
| |
| font-weight: bold; /* Highlight text */
| |
| color: #fff; /* White text color for contrast */
| |
| }
| |
|
| |
| /* Style for navigation menu */
| |
| #p-navigation {
| |
| padding: 15px;
| |
| background: #f7e6b6; /* Soft pastel yellow for navigation */
| |
| border-radius: 8px; /* Rounded corners for a modern look */
| |
| border-bottom: 3px solid #f9d423; /* Bright 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 */
| |
| #p-navigation 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 */
| |
| #p-navigation li {
| |
| margin: 0 12px; /* Space between list items */
| |
| }
| |
|
| |
| /* Style for links in the navigation menu */
| |
| #p-navigation a {
| |
| color: #ff6f61; /* Coral color for links */
| |
| text-decoration: none; /* No underline for a modern look */
| |
| font-weight: bold; /* Highlight links */
| |
| transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
| |
| }
| |
|
| |
| #p-navigation a:hover {
| |
| text-decoration: underline; /* Underline on hover */
| |
| color: #e64a19; /* Darker coral color on hover */
| |
| }
| |
|
| |
| /* Style for main content area */
| |
| #bodyContent {
| |
| padding: 20px;
| |
| background: #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: 10px; /* Space between list items */
| |
| font-size: 1.1em; /* Increased font size for better readability */
| |
| color: #6a1b9a; /* Deep purple color for list items */
| |
| }
| |
|
| |
| /* Style for the footer */
| |
| #footer {
| |
| padding: 15px;
| |
| background: #f9d423; /* Bright yellow background for the footer */
| |
| text-align: center; /* Center text */
| |
| border-top: 3px solid #ff6f61; /* Coral 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) {
| |
| #p-navigation ul {
| |
| flex-direction: column; /* Stack list items vertically on smaller screens */
| |
| align-items: center; /* Center align list items */
| |
| }
| |
|
| |
| #p-navigation li {
| |
| margin: 8px 0; /* Space between list items when stacked */
| |
| }
| |
| }
| |