Front-End
I am always confused in this type of design you can say never worked on this type. Look at the design in Dekstop the background image {of girl with} is going to the background of text of hero area. I thought that I will make a div in which all the navigation and hero will be there than I will put that girl as a background to it, But when I see to mobile version It is like using flex and doing column or you can say even using grid. I think this type of designs can be only made using grid but not using background image. But here is a problem using grid also that how will that image will render as a background of text [Like small text having some area of image as a background]. What are the approaches to it.
Thanks.
4 Replies
designers 🤮
yea, this is absolute not the easiest thing to do. grid seems the way to go. also because the cta buttons and stats are changing position compared to the skewed lint. the image would then be placed in a grid item, overlapping a part of the text in desktop view)
so for desktop a 3 column grid:
- hero content span over columns 1 and 2:
- image span over columns 2 and 3;
the size of column 2 will determine the amount of overlap
but first I would ask the designer what he/she had in mind for the image and how strict you have to follow the design
Really it is not giving a logic even with using grid. If we span then how the image will be set back we will then use position relative to each section. The position of cta buttons can be changed by using grid but main problem is look at the image 😐
something like this
https://codepen.io/MarkBoots/pen/PoVxGLY
Yes this