Template:Main Page/styles.css: Difference between revisions
EkramHossen (talk | contribs) No edit summary |
EkramHossen (talk | contribs) No edit summary |
||
| (78 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
background-color: #1f2937; | background-color: #1f2937; | ||
padding: 2em 1em; | padding: 2em 1em; | ||
margin-bottom: 0.3em; | |||
margin-bottom: | |||
text-align: center; | text-align: center; | ||
border: 1px solid #374151; | border: 1px solid #374151; | ||
| Line 21: | Line 20: | ||
font-size: 1em; | font-size: 1em; | ||
color: #38bdf8; | color: #38bdf8; | ||
margin-top: 0. | margin-top: 0.3em; | ||
display: block; | display: block; | ||
} | } | ||
| Line 44: | Line 43: | ||
.mp-main-container { | .mp-main-container { | ||
display: flex; | display: flex; | ||
gap: | gap: 0.3em; | ||
margin-bottom: | margin-bottom: 0.25em; | ||
} | } | ||
| Line 53: | Line 52: | ||
padding: 1em; | padding: 1em; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
background-color: #f8f9fa; | background-color: #f8f9fa; | ||
flex: 1; | flex: 1; | ||
| Line 72: | Line 70: | ||
.mp-lower-container { | .mp-lower-container { | ||
display: flex; | display: flex; | ||
gap: | gap: 0.3em; | ||
} | } | ||
| Line 79: | Line 77: | ||
padding: 1em; | padding: 1em; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
} | } | ||
| Line 111: | Line 108: | ||
margin-bottom: 1em; | margin-bottom: 1em; | ||
font-size: 1em; | font-size: 1em; | ||
} | |||
.fp-grid-box { | |||
display: flex; | |||
gap: 1em; | |||
justify-content: space-around; | |||
margin-bottom: 1em; | |||
} | |||
.fp-grid-card { | |||
flex: 1; | |||
background: #ffffff; | |||
border: 1px solid #e2e8f0; | |||
border-radius: 8px; | |||
padding: 1em; | |||
text-align: center; | |||
font-size: 1.1em; | |||
box-shadow: 0 2px 6px rgba(0,0,0,0.03); | |||
} | |||
.fp-box-purple { | |||
background-color: #f3e8fd; | |||
border-left: 5px solid #9b51e0; | |||
padding: 2em; | |||
border-radius: 8px; | |||
line-height: 1.7; | |||
font-size: 1em; | |||
margin-bottom: 2em; | |||
} | |||
.feature-box { | |||
border: 1px solid #a2a9b1; | |||
background-color: #f5fff5; | |||
margin-bottom: 20px; | |||
padding: 10px; | |||
} | |||
.feature-box-title { | |||
background-color: #cef2e0; | |||
border: 1px solid #a2a9b1; | |||
padding: 8px 12px; | |||
font-weight: bold; | |||
font-family: sans-serif; | |||
font-size: 17px; | |||
margin-bottom: 10px; | |||
} | |||
.feature-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
justify-content: space-between; | |||
} | |||
.feature-item { | |||
width: 19%; | |||
background-color: #f3e8fd; | |||
border: 1px solid #ddd; | |||
padding: 10px; | |||
box-sizing: border-box; | |||
text-align: center; | |||
font-size: 13px; | |||
font-family: sans-serif; | |||
border-radius: 5px; | |||
transition: transform 0.3s ease; | |||
} | |||
.feature-item:hover { | |||
transform: scale(1.05); | |||
z-index: 10; | |||
} | |||
.feature-image { | |||
background-color: #fff; | |||
padding: 0px; | |||
margin-bottom: 8px; | |||
display: inline-block; | |||
border: 1px solid #ddd; | |||
} | |||
.feature-image img { | |||
width: 100%; | |||
height: auto; | |||
} | |||
.feature-name { | |||
font-weight: bold; | |||
margin: 4px 0; | |||
font-size: 18px; | |||
} | |||
.feature-desc { | |||
font-size: 13px; | |||
color: #444; | |||
} | } | ||