-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpost_details.html
More file actions
253 lines (243 loc) · 16.2 KB
/
post_details.html
File metadata and controls
253 lines (243 loc) · 16.2 KB
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lobster&family=Outfit:wght@400;500;600;700&family=Russo+One&display=swap" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<title>Blog</title>
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="shortcut icon" type="image/png" href="https://img.icons8.com/small/64/ffffff/hand-with-pen.png">
</head>
<body>
<!-- HEADER -->
<header x-data="{mobilenavOpen: false}" class="md:flex items-center justify-between bg-gray-200 h-20 [&>*]:px-8 text-black font-bold sticky top-0 z-50">
<div class="flex items-center justify-between h-20">
<logo class="logo">
<a class="flex items-center gap-1" href="index.html">
<img class="max-h-10" src="https://img.icons8.com/small/64/000000/hand-with-pen.png" alt="hand-with-pen"/>
<span class="">CSBLOG</span>
</a>
</logo>
<mobileicon class="md:hidden">
<a @click="mobilenavOpen = ! mobilenavOpen" class="w-10 h-10 flex items-center justify-center bg-gray-500 hover:bg-gray-700">
<img x-show="!mobilenavOpen" x-cloak class="w-6 h-6 select-none" src="https://img.icons8.com/small/64/ffffff/menu.png" alt="menu"/>
<img x-show="mobilenavOpen" x-cloak class="w-6 h-6 select-none" src="https://img.icons8.com/small/64/ffffff/delete-sign.png" alt="menu"/>
</a>
</mobileicon>
</div>
<nav x-show="mobilenavOpen" x-cloak
class="md:!block bg-gray-200 w-screen h-screen md:w-auto md:h-auto -mt-20 md:mt-0 absolute md:relative z-[-1]"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0 -translate-y-5 scale-96"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="duration-200 ease-in"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-100 -translate-y-5 scale-96"
>
<ul class="flex items-center flex-col md:flex-row gap-6 md:gap-0 justify-center h-full -translate-y-10 md:translate-y-0 navItems">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Create Post</a></li>
<li x-data="{ openDropDown: false, toggle(){this.openDropDown = ! this.openDropDown} } " class="relative">
<a @click="toggle()" @click.away="openDropDown = false" class="cursor-pointer select-none">
<img class="w-8 h-8 rounded-full" src="assets/images/MyProfilePic.jpg" alt="">
<span>John Doe</span>
<img x-bind:class="openDropDown && 'rotate-180 duration-300' " class="w-4 ml-1.5 pt-1 hover:text-white" src="https://img.icons8.com/small/32/000000/expand-arrow.png" alt="">
</a>
<!-- Drop Down Menu -->
<div x-show="openDropDown" x-cloak
class="absolute bg-gray-200 text-black p-2 shadow rounded-lg w-40 right-0 z-20"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0 -translate-y-4 scale-90"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="duration-200 ease-in"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-100 -translate-y-4 scale-90"
>
<ul class="navItems [&>li>a]:justify-end">
<li><a href="">My Profile</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<!-- HERO -->
<hero class="grid bg-gray-700 text-center text-white z-10 relative bg-cover" style="background-image: url('assets/images/unsplash_1.jpg');">
<div class="col-start-1 row-start-1 bg-gray-800 bg-opacity-30 w-full h-full"></div>
<div class="col-start-1 row-start-1 px-8 py-16 md:px-10 md:py-20 w-full">
<h1 class="textBlip">Technology</h1>
<p class="text-lg font-bold md:px-40 pb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
laudantium voluptatibus eligendi.
</p>
</div>
</hero>
<!-- CONTENT -->
<content x-data="{mobileSidebarOpen: false}" class="grid grid-cols-3 max-w-7xl mx-auto mt-10">
<mobileSideBarNav class="md:hidden col-span-full mx-auto mb-6 z-10 relative">
<a @click="mobileSidebarOpen = ! mobileSidebarOpen" class="flex item-center cursor-pointer select-none font-bold p-3 hover:bg-gray-200">
<span>Categories</span>
<img x-bind:class="mobileSidebarOpen && 'rotate-180 duration-300' " class="w-4 ml-1.5 pt-1" src="https://img.icons8.com/small/32/000000/expand-arrow.png" alt="">
</a>
</mobileSideBarNav>
<!-- ASIDE -->
<aside
x-show="mobileSidebarOpen" x-cloak
class="md:!block col-span-full md:col-span-1 mx-[10%] md:mr-[20%] order-1 md:order-2"
x-transition:enter="duration-300 ease-out"
x-transition:enter-start="opacity-0 -mt-70"
x-transition:enter-end="opacity-100 mt-0"
x-transition:leave="duration-300 ease-in"
x-transition:leave-start="opacity-100 mt-0"
x-transition:leave-end="opacity-0 -m-70"
>
<section class="flex flex-col py-4">
<div class="searchForm mb-4">
<input class="p-2 text-md" placeholder="Search..." type="text" name="" id="q">
</div>
<h2 class="mb-4">Categories</h2>
<div class="bg-gray-700 grid text-center mb-5 text-white bg-cover relative" style="background-image: url('assets/images/banner1.jpg');">
<div class="col-start-1 row-start-1 bg-gray-800 bg-opacity-30 w-full h-full"></div>
<div class="col-start-1 row-span-1 px-4 py-8">
<a href=""><span class="font-bold">Culture</span></a>
</div>
</div>
<div class=" bg-gray-700 grid text-center mb-5 text-white bg-cover relative" style="background-image: url('assets/images/banner7.jpg');">
<div class="col-start-1 row-start-1 bg-gray-800 bg-opacity-30 w-full h-full"></div>
<div class="col-start-1 row-span-1 px-4 py-8">
<a href=""><span class="font-bold">Sport</span></a>
</div>
</div>
<div class=" bg-gray-800 grid text-center mb-5 text-white bg-cover relative" style="background-image: url('assets/images/banner8.jpg');">
<div class="col-start-1 row-start-1 bg-gray-900 bg-opacity-30 w-full h-full"></div>
<div class="col-start-1 row-span-1 px-4 py-8">
<a href=""><span class="font-bold">Technology</span></a>
</div>
</div>
</section>
<section class="flex flex-col p-4 mb-5 bg-gray-100">
<h2 class="mb-3">Top Posts</h2>
<div class="grid text-center mb-4">
<ul class="">
<li class="flex item-center justify-between">
<span class="text-2xl md:text-3xl font-bold text-gray-800">1</span>
<div class="flex flex-col p-2 pt-0 postTitle">
<a href="post_details.html">
<p class="text-gray-900 text-start pl-2 ">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</a>
<span class="text-start pl-2 text-small text-gray-600">John Doe - 10/12/2023</span>
</div>
</li>
<li class="flex item-center justify-between">
<span class="text-2xl md:text-3xl font-bold text-gray-800">2</span>
<div class="flex flex-col p-2 pt-0 postTitle">
<a href="post_details.html">
<p class="text-gray-900 text-start pl-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</a>
<span class="text-start pl-2 text-small text-gray-600">John Doe - 17/12/2023</span>
</div>
</li>
<li class="flex item-center justify-between">
<span class="text-2xl md:text-3xl font-bold text-gray-800">3</span>
<div class="flex flex-col p-2 pt-0 postTitle">
<a href="post_details.html">
<p class="text-gray-900 text-start pl-2 ">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</a>
<span class="text-start pl-2 text-small text-gray-600">John Doe - 17/12/2023</span>
</div>
</li>
</ul>
</div>
</section>
</aside>
<!-- MAIN ARTICLE -->
<main class="col-span-full md:col-span-2 mx-[4%] md:mx-[8%] order-2">
<div class="postBody px-1 md:px-2 pt-2 pb-5">
<div class="postHeader">
<img class="w-auto h-auto" src="assets/images/posts/1.jpg" alt="">
<div class="flex items-center justify-between py-4 text-gray-500">
<span>John Doe</span>
<span>17/12/2023</span>
</div>
</div>
<h2 class="postTitle pb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit mollitia itaque distinctio facilis at sed possimus
neque placeat. Alias, cupiditate! Maxime saepe eveniet facere eaque? Reiciendis id vitae sit quam.
</p>
<p class="py-4"><i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, delectus!</i></p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad impedit dicta sint animi distinctio accusamus, exercitationem officia. Id fugit maiores fugiat ad, fuga debitis natus eveniet maxime esse provident harum, quibusdam dolor culpa ullam consectetur nihil doloremque earum itaque nobis magnam cum unde facilis. Itaque temporibus cupiditate dolorem nisi laborum?
</p>
<blockquote class="" cite="http://www.worldwildlife.org/who/index.html">
<q>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</q>
</blockquote>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit mollitia itaque distinctio facilis at sed possimus
neque placeat. Alias, cupiditate! Maxime saepe eveniet facere eaque? Reiciendis id vitae sit quam.
</p>
<img class="w-10 my-2" src="assets/images/posts/4.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit mollitia itaque distinctio facilis at sed possimus
neque placeat. Alias, cupiditate! Maxime saepe eveniet facere eaque? Reiciendis id vitae sit quam.
</p>
</div>
</div>
<div class="comments-box">
<h2 class="pb-4 text-lg font-semibold">Comments (10)</h2>
<div class="comments mx-2 mt-4 mb-8 ">
<div class="flex flex-row justify-between gap-2 p-2 mb-2 md:mb-3 odd:bg-gray-100 border-l-4 border-l-gray-400" id="comment">
<div class="author-comment w-[300px] md:w-[200px]">
<img class="w-16 h-16 rounded-full" src="assets/images/MyProfilePic.jpg" alt="">
</div>
<div class="comment_body">
<div class="text-gray-400">
<span class="">John Doe</span> - <span class="">27/12/2023</span>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab debitis autem esse aspernatur voluptates dolorem nesciunt blanditiis reiciendis sit ducimus?</div>
</div>
</div>
<div class="flex flex-row justify-between gap-1 p-2 mb-2 md:mb-3 odd:bg-gray-100 border-l-4 border-l-gray-400" id="comment">
<div class="author-comment w-[300px] md:w-[200px]">
<img class="w-16 h-16 rounded-full" src="assets/images/MyProfilePic.jpg" alt="">
</div>
<div class="comment_body">
<div class="text-gray-400">
<span class="">John Doe</span> - <span class="">27/12/2023</span>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab debitis autem esse aspernatur voluptates dolorem nesciunt blanditiis reiciendis sit ducimus?</div>
</div>
</div>
<div class="flex flex-row justify-between gap-1 p-2 mb-2 md:mb-3 odd:bg-gray-100 border-l-4 border-l-gray-400" id="comment">
<div class="author-comment w-[300px] md:w-[200px]">
<img class="w-16 h-16 rounded-full" src="assets/images/MyProfilePic.jpg" alt="">
</div>
<div class="comment_body">
<div class="text-gray-400">
<span class="">John Doe</span> - <span class="">27/12/2023</span>
</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab debitis autem esse aspernatur voluptates dolorem nesciunt blanditiis reiciendis sit ducimus?</div>
</div>
</div>
</div>
<hr>
<!-- Comment Form -->
<div class="my-6" id="commentForm">
<h2>Leave a comment</h2>
<form action="#" method="post" class="mt-3">
<div class="flex flex-row gap-2">
<input class="my-2" type="text" name="fullname" placeholder="Your Name...">
<input class="my-2" type="text" name="email" placeholder="Your Email...">
</div>
<textarea class="w-full mb-2" type="text" placeholder="Your comment..." rows="4"></textarea>
<input class="bg-gray-700 hover:bg-gray-800 text-white cursor-pointer p-2" type="button" value="Submit">
</form>
</div>
</div>
</main>
</content>
</body>
</html>