index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
            .container {
              position: relative;
              width: 50%;
            }
            
            .image {
              display: block;
              width: 100%;
              height: auto;
            }
            
            .overlay {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background-color: #008CBA;
              overflow: hidden;
              width: 100%;
              height: 0;
              transition: .5s ease;
            }
            
            .container:hover .overlay {
              height: 100%;
            }
            
            .text {
              color: white;
              font-size: 20px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              text-align: center;
            }
            </style>
</head>

<body>
    <h1>Hello World!</h1>
    <div class="w3-container">
        Node version
        <script>document.write(process.versions.node)</script>
        <br>
        <img src="http://share.olanlab.com/userfiles/olan/images/nodejs/nodejs-logo(1).jpg" class="w3-border" alt="Norway" style="padding:4px;width:50%">
        <br> Chrome version
        <script>document.write(process.versions.chrome)</script>
        <br>
        <img src="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300-rw"
            class="w3-border" alt="Norway" style="padding:16px;width:50%">
        <br> Electron version
        <script>document.write(process.versions.electron)</script>
        <br>
        <img src="https://hackr.io/tutorials/learn-electron/svg/electron_logo" class="w3-border" alt="Norway" style="padding:16px;width:50%">

    </div>
    
</body>

</html>