-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (91 loc) · 5.88 KB
/
index.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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="max-w-5xl m-auto px-10">
<div class="mt-10">
<h1 class="text-4xl font-bold uppercase">blog</h1>
<div
class="mt-4 flex flex-col md:flex-row gap-4 justify-between items-center"
>
<h5 class="text-gray-500">Enjoy reading blogs? Go and Enjoy...</h5>
<button
class="py-2 px-4 text-white bg-green-600 rounded shadow w-full md:w-fit"
id="create-blog"
>
Create Blog
</button>
</div>
<hr class="mt-2" />
</div>
<div
class="mt-10 flex flex-wrap gap-10 items-center justify-between"
id="blogs-container"
>
<!--Create Blog form-->
<div id="create-blog" class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl">
<div class="flex justify-end pt-2 pr-5 text-gray-500 cursor-pointer">X</div>
<form class="flex flex-col items-center gap-4">
<h3 class="p-4 text-3xl font-semibold text-gray-900">Create a new blog</h3>
<input
type="text"
name="title"
class="border border-grey-700 p-2 rounded shadow-sm w-4/5"
placeholder="Enter the blog title" />
<textarea name="intro"
class="border border-grey-700 p-2 rounded shadow-sm w-4/5"
placeholder="Small intro before long description"
></textarea>
<textarea name="desc"
class="border border-grey-700 p-2 rounded shadow-sm w-4/5"
placeholder="Write your story"
></textarea>
<input type="url" name="image"
class="border border-grey-700 p-2 rounded shadow-sm w-4/5"
placeholder="Add a image url"
/>
<div class="flex items-center justify-end gap-4 w-4/5">
<button class="py-2 px-4 text-white bg-gray-600 rounded shadow w-full md:w-fit">Cancel</button>
<button class="py-2 px-4 text-white bg-green-600 rounded shadow w-full md:w-fit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Blog Details-->
<div id="blog-details" class=" hidden relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl">
<div class="flex justify-end pt-2 pr-5 text-gray-500 cursor-pointer"
onclick="(() => {
const blogDetails = document.getElementById('blog-details')
blogDetails.className = blogDetails.className.replace('visible','hidden')
}
)()"
>X</div>
<div class="p-6">
<h2 class="text-3xl font-bold m-2">Meet Whitney</h2>
<div class="flex justify-center mt-4">
<img src="https://images.unsplash.com/photo-1546913199-55e06682967e?ixlib=rb-1.2.1&auto=format&fit=crop&crop=focalpoint&fp-x=.735&fp-y=.55&w=1184&h=1376&q=80" alt="Meet Whitney" class="rounded-lg shadow-lg object-center object-cover" height="600" width="600" />
</div>
<p class="text-gray-600 text-center mt-4">Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.</p>
<p class="text-gray-600 text-sm mt-6">Sollicitudin tristique eros erat odio sed vitae, consequat turpis elementum. Lorem nibh vel, eget pretium arcu vitae. Eros eu viverra donec ut volutpat donec laoreet quam urna. Bibendum eu nulla feugiat justo, elit adipiscing. Ut tristique sit nisi lorem pulvinar. Urna, laoreet fusce nibh leo. Dictum et et et sit. Faucibus sed non gravida lectus dignissim imperdiet a. Dictum magnis risus phasellus vitae quam morbi. Quis lorem lorem arcu, metus, egestas netus cursus. In. Rhoncus nisl, libero egestas diam fermentum dui. At quis tincidunt vel ultricies. Vulputate aliquet velit faucibus semper. Pellentesque in venenatis vestibulum consectetur nibh id. In id ut tempus egestas. Enim sit aliquam nec, a. Morbi enim fermentum lacus in. Viverra. Tincidunt integer commodo, cursus etiam aliquam neque, et. Consectetur pretium in volutpat, diam. Montes, magna cursus nulla feugiat dignissim id lobortis amet. Laoreet sem est phasellus eu proin massa, lectus. Diam rutrum posuere donec ultricies non morbi. Mi a platea auctor mi. Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>