Best Practices
No edit summary Tags: Reverted 2017 source edit |
No edit summary Tags: Reverted 2017 source edit |
||
| Line 3: | Line 3: | ||
<style> | <style> | ||
.contentHeader { | |||
.contentHeader { | |||
padding: 5em; | padding: 5em; | ||
text-align: center; | |||
} | } | ||
.heading { | .heading { | ||
font-size: 2.25em; | font-size: 2.25em; | ||
font-weight: 700; | |||
text-transform: uppercase; | |||
color: #182933; | |||
} | } | ||
.grid-container { | .grid-container { | ||
display: | display: flex; | ||
flex-wrap: wrap; | |||
justify-content: center; | |||
gap: 20px; | |||
padding: 0 5em; | padding: 0 5em; | ||
} | } | ||
.bestpractices-card { | .bestpractices-card { | ||
flex: 1 1 calc(50% - 20px); /* Two cards per row, minus the gap */ | |||
max-width: calc(50% - 20px); | |||
background: rgba(226, 245, 250, 0.70); | |||
border-radius: 10px; | border-radius: 10px; | ||
padding: 20px; | |||
padding: | |||
text-align: center; | text-align: center; | ||
transition: transform 0.3s ease, box-shadow 0.3s ease; | transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
} | |||
.bestpractices-card:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |||
} | |||
.bestpractices-card span { | |||
color: #1A50AD; | |||
font-size: 20px; | |||
font-weight: 700; | |||
} | } | ||
| Line 47: | Line 47: | ||
.contentHeader { | .contentHeader { | ||
padding: 2em 1em; | padding: 2em 1em; | ||
} | } | ||
| Line 54: | Line 53: | ||
} | } | ||
. | .grid-container { | ||
padding: | padding: 0 2em; | ||
} | } | ||
.bestpractices-card { | .bestpractices-card { | ||
flex: 1 1 100%; /* Single card per row on mobile */ | |||
max-width: 100%; | |||
} | } | ||
Revision as of 07:32, 1 August 2024
Best practices
BEST PRACTICES
Suggestions and ideas on how to creatively use MDriven tools.