https://i.sstatic.net/A1eUh.png
I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already done. However, now I need to add another section on top that does not display the image slider. Can someone please assist me with this issue?
Here is my current 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>
If anyone can provide assistance, I would greatly appreciate it. Thank you for your time.