Website: Style the section

08. Style the section

Use your cheat sheet – and do it right!

Mentor Seraphina

“Well, ready for some real craftsmanship?”
This isn’t just any dull layout – this is the opening act of the rebellion.
When someone enters your page, it has to hit hard – visually, of course. That’s why you’re getting my instructions for the hero section. No fluff, no prefab nonsense. Just clean structure, precise CSS, and a layout with attitude.

I’ll tell you what you need – you make it happen.
And if something’s off? You’ll see it. And trust me – so will I. Let’s go.

Your task

Listen closely
You’re building a grid – and not just any grid. Two columns. The first gets a solid 7 fractions, the second 5. Got it? The gap in between? Not just “whatever” – use the spacing variable –spacing-large to keep it tidy. And if you forget to vertically center your content – I’ll notice.
So: use align-items: center.

When the screen shrinks (below 768 pixels), your grid needs to react. Yes, really.
So: change from two columns to one with 1fr. That keeps everything on track.
And: The slider-container gets order: 2 and a height of 400px.
The hero box becomes order: 1 – so it sits at the top where it belongs

Why?
Because on smaller screens, the hero comes first – not the fancy extras.

A button isn’t just a boring slab. Give it:

background-color: var(–secondary)
color: var(–light)
Padding: 10px top/bottom, 20px left/right
Rounded corners: border-radius: var(–border-small)
Display: inline-block
Letter-spacing: 2px
Transition: 0.3s
No border
And: cursor: pointer – because it better react when clicked

A button without impact is like a rebel without a cause.

When someone hovers over the button, you want to make an impression. Change the background to var(–green) (yes, go find that variable!). Keep the text light and absolutely no underline, got it?

If you place an icon inside the button – which you absolutely should – then there are rules:

Font size: 1.3rem
Color: var(–light)
No italic nonsense
And make sure it’s vertically aligned. We want elegance, not a clumsy layout.

Give your main heading a gentle nudge upward.
Not much – margin-top: -1.1rem is enough.
It’ll keep your layout from looking like it was rolled together by accident.

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

CSS

.slide-grid {
   display: grid;
   grid-template-columns: 7fr 5fr;
   grid-gap: var(--spacing-large);
   align-items: center;
}

/* Media Queries */

@media (width<768px) {
   .slide-grid {
      grid-template-columns: 1fr;
   }

   .slider-container {
      order: 2;
      height: 400px;
   }

   .hero {
      order: 1;
   }
}

/* Buttons */
.btn {
   background: var(--secondary);
   color: var(--light);
   padding: 10px 20px;
   border-radius: var(--border-small);
   display: inline-block;
   letter-spacing: 2px;
   transition: 0.3s;
   border: none;
   cursor: pointer;
}

.btn:hover {
   text-decoration: none;
   background: var(--green);
   color: var(--light);
}

.btn .material-icons-rounded {
   font-size: 1.3rem;
   color: var(--light);
   font-style: normal;
   vertical-align: middle;
}

h1 {
   margin-top: -1.1rem;
}