Files
site/res/templates/blog-detail.html
2025-12-27 21:59:58 +08:00

405 lines
21 KiB
HTML

{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
<div id="main-wrapper">
<!-- Sidebar Start -->
{{template "components/sidebar.html" .}}
<!-- Sidebar End -->
<div class="page-wrapper">
<!-- Header Start -->
{{template "components/topbar.html" .}}
<!-- Header End -->
<div class="body-wrapper">
<div class="container-fluid">
<div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
<div class="card-body px-4 py-3">
<div class="row align-items-center">
<div class="col-9">
<h4 class="fw-semibold mb-8">Blog Detail</h4>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
</li>
<li class="breadcrumb-item" aria-current="page">Blog Detail</li>
</ol>
</nav>
</div>
<div class="col-3">
<div class="text-center mb-n5">
<img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
</div>
</div>
</div>
</div>
</div>
<div class="card overflow-hidden">
<div class="position-relative">
<a href="javascript:void(0)">
<img src="../assets/images/blog/blog-img5.jpg" class="card-img-top rounded-0 object-fit-cover" alt="modernize-img" height="440">
</a>
<span class="badge text-bg-light mb-9 me-9 position-absolute bottom-0 end-0">2
min Read</span>
<img src="../assets/images/profile/user-5.jpg" alt="modernize-img" class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Esther Lindsey">
</div>
<div class="card-body p-4">
<span class="badge text-bg-light mt-3">Lifestyle</span>
<h2 class="fs-9 fw-semibold my-4">Streaming video way before it was cool, go dark tomorrow</h2>
<div class="d-flex align-items-center gap-4">
<div class="d-flex align-items-center gap-2">
<i class="ti ti-eye text-dark fs-5"></i>2252
</div>
<div class="d-flex align-items-center gap-2">
<i class="ti ti-message-2 text-dark fs-5"></i>3
</div>
<div class="d-flex align-items-center fs-2 ms-auto">
<i class="ti ti-point text-dark"></i>Sat, Jan 14
</div>
</div>
</div>
<div class="card-body border-top p-4">
<h2 class="fs-8 fw-semibold mb-3">Title of the paragraph</h2>
<p class="mb-3">
But you cannot figure out what it is or what it can do. MTA web directory is the simplest way in which
one can bid on a link, or a few links if they wish to do so. The link
directory on MTA displays all of the links it currently has, and does so in alphabetical order, which
makes it much easier for someone to find what they are looking for if it is
something specific and they do not want to go through all the other sites and links as well. It allows
you to start your bid at the bottom and slowly work your way to the top
of the list.
</p>
<p class="mb-3">
Gigure out what it is or what it can do. MTA web directory is the simplest way in which one can bid on a
link, or a few links if they wish to do so. The link directory on MTA
displays all of the links it currently has, and does so in alphabetical order, which makes it much
easier for someone to find what they are looking for if it is something
specific and they do not want to go through all the other sites and links as well. It allows you to
start your bid at the bottom and slowly work your way to the top of the
</p>
<p class="text-dark mb-0">
<strong>This is strong text.</strong>
</p>
<p class="mb-0">
<em>This is italic text.</em>
</p>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold">Unorder list.</h3>
<ul class="my-3 ps-4 text-dark">
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span>
Gigure
out what it is or
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> The
links
it currently
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> It
allows
you to start your bid
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span>
Gigure
out what it is or
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> The
links
it currently
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> It
allows
you to start your bid
</li>
</ul>
</div>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold">Order list.</h3>
<ol class="my-3 text-dark">
<li>Gigure out what it is or</li>
<li>The links it currently</li>
<li>It allows you to start your bid</li>
<li>Gigure out what it is or</li>
<li>The links it currently</li>
<li>It allows you to start your bid</li>
</ol>
</div>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold mb-2">Quotes</h3>
<div class="p-3 bg-light rounded border-start border-2 border-primary">
<h6 class="mb-0 fs-4 fw-semibold">
<i class="ti ti-quote fs-7"></i>Life is short, Smile while you still
have teeth!
</h6>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="mb-4 fw-semibold">Post Comments</h4>
<form>
<textarea class="form-control mb-4" rows="5"></textarea>
<button class="btn btn-primary">Post Comment</button>
</form>
<div class="d-flex align-items-center gap-3 mb-4 mt-7 pt-8">
<h4 class="mb-0">Comments</h4>
<span class="badge bg-primary-subtle text-primary fs-4 fw-semibold px-6 py-8 rounded">3</span>
</div>
<div class="position-relative">
<div class="p-4 rounded-4 text-bg-light mb-3">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-2.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Don Russell</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Es do ujurus nejson imju azgudpi toceztep ji cocicoci bosawrop korze ta.
Casetlu udumej umocu wanaro webmos ijafa ud muli amja softoj ma pijum.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
<div class="p-4 rounded-4 text-bg-light mb-3">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-3.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Cordelia Potter</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Huwso jewzehgu julriw niwgazep lewbob isujirmuz hemto pahop cewa zuhucze rinitba
etdebluj.
Obdevo bo fa siztes laobeir agoemugo rut sapaviw mulati do re dabelul wo tumnik wih mu.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
<div class="p-4 rounded-4 text-bg-light mb-3 ms-7">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-6.jpg" alt="modernize-img" class="rounded-circle" width="40" height="40">
<h6 class="mb-0 fs-4">Irene Hanson</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Uborofgic be rof lom sedge vapozi ohoinu nutremcuc ro ko atmeg anrov git ve vuj ki teb
or.
Lohi hafa faddegon horoz ebema kew idful ducam nev rol iga wikkobsu sucdu gud.
</p>
</div>
<div class="p-4 rounded-4 text-bg-light">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-4.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Seth Ortiz</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Icme rasejmat ciwo ifekemug owoca vicoz ukikitus famiftat nuk eroewu za upe.
Pobrikvup kivofvac tuba ot veh ozoab sa gesi hahoniha hop burbip volo hufotobo di uted vojoamu.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Search Bar -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content rounded-1">
<div class="modal-header border-bottom">
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
<i class="ti ti-x fs-5 ms-3"></i>
</a>
</div>
<div class="modal-body message-body" data-simplebar="">
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
<ul class="list mb-0 py-2">
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Shopping Cart -->
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header justify-content-between py-4">
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
Shopping Cart
</h5>
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
<ul class="mb-0">
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
+
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="align-bottom">
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Sub Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$2530</span>
</div>
</div>
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$6830</span>
</div>
</div>
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
</div>
</div>
</div>
</div>
{{template "components/footer.html" .}}