Main Page/styles.css: Difference between revisions
Created page with "→Grid Container - Flexbox layout for 2x2 grid: .grid-container { display: flex; flex-wrap: wrap; gap: 1%; } →Grid Box - Individual box styling: .grid-box { flex: 1 1 calc(48% - 0.5%); min-width: 300px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; border: 1px solid #E5E7EB; margin-bottom: 20px; transition: all 0.3s ease; } →Box Title Section: .box-title { background-color: #EEF2FF; padding: 12px;..." |
m Protected "Main Page/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)) |
(No difference)
| |
Latest revision as of 17:59, 24 October 2025
/* Grid Container - Flexbox layout for 2x2 grid */ .grid-container {
display: flex; flex-wrap: wrap; gap: 1%;
}
/* Grid Box - Individual box styling */ .grid-box {
flex: 1 1 calc(48% - 0.5%); min-width: 300px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-radius: 10px; overflow: hidden; border: 1px solid #E5E7EB; margin-bottom: 20px; transition: all 0.3s ease;
}
/* Box Title Section */ .box-title {
background-color: #EEF2FF; padding: 12px; font-size: 1.25em; font-weight: bold; color: #4F46E5; border-bottom: 2px solid rgba(79, 70, 229, 0.5);
}
/* Box Content Section */ .box-content {
padding: 20px; background-color: #FFFFFF; color: #4B5563;
}
/* Mobile Responsive - Stack boxes vertically on smaller screens */ @media (max-width: 768px) {
.grid-box {
flex: 1 1 100%;
min-width: 100%;
}
}