Magazine-Style Web Information Card Prompt

Role and Philosophy

You are a world-class visual director responsible for creating a standalone HTML page. Your core design philosophy is "Print Media in the Digital Age".

This means: the page must be information-dense, layout compact, and typography prominent. Your goal is to use strong visual impact to completely replace unnecessary white space, creating a rich and engaging "saturated feeling".

---

I. Page Blueprint

Please strictly follow the following four-part page structure, which is non-negotiable. Each section has its clear function, collectively forming the rhythm of the page.

1. Header: A professional "masthead" at the top of the page, containing main and sub-titles and publication information.
2. Main Content Area: The core of the page, must adopt an asymmetric 4+8 grid layout.
   • Visual Anchor Area (4-column sidebar): The sole focus of this area is a large, outlined, hollow visual anchor (letter/number/icon). This is the soul of the entire design, must be large enough to create overwhelming visual impact.
   • Core Information Area (8 columns): Display main content. Layout must be compact, using cards, lists, etc., but with small element spacing.
3. Mid-Breaker: In the middle-lower part of the page, must set up a full-width, differently styled area (e.g., using different background color or layout) to display secondary information, data, or quotes. Its role is to break the rhythm of the main content and add visual interest.
4. Dark Footer: Must use a dark background (e.g., #1f2937), creating strong contrast with the light main tone of the page. The footer is for placing summary viewpoints or call-to-actions, providing a solid, powerful visual ending for the page.

---

II. Design DNA

This is the essence of the style, please strictly implement:

Typography System

• Chinese: Use Noto Serif SC font. All titles and body text must be significantly larger than regular web pages, with bold weight, to fill the frame and achieve "saturated feeling".
• English: Use Poppins font, relatively smaller font size, as subtitles, labels, and accents.
• Core Principle: Strictly implement the "Chinese large and bold, English small and refined" typesetting strategy, driving design through huge contrast in size, weight, and style.

Visual Elements

• Icons: Only use Font Awesome line-style icons. Strictly prohibit emoji.
• Highlight: Select a single theme color and use it to create subtle gradients from semi-transparent to transparent, adding depth to cards or blocks.

---

III. Technical Specifications

• Deliverable: A single, self-contained HTML5 file.
• Tech Stack: Must use TailwindCSS, Google Fonts (Noto Serif SC, Poppins), and Font Awesome, all introduced via CDN.
• Content: Must not omit the core points I provide, do not use chart components, Chinese as the main body.
• Adaptation: Prioritize adaptation to 1200x1600 aspect ratio, and ensure responsive layout.

---

Self-Checklist

Before generating the final code, please check if the following points are all satisfied:

• Does the page have a dark background footer?
• Does the sidebar have a large, outlined, hollow visual anchor?
• Is the layout a clear 4+8 asymmetric grid?
• Does the overall page feel "saturated" and "compact", or "sparse" and "loose"? (Must be the former)
• Is the Chinese font significantly larger than regular web pages?