CSS help and suggestion

Considering this image. I want to implement the same contact form. which cover half of the header section and half of the white section. What are the best way to make it possible. My approach: <div className="bg-grey"> <Navbar/> <Header/> </div> <div className="ng-white absolute bottom-5%"> <contactus/> </div> I am not sure, is this a better approach.
10 Replies
Joao
Joao2y ago
@mozi47 That sounds about right. Another similar approach is to push the gray background upwards instead, since it doesn't interact with anything else and is less likely you'll have to tweak other elements because of this. Btw, you can't really push the background, you'll have to create another element just for this and place it absolutely at the top of the document. Either way it's the same principle as yours just this small difference
mozi47
mozi472y ago
Wow. Thank you Joao.
Wolle
Wolle2y ago
You could use a linear-gradient on the background of the contact-section without an actual gradient.
Joao
Joao2y ago
That's pretty clever didn't even think of it. Probably cleaner as well
mozi47
mozi472y ago
what if the background is image I tried this linear gradient. But the background of the header section is image in my case
Joao
Joao2y ago
Then you can move it as you thought originally. Or you could cut the image entirely but may not look too good, and I'm not entirely sure you can combine it with linear gradient? I think someone with more experience on this can give better advice
mozi47
mozi472y ago
Thank you Joao. Appreciate your time.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
mozi47
mozi472y ago
Thank you. This was really helpful.
mozi47
mozi472y ago
I like this approach. I will use this. Just little tweak https://codepen.io/mozi47/pen/ZEqMBKj
Want results from more Discord servers?
Add your server