title: How to design a layout like this: one box on top and two bottom covering the whole page
body: <p><a href="https://i.stack.imgur.com/A1eUh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A1eUh.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>right now my code:</p>
  
  <pre><code>&lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;style&gt;
          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%;
              }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div class="split left"&gt;
              &lt;div class="centered"&gt;
                  &lt;h2&gt;Blood Donor&lt;/h2&gt;
                  &lt;p&gt;&lt;a href="../BloodDonor/Registration/Registration.aspx"&gt;Go To Registration&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="split right"&gt;
              &lt;div class="centered"&gt;
                  &lt;h2&gt;Blood Seeker&lt;/h2&gt;
                  &lt;p&gt;&lt;a href="../BloodSeeker/Registration/Registration.aspx"&gt;Go To Registration&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>please help me,
  Thank You for your time.</p>