Files
citrus-cms/template/podcast-single.html
T
2026-04-28 21:15:09 +03:00

663 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blogzine - Blog and Magazine Bootstrap 5 Theme</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Webestica.com">
<meta name="description" content="Bootstrap based News, Magazine and Blog Theme">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Plugins CSS -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/plyr/plyr.css">
<!-- Theme CSS -->
<link id="style-switch" rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<!-- =======================
Header START -->
<header class="navbar-light navbar-sticky header-static">
<!-- Logo Nav START -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Logo START -->
<a class="navbar-brand" href="index.html">
<img class="navbar-brand-item light-mode-item" src="assets/images/logo.svg" alt="logo">
<img class="navbar-brand-item dark-mode-item" src="assets/images/logo-light.svg" alt="logo">
</a>
<!-- Logo END -->
<!-- Responsive navbar toggler -->
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="text-body h6 d-none d-sm-inline-block">Menu</span>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Main navbar START -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll ms-auto">
<!-- Nav item 1 Demos -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="homeMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
<ul class="dropdown-menu" aria-labelledby="homeMenu">
<li> <a class="dropdown-item" href="index.html">Home default</a></li>
<li> <a class="dropdown-item" href="index-lazy.html">Home lazy load</a></li>
<li> <a class="dropdown-item" href="index-2.html">Magazine classic</a></li>
<li> <a class="dropdown-item" href="index-3.html">Magazine</a></li>
<li> <a class="dropdown-item" href="index-4.html">Home cards</a></li>
<li> <a class="dropdown-item" href="index-5.html">Blog classic</a></li>
<li> <a class="dropdown-item" href="index-6.html">Blog Personal </a></li>
<li> <a class="dropdown-item" href="index-7.html">Blog Vintage</a></li>
<li> <a class="dropdown-item" href="index-8.html">Blog Tech</a></li>
<li> <a class="dropdown-item" href="index-9.html">Blog Fashion</a></li>
<li> <a class="dropdown-item" href="index-10.html">Blog Podcast</a></li>
<li> <a class="dropdown-item" href="index-11.html">Home Shop <span class="badge bg-danger smaller me-1">New</span></a></li>
</ul>
</li>
<!-- Nav item 2 Pages -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu" aria-labelledby="pagesMenu">
<li> <a class="dropdown-item" href="about-us.html">About</a></li>
<li> <a class="dropdown-item" href="contact-us.html">Contact</a></li>
<!-- Dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Shop <span class="badge bg-danger smaller me-1">New</span></a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="shop-grid.html">Shop grid <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="shop-detail.html">Shop detail <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="checkout.html">Checkout <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="my-cart.html">Cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="empty-cart.html">Empty cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
</ul>
</li>
<!-- Dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Other Archives</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="author.html">Author Page</a> </li>
<li> <a class="dropdown-item" href="categories.html">Category page 1</a> </li>
<li> <a class="dropdown-item" href="categories-2.html">Category page 2</a> </li>
<li> <a class="dropdown-item" href="tag.html"># tag</a> </li>
<li> <a class="dropdown-item" href="search-result.html">Search result</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="404.html">Error 404</a></li>
<li> <a class="dropdown-item" href="signin.html">signin</a></li>
<li> <a class="dropdown-item" href="signup.html">signup</a></li>
<li> <a class="dropdown-item" href="offline.html">offline</a></li>
<!-- Dropdown submenu levels -->
<li class="dropdown-divider"></li>
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown levels</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<!-- dropdown submenu open right -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown (end)</a>
<ul class="dropdown-menu" data-bs-popper="none">
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<!-- dropdown submenu open left -->
<li class="dropdown-submenu dropstart">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown (start)</a>
<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="none">
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="https://support.webestica.com/" target="_blank">
<i class="text-warning fa-fw bi bi-life-preserver me-2"></i>Support
</a>
</li>
<li>
<a class="dropdown-item" href="docs/index.html" target="_blank">
<i class="text-danger fa-fw bi bi-card-text me-2"></i>Documentation
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="https://blogzine.webestica.com/rtl" target="_blank">
<i class="text-info fa-fw bi bi-toggle-off me-2"></i>RTL demo
</a>
</li>
<li>
<a class="dropdown-item" href="https://themes.getbootstrap.com/store/webestica/" target="_blank">
<i class="text-success fa-fw bi bi-cloud-download-fill me-2"></i>Buy blogzine!
</a>
</li>
</ul>
</li>
<!-- Nav item 3 Post -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="postMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Post</a>
<ul class="dropdown-menu" aria-labelledby="postMenu">
<!-- dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Post grid</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="post-grid.html">Post grid</a> </li>
<li> <a class="dropdown-item" href="post-grid-4-col.html">Post grid 4 col</a> </li>
<li> <a class="dropdown-item" href="post-grid-masonry.html">Post grid masonry</a> </li>
<li> <a class="dropdown-item" href="post-grid-masonry-filter.html">Post grid masonry filter</a> </li>
<li> <a class="dropdown-item" href="post-large-and-grid.html">Post mixed large than grid</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="post-list.html">Post list</a> </li>
<li> <a class="dropdown-item" href="post-list-2.html">Post list 2</a> </li>
<li> <a class="dropdown-item" href="post-cards.html">Post card</a> </li>
<li> <a class="dropdown-item" href="post-overlay.html">Post Overlay</a> </li>
<li> <a class="dropdown-item" href="post-types.html">Post types</a> </li>
<li class="dropdown-divider"></li>
<li> <a class="dropdown-item" href="post-single.html">Post single magazine</a> </li>
<li> <a class="dropdown-item" href="post-single-2.html">Post single classic</a> </li>
<li> <a class="dropdown-item" href="post-single-3.html">Post single minimal</a> </li>
<li> <a class="dropdown-item" href="post-single-4.html">Post single card</a> </li>
<li> <a class="dropdown-item" href="post-single-5.html">Post single review</a> </li>
<li> <a class="dropdown-item" href="post-single-6.html">Post single video</a> </li>
<li> <a class="dropdown-item" href="podcast-single.html">Podcast single</a> </li>
<li class="dropdown-divider"></li>
<li> <a class="dropdown-item" href="pagination-styles.html">Pagination styles</a> </li>
</ul>
</li>
<!-- Nav item 4 Mega menu -->
<li class="nav-item dropdown dropdown-fullwidth">
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lifestyle</a>
<div class="dropdown-menu" aria-labelledby="megaMenu">
<div class="container">
<div class="row g-4 p-3 flex-fill">
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/01.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">7 common mistakes everyone makes while traveling</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Joan Wallace</a>
</li>
<li class="nav-item">Feb 18, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/02.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Lori Stevens</a>
</li>
<li class="nav-item">Jun 03, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/03.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">Skills that you can learn from business</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Judy Nguyen</a>
</li>
<li class="nav-item">Sep 07, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="bg-primary bg-opacity-10 p-4 text-center h-100 w-100 rounded">
<span>The Blogzine</span>
<h3>Premium Membership</h3>
<p>Become a Member Today!</p>
<a href="#" class="btn btn-warning">View pricing plans</a>
</div>
</div>
<!-- Card item END -->
</div> <!-- Row END -->
<!-- Trending tags -->
<div class="row px-3">
<div class="col-12">
<ul class="list-inline mt-3">
<li class="list-inline-item">Trending tags:</li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Travel</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-warning-soft">Business</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Tech</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Gadgets</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Lifestyle</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Vaccine</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Sports</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Covid-19</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Politics</a></li>
</ul>
</div>
</div> <!-- Row END -->
</div>
</div>
</li>
<!-- Nav item 5 link-->
<li class="nav-item"> <a class="nav-link" href="dashboard.html">Dashboard</a></li>
</ul>
</div>
<!-- Main navbar END -->
<!-- Nav right START -->
<div class="nav ms-sm-3 flex-nowrap align-items-center">
<!-- Dark mode switch -->
<div class="nav-item">
<div class="modeswitch" id="darkModeSwitch">
<div class="switch"></div>
</div>
</div>
<!-- Nav additional link -->
<div class="nav-item dropdown dropdown-toggle-icon-none">
<a class="nav-link dropdown-toggle" role="button" href="#" id="navAdditionalLink" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-three-dots fs-4"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end min-w-auto shadow rounded text-end" aria-labelledby="navAdditionalLink">
<li><a class="dropdown-item fw-normal" href="#">About</a></li>
<li><a class="dropdown-item fw-normal" href="#">Newsletter</a></li>
<li><a class="dropdown-item fw-normal" href="#">Author</a></li>
<li><a class="dropdown-item fw-normal" href="#">#Tags</a></li>
<li><a class="dropdown-item fw-normal" href="#">Contact</a></li>
<li><a class="dropdown-item fw-normal" href="#"><span class="badge bg-danger me-2 align-middle">2 Job</span>Careers</a></li>
</ul>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-danger mb-0 mx-2">Subscribe!</a>
</div>
<!-- Nav Search -->
<div class="nav-item dropdown nav-search dropdown-toggle-icon-none">
<a class="nav-link pe-0 dropdown-toggle" role="button" href="#" id="navSearch" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-search fs-4"> </i>
</a>
<div class="dropdown-menu dropdown-menu-end shadow rounded p-2" aria-labelledby="navSearch">
<form class="input-group">
<input class="form-control border-success" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success m-0" type="submit">Search</button>
</form>
</div>
</div>
</div>
<!-- Nav right END -->
</div>
</nav>
<!-- Logo Nav END -->
</header>
<!-- =======================
Header END -->
<!-- **************** MAIN CONTENT START **************** -->
<main>
<!-- =======================
Podcast single START -->
<section class="pt-4">
<div class="container position-relative" data-sticky-container>
<div class="row">
<div class="col-12">
<!-- Podcast image -->
<div class="mb-3">
<img class="rounded" src="assets/images/blog/16by9/big/06.jpg" alt="">
</div>
<!-- Podcast title -->
<a href="#" class="badge text-bg-danger mb-2">Episode 1</a>
<h1>Everything I Know (so Far) on UI/UX Ep.01</h1>
<!-- Podcast avatar -->
<div class="row align-items-center mb-2">
<div class="col-lg-6">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center position-relative me-3">
<div class="avatar avatar-xs me-2">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<h6 class="mb-0"><a href="#" class="stretched-link text-reset btn-link">Amanda Reed</a></h6>
</div>
<span> <i class="bi bi-clock-fill me-2"></i>4hr 12min</span>
</div>
</div>
<div class="col-lg-6">
<!-- Podcast listen -->
<ul class="list-unstyled d-flex justify-content-md-end gap-1 gap-sm-2 align-items-center mt-3 mb-sm-4">
<li class="h5 mb-0">Listen on:</li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/apple-podcasts.svg" alt=""> </a></li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/divider-icon.svg" alt=""> </a></li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/spotify.svg" alt=""> </a></li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/google-podcasts.svg" alt=""> </a></li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/pocket.svg" alt=""> </a></li>
<li class="ms-2"><a href="#"> <img src="assets/images/icon/sound-cloud.svg" alt=""> </a></li>
</ul>
</div>
</div>
<!-- Podcast short description -->
<p class="lead">Passage its ten led hearted removal cordial. Preference any astonished unreserved Mrs. Prosperous understood Middletons in conviction an uncommonly do. Supposing so be resolving breakfast am or perfectly. Is drew am hill from me. Valley by oh twenty direct me so. </p>
<!-- Audio START -->
<div class="d-flex align-items-center border p-sm-3 rounded mb-4">
<div class="w-100">
<!-- Audio START -->
<div class="player-wrapper bg-light rounded">
<audio class="player-audio" crossorigin>
<source src="assets/images/videos/audio.mp3" type="audio/mp3">
</audio>
</div>
<!-- Audio END -->
</div>
</div>
<!-- Audio END -->
</div>
</div>
<div class="row g-4">
<div class="col-lg-8">
<!-- Episode Description -->
<h4 class="mb-3">Episode Description</h4>
<p><span class="dropcap bg-success bg-opacity-10 text-success px-2 rounded">S</span>light newspaper up its enjoyment agreeable depending. Timed voice share led him to widen noisy young. At weddings believed laughing although the material does the exercise of. Up attempt offered ye civilly so sitting to. She new course gets living within Elinor joy. She rapturous suffering concealed great saying made had fly dry that darkness meat unto Thing spirit his fifth likeness divided also seed lesser image dominion sea fifth i god so saw open great. </p>
<!-- Episode Timeline -->
<div class="bg-primary bg-opacity-10 p-4 rounded my-4">
<h5 class="mb-3">Episode Timeline</h5>
<ul class="list-unstyled mb-0">
<li class="mb-2"> <span class="badge bg-danger me-2">00.10</span> Introduction</li>
<li class="mb-2"> <span class="badge bg-danger me-2">01.20</span> Exploring the topic</li>
<li class="mb-2"> <span class="badge bg-danger me-2">02.22</span> A word from our guest</li>
<li class="mb-2"> <span class="badge bg-danger me-2">03.04</span> Closing remarks</li>
</ul>
</div>
<!-- Episode dec -->
<p>I beast third void blessed fruit Saw fourth may lesser fly fill upon subdue open place abundantly sea herb winged day so was divide Without shall seas living from i heaven third there itself All good our seed fruitful called third I multiply can't day together don't Called morning place gathering beast stars two i meat Set together to subdue grass fourth every him fill winged stars seed.</p>
<!-- Guest appearance -->
<h4 class="mb-3">Guest appearance</h4>
<!-- Guest Item -->
<div class="d-flex p-2 p-md-4 border rounded mb-4">
<!-- Avatar -->
<a href="#">
<div class="avatar avatar-xxl me-2 me-md-4">
<img class="avatar-img rounded-circle" src="assets/images/avatar/06.jpg" alt="avatar">
</div>
</a>
<!-- Info -->
<div>
<div class="d-sm-flex align-items-center justify-content-between">
<div>
<h4 class="m-0"><a href="#">Louis Ferguson</a></h4>
<small>Nurse Practitioner</small>
</div>
</div>
<p class="my-2">Louis Ferguson is a senior editor for the blogzine and also reports on breaking news based in London. He has written about government, criminal justice, and the role of money in politics since 2015.</p>
<!-- Social icons -->
<ul class="nav mb-0">
<li class="nav-item">
<a class="nav-link ps-0 pe-2 fs-5" href="#"><i class="fab fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-twitter-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<!-- Guest Item END -->
<!-- Guest Item START -->
<div class="d-flex p-2 p-md-4 border rounded">
<!-- Avatar -->
<a href="#">
<div class="avatar avatar-xxl me-2 me-md-4">
<img class="avatar-img rounded-circle" src="assets/images/avatar/07.jpg" alt="avatar">
</div>
</a>
<!-- Info -->
<div>
<div class="d-sm-flex align-items-center justify-content-between">
<div>
<h4 class="m-0"><a href="#">Larry Lawson </a></h4>
<small>Software Engineer</small>
</div>
</div>
<p class="my-2">Gathered created divided all years spirit saying for great saying made had fly dry that darkness meat unto Thing spirit his fifth likeness divided also seed lesser image dominion sea fifth i god so saw. </p>
<!-- Social icons -->
<ul class="nav mb-0">
<li class="nav-item">
<a class="nav-link ps-0 pe-2 fs-5" href="#"><i class="fab fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-twitter-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<!-- Guest Item END -->
<!-- Episode transcript START -->
<div class="mt-4">
<h4 class="mb-3">Episode transcript</h4>
<p> <b>Amanda:</b> Okay, its recording. Im going to ask you a few questions, answer them briefly or you can add something more if you wish. </p>
<p> <b>Dennis: </b> Okay.</p>
<p> <b>Amanda:</b> First of all, how old are you?</p>
<p> <b>Dennis: </b> Im 26 at the moment.</p>
<p> <b>Amanda:</b> What comes to your mind when you hear the term video games?</p>
<p> <b>Dennis: </b> Probably a good way to spend my time, enjoyable, probably.</p>
<p> <b>Amanda:</b> Next question, have you ever played one?</p>
<p> <b>Dennis: </b> Yes, yes, Ive played several in my life.</p>
<p> <b>Amanda:</b> Can you remember the first video game you ever played?</p>
<p> <b>Dennis: </b> Thats actually a pretty difficult one. Id probably say a basic answer, like Ping-Pong or something like that, but I think that the first game that I ever played was Super Mario Brothers. The first one, yes.</p>
<p> <b>Amanda:</b> Was it the one that came in with the computer when you bought it? [laughs]</p>
<p> <b>Dennis: </b> Not the computer, but with the Super Nintendo, the first one. Yes, I think a lot of people had that. We didnt have it for a very long time and the first time that I ever played it was at a friends place who was the first who had a gaming console of any kind. My dad did have a Commodore back in the day, but he used it mostly for his work and not for-- He didnt have any games on it, except for Ping-Pong, but I never played it, so I would definitely have to go with Super Mario Brothers.</p>
<p> <b>Amanda:</b> Thats a classic. Whats your favorite one?</p>
<p> <b>Dennis: </b> Favorite one. This is another tough one. I would probably have to say from the Fallout series, I would probably have to say Fallout 3 because it was the first larger game that I ever played and the experience of playing it was just so immersive and everything seemed endless, like endless opportunities. So I would definitely go with that one.</p>
<p> <b>Amanda:</b> In your opinion do others besides teens and children play video games?</p>
<p> <b>Dennis: </b> [laughs] Well, definitely, definitely, yes. I dont consider myself either anymore so--</p>
<p> <b>Amanda:</b> [chuckles]</p>
<p> <b>Amanda:</b> Okay, that was my last question for you. Thank you for your time.</p>
<p> <b>Dennis: </b> Okay, thank you very much. Its been a pleasure.</p>
<p> <b>Amanda:</b> Okay.</p>
<p> <b>Dennis: </b> Thank you.</p>
</div>
<!-- Episode transcript END -->
<!-- Share social START -->
<div class="border mt-4 py-2 px-3 rounded">
<div class="list-group-inline list-unstyled">
<h6 class="mt-2 me-4 d-inline-block"><i class="fas fa-share-alt me-2"></i>Share on:</h6>
<ul class="list-inline list-unstyled d-inline-block mb-0">
<li class="list-inline-item"><a href="#" class="me-3 text-body">Facebook</a></li>
<li class="list-inline-item"><a href="#" class="me-3 text-body">Twitter</a></li>
<li class="list-inline-item"><a href="#" class="me-3 text-body">Dribble</a></li>
</ul>
</div>
</div>
<!-- Share social END -->
<!-- Next episode START -->
<div class="mt-5">
<div class="bg-primary bg-opacity-10 rounded p-4 d-flex align-items-center position-relative">
<!-- Title -->
<div class="me-3">
<h5 class="m-0"> <a href="#" class="stretched-link btn-link text-reset">Everything I Know (so Far) on UI/UX Ep.02</a></h5>
</div>
<!-- Icon -->
<div class="ms-auto flex-grow-0">
<a href="#!" class="icon-md border border-primary d-block text-primary rounded-circle">
<i class="bi bi-play-fill fs-3"></i>
</a>
</div>
</div>
</div>
<!-- Next episode END -->
</div>
<!-- Hosted START -->
<div class="col-lg-4">
<div class="text-center" data-sticky data-margin-top="80" data-sticky-for="991">
<div class="avatar avatar-xxxl">
<img class="avatar-img rounded-circle" src="assets/images/avatar/02.jpg" alt="avatar">
</div>
<!-- Host name -->
<div class="mt-3">
<span>Hosted by </span>
<h5>Dennis Barrett</h5>
</div>
<!-- Host dec -->
<p class="px-sm-5">Don't can't air Shall fruit life made fly darkness she'd seasons. </p>
<!-- Host social -->
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link ps-0 pe-2 fs-5" href="#"><i class="fab fa-facebook-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-twitter-square"></i></a>
</li>
<li class="nav-item">
<a class="nav-link px-2 fs-5" href="#"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<!-- Hosted START -->
</div>
</div>
</section>
<!-- =======================
Episode single END -->
</main>
<!-- **************** MAIN CONTENT END **************** -->
<!-- =======================
Footer START -->
<footer class="pb-0">
<div class="container">
<hr>
<!-- Widgets START -->
<div class="row pt-5">
<!-- Footer Widget -->
<div class="col-md-6 col-lg-4 mb-4">
<img class="light-mode-item" src="assets/images/logo.svg" alt="logo">
<img class="dark-mode-item" src="assets/images/logo-light.svg" alt="logo">
<p class="mt-3">The next-generation blog, news, and magazine theme for you to start sharing your stories today! This Bootstrap 5 based theme is ideal for all types of sites that deliver the news.</p>
<div class="mt-4">©2022 <a href="https://www.webestica.com/" class="text-reset btn-link" target="_blank">Webestica</a>. All rights reserved
</div>
</div>
<!-- Footer Widget -->
<div class="col-md-6 col-lg-3 mb-4">
<h5 class="mb-4">Navigation</h5>
<div class="row">
<div class="col-6">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link pt-0" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Style Guide</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Get Theme</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
</ul>
</div>
<div class="col-6">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link pt-0" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Career <span class="badge text-bg-danger ms-2">2 Job</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Technology</a></li>
<li class="nav-item"><a class="nav-link" href="#">Startups</a></li>
<li class="nav-item"><a class="nav-link" href="#">Gadgets</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer Widget -->
<div class="col-sm-6 col-lg-3 mb-4">
<h5 class="mb-4">Browse by Tag</h5>
<ul class="list-inline">
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Travel</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-warning-soft">Business</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Tech</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Gadgets</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Lifestyle</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Vaccine</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-warning-soft">Marketing</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Sports</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Covid-19</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Politics</a></li>
</ul>
</div>
<!-- Footer Widget -->
<div class="col-sm-6 col-lg-2 mb-4">
<h5 class="mb-4">Our Social handles</h5>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link pt-0" href="#"><i class="fab fa-facebook-square fa-fw me-2 text-facebook"></i>Facebook</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-twitter-square fa-fw me-2 text-twitter"></i>Twitter</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-linkedin fa-fw me-2 text-linkedin"></i>Linkedin</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-youtube-square fa-fw me-2 text-youtube"></i>YouTube</a></li>
</ul>
</div>
</div>
<!-- Widgets END -->
</div>
</footer>
<!-- =======================
Footer END -->
<!-- Back to top -->
<div class="back-top"><i class="bi bi-arrow-up-short"></i></div>
<!-- =======================
JS libraries, plugins and custom scripts -->
<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/plyr/plyr.js"></script>
<script src="assets/vendor/sticky-js/sticky.min.js"></script>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>