Commit 15b1b02e authored by Carlos Rodríguez Morales's avatar Carlos Rodríguez Morales
Browse files

Enhance RequirementBanner component with improved styling and hover effects

- Updated CSS for the requirements class to enhance visual appeal and maintainability, including adjustments to padding, border-radius, and background color.
- Added hover effects to improve user interaction, including color changes and box-shadow enhancements.
- Introduced transitions for smoother visual feedback on hover actions.

These changes improve the user experience by providing a more engaging and visually appealing interface for the RequirementBanner component.
parent c4882fba
Showing with 28 additions and 8 deletions
+28 -8
......@@ -17,19 +17,39 @@ const requisitos = prerequisites.nonBlocking.length
<style>
.requirements {
display: flex;
/* width: 40vw; */
padding: 1em;
border-radius: 20px;
gap: 2em;
padding: 0.875em 1.25em;
border-radius: 12px;
gap: 1.5em;
align-items: center;
margin: 1em 0;
background-color: #fff3e0;
background-color: rgba(255, 243, 224, 0.8);
color: #e65100;
font-weight: 700;
font-weight: 600;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(230, 81, 0, 0.05);
border: 1px solid rgba(230, 81, 0, 0.1);
}
.requirements:hover {
background-color: #f57f17;
color: #fff3e0;
background-color: rgba(245, 127, 23, 0.95);
color: #fff;
cursor: pointer;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(230, 81, 0, 0.15);
}
.requirements i {
font-size: 0.9em;
transition: transform 0.2s ease;
}
.requirements:hover i {
transform: translateX(-2px);
}
.requirements p {
margin: 0;
font-size: 0.95em;
letter-spacing: 0.2px;
}
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment