index.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>Google Clone</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="loader">
        <svg width="200" height="150" viewBox="0 0 818 498" fill="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="strokeGradient">
              <stop offset="5%" stop-color="#191919" />
              <stop offset="60%" stop-color="#ff0000" />
              <stop offset="100%" stop-color="#920000" />
            </linearGradient>
          </defs>
          <path class="pulse" d="M0 305.5H266L295.5 229.5L384 496L460 1.5L502.5 377.5L553 305.5H818" stroke-width="8" />
        </svg>
        <span>Loading...</span>
      </div>
    <div class="center">
        <img src="images/google.png" alt="" class="motion">
        <i class="fa fa-search" aria-hidden="true"><input required type="text" id="query" placeholder="Search here..."></i>
        <div class="icons">
            <button id="search" onclick="find()">Search</button>
            <img src="images/moon.png" id="icon" alt="">
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>