blob: 3a93a876a439d73ec94ff468be02a03b312a54d0 (
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
|
<!DOCTYPE html>
<html lang="en"
xmlns:th="https://thymeleaf.org"
xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
<meta charset="UTF-8">
<link th:href="@{/css/styles.css}" rel="stylesheet">
<title>Title Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/> <!--Replace with your tailwind.css once created-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>:root{
::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}</style>
</head>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
<!--Header-->
<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/6/65/Toronto_Skyline_Summer_2020.jpg'); height: 60vh; max-height:460px;">
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
<!--Title-->
<p class="text-white font-extrabold text-3xl md:text-5xl">
👻 Ghostwind CSS
</p>
<p class="text-xl md:text-2xl text-gray-500">Welcome to my Blog</p>
</div>
</div>
<div layout:fragment="content" ></div>
<footer class="bg-gray-900">
<div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
<div class="w-full mx-auto flex flex-wrap items-center">
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
<a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
👻 <span class="text-base text-gray-200">Ghostwind CSS</span>
</a>
</div>
<div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
<ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
<li>
<a class="inline-block py-2 px-3 text-white no-underline" href="#">Active</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3" href="#">link</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
//Init tooltips
tippy('.avatar')
</script>
</body>
</html>
|
