how to make the hero section layout?
I need a container for this right ? The purple gradient image on the right side of the womans image confuses me
4 Replies
I'm pretty sure that that is a background image
Of course you don't want to define the heights like that but you get the idea
You could place the image in a container and add a pseudo element with the gradient
https://codepen.io/cbolson/pen/vEYPNzV
Some magic numbers in here to throw it together quickly.
No doubt there are alternative/better/simpler ways to achieve this.
A Grid two column Layout for the Hero
Right Column with:
Simple way:
1 div for the image of the woman and pseudo elements for floating tags ( span will do )
2nd div absolutely placed ( inset-0 ) to hold the background I Image
Harder approach:
A div with the woman's image, it has a background gradient and is shaped like a pill
The 2nd div uses 2 triangles to create a parallelogram with a gradient background