Develop a feedback rating card that enables users to provide a rating from 1 to 5. Your task is to replicate the provided design with precision, focusing on the color scheme, layout, and interactive elements.
How did we do?
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
Resources:
Font Awesome CDN: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Color Codes:
- Card Background: #2d3748
- Icon Background: #1f2937
- Icon Color: #fbbf24
- Text Color: #ffffff
- Button Background: #4a5568
- Submit Button Background: #f6ad55
Tasks:
- Structure the HTML with a feedback-card container, including a header section with a star icon, text asking for feedback, rating buttons, and a submit button.
- Style the card in CSS using the provided color codes, ensuring the star icon from Font Awesome is centered within a circular background.
- Implement hover effects on the buttons to change opacity on user interaction.
Deliverables
- A fully functional HTML file named feedback.html.
- A CSS file named styles.css that contains all the styling for your feedback interface.