Template:Main Page/styles.css: Difference between revisions
EkramHossen (talk | contribs) No edit summary |
EkramHossen (talk | contribs) No edit summary |
||
| Line 160: | Line 160: | ||
.feature- | /* Wrapper for all 4 sections */ | ||
border: | .all-feature-sections { | ||
background-color: # | border: 2px solid #a2a9b1; | ||
margin-bottom: | background-color: #fefefe; | ||
padding: 20px; | |||
margin-bottom: 30px; | |||
border-radius: 8px; | |||
} | } | ||
/* Each section header */ | |||
.feature-box-title { | .feature-box-title { | ||
background-color: # | background-color: #e2f3f5; /* Light teal for clean feel */ | ||
border: | border-left: 6px solid #36c; /* Blue bar like Wikipedia */ | ||
padding: 8px 12px; | padding: 8px 12px; | ||
font-weight: bold; | font-weight: bold; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
font-size: 17px; | font-size: 17px; | ||
margin | margin: 25px 0 12px; | ||
color: #202122; | |||
} | } | ||
/* Grid layout for profiles */ | |||
.feature-grid { | .feature-grid { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: | gap: 15px; | ||
justify-content: space-between; | justify-content: space-between; | ||
} | } | ||
/* Individual profile box */ | |||
.feature-item { | .feature-item { | ||
width: 19%; | width: 19%; | ||
background-color: # | background-color: #f4f8fb; /* Light background */ | ||
border: 1px solid # | border: 1px solid #ccd6dd; | ||
padding: 10px; | padding: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 193: | Line 199: | ||
font-size: 13px; | font-size: 13px; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
border-radius: | border-radius: 6px; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.05); | |||
transition: transform 0.2s ease; | |||
} | |||
.feature-item:hover { | |||
transform: translateY(-3px); | |||
} | } | ||
/* Image */ | |||
.feature-item img { | .feature-item img { | ||
width: 100%; | width: 100%; | ||
height: auto; | height: auto; | ||
max-height: | max-height: 130px; | ||
object-fit: cover; | object-fit: cover; | ||
border-radius: 4px; | border-radius: 4px; | ||
margin-bottom: 8px; | |||
} | } | ||
/* Name */ | |||
.feature-name { | .feature-name { | ||
font-weight: bold; | font-weight: bold; | ||
margin: 4px | margin-bottom: 4px; | ||
font-size: 14px; | font-size: 14px; | ||
color: #202122; | |||
} | } | ||
/* Description */ | |||
.feature-desc { | .feature-desc { | ||
font-size: 12px; | font-size: 12px; | ||
color: # | color: #54595d; | ||
} | } | ||