Website: Beautiful Dividers

14. Beautiful Dividers

Create stylish transitions between the sections

Mentor Seraphina

“Something’s still missing between the sections. No dull lines – we need atmosphere, depth, maybe even a bit of rebellion in pixels.” She taps the sketch. “Fixed background images with a bold slogan. That way, it doesn’t feel like a pause, but like a breath before the next chapter.”

She leans back and gives you a challenging look. “Everything except the big container and the rounded corners – you write that yourself. And if it doesn’t look dramatic enough, we start over.” Tinker already prepared three example containers in the HTML – Hiram had more pressing matters.
Something about a beard and fire magic.”

Your task

The HTML

HTML

<section class="future future-1 flex container-large">
     <div class="future-slogan center">
          <h2>For a better <span class="future-span">Future</span></h2>
     </div>
</section>

This container is your foundation:

Set its height to about 70% of the viewport Add inner padding using the large spacing variable (–spacing-large)
Align content to the bottom (consider your axis!)
Center content horizontally within the container
Apply strongly rounded corners using the large border radius variable from :root

These three classes are your background containers. Each gets a unique fixed background image:

img/future/communication.jpg
img/future/new-ironspire.jpg
img/future/conversion.jpg

The background should:

Not repeat
Be centered and cover the entire area
Stay fixed during scrolling
(hint: the magic word ends in -attachment)

This block highlights your in-image text:

Set a max width of around 30rem for readability
Use a dark, translucent background via –transparent-dark
Add a blur effect for a magical touch:
background-color: var(–transparent-dark); backdrop-filter: blur(10px);
Don’t forget inner padding, rounded corners, and light-colored text

The small title within the slogan:

Use normal font weight instead of bold
Text color: –highlight
Line height: 1 – tight and compact
Font size: –font-size-title
Uppercase all letters with a wide letter spacing (around 10px)

The large centerpiece text:

Font size: around 7rem – huge
Font color: –light
Font weight: bold
Activate small-caps mode to display
lowercase as small uppercase
Tighten the spacing with negative letter-spacing (-7px recommended)

Make everything more compact for smaller screens:

Reduce the title font size to –font-size-base
Shrink the big headline to 4.5rem
Adjust letter spacing to -5px

Solve the task here in the console [–> Open in a new tab]

CSS

/* future section */
.future {
   height: 70vh;
   padding: var(--spacing-large);
   align-items: end;
   justify-content: center;
   border-radius: var(--border-large);
}

.future-1 {
   background: url("img/future/communication.jpg") no-repeat center/cover;
   background-attachment: fixed;
}

.future-2 {
   background: url("img/future/new-ironspire.jpg") no-repeat center/cover;
   background-attachment: fixed;
}

.future-3 {
   background: url("img/future/conversion.jpg") no-repeat center/cover;
   background-attachment: fixed;
}

.future-slogan {
   max-width: 30rem;
   background-color: var(--transparent-dark);
   backdrop-filter: blur(10px);
   padding: var(--spacing-large);
   border-radius: var(--border-large);
   color: var(--light);
}

.future-slogan h2 {
   font-weight: var(--normal);
   color: var(--highlight);
   line-height: 1;
   font-size: var(--font-size-title);
   text-transform: uppercase;
   letter-spacing: 10px;
}

.future-span {
   font-size: 7rem;
   color: var(--light);
   font-weight: var(--bold);
   font-variant: small-caps;
   letter-spacing: -7px;
}

@media (width<768px) {
   .future-slogan h2 {
      font-size: var(--font-size-base);
   }

   .future-span {
      font-size: 4.5rem;
      letter-spacing: -5px;
   }
}