-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathpodcast.html
157 lines (143 loc) · 7.62 KB
/
podcast.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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>MusicCoin-Podcast</title>
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
</head>
<body class="bg-[#191919]">
<nav class="flex justify-around">
<div class="logo text-4xl font-semibold font-mono p-5 mx-10 my-5">
<span
class="bg-gradient-to-r from-red-500 to-red-700 text-transparent bg-clip-text font-bold cursor-pointer">
MusicCoin</span>
</div>
<div
class="search-sec border-2 rounded-3xl w-[400px] text-lg bg-white border-gray-400 text-gray-400 h-10 my-5 relative top-5 right-8 flex items-center">
<i class='bx bx-search-alt-2 text-3xl my-1.5 ml-2 text-black'></i>
<input type="text" placeholder="Search songs, artists podcasts you love! "
class="bg-white w-[450px] mx-4 outline-none text-black">
</div>
<div class="sections text-white">
<ul class="flex space-x-8 mr-20">
<!-- <li><a href=""></a></li> -->
<li class="text-2xl py-5 my-5 font-bold text-gray-300 hover:underline"><a href="home-page.html"
class="">Music</a>
</li>
<li class="text-2xl py-5 my-5 font-bold text-gray-300 s"><a href=""
class="bg-gradient-to-r from-red-400 to-red-800 text-transparent bg-clip-text font-bold cursor-pointer hover:bg-gradient-to-r hover:from-red-200 hover:to-red-500 ">Podcast</a>
</li>
<li class="text-2xl py-5 my-5 font-bold text-gray-300 hover:underline"><a
href="bg-music.html">Background Music</a>
</li>
</ul>
</div>
<div class="metamusk-logo flex justify-between items-center mr-5">
<img src="https://img.icons8.com/plasticine/100/null/metamask-logo.png" class="w-10 hover:cursor-pointer" />
<!-- <input type="text" placeholder="OX Address" class="bg-[#2f2f2f] rounded-2xl px-2 outline-none text-white "> -->
<div class="ox bg-[#2f2f2f] rounded-2xl px-2 outline-none text-white w-36">OX Address</div>
</div>
</nav>
<section class="ted text-white w-10/12 m-auto flex bg-gradient-to-t from-red-600 to-red-800 rounded-2xl">
<div class="ted-img">
<img src="https://pl.tedcdn.com/rss_feed_images/ted_talks_main_podcast/audio.png" alt="" class="w-56 rounded-tl-2xl rounded-bl-2xl">
</div>
<div class="ted-content ml-8 flex flex-col justify-center space-y-3">
<h5 class="font-bold">Podcast</h5>
<h1 class="text-7xl font-serif ">TED TALKS DAILY</h1>
<h3 class="text-2xl font-bold">TED</h3>
</section>
<hr class="my-12 w-8/12 m-auto text-gray-300">
<section class="w-10/12 text-white m-auto flex ">
<div class="flex flex-col ">
<div class="podcast-box">
<div class="podcast flex mt-5 hover:bg-[#2f2f2f] w-9/12 hover:rounded-tl-3xl cursor-pointer">
<img src="https://talkstar-photos.s3.amazonaws.com/uploads/2e9cab7e-e454-411c-a98a-31389be39d81/RobCross_2022V-stageshot.jpg" alt="RobCross" class="w-52 rounded-tl-3xl rounded-br-3xl">
<div class="flex flex-col space-y-3 px-5 ">
<h2 class="text-xl font-bold inline">How to be a team player | Rob Cross</h2>
<p class="w-1/2">Collaboration in the workplace is more important than ever but it's making us
less productive....... <span class="font-bold">see more</span></p>
<div>
<i class='bx bx-play-circle text-red-400 text-4xl hover:text-red-300 cursor-pointer'></i>
<span class="mx-3 relative bottom-2.5 font-bold">Mar 11 | 6 min 09 sec</span>
</div>
</div>
</div>
<div class="podcast"></div>
</div>
<div class="podcast-box mb-10">
<div
class="podcast flex mt-5 justify-center hover:bg-[#2f2f2f] w-9/12 hover:rounded-tl-3xl cursor-pointer">
<img src="https://talkstar-photos.s3.amazonaws.com/uploads/157c3a23-f5e0-4e2d-8443-6468fc761892/JulissaPrado_2021V-1350x675.jpg"
alt="RobCross" class="w-52 rounded-tl-3xl rounded-br-3xl">
<div class="flex flex-col space-y-3 px-5 ">
<h2 class="text-xl font-bold inline">Three rules to help you build a successful business |
Julissa Pardo
</h2>
<p class="w-1/2">Have an idea you're yearning to turninto a business? Julissa Prado,
founder..... <span class="font-bold">see
more</span>
</p>
<div>
<i class='bx bx-play-circle text-red-400 text-4xl hover:text-red-300 cursor-pointer'></i>
<span class="mx-3 relative bottom-2.5 font-bold">jan 21 | 7 min 29 sec</span>
</div>
</div>
</div>
</div>
</div>
<div class="about w-3/12 flex flex-col">
<h1 class="text-2xl font-bold mb-5">About</h1>
<p class="leading-5 font-mono">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, corrupti.
Laborum,
unde dolore possimus
repudiandae maiores id doloremque minima fugiat nisi ex ea. Ipsam hic natus ipsum ut iure, ullam alias
odio eum neque illo tempore aspernatur quam quisquam, quia omnis aut dolores. Officiis, ab culpa fugit
temporibus aperiam dolor.</p>
<div>
<span class="bg-gray-700 border-2 border-black px-2 py-1 rounded-3xl relative top-3 ">Technology</span>
<span class="bg-gray-700 border-2 border-black px-2 py-1 rounded-3xl relative top-3">Motivation</span>
<!-- <span class="bg-gray-700 border-2 border-black px-2 py-1 rounded-3xl relative ">Educational
Podcast</span> -->
</div>
</div>
</section><script>
window.addEventListener("load", async () => {
// Function to get the value of a cookie by name
function getCookie(name) {
const cookieString = document.cookie;
const cookies = cookieString.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.startsWith(`${name}=`)) {
return cookie.substring(name.length + 1);
}
}
return null;
}
// Usage example
const ethereumAddressfromCookie = getCookie("ethereum_address");
if (ethereumAddressfromCookie) {
// Use the ethereumAddress value in your code
console.log(`Ethereum address: ${ethereumAddressfromCookie}`);
const oxAddress = document.querySelector(".ox");
if (oxAddress) {
const shortenedAddress =
ethereumAddressfromCookie.substring(0, 5) +
"...." +
ethereumAddressfromCookie.substring(
ethereumAddressfromCookie.length - 5
);
oxAddress.textContent = shortenedAddress || "Not Found";
}
} else {
console.log("Ethereum address cookie not found");
}
});
</script>
</body>
</html>