Split Section Landing Page

Hello! I want to create a split section landing page that looks like this:

However, what I've managed to accomplish only looks like this: 
https://www.susiesaltzman.com/landing

Can anyone help sharing how to extend the background all the way? Thank you! 

You can add 2 sections, then we can give code to make them side by side, and use code to add an image between 2 sections

https://www.susiesaltzman.com/landing

Done!

I'd like for the left side to be #ddb99e and the right side #ba947b

😊

On 7/1/2023 at 4:36 PM, ssjewelry said:

https://www.susiesaltzman.com/landing

Done!

I'd like for the left side to be #ddb99e and the right side #ba947b

😊

The page doesn't exist. Can you check it again?

@tuanphan sorry I gave you the wrong URL

It should be working now: https://www.susiesaltzman.com/landing

I added two sections as instructed 🙂

Hi @tuanphan! Just want to check if you've been able to view the link and if you now have the code for the split section effect? 🙂

On 7/3/2023 at 6:11 PM, ssjewelry said:

@tuanphan sorry I gave you the wrong URL

It should be working now: https://www.susiesaltzman.com/landing

I added two sections as instructed 🙂

Add to Design > Custom CSS

section#landing-shop {
    width: 50%;
    float: left;
    height: 100vh;
}

section#landing-custom {
    width: 50%;
    float: left;
    height: 100vh;
}
body#collection-649ff28f39bbd271c53d0183 {
    overflow: hidden;
}
body#collection-649ff28f39bbd271c53d0183:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2023/05/15/09/18/iceberg-7994536_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
}

Thank youu! ! @tuanphan

Can you help me fix the mobile and tablet versions to look like this:

On 7/6/2023 at 4:52 PM, ssjewelry said:

Thank youu! ! @tuanphan

Can you help me fix the mobile and tablet versions to look like this:

I see you solved for mobile and now you need to make it same for tablet?

Hi @tuanphan! That's right!

On 7/9/2023 at 9:55 PM, ssjewelry said:

Hi @tuanphan! That's right!

 

You can change number 640 in your code to 900

Hello! On a scale from 1 -10, how hard is it to implement this on my site?

I have very little code knowledge, but have been looking for this solution for some time 🙂

Can I just fake it with a split background image and 2 "link buttons"?

See this new guide on 7.1 version