https://github.com/rakibul263/bangladesh-2.0

A beautiful HTML & CSS project showcasing a modern and vibrant vision of Bangladesh! 🇧🇩
https://github.com/rakibul263/bangladesh-2.0

css html

Last synced: 3 months ago
JSON representation

A beautiful HTML & CSS project showcasing a modern and vibrant vision of Bangladesh! 🇧🇩

• Host: GitHub
• URL: https://github.com/rakibul263/bangladesh-2.0
• Owner: rakibul263
• Created: 2025-01-10T17:06:21.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-01-12T15:29:55.000Z (5 months ago)
• Last Synced: 2025-01-18T02:19:28.070Z (4 months ago)
• Topics: css, html
• Language: HTML
• Homepage: https://rakibul263.github.io/BANGLADESH-2.0/
• Size: 4.66 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
#  BANGLADESH 2.0

## Requirements

### 1. Banner Section

- 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.



---

### 2. The Vision of Future

- 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.

## 

### 3. Recent News

- 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.



---

### 4. Donate For Bangladesh

- 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.

 

---

# CHALLENGES (10)

### 5. Newsletter Section

- A clean and functional design for newsletter subscriptions:

  - **Background Color**: Sets it apart visually.

  - **Center-Aligned Title and Subtitle**: Encourages users to subscribe.

  - **Form**: Includes an input field and a button styled as per the design.

 

---

### 6. Hover Effects on Page

- 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.

---

### 7. Quote Section

- A dedicated section to display an inspirational quote with:

  - **Icon Background**: Styled as per the design for visual appeal.

 

---

# Technology

- HTML & CSS only

- You can't use any other technology / Framework.

---