1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.       .outer {
    10.         width: 500px;
    11.         height: 500px;
    12.         background-color: pink;
    13.       }
    14.       .box {
    15.         width: 50%;
    16.         height: 0;
    17.         padding-top: 50%;
    18.         background-color: orangered;
    19.       }
    20.     </style>
    21. </head>
    22. <body>
    23.     <div class="outer">
    24.       <div class="box"></div>
    25.     </div>
    26. </body>
    27. </html>