blob: 206aaae56689b89c3a544b75b7a611bb8c455721 (
plain)
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
|
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}"
>
<body layout:fragment="content">
<!--Title-->
<div class="text-center pt-16 md:pt-32">
<p th:text="${article.createdOn}" class="text-sm md:text-base text-green-500 font-bold"></p>
<h1 th:text="${article.title}" class="font-bold break-normal text-3xl md:text-5xl">Welcome to Ghostwind CSS</h1>
</div>
<!--image-->
<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded" th:style="'background:url(' + @{${article.photoUrl}} + '); height: 75vh;'"></div>
<!--Container-->
<div class="container max-w-5xl mx-auto -mt-32">
<div class="mx-0 sm:mx-6">
<div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal" style="font-family:Georgia,serif;">
<!--Post Content-->
<div th:text="${article.content}"></div>
<!--/ Post Content-->
</div>
<!--Subscribe-->
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts delivered right to your inbox</h3>
<div class="w-full text-center pt-4">
<form action="#">
<div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center">
<input type="email" placeholder="[email protected]" class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
<button type="submit" class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">Subscribe</button>
</div>
</form>
</div>
</div>
<!-- /Subscribe-->
<!--Author-->
<div class="flex w-full items-center font-sans p-8 md:p-24">
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
<div class="flex-1">
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
</div>
<div class="justify-end">
</div>
<!--/Author-->
</div>
</div>
</div>
<!-- Scroll Top Button -->
<button class="btn-toggle-round scroll-top js-scroll-top" type="button" title="Scroll to top">
<svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="18" y1="11" x2="12" y2="5" />
<line x1="6" y1="11" x2="12" y2="5" />
</svg>
</button>
</body>
</html>
|
