HTML/CSS - Fingerprint Alert [Challenge #34] Online Editor and JavaScript Compiler

html

<!-- Created by Swapnil More-->
<!DOCTYPE html>
<html>
    <head>
        <title>Fingerprint Scanner</title>
    </head>
    <body>
        <audio id="buzzer" src="http://ncscproject.esy.es/wrong.mp3"></audio>
     <div id="rectangle1">
    <div id="rectangle">
<div id="box"></div>
        <img src="https://cdn.vox-cdn.com/thumbor/NC5USYLQloZMYgfRHgKk23b8q4E=/0x625:5000x4375/1200x800/filters:focal(0x625:5000x4375)/cdn.vox-cdn.com/uploads/chorus_image/image/50333269/fingerprint_ID_-strizh-.0.0.jpg" width="100" height="100" onmouseup="sound(),Alert.render()" ontouchend="sound(),Alert.render()"></div></div>
        <div id="overlay"></div>
<div id="alertbox"><div>
    <div id="head"></div>
    <div id="body"></div>
    <div id="foot"></div>
  </div>
</div>
        <script>
        function sound(){
          document.getElementById('buzzer').play();  
        }
        function CustomAlert(){
    this.render = function(){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('overlay');

css

/* Created by Swapnil More */
body{
    background:url("https://static.pexels.com/photos/277559/pexels-photo-277559.jpeg") no-repeat;
    background-size:150vh;
    background-color: #888888;
}
#rectangle {
    width: 100px;
    height: 100px;
    border:1px solid  black;
    position: relative;
    margin-top:4px; 
    margin-left:4px;
    border-radius:5px;
}
#rectangle1 {
    width: 110px;
    height: 110px;
    border:1px solid  black;
    background: black;
    margin-left:350px;
    position: relative;
    margin-top:250px;
    border-radius:5px;  
}
 #box {
    width: 100px;

BROWSER

Console