index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>YARO</title>
        <link rel="stylesheet" href="style.css">
        <script defer src="script.js"></script>
</head>
<body>
    <h1 class="title glow">Y.A.R.O.</h1>
    <div class="container">
        <h3 class="content">Ask Anything!</h3>
        <center>
        <svg id="loading-bar" xmlns="http://www.w3.org/2000/svg" width="36" height="22" viewBox="0 0 36 22">
            <g>
                <rect id="loading-bar-left" width="8" height="22"/>
                <rect id="loading-bar-middle" width="8" height="22" x="14"/>
                <rect id="loading-bar-right" width="8" height="22" x="28"/>
            </g>
        </svg>
        <h3 class="speak hide" id="speak">listening...</h3>
        <div class="btn-holder">     
            <button class="btn" id="btn">
                <img src="assist/microphone.svg" width="30" height="40">
            </button>
        </div>
    </center>  
    </div>
     <center>
            <div class="voice">
                <a href="command.html" target="blank">Voice command</a>
            </div>
        </center>
</body>
</html>