feat: add quote page
This commit is contained in:
parent
ec844c6c88
commit
0eab10dc09
9 changed files with 2057 additions and 242 deletions
165
blog.html
165
blog.html
|
|
@ -140,129 +140,15 @@
|
|||
<div class="max-w-7xl mx-auto px-5">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
|
||||
<!-- Main Blog Content -->
|
||||
<div id="main-blog-content" class="lg:col-span-2">
|
||||
<!-- Blog Post -->
|
||||
<article class="mb-16" data-tags="wood" data-date="2022-10-14">
|
||||
<!-- Featured Image -->
|
||||
<div class="mb-8">
|
||||
<img
|
||||
src="assets/images/blog_post_1.png"
|
||||
alt="Going all-in with millennial design"
|
||||
class="w-full h-96 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Post Meta -->
|
||||
<div class="flex items-center space-x-8 mb-6">
|
||||
<!-- Admin -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img
|
||||
src="assets/icons/admin.png"
|
||||
alt="Admin"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Date -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img
|
||||
src="assets/icons/calendar.png"
|
||||
alt="Calendar"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
14 Oct 2022
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Category -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<img src="assets/icons/tag.png" alt="Tag" class="w-6 h-6" />
|
||||
<span
|
||||
class="font-playfair font-normal text-base text-gray-500"
|
||||
>
|
||||
Wood
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Title -->
|
||||
<h2
|
||||
class="font-playfair font-medium text-3xl md:text-4xl leading-tight text-black mb-6"
|
||||
>
|
||||
Going all-in with millennial design
|
||||
</h2>
|
||||
|
||||
<!-- Post Excerpt -->
|
||||
<p
|
||||
class="font-playfair font-normal text-base leading-relaxed text-gray-500 mb-8 text-justify"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Mus mauris vitae ultricies leo integer malesuada nunc. In
|
||||
nulla posuere sollicitudin aliquam ultrices. Morbi blandit
|
||||
cursus risus at ultrices mi tempus imperdiet. Libero enim sed
|
||||
faucibus turpis in. Cursus mattis molestie a iaculis at erat.
|
||||
Nibh cras pulvinar mattis nunc sed blandit libero.
|
||||
Pellentesque elit ullamcorper dignissim cras tincidunt.
|
||||
Pharetra et ultrices neque ornare aenean euismod elementum.
|
||||
</p>
|
||||
|
||||
<!-- Read More Link -->
|
||||
<button
|
||||
type="button"
|
||||
class="read-more-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
|
||||
>
|
||||
Read more
|
||||
</button>
|
||||
|
||||
<!-- Full content (initially hidden) -->
|
||||
<div
|
||||
class="full-content hidden font-playfair font-normal text-base leading-relaxed text-gray-500 mt-6 text-justify"
|
||||
>
|
||||
<p class="mb-4">
|
||||
Quis hendrerit dolor magna eget est lorem ipsum. Bibendum
|
||||
arcu vitae elementum curabitur vitae nunc sed velit
|
||||
dignissim sodales. Non tellus orci ac auctor augue mauris
|
||||
augue neque gravida in. Nisl condimentum id venenatis a
|
||||
condimentum vitae sapien pellentesque habitant. Sit amet
|
||||
volutpat consequat mauris nunc congue nisi vitae suscipit.
|
||||
Integer enim neque volutpat ac tincidunt vitae semper quis
|
||||
lectus. Nibh tellus molestie nunc non blandit massa enim
|
||||
nec. Amet consectetur adipiscing elit ut aliquam purus sit
|
||||
amet luctus.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
At tellus at urna condimentum mattis pellentesque id nibh
|
||||
tortor id. Non quam lacus suspendisse faucibus interdum.
|
||||
Interdum velit euismod in pellentesque massa placerat duis
|
||||
ultricies. Platea dictumst quisque sagittis purus sit amet
|
||||
volutpat consequat. Sem viverra aliquet eget sit amet tellus
|
||||
cras adipiscing. Eget lorem dolor sed viverra ipsum nunc
|
||||
aliquet bibendum enim facilisis gravida neque convallis a
|
||||
cras.
|
||||
</p>
|
||||
<p>
|
||||
Mattis rhoncus urna neque viverra justo nec. Aliquet
|
||||
porttitor lacus luctus accumsan tortor posuere ac ut
|
||||
consequat semper viverra nam libero justo laoreet sit amet
|
||||
cursus sit amet dictum sit amet justo. Risus at ultrices mi
|
||||
tempus imperdiet nulla malesuada pellentesque elit.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="lg:col-span-2">
|
||||
<div id="main-blog-content">
|
||||
<!-- Blog posts will be dynamically loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div
|
||||
id="blog-pagination"
|
||||
class="flex items-center justify-center space-x-4"
|
||||
class="flex items-center justify-center space-x-4 mt-10"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -319,20 +205,8 @@
|
|||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Categories
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<button
|
||||
type="button"
|
||||
class="flex justify-between items-center w-full text-left tag-filter px-4 py-3 rounded-lg border border-gray-300 hover:border-uc-gold hover:bg-gray-50 transition-colors"
|
||||
data-tag="wood"
|
||||
aria-pressed="false"
|
||||
>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
Wood
|
||||
</span>
|
||||
<span class="font-playfair font-normal text-base">
|
||||
(1)
|
||||
</span>
|
||||
</button>
|
||||
<div id="blog-categories" class="space-y-4">
|
||||
<!-- Categories will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,27 +215,8 @@
|
|||
<h3 class="font-playfair font-medium text-2xl text-black mb-6">
|
||||
Recent Posts
|
||||
</h3>
|
||||
<div class="space-y-6">
|
||||
<!-- Recent Post 1 -->
|
||||
<div class="flex space-x-4">
|
||||
<img
|
||||
src="assets/images/blog_thumb_1.png"
|
||||
alt="Blog thumbnail"
|
||||
class="w-20 h-20 object-cover rounded-lg"
|
||||
/>
|
||||
<div>
|
||||
<h4
|
||||
class="font-playfair font-normal text-sm text-black mb-2 leading-tight"
|
||||
>
|
||||
Going all-in with millennial design
|
||||
</h4>
|
||||
<p
|
||||
class="font-playfair font-normal text-xs text-gray-500"
|
||||
>
|
||||
03 Aug 2022
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recent-posts" class="space-y-6">
|
||||
<!-- Recent posts will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -520,6 +375,6 @@
|
|||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="scripts/main.js?v=1.1"></script>
|
||||
<script src="scripts/main.js?v=4.2"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue