designedbycarolyn Posted June 4 Share Posted June 4 (edited) Hello, I'm trying to achieve this specific look for my hero section (see attached image below). I want the logo and the button centered beside each other, and is responsive even on mobile. I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page. Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕 Is this achievable with Squarespace? Thank you so much in advance!  Site: https://www.designedbycarolyn.co/home   Edited June 4 by designedbycarolyn Added extra question Link to comment
tuanphan Posted June 6 Share Posted June 6 I can help you with these, if you still want to continue, let me know, I will give you code I want the logo and the button centered beside each other, and is responsive even on mobile. I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page. I can't help with this Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
designedbycarolyn Posted June 7 Author Share Posted June 7 21 hours ago, tuanphan said: I can help you with these, if you still want to continue, let me know, I will give you code I want the logo and the button centered beside each other, and is responsive even on mobile. I would also like to add 2 anchor links on both sides of the header that jump to respective sections on the same page. I can't help with this Third thing is that to add a gradient overlay so that the video background fades into the second white section. I tried many different codes but still can't manage to execute it 😕 Hello! Yes that would be amazing! I got the gradient overlay figured out!! 😄 Link to comment
designedbycarolyn Posted June 7 Author Share Posted June 7 @tuanphan Sorry if you don't mind me asking another question, would you kindly let me know how I can bring the dove with rose illustration on top of the section on the right? I have attached an image for reference but I have achieved a sticky split section for those 2 sections in the image. And I have used float-right with margin-right: -40% to achieve the effect of the illustration going off of the section. However, I want the illustration to sit on top of the adjacent section on the left so that it is visible. I'm not sure how I can achieve this, I have even even tried playing with the overflow but nothing seems to work 😞 Thank you so much!!! Link to comment
Solution tuanphan Posted June 10 Solution Share Posted June 10 On 6/7/2024 at 7:40 AM, designedbycarolyn said: @tuanphan Sorry if you don't mind me asking another question, would you kindly let me know how I can bring the dove with rose illustration on top of the section on the right? I have attached an image for reference but I have achieved a sticky split section for those 2 sections in the image. And I have used float-right with margin-right: -40% to achieve the effect of the illustration going off of the section. However, I want the illustration to sit on top of the adjacent section on the left so that it is visible. I'm not sure how I can achieve this, I have even even tried playing with the overflow but nothing seems to work 😞 Thank you so much!!! You can use this code to Custom CSS box. section[data-section-id="6661447f7e5542291edb54cf"] { z-index: 999999 !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
designedbycarolyn Posted June 11 Author Share Posted June 11 18 hours ago, tuanphan said: You can use this code to Custom CSS box. section[data-section-id="6661447f7e5542291edb54cf"] { z-index: 999999 !important; } Thank you so much!!! XD Will start using the trick from now on! How can I get you a cup of coffee? 🙂 Link to comment
tuanphan Posted June 13 Share Posted June 13 On 6/11/2024 at 10:54 AM, designedbycarolyn said: Thank you so much!!! XD Will start using the trick from now on! How can I get you a cup of coffee? 🙂 You can use link in my signature. Thank you. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment