-
Notifications
You must be signed in to change notification settings - Fork 0
/
post.html
150 lines (126 loc) · 7.97 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
<!doctype html>
<title>Laravel From Scratch Blog</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<body style="font-family: Open Sans, sans-serif">
<section class="px-6 py-8">
<nav class="md:flex md:justify-between md:items-center">
<div>
<a href="/">
<img src="/images/logo.svg" alt="Laracasts Logo" width="165" height="16">
</a>
</div>
<div class="mt-8 md:mt-0">
<a href="/" class="text-xs font-bold uppercase">Home Page</a>
<a href="#"
class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-5">Subscribe
for Updates</a>
</div>
</nav>
<main class="max-w-6xl mx-auto mt-10 lg:mt-20 space-y-6">
<article class="max-w-4xl mx-auto lg:grid lg:grid-cols-12 gap-x-10">
<div class="col-span-4 lg:text-center lg:pt-14 mb-10">
<img src="/images/illustration-1.png" alt="" class="rounded-xl">
<p class="mt-4 block text-gray-400 text-xs">
Published <time>1 day ago</time>
</p>
<div class="flex items-center lg:justify-center text-sm mt-4">
<img src="/images/lary-avatar.svg" alt="Lary avatar">
<div class="ml-3 text-left">
<h5 class="font-bold">Lary Laracore</h5>
<h6>Mascot at Laracasts</h6>
</div>
</div>
</div>
<div class="col-span-8">
<div class="hidden lg:flex justify-between mb-6">
<a href="#"
class="transition-colors duration-300 relative inline-flex items-center text-lg hover:text-blue-500">
<svg width="22" height="22" viewBox="0 0 22 22" class="mr-2">
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
</path>
<path class="fill-current"
d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z">
</path>
</g>
</svg>
Back to Posts
</a>
<div class="space-x-2">
<a href="#"
class="px-3 py-1 border border-blue-300 rounded-full text-blue-300 text-xs uppercase font-semibold"
style="font-size: 10px">Techniques</a>
<a href="#"
class="px-3 py-1 border border-red-300 rounded-full text-red-300 text-xs uppercase font-semibold"
style="font-size: 10px">Updates</a>
</div>
</div>
<h1 class="font-bold text-3xl lg:text-4xl mb-10">
This is a big title and it will look great on two or even three
lines. Wooohoo!
</h1>
<div class="space-y-4 lg:text-lg leading-loose">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit.</p>
<h2 class="font-bold text-lg">Sed quia consequuntur</h2>
<p>Magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
nulla
pariatur?"</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit.</p>
</div>
</div>
</article>
</main>
<footer class="bg-gray-100 border border-black border-opacity-5 rounded-xl text-center py-16 px-10 mt-16">
<img src="/images/lary-newsletter-icon.svg" alt="" class="mx-auto -mb-6" style="width: 145px;">
<h5 class="text-3xl">Stay in touch with the latest posts</h5>
<p class="text-sm">Promise to keep the inbox clean. No bugs.</p>
<div class="mt-10">
<div class="relative inline-block mx-auto lg:bg-gray-200 rounded-full">
<form method="POST" action="#" class="lg:flex text-sm">
<div class="lg:py-3 lg:px-5 flex items-center">
<label for="email" class="hidden lg:inline-block">
<img src="/images/mailbox-icon.svg" alt="mailbox letter">
</label>
<input id="email" type="text" placeholder="Your email address"
class="lg:bg-transparent pl-4 focus-within:outline-none">
</div>
<button type="submit"
class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 mt-4 lg:mt-0 lg:ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-8">
Subscribe
</button>
</form>
</div>
</div>
</footer>
</section>
</body>