Template:MainPageBanner/styles.css: Difference between revisions
Appearance
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 8: | Line 8: | ||
/* Top Banner */ | /* Top Banner */ | ||
#mp-topbanner { | #mp-topbanner { | ||
background-color: # | background-color: #0033a0; /* Blue color */ | ||
color: white; | color: white; | ||
padding: | padding: 15px 20px; | ||
text-align: center; | text-align: center; | ||
border-radius: | border-radius: 8px; | ||
box-shadow: 0 4px | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
} | } | ||
#mp-welcome h1 { | #mp-welcome h1 { | ||
font-size: 2. | font-size: 2.2em; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
#mp-free { | #mp-free { | ||
font-size: 1. | font-size: 1.2em; | ||
margin-top: | margin-top: 8px; | ||
} | } | ||
#articlecount { | #articlecount { | ||
font-size: | font-size: 1em; | ||
color: #f0f0f0; | color: #f0f0f0; | ||
margin-top: | margin-top: 8px; | ||
} | } | ||
/* Main Banner Section */ | /* Main Banner Section */ | ||
#mp-banner { | #mp-banner { | ||
background-color: # | background-color: #f5f5f5; /* Light gray background */ | ||
padding: 15px; | padding: 15px; | ||
margin-top: | margin-top: 15px; | ||
border-radius: | border-radius: 8px; | ||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
} | } | ||
Line 44: | Line 44: | ||
.mp-section { | .mp-section { | ||
width: 48%; | width: 48%; | ||
margin-top: | margin-top: 10px; | ||
padding: | padding: 15px; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
float: left; | float: left; | ||
margin-right: 4%; /* Adds a small gap between sections */ | |||
} | } | ||
#mp-leftsection { | #mp-leftsection { | ||
background-color: # | background-color: #bf0a30; /* Red color */ | ||
color: white; | |||
} | } | ||
#mp-rightsection { | #mp-rightsection { | ||
background-color: #ffffff; | background-color: #ffffff; /* White background */ | ||
color: #0033a0; /* Blue text */ | |||
margin-left: 4%; | margin-left: 4%; | ||
} | } | ||
Line 64: | Line 65: | ||
/* Section Headers */ | /* Section Headers */ | ||
.mp-section h2 { | .mp-section h2 { | ||
font-size: 1. | font-size: 1.4em; | ||
background-color: # | background-color: #0033a0; /* Blue color */ | ||
color: white; | color: white; | ||
padding: 10px; | padding: 10px; | ||
border-radius: 5px; | border-radius: 5px; | ||
margin-bottom | margin-bottom: 10px; | ||
} | } | ||
/* Remove margin between sections */ | |||
.mp-section p { | |||
font-size: 1.1em; | font-size: 1.1em; | ||
line-height: 1.4; | |||
} | } | ||
Revision as of 19:38, 2 January 2025
/* General reset */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Top Banner */ #mp-topbanner { background-color: #0033a0; /* Blue color */ color: white; padding: 15px 20px; text-align: center; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #mp-welcome h1 { font-size: 2.2em; font-weight: bold; } #mp-free { font-size: 1.2em; margin-top: 8px; } #articlecount { font-size: 1em; color: #f0f0f0; margin-top: 8px; } /* Main Banner Section */ #mp-banner { background-color: #f5f5f5; /* Light gray background */ padding: 15px; margin-top: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Layout for Sections */ .mp-section { width: 48%; margin-top: 10px; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); float: left; margin-right: 4%; /* Adds a small gap between sections */ } #mp-leftsection { background-color: #bf0a30; /* Red color */ color: white; } #mp-rightsection { background-color: #ffffff; /* White background */ color: #0033a0; /* Blue text */ margin-left: 4%; } /* Section Headers */ .mp-section h2 { font-size: 1.4em; background-color: #0033a0; /* Blue color */ color: white; padding: 10px; border-radius: 5px; margin-bottom: 10px; } /* Remove margin between sections */ .mp-section p { font-size: 1.1em; line-height: 1.4; } /* Clearfix for float */ .clearfix::after { content: ""; display: table; clear: both; }