<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.