In this challenge, you will develop a video card featuring the details of a video.

The card should display a thumbnail of the video, the title, creator's name and avatar, the number of views, the upload time, and the video duration.

Functional Requirements

• Video thumbnail: Display the video's thumbnail with the video duration overlaid on the thumbnail.
• Video title: Truncate long titles if needed, as per the design.
• Video duration: Display in MM:SS or HH:MM:SS format.
• Creator details: Display the creator's name and avatar. If the creator is verified, display a verification tick next to the name.
• Number of views: Use big number rounding and truncation e.g., 500,000 to 500K, 5,000,000 to 5M.
• Date created: Display in relative time format e.g., 5 months ago.
• Click action: Clicking on the creator name should take the user to their channel. Clicking anywhere else leads to the Video Detail Page. You may leave the redirection links empty if the destination pages are not part of this challenge.

General Requirements

• 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:
  • Card: Implement in normal and hover states
  • Channel link states: Implement and style links to reflect different states - normal, hover, focus and disabled.
• Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
• 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 can be navigated to and selected using keyboard controls.