html-css-js/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Modern Web Apps</title>

  </head>
  <body>
    <div>
      <div style="height:10vh; background-color: orange;" >
          <h1 style="color:red;margin-left:33%; margin-right:33%;margin-top:-10px; padding-top:10px;text-align: center">Welcome to Modern Web Apps</h1>
      </div>
      <div>
          <div style="width:20%;height:80vh;flex-direction: vertical; background-color: lightgray;float:left;">
          </div>
          <div style="width:80%;height:80vh;flex-direction: vertical; background-color: magenta;float:left;">
          </div>
        </div>
        <div style="height:10vh; width:100%; background-color:blue;float:left"></div>
      </div>


    </div>
  </body>
</html>