index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>David - A Personalised Voice Assistant</title>

    <!-- Bootsrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <!-- Particle js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
        type="text/javascript"></script>

    <link rel="stylesheet" href="vendorous/texllate/animate.css">

    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <section id="Oval" class="mb-4">

        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <div class="d-flex justify-content-center allign-items-center"
                style="height: 80vh">

                    <canvas id="canvasOne" width="700" height="420px" style="position: absolute;"></canvas>

                    <div id="DavidHood">
                        <div class="square">
                            <span class="circle"></span>
                            <span class="circle"></span>
                            <span class="circle"></span>
                        </div>
                    </div>
            
                </div>
                
                <h5 class="text-light text text-center">Ask Me Anything</h5>
            </div>
            <div class="col-md-1"></div>
        
        </div>
    </section>

      
    <!--Jquery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <!-- Bootstrap -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Particle js file-->
    <script src="script.js"></script>

    <!-- Texallate js -->
    <script src="vendorous/texllate/jquery.fittext.js"></script>
    <script src="vendorous/texllate/jquery.lettering.js"></script>
    <script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>


    <script src="main.js"></script>
  </body>
</html>