Add files via upload

aabhijeetsingh · Oct 14, 2023 · e38bf18 · e38bf18
1 parent 2c8caec
commit e38bf18
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 0 deletions.
diff --git a/crypto live/images/Thumbs.db b/crypto live/images/Thumbs.db
diff --git a/crypto live/images/background.png b/crypto live/images/background.png
diff --git a/crypto live/images/bitcoin.png b/crypto live/images/bitcoin.png
diff --git a/crypto live/images/dogecoin.png b/crypto live/images/dogecoin.png
diff --git a/crypto live/images/ethereum.png b/crypto live/images/ethereum.png
diff --git a/crypto live/images/logo.png b/crypto live/images/logo.png
diff --git a/crypto live/index.html b/crypto live/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cryptocurrency live</title>
+    <link rel="stylesheet" href="style.css">
+    <script
+  src="https://code.jquery.com/jquery-3.7.1.min.js"
+  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+  crossorigin="anonymous"></script>
+</head>
+    <div class="container">
+        <nav>
+            <img src="images/logo.png" alt="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>BYE & <br>SELL <span>Crypto</span></h1>
+            <p>world's biggest Cryptocurrency exchage available on <br> wep as well as mobile phone & computer</p>
+            <a href="#" class="btn">EXPLORE MORE</a>
+        </div>
+        <div class="coin-list">
+            <div class="coin">
+                <img src="images/bitcoin.png">
+
+            <div>
+                <h3>$<span id="bitcoin"></span></h3>
+                <p>Bitcon</p>
+             </div>
+            </div>
+            <div class="coin">
+                <img src="images/ethereum.png">
+            <div>
+                <h3>$<span id="ethereum"></span></h3>
+                <p>Ethereum</p>
+             </div>
+            </div>
+    <div class="coin">
+        <img src="images/dogecoin.png">
+        <div>
+        <h3>$<span id="dogecoin"></span></h3>
+        <p>Dogecoin</p>
+     </div>
+</div>
+        </div>
+  <script src="script.js"></script>  
+</body>
+</html>
diff --git a/crypto live/script.js b/crypto live/script.js
@@ -0,0 +1,16 @@
+var btc = document.getElementById("bitcoin")
+var eth = document.getElementById("ethereum")
+var doge = document.getElementById("dogecoin")
+
+var settings= {
+    "async": true,
+    "scrossDomin": 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;
+});
diff --git a/crypto live/style.css b/crypto live/style.css
@@ -0,0 +1,92 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'poppins' , sans-serif;
+}
+
+.container{
+    width: 100%;
+    height: 100vh;
+    background-image: url(images/background.png);
+    background-position: center;
+    background-size: 100%;
+    padding: 0 7%;
+    color: rgb(77, 73, 73);
+}
+
+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{
+    color: #fff;
+    text-decoration: none;
+}
+nav .btn{
+    color: #fff;
+    text-decoration: none;
+    border: 1px solid #fff;
+    padding: 10px 30px;
+    border-radius: 20px;
+}
+.content h1{
+    font-size: 88px;
+    margin-bottom: 15px;
+}
+.content h1 span{
+    color: #ff960b;
+}
+.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; ;
+}