eagle-bot

byNubl Rahman

Create an HTML and CSS section that matches this design: * A large blue container with a rounded rectangle shape. * Top section has very large border-radius (40-60px) with slightly protruding curved corners. * Bottom section is another blue panel attached to the top panel with matching rounded corners. * Use a thin yellow outline around the top card. * Center-align all content. * Include a yellow inner content area with rounded corners. * Add decorative organic wave patterns in the yellow area using CSS gradients. * Create the unusual corner shape using pseudo-elements (`::before`, `::after`) and border-radius rather than SVG. * Make the layout responsive. * Use Flexbox for alignment. * Use pure HTML and CSS only. * Border radius should resemble a "soft blob card" rather than a perfect rectangle. For an even more accurate shape, specify: ``` ``` ``` Shape details: - Main card width: 90% - Top panel radius: 35px 35px 35px 35px - Add outward curved corners using ::before and ::after - Bottom panel slightly overlaps the top panel - Use overflow:hidden - Blue background: #0051B8 - Yellow border: #FFD84D - Yellow content box radius: 25px ``` If you want the exact shape from the screenshot, I'd recommend generating it with CSS clip-path or SVG, because the corner geometry is custom and difficult to reproduce perfectly with only `border-radius`. Example shape using `clip-path`: ``` ``` ``` .card { background: #0051B8; clip-path: path( "M40 0 H960 Q1000 0 1000 40 V200 Q1000 240 960 240 H40 Q0 240 0 200 V40 Q0 0 40 0Z" ); } ``` Or with a simpler CSS version: ``` ``` ``` .hero-card { position: relative; background: #0051B8; border: 4px solid #FFD84D; border-radius: 35px; padding: 60px 40px; } .hero-card::before, .hero-card::after { content: ""; position: absolute; bottom: -25px; width: 120px; height: 60px; background: #0051B8; } .hero-card::before { left: 0; border-radius: 0 0 0 35px; } .hero-card::after { right: 0; border-radius: 0 0 35px 0; } ```