How can I set the multiple background color in a page?

Question

Hi and I'm new to HTML and CSS. How can I set two background color in a page as the layout shown below?

How can I set one side is black color and another side is white color?

score 0 · Answer 1 · answered Jun 15 '20 at 03:09

0

You have to divide it by sectors using the TAG div, giving it the properties of how much space do you want it to use, and to that div, give it a class to put the background-color property

answered Jun 15 '20 at 03:09

Sebastian Cristi Castillo

497
5
15

score 0 · Accepted Answer · edited Jun 15 '20 at 05:33

You need to use div tags and flexbox to do so. Refer the following code.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
          .container{
               display: flex;
          }
          .box1{
               background-color: red;
               height: 100vh;
               width: 50vw;
          }
          .box2{
               background-color: blue;
               height: 100vh;
               width: 50vw;
          }
     </style>
</head>
<body>
     <div class="container">
          <div class="box1">

          </div>
          <div class="box2">

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

How can I set the multiple background color in a page?

2 Answers2