From the course: The Freelance Stack: Real Project with Next.js and Strapi

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Styling: Article hero section

Styling: Article hero section - Next.js Tutorial

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

Styling: Article hero section

“

So with the JSX structure now, we can build our styling for that article intro component. And again, we're going to go into our blocks folder here, create an article intro partial file SCSS like that. And we're going to use the article intro class and bring it into our main SCSS as well. Like that. Perfect. Now, what do we have? Well, we're going to have quite some padding on this one because we need the padding at the top to have enough space for the header and we're also going to have some padding on both sides as well and then the height similar to the one on the hero section will be 83 ram right 830 pixels now before we look at how that looks in the browser we actually want to take care of the background image here so i'm going to say background which is the container and again this is very similar to what we've done on our hero section, which is the position needs to be absolute, it needs to be top left positioned at zero, in this case also the z index minus one, so that it sits…

Contents