<section>
<h1>To Autumn</h1>
<p class="author">by john keats</p>
<p>Season of mists and mellow fruitfulness,
Close bosom-friend of the maturing sun;
Conspiring with him how to load and bless
With fruit the vines that round the thatch-eves run;
To bend with apples the moss'd cottage-trees,
And fill all fruit with ripeness to the core;
To swell the gourd, and plump the hazel shells
With a sweet kernel; to set budding more,
And still more, later flowers for the bees,
Until they think warm days will never cease,
For summer has o'er-brimm'd their clammy cells.</p>
<p>Who hath not seen thee oft amid thy store?
Sometimes whoever seeks abroad may find
Thee sitting careless on a granary floor,
Thy hair soft-lifted by the winnowing wind;
Or on a half-reap'd furrow sound asleep,
Drows'd with the fume of poppies, while thy hook
Spares the next swath and all its twined flowers:
And sometimes like a gleaner thou dost keep
Steady thy laden head across a brook;
Or by a cyder-press, with patient look,
Thou watchest the last oozings hours by hours.
</p>
</section>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tai+Heritage+Pro&family=Yeseva+One&display=swap" rel="stylesheet">
h1 {
color: #FF9241;
background-color: #FFF0E4;
font-family: 'Yeseva One', cursive;
font-size: 2.5rem;
position: absolute;
top: -2.1rem;
left: 0;
width: calc(100% - 6rem);
padding: 2rem 3rem 1rem 3rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
section {
position: relative;
width: max-content;
margin: 1rem auto;
padding: 2rem 3rem;
background-color: #FFE1CB;
border-radius: 0.5rem;
padding-top: calc(2rem + 2rem); /* assuming heading size is about 2 rem, fragile */
}
.author {
margin-top: 3rem;
font-size: 0.75rem;
text-transform: uppercase;
}
p {
white-space: pre-wrap;
font-family: 'Tai Heritage Pro', serif;
color: #222;
}
body {
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.