update styling "what user says" on home page #877
Conversation
added hover feature in testimonial cards
WalkthroughThe changes in this pull request primarily involve updates to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
index.html (5)
126-130: LGTM! Consider z-index refinementThe hover effect implementation matches the requirements and creates a consistent experience with the feature cards. However, the z-index value might cause unnecessary stacking context issues since the testimonial cards don't overlap.
.testimonial-card:hover { transform: translateY(-10px) scale(1); box-shadow: 0 4px 8px #0073b1; - z-index: 3; }
Line range hint
1-1000: Consolidate duplicate CSS rulesThere are multiple style blocks with duplicate rules for
.features-card,.testimonial-card, and other classes. This makes the CSS harder to maintain and can lead to specificity issues.Consider:
- Consolidating all styles into a single style block
- Moving styles to an external CSS file
- Using CSS preprocessors like SASS/LESS for better organization
Example of duplicated rules that should be consolidated:
.features-cardappears multiple times with different styles.testimonial-cardstyling is repeated- Media queries are duplicated
Line range hint
450-460: Enhance accessibility for social media iconsThe social media icons lack proper accessibility attributes, which makes them harder to use with screen readers.
Add appropriate aria-labels to the social media links:
-<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-linkedin-in"></i></a> -<a href="#"><i class="fab fa-instagram"></i></a> +<a href="#" aria-label="Visit our Facebook page"><i class="fab fa-facebook-f"></i></a> +<a href="#" aria-label="Follow us on Twitter"><i class="fab fa-twitter"></i></a> +<a href="#" aria-label="Connect with us on LinkedIn"><i class="fab fa-linkedin-in"></i></a> +<a href="#" aria-label="Follow us on Instagram"><i class="fab fa-instagram"></i></a>
Line range hint
500-520: Optimize performance of scroll progress barThe scroll event listener can fire frequently and impact performance. Additionally, multiple versions of Font Awesome are being loaded.
- Debounce the scroll event:
+ function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } - window.addEventListener('scroll', updateProgressBar); + window.addEventListener('scroll', debounce(updateProgressBar, 16));
- Remove duplicate Font Awesome imports and use a single version:
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" /> +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
Line range hint
1-50: Fix HTML structure and meta tagsThere are several HTML best practices issues that should be addressed:
- Add viewport meta tag for proper mobile rendering
- Close the chatbot anchor tag
- Remove duplicate head tags
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LinkedIn Resume Builder - Home</title> <!-- Remove duplicate head tags and consolidate meta tags --><div class="chatbot-container"> <button class="chatbot-button group"> <img class="h-20" src="chatbot.gif" alt="chatbot"> <span class="tooltip-text"> Welcome to Resum Resume! <br> How can I help You? ^_^ </span> </button> </div> + </a>
##Pull Request for Resum-Resume 💡
##Issue Title: Update Styling for "What User Says" on Home Page
Info about the related issue (Aim of the project): Improve the user experience by enhancing the visual appeal of the testimonial cards on hover.
Name: Abhishek Sharma
GitHub ID: Abhishek-Sharma-069
Email ID: [email protected]
Closes: #876
**Describe the Add-ons or Changes You've Made 📃
I improved the styling of the testimonial cards on the homepage. Now, when users hover over a testimonial card, it lifts slightly with a transform effect and features a subtle #0073b1 box-shadow to make it more visually engaging. This change adds a dynamic feel to the cards, creating a smoother user experience.
**Type of Change ☑️
Code style update (formatting, local variables)
How Has This Been Tested? ⚙️
I tested the updated styling locally across different screen resolutions to ensure that the hover effect is consistent and does not interfere with other homepage elements. The added effects work smoothly and do not generate any new warnings.
**Checklist ☑️
My code follows the guidelines of this project.
I have performed a self-review of my own code.
My changes generate no new warnings.
I have added things that prove my fix is effective or that my feature works.
Summary by CodeRabbit
New Features
Improvements