-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
77 lines (77 loc) · 3.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dark/light</title>
<!-- include the tailwind css in our page -->
<link href="./output.css" rel="stylesheet" />
<!-- include javaScript in our page -->
<script defer src="./main.js"></script>
</head>
<body class="bg-orange-300 dark:bg-orange-400">
<div class="h-screen flex items-center justify-center">
<div
class="relative bg-slate-100 dark:bg-gray-700 h-80 w-7/12 rounded-md text-white shadow-2xl"
>
<div class="flex justify-between">
<h1 class="text-gray-700 dark:text-white text-3xl m-3">
Just Text
</h1>
<button
class="moon m-3 border-white px-2 rounded-md bg-purple-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
/>
</svg>
</button>
<button
class="sun m-3 border-white px-2 rounded-md bg-purple-500"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
/>
</svg>
</button>
</div>
<div>
<p class="m-4 text-gray-700 dark:text-white">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Minus eveniet nostrum quia quo dolorum, cumque
tempore accusamus vel nulla, fuga quibusdam explicabo
dolor optio repellendus laudantium id reprehenderit
saepe tenetur.
</p>
</div>
<div class="absolute bottom-0 left-0">
<button
class="bg-black dark:bg-white text-white text-xl dark:text-black m-7 py-3 px-6 rounded-md shadow-lg"
>
Learn more...
</button>
</div>
</div>
</div>
</body>
</html>