style(footer): overhaul footer UI with modern typography, icons, and … - #7
style(footer): overhaul footer UI with modern typography, icons, and …#7mahmoudfalous wants to merge 2 commits into
Conversation
…gradients Refactors the footer component to improve visual hierarchy and responsiveness. Changes include: - Replaced text labels with FontAwesome icons for contact details. - Applied gradient text styling to the brand heading. - Enhanced social media buttons with circular styling and hover effects. - Increased top padding and refined typography for better readability. - Fixed copyright bar alignment and contrast.
|
@mahmoudfalous is attempting to deploy a commit to the sohaib's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request adds IntelliJ IDEA project configuration files to the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (4)
.idea/copilot.data.migration.ask2agent.xml (1)
1-6: IDE configuration file - should not be in version control.This file is part of the IntelliJ IDEA configuration that was flagged in the previous review comment. Please remove all
.idea/files as recommended..idea/.gitignore (1)
1-10: IDE configuration file - should not be in version control.While this
.gitignorefile attempts to exclude some IDE artifacts, the entire.idea/directory should be ignored at the repository root level. This file becomes unnecessary once the parent directory is properly excluded..idea/modules.xml (1)
1-8: IDE configuration file - should not be in version control.This file is part of the IntelliJ IDEA configuration that should be removed. See earlier comments for recommended actions.
.idea/Wanderlust-Adventure.iml (1)
1-8: IDE configuration file - should not be in version control.This
.imlmodule file is part of the IntelliJ IDEA configuration. Remove as recommended in earlier comments (including*.imlpattern in root.gitignore).
🧹 Nitpick comments (2)
index.html (1)
302-304: Remove unnecessary italic formatting from copyright text.The
<i>tag is semantically meant for italic text with emphasis or alternate voice (like ship names or foreign phrases), not for general styling. The copyright notice doesn't need italic emphasis.🔎 Suggested simplification
<footer> - <p><i>© 2025 Wanderlust Adventure. All rights reserved.</i></p> + <p>© 2025 Wanderlust Adventure. All rights reserved.</p> </footer>If italic styling is desired, apply it via CSS instead:
footer p { font-style: italic; }style.css (1)
740-879: Consider using CSS custom properties for repeated color values.The footer styles repeat gradient colors and transition values multiple times. Using CSS variables improves maintainability and makes it easier to implement theme changes.
🔎 Suggested improvement with CSS variables
Add these variables at the top of your CSS file or in a
:rootselector::root { /* Brand colors */ --primary-purple: #6e45e2; --primary-teal: #88d3ce; --accent-pink: #cd88d3; /* Gradients */ --gradient-primary: linear-gradient(90deg, var(--primary-purple), var(--primary-teal)); --gradient-purple-pink: linear-gradient(270deg, var(--accent-pink), var(--primary-purple)); /* Transitions */ --transition-smooth: all 0.3s ease; /* Shadows */ --shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.05); --shadow-hover: 0 8px 20px rgba(110, 69, 226, 0.4); }Then refactor your footer styles:
.footer-wrapper h2 { font-size: 26px; margin-bottom: 15px; - background: linear-gradient(270deg, #cd88d3, #6e45e2); + background: var(--gradient-purple-pink); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .social-icons a { /* ... */ - color: #6e45e2; - box-shadow: 0 4px 10px rgba(0,0,0,0.05); - transition: all 0.3s ease; + color: var(--primary-purple); + box-shadow: var(--shadow-soft); + transition: var(--transition-smooth); /* ... */ } .social-icons a:hover { transform: translateY(-5px); - background: linear-gradient(135deg, #6e45e2, #cd88d3); + background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink)); color: #fff; - box-shadow: 0 8px 20px rgba(110, 69, 226, 0.4); + box-shadow: var(--shadow-hover); }This approach makes it easier to maintain consistent colors and enables future theming capabilities.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
.idea/.gitignore(1 hunks).idea/Wanderlust-Adventure.iml(1 hunks).idea/copilot.data.migration.ask2agent.xml(1 hunks).idea/modules.xml(1 hunks).idea/vcs.xml(1 hunks)index.html(2 hunks)style.css(1 hunks)
🔇 Additional comments (2)
style.css (2)
881-891: Update media query selector to match refactored HTML structure.If you implement the semantic HTML refactoring suggested earlier (renaming
.contact-bottomto.footer-content), remember to update this media query selector as well.After refactoring the HTML/CSS structure, verify that the responsive behavior still works correctly on mobile devices at the 768px breakpoint.
740-891: Excellent responsive design and visual enhancements!The footer redesign successfully implements:
- Clean multi-column layout with proper flexbox usage
- Smooth hover effects and transitions
- Circular social media icons with elegant glow effects
- Mobile-first responsive stacking at 768px breakpoint
- Consistent spacing with gap properties
The gradient text effects and hover animations align well with the modern design objectives stated in the PR description.
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <project version="4"> | ||
| <component name="VcsDirectoryMappings"> | ||
| <mapping directory="" vcs="Git" /> | ||
| </component> | ||
| </project> No newline at end of file |
There was a problem hiding this comment.
Remove IDE configuration files from version control.
IntelliJ IDEA configuration files (.idea/ directory) should not be committed to the repository. These files contain developer-specific settings and can cause conflicts when different team members use different IDE configurations or versions.
Recommended action:
- Add
.idea/to your root.gitignorefile - Remove these files from version control:
git rm -r --cached .idea/
- Commit the removal
📝 Recommended .gitignore entry
Add this to your root .gitignore:
+# IntelliJ IDEA
+.idea/
+*.iml
+*.iws
+*.ipr🤖 Prompt for AI Agents
In .idea/vcs.xml around lines 1 to 6 the project IDE config is committed; remove
IDE configuration from version control by adding `.idea/` to the repository root
.gitignore, running `git rm -r --cached .idea/` to untrack the existing files,
and committing the removal so the .idea directory is no longer tracked.
| <div class="footer-wrapper"> | ||
| <div class="contact-bottom"> | ||
|
|
||
| <div class="col-brand"> | ||
| <h2>Wanderlust Adventure</h2> | ||
| </div> | ||
| <div class="contact-bottom-2nd"> | ||
| <h3>Useful Links</h3> | ||
| <ul> | ||
| <li><a href="#hero">Home</a></li> | ||
| <li><a href="#">Terms and conditions</a></li> | ||
| <li><a href="#">privacy policy</a></li> | ||
| <li><a href="#">FAQs</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="contact-bottom-2nd"> | ||
| <p>Your gateway to exploring the unseen beauty of the world. Let the journey begin.</p> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Improve semantic HTML structure for the footer.
The current structure uses nested div elements with class names like "footer-wrapper" and "contact-bottom", but the actual semantic <footer> element appears separately later (line 302). This creates confusion about the footer's boundaries and reduces accessibility.
🔎 Recommended semantic structure
- <div class="footer-wrapper">
- <div class="contact-bottom">
+ <footer class="footer-wrapper">
+ <div class="footer-content">
<div class="col-brand">
<h2>Wanderlust Adventure</h2>
<p>Your gateway to exploring the unseen beauty of the world. Let the journey begin.</p>
</div>Then at the end of the footer:
</div>
- </div>
- <footer>
- <p><i>© 2025 Wanderlust Adventure. All rights reserved.</i></p>
- </footer>
+ <div class="copyright">
+ <p>© 2025 Wanderlust Adventure. All rights reserved.</p>
+ </div>
+ </footer>Update corresponding CSS classes from .contact-bottom to .footer-content and footer to .copyright.
Committable suggestion skipped: line range outside the PR's diff.
| <li><a href="#">Terms and Conditions</a></li> | ||
| <li><a href="#">Privacy Policy</a></li> | ||
| <li><a href="#">FAQs</a></li> |
There was a problem hiding this comment.
Replace placeholder links with actual URLs or remove href attribute.
The "Terms and Conditions", "Privacy Policy", and "FAQs" links currently point to "#", which provides no functionality and can confuse users or screen readers.
If these pages don't exist yet, consider either:
- Removing the links temporarily (keeping just text)
- Adding proper URLs when pages are ready
- Using JavaScript to show a "Coming Soon" message
Example for option 3:
- <li><a href="#">Terms and Conditions</a></li>
+ <li><a href="#" onclick="alert('Coming soon'); return false;">Terms and Conditions</a></li>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <li><a href="#">Terms and Conditions</a></li> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">FAQs</a></li> | |
| <li><a href="#" onclick="alert('Coming soon'); return false;">Terms and Conditions</a></li> | |
| <li><a href="#" onclick="alert('Coming soon'); return false;">Privacy Policy</a></li> | |
| <li><a href="#" onclick="alert('Coming soon'); return false;">FAQs</a></li> |
🤖 Prompt for AI Agents
In index.html around lines 265 to 267, the footer links for "Terms and
Conditions", "Privacy Policy", and "FAQs" currently use href="#" which is
non-functional and accessible-unfriendly; replace each href="#" with the actual
page URLs when those pages exist, or if the pages are not ready remove the href
attribute and render plain text, or implement a non-navigation behavior (e.g.,
add a button or anchor with role="button" and an onclick handler that opens a
modal or shows a "Coming Soon" message) and ensure appropriate ARIA attributes
and accessible messaging for screen readers.
| <li> | ||
| <i class="fas fa-envelope"></i> | ||
| <a href="mailto:sohaibkundi2@gmail.com">sohaibkundi2@gmail.com</a> | ||
| </li> | ||
| <li> | ||
| <i class="fas fa-phone-alt"></i> | ||
| <a href="tel:+923350532352">+92 335 053 2352</a> | ||
| </li> | ||
| <li> | ||
| <i class="fas fa-map-marker-alt"></i> | ||
| <a href="#">Tank City, PK</a> | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
Add accessible labels for icon-only content.
The contact details use FontAwesome icons without accessible text alternatives. Screen readers may not announce the icon meaning, making it unclear what each link represents for visually impaired users.
🔎 Recommended accessibility improvements
<li>
<i class="fas fa-envelope"></i>
- <a href="mailto:sohaibkundi2@gmail.com">sohaibkundi2@gmail.com</a>
+ <a href="mailto:sohaibkundi2@gmail.com" aria-label="Email us at sohaibkundi2@gmail.com">sohaibkundi2@gmail.com</a>
</li>
<li>
<i class="fas fa-phone-alt"></i>
- <a href="tel:+923350532352">+92 335 053 2352</a>
+ <a href="tel:+923350532352" aria-label="Call us at +92 335 053 2352">+92 335 053 2352</a>
</li>
<li>
<i class="fas fa-map-marker-alt"></i>
- <a href="#">Tank City, PK</a>
+ <span aria-label="Our location">
+ <i class="fas fa-map-marker-alt" aria-hidden="true"></i>
+ Tank City, PK
+ </span>
</li>Note: The location should likely be a <span> rather than an <a> since it doesn't link anywhere.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <li> | |
| <i class="fas fa-envelope"></i> | |
| <a href="mailto:sohaibkundi2@gmail.com">sohaibkundi2@gmail.com</a> | |
| </li> | |
| <li> | |
| <i class="fas fa-phone-alt"></i> | |
| <a href="tel:+923350532352">+92 335 053 2352</a> | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <a href="#">Tank City, PK</a> | |
| </li> | |
| </ul> | |
| <li> | |
| <i class="fas fa-envelope"></i> | |
| <a href="mailto:sohaibkundi2@gmail.com" aria-label="Email us at sohaibkundi2@gmail.com">sohaibkundi2@gmail.com</a> | |
| </li> | |
| <li> | |
| <i class="fas fa-phone-alt"></i> | |
| <a href="tel:+923350532352" aria-label="Call us at +92 335 053 2352">+92 335 053 2352</a> | |
| </li> | |
| <li> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span aria-label="Our location"> | |
| <i class="fas fa-map-marker-alt" aria-hidden="true"></i> | |
| Tank City, PK | |
| </span> | |
| </li> | |
| </ul> |
🤖 Prompt for AI Agents
In index.html around lines 274 to 286, the contact list uses icon-only elements
without accessible labels; add accessible text for each icon link (e.g., include
visually hidden text or an aria-label on the <a> elements for email and phone)
and replace the non-link location item with a non-interactive element (change
the <a href="#"> for the map marker to a <span> or similar) while ensuring the
location also includes accessible text. Ensure screen-reader-only text uses a
CSS class (e.g., .sr-only) or proper aria attributes and that links retain their
visible content plus the hidden accessible labels.
| <div class="col-social"> | ||
| <h3>Follow Us</h3> | ||
| <div class="social-icons"> | ||
| <a href="#"><i class="fab fa-facebook-f"></i></a> | ||
| <a href="#"><i class="fab fa-twitter"></i></a> | ||
| <a href="#"><i class="fab fa-instagram"></i></a> | ||
| <a href="#"><i class="fab fa-github"></i></a> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Add accessible labels and proper links for social media icons.
The social media links currently point to "#" and lack accessible labels. This creates both usability and accessibility issues.
🔎 Recommended improvements
<div class="col-social">
<h3>Follow Us</h3>
<div class="social-icons">
- <a href="#"><i class="fab fa-facebook-f"></i></a>
- <a href="#"><i class="fab fa-twitter"></i></a>
- <a href="#"><i class="fab fa-instagram"></i></a>
- <a href="#"><i class="fab fa-github"></i></a>
+ <a href="https://facebook.com/yourpage" aria-label="Follow us on Facebook" target="_blank" rel="noopener noreferrer">
+ <i class="fab fa-facebook-f" aria-hidden="true"></i>
+ </a>
+ <a href="https://twitter.com/yourhandle" aria-label="Follow us on Twitter" target="_blank" rel="noopener noreferrer">
+ <i class="fab fa-twitter" aria-hidden="true"></i>
+ </a>
+ <a href="https://instagram.com/yourprofile" aria-label="Follow us on Instagram" target="_blank" rel="noopener noreferrer">
+ <i class="fab fa-instagram" aria-hidden="true"></i>
+ </a>
+ <a href="https://github.com/yourrepo" aria-label="Visit our GitHub" target="_blank" rel="noopener noreferrer">
+ <i class="fab fa-github" aria-hidden="true"></i>
+ </a>
</div>
</div>Replace the placeholder URLs with your actual social media profiles. The target="_blank" and rel="noopener noreferrer" attributes ensure external links open safely in new tabs.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="col-social"> | |
| <h3>Follow Us</h3> | |
| <div class="social-icons"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div class="col-social"> | |
| <h3>Follow Us</h3> | |
| <div class="social-icons"> | |
| <a href="https://facebook.com/yourpage" aria-label="Follow us on Facebook" target="_blank" rel="noopener noreferrer"> | |
| <i class="fab fa-facebook-f" aria-hidden="true"></i> | |
| </a> | |
| <a href="https://twitter.com/yourhandle" aria-label="Follow us on Twitter" target="_blank" rel="noopener noreferrer"> | |
| <i class="fab fa-twitter" aria-hidden="true"></i> | |
| </a> | |
| <a href="https://instagram.com/yourprofile" aria-label="Follow us on Instagram" target="_blank" rel="noopener noreferrer"> | |
| <i class="fab fa-instagram" aria-hidden="true"></i> | |
| </a> | |
| <a href="https://github.com/yourrepo" aria-label="Visit our GitHub" target="_blank" rel="noopener noreferrer"> | |
| <i class="fab fa-github" aria-hidden="true"></i> | |
| </a> | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
In index.html around lines 289 to 297, the social links use placeholder href="#"
and lack accessible labels; update each anchor to point to the actual social
profile URL, add target="_blank" and rel="noopener noreferrer" to open
externally and prevent tab-nabbing, and add accessible labels (e.g.,
aria-label="Follow us on Facebook") or include visually-hidden text inside each
link while keeping the icon aria-hidden so screen readers get meaningful link
text.
| h2 { | ||
| font-size: 26px; | ||
| margin-bottom: 15px; | ||
| background: linear-gradient(270deg, #cd88d3, #6e45e2); | ||
| -webkit-background-clip: text; | ||
| font-size: 24px; | ||
| background-clip: text; | ||
| color: transparent; | ||
| font-weight: 800; | ||
| } | ||
|
|
||
| .contact-bottom h3{ | ||
| padding-bottom: 10px; | ||
| color: #331; | ||
| h3 { | ||
| color: #2c2c2c; | ||
| font-size: 18px; | ||
| margin-bottom: 20px; | ||
| position: relative; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .contact-bottom-2nd ul{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 2vh; | ||
| text-align: start; | ||
| h3::before { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: -8px; | ||
| height: 3px; | ||
| width: 30px; | ||
| background: linear-gradient(90deg, #6e45e2, #cd88d3); | ||
| border-radius: 2px; | ||
| } |
There was a problem hiding this comment.
Scope heading styles to footer to avoid unintended side effects.
The h2 and h3 selectors are global and will affect ALL headings throughout the page, not just the footer. This can cause unexpected styling issues in other sections like the hero, testimonials, and packages sections.
🔎 Recommended fix with scoped selectors
-.footer-wrapper {
+.footer-wrapper,
+.footer-content {
background-color: #fbfbfb;
width: 100%;
font-family: 'Segoe UI', sans-serif;
border-top: 1px solid #eaeaea;
}
-.contact-bottom {
+.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
padding: 80px 20px 50px 20px;
}
-h2 {
+.footer-wrapper h2 {
font-size: 26px;
margin-bottom: 15px;
background: linear-gradient(270deg, #cd88d3, #6e45e2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
}
-h3 {
+.footer-wrapper h3 {
color: #2c2c2c;
font-size: 18px;
margin-bottom: 20px;
position: relative;
font-weight: 700;
}
-h3::before {
+.footer-wrapper h3::before {
content: '';
position: absolute;
left: 0;
bottom: -8px;
height: 3px;
width: 30px;
background: linear-gradient(90deg, #6e45e2, #cd88d3);
border-radius: 2px;
}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In style.css around lines 768 to 795, the h2 and h3 rules are global and should
be scoped to the footer to avoid affecting headings site-wide; update the
selectors to target the footer container (e.g., replace h2 with .footer h2 and
h3 with .footer h3, and h3::before with .footer h3::before or use the actual
footer ID/class in the project) and keep the existing declarations unchanged so
only footer headings receive these styles.
| ul { | ||
| padding: 0; | ||
| margin: 0; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .contact-bottom-2nd ul li a { | ||
| ul li { | ||
| margin-bottom: 12px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| /* Links Styling */ | ||
| ul li a { | ||
| text-decoration: none; | ||
| color: #333333; | ||
| font-size: 18px; | ||
| font-weight: 500; | ||
| letter-spacing: 1px; | ||
| color: #555; | ||
| font-size: 15px; | ||
| transition: transform 0.3s ease, color 0.3s ease; | ||
| } | ||
|
|
||
| .contact-bottom-2nd ul a:hover { | ||
| ul li a:hover { | ||
| transform: translateX(6px); | ||
| background: linear-gradient(90deg, #3a00d8, #f1345d); | ||
| color: transparent; | ||
| -webkit-background-clip: text; | ||
| background-clip: text; | ||
| color: transparent; | ||
| } |
There was a problem hiding this comment.
Scope list and link styles to footer to prevent affecting other sections.
The ul, ul li, and ul li a selectors are global and will override list styling throughout the entire page, including navigation, packages, and other sections that use lists.
🔎 Recommended fix with scoped selectors
-.col-brand p {
+.footer-wrapper .col-brand p {
color: #666;
line-height: 1.6;
font-size: 15px;
max-width: 300px;
}
-ul {
+.footer-wrapper ul {
padding: 0;
margin: 0;
list-style: none;
}
-ul li {
+.footer-wrapper ul li {
margin-bottom: 12px;
display: flex;
align-items: center;
}
/* Links Styling */
-ul li a {
+.footer-wrapper ul li a {
text-decoration: none;
color: #555;
font-size: 15px;
transition: transform 0.3s ease, color 0.3s ease;
}
-ul li a:hover {
+.footer-wrapper ul li a:hover {
transform: translateX(6px);
background: linear-gradient(90deg, #3a00d8, #f1345d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .contact-bottom-2nd ul li a { | |
| ul li { | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| /* Links Styling */ | |
| ul li a { | |
| text-decoration: none; | |
| color: #333333; | |
| font-size: 18px; | |
| font-weight: 500; | |
| letter-spacing: 1px; | |
| color: #555; | |
| font-size: 15px; | |
| transition: transform 0.3s ease, color 0.3s ease; | |
| } | |
| .contact-bottom-2nd ul a:hover { | |
| ul li a:hover { | |
| transform: translateX(6px); | |
| background: linear-gradient(90deg, #3a00d8, #f1345d); | |
| color: transparent; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .footer-wrapper ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| .footer-wrapper ul li { | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| /* Links Styling */ | |
| .footer-wrapper ul li a { | |
| text-decoration: none; | |
| color: #555; | |
| font-size: 15px; | |
| transition: transform 0.3s ease, color 0.3s ease; | |
| } | |
| .footer-wrapper ul li a:hover { | |
| transform: translateX(6px); | |
| background: linear-gradient(90deg, #3a00d8, #f1345d); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } |
🤖 Prompt for AI Agents
In style.css around lines 804 to 830, the current selectors (ul, ul li, ul li a)
are global and will override list styles site-wide; scope these rules to the
footer (or the specific container) by replacing the global selectors with a
footer-scoped selector like .footer ul, .footer ul li, and .footer ul li a (or
the container's class) and keep the same properties; ensure hover rules are also
scoped the same way so only footer lists get the transform, background-clip, and
color changes.
1 participant
…gradients
Refactors the footer component to improve visual hierarchy and responsiveness.
Changes include:
After
Before
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.