API tools faq
paste
Advertisement
HighKingCath

Podcast Rec

HighKingCath
Dec 12th, 2019
423
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--------
  4. Theme by HKF Themes and the help of w3schools tutorials. Please do not claim as your own
  5.  
  6. To add a new podcast copy/paste the code bellow and put them between the div name "container" and its end.
  7.  
  8. <div class="filterDiv FILTERTITLE, OTHERONE">
  9. <div class="flip-card">
  10. <div class="flip-card-inner">
  11. <div class="flip-card-front">
  12. <img src="URL OF IMAGE"></div>
  13. <div class="flip-card-back">
  14. <h1>podcast title</h1>
  15. <p id="by">by Who</p>
  16. <p id="desc">Description</p>
  17. </div></div></div></div>
  18.  
  19. To add a new button with your filters, use the code bellow
  20.  
  21. <li><button class="btn" onclick="filterSelection('FILTERNAME')"> FILTER NAME</button>
  22. ----->
  23.  
  24.  
  25. <title>{Title}</title>
  26. <meta charset="utf-8">
  27. <meta name="viewport" content="width=device-width, initial-scale=1">
  28. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  29. <script src="https://kit.fontawesome.com/94199c313d.js" crossorigin="anonymous"></script>
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  31. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  32. <link href="https://fonts.googleapis.com/css?family=Orbitron|Poiret+One&display=swap" rel="stylesheet">
  33. <link href="https://fonts.googleapis.com/css?family=Bad+Script|Homemade+Apple&display=swap" rel="stylesheet">
  34.  
  35. <style>
  36.  
  37. .iframe-controls--desktop {
  38. opacity:0.2;
  39.  
  40. }
  41. .iframe-controls--desktop:hover{
  42. opacity:1;
  43.  
  44. }
  45.  
  46. body{
  47. background-color:#355c7d; /* Change main background color*/
  48. font-family: 'Poiret One', cursive;
  49. }
  50.  
  51.  
  52.  
  53. h1{
  54. text-shadow: 2px 2px 2px black;
  55. padding-bottom:7px;
  56. font-family: 'Bad Script', cursive;
  57. }
  58.  
  59. hr{
  60. color:;#F67280;
  61. }
  62. #top{
  63. height:200px;
  64. width:100%;
  65. background: transparent;
  66. border:transparent;
  67. color: White;
  68.  
  69. }
  70.  
  71. .body img{
  72. height:100%;
  73. width:100%;
  74. opacity:0.5;
  75. position:fixed;
  76. z-index:-9999;
  77.  
  78. }
  79.  
  80. #home a{
  81. position:absolute;
  82. float:right;
  83. right:60px;
  84. top:80px;
  85. }
  86.  
  87. #home a:hover{
  88. color:white;
  89. }
  90.  
  91. /*Podcast*/
  92.  
  93. .filterDiv {
  94. float: left;
  95. line-height: 100px;
  96. text-align: center;
  97. margin: 2px;
  98. display: none;
  99. }
  100.  
  101.  
  102. .show {
  103. display: block;
  104. }
  105.  
  106. .container {
  107. top:-100px;
  108. overflow: hidden;
  109. position:relative;
  110. }
  111.  
  112. ul.buttonWrapper { list-style-type:none;padding:0;margin:0; width: 100%; }
  113. ul.buttonWrapper li { text-align: center;margin-bottom: 5px; }
  114.  
  115. .lots{
  116. height:100%;
  117. float:left;
  118. left:10px;
  119. width:120px;
  120. position:relative;
  121. }
  122.  
  123. /* Style the buttons */
  124. .btn {
  125. border: none;
  126. outline: none;
  127. padding: 12px 16px;
  128. background-color: #F67280;
  129. cursor: pointer;
  130. color:black;
  131. margin:2px;
  132. width:120px;
  133. }
  134.  
  135. .btn:hover {
  136. background-color:#F67280;
  137. transform: scale(1.5);
  138. }
  139.  
  140. .btn.active {
  141. background-color:#854B5B;
  142. color: white;
  143.  
  144. }
  145.  
  146. .flip-card {
  147. background-color: transparent;
  148. width: 200px;
  149. height: 200px;
  150. perspective: 1000px;
  151. }
  152.  
  153. .flip-card-inner {
  154. position: relative;
  155. width: 100%;
  156. height: 100%;
  157. text-align: center;
  158. transition: transform 0.6s;
  159. transform-style: preserve-3d;
  160. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  161. }
  162.  
  163. .flip-card:hover .flip-card-inner {
  164. transform: rotateY(180deg);
  165. }
  166.  
  167. .flip-card-front, .flip-card-back {
  168. position: absolute;
  169. width: 100%;
  170. height: 100%;
  171. backface-visibility: hidden;
  172. }
  173.  
  174. .flip-card-front {
  175. background-color: #bbb;
  176. color: black;
  177. }
  178.  
  179. .flip-card-front img {
  180. width:200px;
  181. height:200px;
  182. size:cover;
  183. }
  184.  
  185. .flip-card-back {
  186. color: white; /* Change flip side font color*/
  187. transform: rotateY(180deg);
  188. background-color:#F67280; /* Change flip side background color*/
  189. }
  190.  
  191. .flip-card-back h1{
  192. text-shadow: 2px 2px 2px black;
  193. font-size:18px;
  194. font-family: 'Orbitron', sans-serif;
  195. }
  196.  
  197. #by{
  198. font-size:10px;
  199. text-align:right;
  200. margin-top:-50px;
  201. }
  202.  
  203. #desc{
  204. font-size:11px;
  205. text-align:justify;
  206. margin-top:-55px;
  207. text-wrap: break-word;
  208. padding:10px;
  209. line-height: 1.5;
  210. color: black; /* Change flip side text color*/
  211.  
  212.  
  213. }
  214.  
  215. /*Credit*/
  216.  
  217. .credit a{
  218. position:absolute;
  219. bottom:0;
  220. right:10px;
  221. }
  222.  
  223. </style>
  224. <body>
  225. <div class="body"><img src="https://freestock.ca/dark_blue_grunge_texture_sjpg3668.jpgs"></div> <!----remove or change url for background image--->
  226.  
  227.  
  228.  
  229. <div id="top" class="well well-lg"><h1>Podcast Rec by {Name}</h1>
  230. <hr><div id="home" alt="Back to main blog"><a href="/"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a></div>
  231. </div>
  232.  
  233.  
  234. <!--------buttons, to add your own use the code in the note in the header--->
  235. <div id="myBtnContainer" class="lots"> <ul class="buttonWrapper">
  236. <li><button class="btn active" onclick="filterSelection('all')"> Show all</button>
  237. <li><button class="btn" onclick="filterSelection('Comedy')"> Comedy</button>
  238. <li> <button class="btn" onclick="filterSelection('Knowledge')">Knowledge</button>
  239. <li> <button class="btn" onclick="filterSelection('Politic')"> Politic</button>
  240. <li> <button class="btn" onclick="filterSelection('Calming')"> Calming</button>
  241. <li> <button class="btn" onclick="filterSelection('Mine')"> Mine</button>
  242. <li> <button class="btn" onclick="filterSelection('Fandom')"> Fandom</button>
  243. <li> <button class="btn" onclick="filterSelection('Dnd')"> Dnd</button>
  244. <li> <button class="btn" onclick="filterSelection('Misc')"> Misc</button>
  245. </div> </ul>
  246.  
  247.  
  248. <div class="container">
  249. <!---------Put the podcast infos after the Div "container" and before its end--------->
  250.  
  251. <div class="filterDiv Comedy, Calming">
  252. <div class="flip-card">
  253. <div class="flip-card-inner">
  254. <div class="flip-card-front">
  255. <img src="https://maximumfun.org/wp-content/uploads/2019/08/wonderful-cover-400x400.png"></div>
  256. <div class="flip-card-back">
  257. <h1>Wonderful</h1>
  258. <p id="by">by Rachel and Griffin McElroy</p>
  259. <p id="desc">Wonderful! is a podcast for joyful and enthusiastic people that like hearing about the passions, big and small, of other people. </p>
  260. </div></div></div></div>
  261.  
  262.  
  263. <div class="filterDiv Mine, Fandom">
  264. <div class="flip-card">
  265. <div class="flip-card-inner">
  266. <div class="flip-card-front">
  267. <img src="https://i.scdn.co/image/3fdc3f3f3d5c1eacf5b019d4486ec883095fd96f"></div>
  268. <div class="flip-card-back">
  269. <h1>Fillorians United</h1>
  270. <p id="by">by Catherine Gilbert and Seth Day</p>
  271. <p id="desc">Twice a month, we will talk about one of the episodes of the magicians and talk in-depth about a specific theme.</p>
  272. </div></div></div></div>
  273.  
  274. <div class="filterDiv Knowledge, Politic">
  275. <div class="flip-card">
  276. <div class="flip-card-inner">
  277. <div class="flip-card-front">
  278. <img src="https://secureimg.stitcher.com/feedimagesplain328/127661.jpg"></div>
  279. <div class="flip-card-back">
  280. <h1>Pod Save America</h1>
  281. <p id="by">by Crooked Media</p>
  282. <p id="desc">our former aides to President Obama—Jon Favreau, Jon Lovett, Dan Pfeiffer and Tommy Vietor—are joined by journalists, politicians, activists, and more for a no-bullshit conversation about politics.</p>
  283. </div></div></div></div>
  284.  
  285. <div class="filterDiv Fandom, Calming">
  286. <div class="flip-card">
  287. <div class="flip-card-inner">
  288. <div class="flip-card-front">
  289. <img src="https://d3t3ozftmdmh3i.cloudfront.net/production/podcast_uploaded_nologo/1040969/1040969-1536777378428-83373f3491d82.jpg"></div>
  290. <div class="flip-card-back">
  291. <h1>The Empty Bowl</h1>
  292. <p id="by">by Justin McElroy and Dan Goubert</p>
  293. <p id="desc">meditative podcast about cereal from cereal eater Justin McElroy and Cerealously creator Dan Goubert.</p>
  294. </div></div></div></div>
  295.  
  296. <div class="filterDiv Comedy, Dnd">
  297. <div class="flip-card">
  298. <div class="flip-card-inner">
  299. <div class="flip-card-front">
  300. <img src="https://cdn.shopify.com/s/files/1/0250/8541/1408/files/dad_banner_optim_300x.jpg?v=1573864512"></div>
  301. <div class="flip-card-back">
  302. <h1>Dungeon and Daddies</h1>
  303. <p id="by">by The Daddies</p>
  304. <p id="desc">Dungeons and Daddies is a comedic Dungeons and Dragons podcast about four dads from our world flung into a land of magic and fantasy in a quest to rescue their lost sons.</p>
  305. </div></div></div></div>
  306.  
  307. <div class="filterDiv Comedy, Dnd">
  308. <div class="flip-card">
  309. <div class="flip-card-inner">
  310. <div class="flip-card-front">
  311. <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7b/The_Adventure_Zone_Podcast_Cover.jpeg/220px-The_Adventure_Zone_Podcast_Cover.jpeg"></div>
  312. <div class="flip-card-back">
  313. <h1>The Adventure Zone</h1>
  314. <p id="by">by The McElroys</p>
  315. <p id="desc">Justin, Travis, and Griffin McElroy from My Brother, My Brother and Me have recruited their dad Clint for a campaign of high adventure</p>
  316. </div></div></div></div>
  317.  
  318. <div class="filterDiv Dnd, Fandom, Mine">
  319. <div class="flip-card">
  320. <div class="flip-card-inner">
  321. <div class="flip-card-front">
  322. <img src="https://is3-ssl.mzstatic.com/image/thumb/Podcasts123/v4/9d/9d/e1/9d9de1d8-f0ac-f5ce-ec5a-b833a68f596c/mza_3447821485356763990.png/600x600bb.jpg"></div>
  323. <div class="flip-card-back">
  324. <h1>Further Than Fillory</h1>
  325. <p id="by">by Catherine Gilbert & Cast</p>
  326. <p id="desc">As the "Unofficial The Magicians Tabletop roleplaying game" book is now available, people asked to learn how to play with the new mechanic! Here is the chance to listen to a group of The Magicians fan learning their way through the mechanic of the book while roleplaying!</p>
  327. </div></div></div></div>
  328.  
  329. <div class="filterDiv Fandom">
  330. <div class="flip-card">
  331. <div class="flip-card-inner">
  332. <div class="flip-card-front">
  333. <img src="https://pbs.twimg.com/profile_images/831368241142329345/NzXmhtYT_400x400.jpg"></div>
  334. <div class="flip-card-back">
  335. <h1>Physical Kid Weekly</h1>
  336. <p id="by">by Dani Lowry and Clara Sherley-Appel</p>
  337. <p id="desc">Fan-made, fan-supported podcast devoted to "The Magicians" and the books it's based on. Episode breakdowns, cast and crew interviews, and sparkling commentary from Dani Lowry and Clara Sherley-Appel.</p>
  338. </div></div></div></div>
  339.  
  340. <div class="filterDiv Knowledge, Misc">
  341. <div class="flip-card">
  342. <div class="flip-card-inner">
  343. <div class="flip-card-front">
  344. <img src="https://i1.sndcdn.com/avatars-000215290596-hsoe3x-t500x500.jpg"></div>
  345. <div class="flip-card-back">
  346. <h1>Spirits</h1>
  347. <p id="by">by Multitude Network</p>
  348. <p id="desc">Spirits is a boozy biweekly podcast about mythology, legends, and lore. </p>
  349. </div></div></div></div>
  350.  
  351. <div class="filterDiv Comedy, Calming, Misc">
  352. <div class="flip-card">
  353. <div class="flip-card-inner">
  354. <div class="flip-card-front">
  355. <img src="https://media.wnyc.org/i/raw/2018/10/dear-hank-john.png"></div>
  356. <div class="flip-card-back">
  357. <h1>Dear Hank and John</h1>
  358. <p id="by">by WNYC Studio</p>
  359. <p id="desc">Hosts John and Hank Green answer listener questions and offer dubious advice.</p>
  360. </div></div></div></div>
  361.  
  362.  
  363. <div class="filterDiv Knowledge, Politic">
  364. <div class="flip-card">
  365. <div class="flip-card-inner">
  366. <div class="flip-card-front">
  367. <img src="https://content.production.cdn.art19.com/images/01/1b/f3/d6/011bf3d6-a448-4533-967b-e2f19e376480/7fdd4469c1b5cb3b66aa7dcc9fa21f138efe9a0310a8a269f3dcd07c83a552844fcc445ea2d53db1e55d6fb077aeaa8a1566851f8f2d8ac4349d9d23a87a69f5.jpeg"></div>
  368. <div class="flip-card-back">
  369. <h1>The Daily</h1>
  370. <p id="by">by The New York Time</p>
  371. <p id="desc">The Daily is a daily news podcast and radio show by the American newspaper The New York Times</p>
  372. </div></div></div></div>
  373.  
  374. <div class="filterDiv Comedy, Misc">
  375. <div class="flip-card">
  376. <div class="flip-card-inner">
  377. <div class="flip-card-front">
  378. <img src="https://secureimg.stitcher.com/feedimagesplain328/69356.jpg"></div>
  379. <div class="flip-card-back">
  380. <h1>Hello from The Magic Tavern</h1>
  381. <p id="by">by MagicTavern</p>
  382. <p id="desc">Arnie Niekamp fell through a dimensional portal behind a Burger King into the fantastical land of Foon.</p>
  383. </div></div></div></div>
  384.  
  385. <div class="filterDiv Knowledge, Misc">
  386. <div class="flip-card">
  387. <div class="flip-card-inner">
  388. <div class="flip-card-front">
  389. <img src="https://pbs.twimg.com/profile_images/904870278571761664/CW-MCjyV_400x400.jpg"></div>
  390. <div class="flip-card-back">
  391. <h1>Oologie</h1>
  392. <p id="by">by Alie Ward</p>
  393. <p id="desc">Listen and take away a pocket full of science knowledge and some insane stories about what fuels these professional ologists'</p>
  394. </div></div></div></div>
  395.  
  396. <div class="filterDiv Comedy, Misc">
  397. <div class="flip-card">
  398. <div class="flip-card-inner">
  399. <div class="flip-card-front">
  400. <img src="https://secureimg.stitcher.com/feedimagesplain328/16669.jpg"></div>
  401. <div class="flip-card-back">
  402. <h1>My Brother, My Brother and Me</h1>
  403. <p id="by">by The McElroy</p>
  404. <p id="desc">Free advice from three of the world's most qualified, most related experts: Justin, Travis and Griffin McElroy.</p>
  405. </div></div></div></div>
  406.  
  407. <div class="filterDiv Comedy, Fandom, Misc">
  408. <div class="flip-card">
  409. <div class="flip-card-inner">
  410. <div class="flip-card-front">
  411. <img src="https://secureimg.stitcher.com/feedimagesplain328/122174.jpg"></div>
  412. <div class="flip-card-back">
  413. <h1>Potterless</h1>
  414. <p id="by">by Multitude Network</p>
  415. <p id="desc">Join Mike Schubert, a grown man reading the Harry Potter series for the first time, as he sits down with HP fanatics to poke fun at plot holes, make painfully incorrect predictions, and rant about how Quidditch is the worst sport ever invented.</p>
  416. </div></div></div></div>
  417.  
  418. <div class="filterDiv Comedy, Misc">
  419. <div class="flip-card">
  420. <div class="flip-card-inner">
  421. <div class="flip-card-front">
  422. <img src="https://pbs.twimg.com/profile_images/737845303924117505/3t7Y2X7m_400x400.jpg"></div>
  423. <div class="flip-card-back">
  424. <h1>Still Buffering</h1>
  425. <p id="by">by Maximum Fun</p>
  426. <p id="desc">Join real-life sisters Sydnee McElroy (Sawbones), Teylor Smirl, and Rileigh Smirl as they help bridge the gap between the teenagers of yesterday and today.</p>
  427. </div></div></div></div>
  428.  
  429. <div class="filterDiv Comedy, Knowledge">
  430. <div class="flip-card">
  431. <div class="flip-card-inner">
  432. <div class="flip-card-front">
  433. <img src="https://static.libsyn.com/p/assets/9/7/e/b/97ebad626b4d937f/Sawbones-logo-final.png"></div>
  434. <div class="flip-card-back">
  435. <h1>Sawbones</h1>
  436. <p id="by">by Maximum Fun</p>
  437. <p id="desc">A Marital Tour of Misguided Medicine</p>
  438. </div></div></div></div>
  439.  
  440. <div class="filterDiv Misc, Fandom, Calming">
  441. <div class="flip-card">
  442. <div class="flip-card-inner">
  443. <div class="flip-card-front">
  444. <img src="https://secureimg.stitcher.com/feedimagesplain328/86668.jpg"></div>
  445. <div class="flip-card-back">
  446. <h1>Harry Potter and the Sacred Text</h1>
  447. <p id="by">by Nightvale Presents Network</p>
  448. <p id="desc"> Join Vanessa Zoltan and Casper ter Kuile as they bring thought, reflection and laughter to Harry Potter; not just as novels, but as instructive and inspirational texts that will teach us about our own lives.</p>
  449. </div></div></div></div>
  450.  
  451. <div class="filterDiv Calming, Misc">
  452. <div class="flip-card">
  453. <div class="flip-card-inner">
  454. <div class="flip-card-front">
  455. <img src="https://secureimg.stitcher.com/feedimagesplain328/20324.jpg"></div>
  456. <div class="flip-card-back">
  457. <h1>Mysteries Abound</h1>
  458. <p id="by">by Paulrex</p>
  459. <p id="desc">A podcast about mysteries from anywhere and everywhere - the unusual, the strange, the perplexing and the down-right odd. Scientific, historical mysteries, unusual stories and events as well as the paranormal will be featured on this podcast.</p>
  460. </div></div></div></div>
  461.  
  462.  
  463. <div class="filterDiv Fandom, Misc">
  464. <div class="flip-card">
  465. <div class="flip-card-inner">
  466. <div class="flip-card-front">
  467. <img src="https://secureimg.stitcher.com/feedimagesplain328/161631.jpg"></div>
  468. <div class="flip-card-back">
  469. <h1>The Steven universe Podcast</h1>
  470. <p id="by">by Cartoon Network</p>
  471. <p id="desc">Join host and superfan McKenzie Atwood every week for an all-access tour inside Steven Universe!.</p>
  472. </div></div></div></div>
  473.  
  474.  
  475. </div> <!---------End container--->
  476. <div class="credit"><a href="hkftheme.tumblr.com"><i class="fas fa-crown"></i></a></div>
  477.  
  478.  
  479. <!-------_Dont touch----------->
  480.  
  481. <script>
  482. filterSelection("all")
  483. function filterSelection(c) {
  484. var x, i;
  485. x = document.getElementsByClassName("filterDiv");
  486. if (c == "all") c = "";
  487. for (i = 0; i < x.length; i++) {
  488. w3RemoveClass(x[i], "show");
  489. if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  490. }
  491. }
  492.  
  493. function w3AddClass(element, name) {
  494. var i, arr1, arr2;
  495. arr1 = element.className.split(" ");
  496. arr2 = name.split(" ");
  497. for (i = 0; i < arr2.length; i++) {
  498. if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  499. }
  500. }
  501.  
  502. function w3RemoveClass(element, name) {
  503. var i, arr1, arr2;
  504. arr1 = element.className.split(" ");
  505. arr2 = name.split(" ");
  506. for (i = 0; i < arr2.length; i++) {
  507. while (arr1.indexOf(arr2[i]) > -1) {
  508. arr1.splice(arr1.indexOf(arr2[i]), 1);
  509. }
  510. }
  511. element.className = arr1.join(" ");
  512. }
  513.  
  514. // Add active class to the current button (highlight it)
  515. var btnContainer = document.getElementById("myBtnContainer");
  516. var btns = btnContainer.getElementsByClassName("btn");
  517. for (var i = 0; i < btns.length; i++) {
  518. btns[i].addEventListener("click", function(){
  519. var current = document.getElementsByClassName("active");
  520. current[0].className = current[0].className.replace(" active", "");
  521. this.className += " active";
  522. });
  523. }
  524.  
  525. </script>
  526.  
  527. </body>
  528. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!