Featured Author

N. Scott Momaday and the First Door

In 1969, N. Scott Momaday became the first Native American writer to win the Pulitzer Prize for Fiction, for his novel House Made of Dawn. He was Kiowa, born in Lawton, Oklahoma. His win did not create the Native American literary tradition. It made it visible to a mainstream that had been ignoring it.

Momaday is also a poet, playwright, memoirist, and visual artist. His writing returns again and again to the same territory: the relationship between language, land, and identity. He believed that to name a place is to belong to it. That to speak a language is to carry the world it built.

In this stage you will build the Featured Author section: a two-column card layout using CSS Grid, with his words presented as a large decorative pull quote. The quotation mark is drawn entirely in CSS using the ::before pseudo-element you already know, which will display the Unicode character for an open double quotation mark.

Add the Featured Section CSS

Add this CSS inside your <style> tag, after the .subtitle rule:

Add the Featured Author HTML

Add this after your </section> closing tag for the hero:

Why These Styles?

• grid-template-columns: 2fr 1fr on .featured-card — creates an asymmetric two-column layout. The left column gets twice the space (2 fractions) and the right gets one. This is a classic editorial grid: text-heavy on one side, a focused stat or image on the other. Asymmetry creates hierarchy.
• content: '\201C' on .featured-quote::before — \201C is the Unicode code point for the left double quotation mark ("). The backslash tells CSS to interpret the next four characters as a Unicode escape. Playfair Display renders this quotation mark beautifully at large sizes.
• position: relative on .featured-quote and position: absolute on ::before — these two always work together. Absolute positioning anchors the pseudo-element to its nearest positioned parent. Without position: relative on the parent, the ::before would anchor to the page instead.
• color: #c9a84c — a warm antique gold. Gold appears twice in this site: on the featured quote mark and on the stat number. These two anchors create a visual thread through the page. Readers may not consciously notice, but it creates coherence.
• align-items: start on .featured-card — prevents the shorter stat card from stretching to match the height of the taller text column. Without this, CSS Grid defaults to stretch, which would make the dark stat card fill all the way down and look unbalanced.