<section>
  <h1>5 styling apps that will help you create a distinctive look for your website</h1>
  <p class="subhead">These apps will help you edit your photos, add filters, and create stunning looks.</p>
</section>
@layer demo {
  h1 {
    text-wrap: balance;
    max-inline-size: 25ch;
    font-size: clamp(2rem, 5vw, 5rem);
    margin-inline: auto;
    color: white;
    text-shadow: 0 1px 1px #000;
  }
  
  .subhead {
    text-wrap: balance;
    max-inline-size: 60ch;
    font-size: 1.25rem;
    font-weight: 300;
    margin-inline: auto;
    color: hsl(0 0% 80%);
  }
  
  section {
    background: 
      linear-gradient(#000d 0 0),
      url("https://assets.codepen.io/2585/sean-pollock-PhYq704ffdA-unsplash.jpg");
    background-size: cover;
    background-position: center;
    display: grid;
    gap: 2ch;
    place-content: center;
    text-align: center;
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.