- A visually appealing banner with:
- Background Color: Creates contrast and grabs user attention.
- Heading and Text: Positioned on the left to highlight key information.
- Image: Placed on the right to complement the content.
- Alignment: Proper use of margin and padding ensures all elements align as Figma.
- A section that presents three cards in a row with the following features:
- Distinct Backgrounds: Each card has a unique background style.
- Image/Icon: Adds a visual representation to each card.
- Title and Description: Provides clear and concise information about the card's content.
- Buttons: Styled with unique colors to differentiate actions.
- A section for showcasing the latest updates with two well-designed cards:
- Card 1: Displays an image on the left and content on the right.
- Card 2: Displays an image on the right and content on the left.
- Both cards include:
- News Title and Details.
- Channel Logo and Publication Time.
- A button at the bottom for user interaction.
- A call-to-action section with:
- Center-Aligned Title and Subtitle: Focused messaging to drive donations.
- Four Cards in a Row: Displays money details for different donation options.
- Full-Width Input: Includes a placeholder for user input.
- Center-Aligned Button: Makes the action prominent and user-friendly.
- Interactive hover effects across the site:
- On Card have a default background.
- Donate section cards change background on hover.
- Buttons feature hover animations to enhance interactivity.
- HTML & CSS only