lightshow-background.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>Light-Show</title>
    <style type="text/css">
      body,
      html {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

      #content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0px;
      }

      iframe {
        width: 500px;
        /* It should not be 100% */
        height: 500px: margin-left: auto;
        /* Automatic margin from left */
        margin-right: auto;
        /* Automatic margin from right */
      }

    </style>
  </head>

  <body>
    <div id="content">
      <iframe src="https://express-pug-animated-light-show-loop-1.bgoonz.repl.co" scrolling="auto"
        allowtransparency="true" name="main" style="width:100%;height:100%;background-image:url(black50.jpg)"> </iframe>
    </div>
    <iframe height="1200px" width="85%" src="./styling-n-js.html" scrolling="yes" frameborder="no"
      allowtransparency="true" allowfullscreen="true"
      sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>

    <a href="https://lambda-w-1-notes.netlify.app/">🏠HOME!</a>
  </body>

</html>