-
Notifications
You must be signed in to change notification settings - Fork 77
/
Copy pathpost.html
246 lines (221 loc) · 15.2 KB
/
post.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Blog Template</title>
<meta name="author" content="David Grzyb">
<meta name="description" content="">
<!-- Tailwind -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
.font-family-karla {
font-family: karla;
}
</style>
<!-- AlpineJS -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!-- Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
</head>
<body class="bg-white font-family-karla">
<!-- Top Bar Nav -->
<nav class="w-full py-4 bg-blue-800 shadow">
<div class="w-full container mx-auto flex flex-wrap items-center justify-between">
<nav>
<ul class="flex items-center justify-between font-bold text-sm text-white uppercase no-underline">
<li><a class="hover:text-gray-200 hover:underline px-4" href="#">Shop</a></li>
<li><a class="hover:text-gray-200 hover:underline px-4" href="#">About</a></li>
</ul>
</nav>
<div class="flex items-center text-lg no-underline text-white pr-6">
<a class="" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="pl-6" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="pl-6" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="pl-6" href="#">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</nav>
<!-- Text Header -->
<header class="w-full container mx-auto">
<div class="flex flex-col items-center py-12">
<a class="font-bold text-gray-800 uppercase hover:text-gray-700 text-5xl" href="#">
Minimal Blog
</a>
<p class="text-lg text-gray-600">
Lorem Ipsum Dolor Sit Amet
</p>
</div>
</header>
<!-- Topic Nav -->
<nav class="w-full py-4 border-t border-b bg-gray-100" x-data="{ open: false }">
<div class="block sm:hidden">
<a
href="#"
class="block md:hidden text-base font-bold uppercase text-center flex justify-center items-center"
@click="open = !open"
>
Topics <i :class="open ? 'fa-chevron-down': 'fa-chevron-up'" class="fas ml-2"></i>
</a>
</div>
<div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
<div class="w-full container mx-auto flex flex-col sm:flex-row items-center justify-center text-sm font-bold uppercase mt-0 px-6 py-2">
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Technology</a>
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Automotive</a>
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Finance</a>
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Politics</a>
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Culture</a>
<a href="#" class="hover:bg-gray-400 rounded py-2 px-4 mx-2">Sports</a>
</div>
</div>
</nav>
<div class="container mx-auto flex flex-wrap py-6">
<!-- Post Section -->
<section class="w-full md:w-2/3 flex flex-col items-center px-3">
<article class="flex flex-col shadow my-4">
<!-- Article Image -->
<a href="#" class="hover:opacity-75">
<img src="https://source.unsplash.com/collection/1346951/1000x500?sig=1">
</a>
<div class="bg-white flex flex-col justify-start p-6">
<a href="#" class="text-blue-700 text-sm font-bold uppercase pb-4">Technology</a>
<a href="#" class="text-3xl font-bold hover:text-gray-700 pb-4">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</a>
<p href="#" class="text-sm pb-8">
By <a href="#" class="font-semibold hover:text-gray-800">David Grzyb</a>, Published on April 25th, 2020
</p>
<h1 class="text-2xl font-bold pb-3">Introduction</h1>
<p class="pb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel neque non libero suscipit suscipit eu eu urna. Proin bibendum urna mattis ante malesuada ultrices. Etiam in turpis vitae elit dictum aliquet. Donec mattis risus in turpis dapibus, eget tempus sem tincidunt. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In est enim, imperdiet sed ornare quis, pellentesque vel risus. Nunc vitae vestibulum turpis. Quisque eget eleifend urna. Etiam et vulputate purus, ut egestas sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis quis neque non urna venenatis mollis et at massa. Pellentesque sem lacus, malesuada vel hendrerit molestie, mollis vel elit.</p>
<h1 class="text-2xl font-bold pb-3">Heading</h1>
<p class="pb-3">Vivamus nec facilisis elit, quis congue justo. In non augue ex. Aenean pretium facilisis hendrerit. Sed sed imperdiet dui. Etiam faucibus a diam sed vehicula. Nullam commodo lacus tincidunt, tincidunt orci sed, dapibus leo. Vivamus vulputate quis risus a ultricies. Aliquam luctus id tellus non condimentum. Aenean maximus viverra ipsum eget vestibulum. Morbi ut tincidunt sem, efficitur volutpat tortor. Donec scelerisque, ipsum eu efficitur semper, neque turpis sodales quam, in aliquam elit lacus varius lorem. Ut ut diam id leo efficitur malesuada eget in velit. Pellentesque tristique orci nunc, vitae fermentum nibh luctus eu. Mauris condimentum justo sed ipsum egestas varius.</p>
<p class="pb-3">Sed sagittis odio a volutpat feugiat. Cras aliquam varius justo, a rhoncus ante bibendum id. Nulla maximus nisl sed enim maximus, ut dictum lectus hendrerit. Fusce venenatis tincidunt eros. Phasellus quis augue vulputate ipsum pellentesque fringilla. Morbi nec tempor felis. Maecenas sollicitudin pellentesque dui, sit amet scelerisque mauris elementum nec. Cras ante metus, mattis in malesuada in, fermentum a nunc. Suspendisse potenti. Sed tempor lacus sed commodo dignissim. Quisque dictum, dolor auctor iaculis cursus, ipsum urna porttitor ex, sed consequat nisi tellus eget ante. Duis molestie mollis eros, eu sollicitudin mauris lobortis quis.</p>
<p class="pb-3">Vivamus sed neque nec massa scelerisque imperdiet eget id sapien. Fusce elementum mi id malesuada luctus. Proin quis lorem id leo porta interdum non ac nisl. Integer nulla sem, ultrices sed neque eget, blandit condimentum metus. Aliquam eget malesuada sapien. Curabitur aliquet orci sit amet ex tincidunt convallis. Mauris urna mi, consequat mattis mollis a, dignissim eget sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam facilisis sem diam, viverra consequat metus consequat vel. Cras a mi eu ex luctus malesuada quis eu ante. Aliquam erat volutpat.</p>
<h1 class="text-2xl font-bold pb-3">Conclusion</h1>
<p class="pb-3">Donec vulputate auctor leo lobortis congue. Sed elementum pharetra turpis. Nulla at condimentum odio. Vestibulum ullamcorper enim eget porttitor bibendum. Proin eros nibh, maximus vitae nisi a, blandit ultricies lectus. Vivamus eu maximus lacus. Maecenas imperdiet iaculis neque, vitae efficitur felis vestibulum sagittis. Nunc a eros aliquet, egestas tortor hendrerit, posuere diam. Proin laoreet, ligula non eleifend bibendum, orci nulla luctus ipsum, dignissim convallis quam dolor et nulla.</p>
</div>
</article>
<div class="w-full flex pt-6">
<a href="#" class="w-1/2 bg-white shadow hover:shadow-md text-left p-6">
<p class="text-lg text-blue-800 font-bold flex items-center"><i class="fas fa-arrow-left pr-1"></i> Previous</p>
<p class="pt-2">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</p>
</a>
<a href="#" class="w-1/2 bg-white shadow hover:shadow-md text-right p-6">
<p class="text-lg text-blue-800 font-bold flex items-center justify-end">Next <i class="fas fa-arrow-right pl-1"></i></p>
<p class="pt-2">Lorem Ipsum Dolor Sit Amet Dolor Sit Amet</p>
</a>
</div>
<div class="w-full flex flex-col text-center md:text-left md:flex-row shadow bg-white mt-10 mb-10 p-6">
<div class="w-full md:w-1/5 flex justify-center md:justify-start pb-4">
<img src="https://source.unsplash.com/collection/1346951/150x150?sig=1" class="rounded-full shadow h-32 w-32">
</div>
<div class="flex-1 flex flex-col justify-center md:justify-start">
<p class="font-semibold text-2xl">David</p>
<p class="pt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel neque non libero suscipit suscipit eu eu urna.</p>
<div class="flex items-center justify-center md:justify-start text-2xl no-underline text-blue-800 pt-4">
<a class="" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="pl-4" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="pl-4" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="pl-4" href="#">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Sidebar Section -->
<aside class="w-full md:w-1/3 flex flex-col items-center px-3">
<div class="w-full bg-white shadow flex flex-col my-4 p-6">
<p class="text-xl font-semibold pb-5">About Us</p>
<p class="pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis est eu odio sagittis tristique. Vestibulum ut finibus leo. In hac habitasse platea dictumst.</p>
<a href="#" class="w-full bg-blue-800 text-white font-bold text-sm uppercase rounded hover:bg-blue-700 flex items-center justify-center px-2 py-3 mt-4">
Get to know us
</a>
</div>
<div class="w-full bg-white shadow flex flex-col my-4 p-6">
<p class="text-xl font-semibold pb-5">Instagram</p>
<div class="grid grid-cols-3 gap-3">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=1">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=2">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=3">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=4">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=5">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=6">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=7">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=8">
<img class="hover:opacity-75" src="https://source.unsplash.com/collection/1346951/150x150?sig=9">
</div>
<a href="#" class="w-full bg-blue-800 text-white font-bold text-sm uppercase rounded hover:bg-blue-700 flex items-center justify-center px-2 py-3 mt-6">
<i class="fab fa-instagram mr-2"></i> Follow @dgrzyb
</a>
</div>
</aside>
</div>
<footer class="w-full border-t bg-white pb-12">
<div
class="relative w-full flex items-center invisible md:visible md:pb-12"
x-data="getCarouselData()"
>
<button
class="absolute bg-blue-800 hover:bg-blue-700 text-white text-2xl font-bold hover:shadow rounded-full w-16 h-16 ml-12"
x-on:click="decrement()">
←
</button>
<template x-for="image in images.slice(currentIndex, currentIndex + 6)" :key="images.indexOf(image)">
<img class="w-1/6 hover:opacity-75" :src="image">
</template>
<button
class="absolute right-0 bg-blue-800 hover:bg-blue-700 text-white text-2xl font-bold hover:shadow rounded-full w-16 h-16 mr-12"
x-on:click="increment()">
→
</button>
</div>
<div class="w-full container mx-auto flex flex-col items-center">
<div class="flex flex-col md:flex-row text-center md:text-left md:justify-between py-6">
<a href="#" class="uppercase px-3">About Us</a>
<a href="#" class="uppercase px-3">Privacy Policy</a>
<a href="#" class="uppercase px-3">Terms & Conditions</a>
<a href="#" class="uppercase px-3">Contact Us</a>
</div>
<div class="uppercase pb-6">© myblog.com</div>
</div>
</footer>
<script>
function getCarouselData() {
return {
currentIndex: 0,
images: [
'https://source.unsplash.com/collection/1346951/800x800?sig=1',
'https://source.unsplash.com/collection/1346951/800x800?sig=2',
'https://source.unsplash.com/collection/1346951/800x800?sig=3',
'https://source.unsplash.com/collection/1346951/800x800?sig=4',
'https://source.unsplash.com/collection/1346951/800x800?sig=5',
'https://source.unsplash.com/collection/1346951/800x800?sig=6',
'https://source.unsplash.com/collection/1346951/800x800?sig=7',
'https://source.unsplash.com/collection/1346951/800x800?sig=8',
'https://source.unsplash.com/collection/1346951/800x800?sig=9',
],
increment() {
this.currentIndex = this.currentIndex === this.images.length - 6 ? 0 : this.currentIndex + 1;
},
decrement() {
this.currentIndex = this.currentIndex === this.images.length - 6 ? 0 : this.currentIndex - 1;
},
}
}
</script>
</body>
</html>