-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (122 loc) · 5.2 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
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
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<title>Mappets</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="./css/vendors/aos.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/vendors/swiper-bundle.min.css" />
<link href="./style.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
<script>
if (
localStorage.getItem("dark-mode") == "true" ||
!("dark-mode" in localStorage)
) {
document.querySelector("html").classList.add("dark");
} else {
document.querySelector("html").classList.remove("dark");
}
</script>
</head>
<body
class="font-inter antialiased bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 tracking-tight"
>
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden">
<!-- Page content -->
<main class="grow">
<section class="border-t border-transparent dark:border-gray-800">
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-16">
<img
class="mx-auto"
src="./images/branding.png"
alt="Mappets"
width="200px"
/>
<h1 class="h2 font-red-hat-display mb-4">Mappets</h1>
<p class="text-xl text-gray-600 dark:text-gray-400">
We care a lot about animals.
</p>
<p class="text-xl text-gray-600 dark:text-gray-400">
<a href="mailto:[email protected]">
</a>
</p>
</div>
</div>
</div>
</section>
</main>
<!-- Site footer -->
<footer class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div
class="py-12 md:py-16 border-t border-gray-200 dark:border-gray-800 -mt-px"
>
<!-- Bottom area -->
<div class="md:flex md:items-center md:justify-between">
<!-- Social links -->
<div class="flex mb-4 md:order-2 md:ml-4 md:mb-0">
<!-- Desktop lights switch -->
<div class="form-switch flex flex-col justify-center ml-3">
<input
type="checkbox"
name="light-switch"
id="light-switch-desktop"
class="light-switch sr-only"
/>
<label class="relative" for="light-switch-desktop">
<span
class="relative bg-gradient-to-t from-gray-100 to-white dark:from-gray-800 dark:to-gray-700 shadow-sm z-10"
aria-hidden="true"
></span>
<svg
class="absolute inset-0"
width="44"
height="24"
viewBox="0 0 44 24"
xmlns="http://www.w3.org/2000/svg"
>
<g
class="fill-current text-white"
fill-rule="nonzero"
opacity=".88"
>
<path
d="M32 8a.5.5 0 00.5-.5v-1a.5.5 0 10-1 0v1a.5.5 0 00.5.5zM35.182 9.318a.5.5 0 00.354-.147l.707-.707a.5.5 0 00-.707-.707l-.707.707a.5.5 0 00.353.854zM37.5 11.5h-1a.5.5 0 100 1h1a.5.5 0 100-1zM35.536 14.829a.5.5 0 00-.707.707l.707.707a.5.5 0 00.707-.707l-.707-.707zM32 16a.5.5 0 00-.5.5v1a.5.5 0 101 0v-1a.5.5 0 00-.5-.5zM28.464 14.829l-.707.707a.5.5 0 00.707.707l.707-.707a.5.5 0 00-.707-.707zM28 12a.5.5 0 00-.5-.5h-1a.5.5 0 100 1h1a.5.5 0 00.5-.5zM28.464 9.171a.5.5 0 00.707-.707l-.707-.707a.5.5 0 00-.707.707l.707.707z"
/>
<circle cx="32" cy="12" r="3" />
<circle fill-opacity=".4" cx="12" cy="12" r="6" />
<circle fill-opacity=".88" cx="12" cy="12" r="3" />
</g>
</svg>
<span class="sr-only">Switch to light / dark version</span>
</label>
</div>
</div>
<!-- Middle links -->
<div class="text-sm md:order-1 text-gray-700 mb-2 md:mb-0">
<a
class="text-gray-600 dark:text-gray-400 hover:underline transition duration-150 ease-in-out"
href="privacy.html"
>Privacy Policy</a
>
</div>
<!-- Copyrights note -->
<div class="text-gray-600 dark:text-gray-400 text-sm mr-4">
© Trebla. All rights reserved.
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="./js/vendors/alpinejs.min.js" defer></script>
<script src="./js/vendors/aos.js"></script>
<script src="./js/vendors/swiper-bundle.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>