├── B11-A01-Bangladesh2-0.fig ├── Bangladesh 2.0.png ├── UI ├── banner.png ├── donate.png ├── news.png ├── newsletter.png ├── quotes.png └── vision.png ├── assets ├── al-jazeera.png ├── card-icon.png ├── facebook.png ├── hero.png ├── instagram.png ├── quote-bg.png ├── satelite.png └── x.png └── readme.md /B11-A01-Bangladesh2-0.fig: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/B11-A01-Bangladesh2-0.fig -------------------------------------------------------------------------------- /Bangladesh 2.0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/Bangladesh 2.0.png -------------------------------------------------------------------------------- /UI/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/banner.png -------------------------------------------------------------------------------- /UI/donate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/donate.png -------------------------------------------------------------------------------- /UI/news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/news.png -------------------------------------------------------------------------------- /UI/newsletter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/newsletter.png -------------------------------------------------------------------------------- /UI/quotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/quotes.png -------------------------------------------------------------------------------- /UI/vision.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/UI/vision.png -------------------------------------------------------------------------------- /assets/al-jazeera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/al-jazeera.png -------------------------------------------------------------------------------- /assets/card-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/card-icon.png -------------------------------------------------------------------------------- /assets/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/facebook.png -------------------------------------------------------------------------------- /assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/hero.png -------------------------------------------------------------------------------- /assets/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/instagram.png -------------------------------------------------------------------------------- /assets/quote-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/quote-bg.png -------------------------------------------------------------------------------- /assets/satelite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/satelite.png -------------------------------------------------------------------------------- /assets/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/B11A1--assignment-1/b9cefc902dc1d4234c27d8ffacc94b1fd5a2102e/assets/x.png -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ### WELCOME TO ASSIGNMENT-001 2 | 3 | # BANGLADESH 2.0 4 | 5 | ## **📅 Deadline For 60 marks**: 11th January , 2025 ( 11:59 pm ⏱️) 6 | 7 | ## **📅 Deadline For 50 marks**: 12th January , 2025 ( 11:59 pm ⏱️) 8 | 9 | **📅 Deadline For 30 marks**: Any time after 12th January. 10 | 11 | ## Requirements (50) 12 | 13 | ### 1. Banner Section 14 | 15 | - A visually appealing banner with: 16 | - **Background Color**: Creates contrast and grabs user attention. 17 | - **Heading and Text**: Positioned on the left to highlight key information. 18 | - **Image**: Placed on the right to complement the content. 19 | - **Alignment**: Proper use of margin and padding ensures all elements align as Figma. 20 | 21 | 22 | 23 | --- 24 | 25 | ### 2. The Vision of Future 26 | 27 | - A section that presents three cards in a row with the following features: 28 | - **Distinct Backgrounds**: Each card has a unique background style. 29 | - **Image/Icon**: Adds a visual representation to each card. 30 | - **Title and Description**: Provides clear and concise information about the card's content. 31 | - **Buttons**: Styled with unique colors to differentiate actions. 32 | 33 | ## 34 | 35 | ### 3. Recent News 36 | 37 | - A section for showcasing the latest updates with two well-designed cards: 38 | - **Card 1**: Displays an image on the left and content on the right. 39 | - **Card 2**: Displays an image on the right and content on the left. 40 | - Both cards include: 41 | - News Title and Details. 42 | - Channel Logo and Publication Time. 43 | - A button at the bottom for user interaction. 44 | 45 | 46 | 47 | --- 48 | 49 | ### 4. Donate For Bangladesh 50 | 51 | - A call-to-action section with: 52 | - **Center-Aligned Title and Subtitle**: Focused messaging to drive donations. 53 | - **Four Cards in a Row**: Displays money details for different donation options. 54 | - **Full-Width Input**: Includes a placeholder for user input. 55 | - **Center-Aligned Button**: Makes the action prominent and user-friendly. 56 | 57 | 58 | 59 | --- 60 | 61 | # CHALLENGES (10) 62 | 63 | ### 5. Newsletter Section 64 | 65 | - A clean and functional design for newsletter subscriptions: 66 | - **Background Color**: Sets it apart visually. 67 | - **Center-Aligned Title and Subtitle**: Encourages users to subscribe. 68 | - **Form**: Includes an input field and a button styled as per the design. 69 | 70 | 71 | 72 | --- 73 | 74 | ### 6. Hover Effects on Page 75 | 76 | - Interactive hover effects across the site: 77 | - On Card have a default background. 78 | - Donate section cards change background on hover. 79 | - Buttons feature hover animations to enhance interactivity. 80 | 81 | --- 82 | 83 | ### 7. Quote Section 84 | 85 | - A dedicated section to display an inspirational quote with: 86 | - **Icon Background**: Styled as per the design for visual appeal. 87 | 88 | 89 | 90 | --- 91 | 92 | ## 5 Commit and No Lorem Ipsum 93 | 94 | - A minimum of five commits were made to ensure incremental progress. 95 | - No placeholder text (e.g., Lorem Ipsum) . All content must have to be meaningful and relevant. 96 | 97 | --- 98 | 99 | # Technology 100 | 101 | - HTML & CSS only 102 | - You can't use any other technology / Framework. 103 | 104 | --- 105 | 106 | # What to Submit 107 | 108 | - Your Github Repository . ex.("https://github.com/ProgrammingHero1/B11A1--assignment-1") 109 | - Your Live Link. ex.(https://github.com/ProgrammingHero1/B11A1--assignment-1) 110 | 111 | --- 112 | --------------------------------------------------------------------------------