How can design like this in html css : [Click on this to show demo image what I actually want][1]

[1]: https://i.stack.imgur.com/A1eUh.png

I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.


right now my code:

    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            body {
                font-family: Arial;
                color: white;
            }
    
            .split {
                height: 100%;
                width: 50%;
                position: fixed;
                z-index: 1;
                top: 0;
                overflow-x: hidden;
                padding-top: 20px;
            }
    
            .left {
                left: 0;
                background-color: #ff6a00;
            }
    
            .right {
                right: 0;
                background-color: #ffd800;
            }
    
            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
            }
    
                .centered img {
                    width: 150px;
                    border-radius: 50%;
                }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="split left">
                <div class="centered">
                    <h2>Blood Donor</h2>
                    <p><a href="../BloodDonor/Registration/Registration.aspx">Go To Registration</a></p>
                </div>
            </div>
    
            <div class="split right">
                <div class="centered">
                    <h2>Blood Seeker</h2>
                    <p><a href="../BloodSeeker/Registration/Registration.aspx">Go To Registration</a></p>
                </div>
            </div>
    
        </form>
    </body>


please help me,
Thank You for your time.