In this challenge, you will develop a simple profile card that includes a profile picture, name, title, links to social media profiles, and a call-to-action (CTA) button.
- Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
- Interactivity:
- Buttons: Implement and style buttons to reflect different states - normal, hover, and focus.
- Links: Implement and style links to reflect different states - normal, hover, and focus.
- Links: You may leave the href attributes empty or use links to your own profile!
- Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
- [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
- [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary, using proper alt tags for images and ensuring that buttons and links can be navigated to and selected using keyboard controls.
- Tip: For the purpose of the solution screenshot vs design comparison during submission, you might want to use the same images and text as per the design, but feel free to personalize the content after the screenshots have been generated!