live cryptocurrency website

using HTML ,CSS,and javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./crypto.css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <nav>
        <img src="./logo.png" class="logo" />
        <ul>
          <li><a href="#">Market</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">White Papers</a></li>
          <li><a href="#">About us</a></li>
        </ul>
        <a href="#" class="btn">EN</a>
      </nav>
      <div class="content">
        <h1>
          BUY & <br />
          SELL <span> crypto</span>
        </h1>
        <p>
          World's biggest Cryptocurrency exchange available on web <br />as well
          as mobile phone
        </p>
        <a href="#" class="btn">EXPLORE MORE </a>
      </div>

      <div class="coin-list">
        <div class="coin">
            <img src="./bitcoin.png" >
            <div>
                <h3>$ <span id="bitcoin"></span></h3>
                <p>BItcoin</p>
            </div>
        </div>
        <div class="coin">
            <img src="./ethereum.png" >
            <div>
                <h3>$ <span id="ethereum"></span></h3>
                <p>ethereum</p>
            </div>
        </div>
        <div class="coin">
            <img src="./dogecoin.png" >
            <div>
                <h3>$ <span id="dogecoin"></span></h3>
                <p>dogecoin</p>
            </div>
        </div>
      </div>
    </div>
   <script src="script.js"></script>

  </body>
</html>

here is the CSS code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'poppins', sans-serif ;
}
.container{
    width: 100%;
    height: 100vh;
 background-image: url(./background.png);
   background-position: center;
   background-size: cover;
   padding: 0 7%;
   color: #fff;
   display: block;
}
nav{
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
}
.logo{
    width: 50px;
    cursor: pointer;
}
nav ul{
    flex: 1;
}
nav ul li{
    display: inline-block;
    margin:  10px 20px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
}
nav .btn{
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 10px 30px;
    border-radius: 20px;
}
.content{
    margin-top:12% ;

}
.content h1{
    font-size: 88px;
    margin-bottom: 15px;
}

.content h1 span{
    color: hwb(33 2% 9%);
}
.content p{
    line-height: 22px;
    font-size: 14px;
}
.content .btn{
    display: inline-block;
    margin-top: 30px;
    background: #ff960b;
    color: #fff;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;

}
.coin-list{
    position:absolute;
    right: 10%;
    bottom: 50px;
    display: flex;
    align-items: center;
}
.coin{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0 15px;
    color: #ff960b;
    border: 1px solid #fff;
    padding: 20px 30px;
    border-radius: 8px;
}
.coin img{
    width:40px ;
    margin-right: 10px;
}
.coin h3{
    color: #fff;
    margin-bottom: 5px;
}

here is the js code

var btc = document.getElementById("bitcoin");
var eth = document.getElementById("ethereum");
var doge = document.getElementById("dogecoin");

var settings = {
    "async":true,
    "scrossDomain":true,
    "url": "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Cdogecoin&vs_currencies=usd",
    "method": "GET",
    "headers":{}
}
$.ajax(settings).done(function(response){
btc.innerHTML = response.bitcoin.usd;
eth.innerHTML = response.ethereum.usd;
doge.innerHTML = response.dogecoin.usd;
});