flexbox3.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.0">
    <title>Practise flexbox3</title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
      header{
        background-color: black;
        color: white;
        height: 50px;
      }
      ul{
          padding: 14px;
      }

      li{
        padding: 23px;
        text-decoration: none;
        display: inline;
      }
      .box1{
        height: 50vh;
        width: 40vw;
        background-color: rebeccapurple;
        /* float: left; */
      }
      .box2{
        height: 50vh;
        width: 40vw;
        background-color: lavender;
        /*
         float: right; */
      }
      .container{
        display: flex;
        justify-content: space-between;
        
      }
    </style>
</head>
<body>

    <header>
        <nav
        ><ul>
            <li>Home</li>
            <li>Contact</li>
            <li>About</li>
        </ul>
    </nav>
</header>
<div class="container"></div>
<div class="box1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam, magnam aliquam at est ad doloribus non distinctio tempora dignissimos maiores porro laboriosam accusamus optio similique, culpa eum aspernatur, fuga harum. Cupiditate dolores fugit laudantium sequi corrupti in tempore asperiores distinctio. Id consequuntur nobis vel a?</div>
<div class="box2">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam eveniet molestias natus iure iste eos ut. Expedita eius modi deleniti ipsam quas! Suscipit natus, soluta quisquam libero voluptates saepe eum?
</div>
</div>
    
</body>
</html>