forked from mbussert/giftez
-
Notifications
You must be signed in to change notification settings - Fork 0
/
testLanding.html
218 lines (202 loc) · 9.41 KB
/
testLanding.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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<title>GiftEZ</title>
<link rel="stylesheet" href="./public/css/tailwind.css">
<link rel="stylesheet" href="./public/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link href="./public/images/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="bg-gray-300 dark:bg-gray-700" style="font-family:Georgia, 'Times New Roman', Times, serif;">
<!--Nav Bar -->
<nav>
<div class="container mx-auto px-6 py-2 flex justify-between items-center">
<a class="font-bold text-2xl lg:text-4xl dark:text-gray-200 filter drop-shadow-lg" href="#">
GiftEZ
</a>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none" type="button" onclick="toggleNavbar">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="hidden lg:block">
<ul class="inline-flex">
<li><a class="px-4 font-bold dark:text-gray-200" href="/">Sign In</a></li>
<li><a class="px-4 hover:text-gray-800 dark:text-gray-200" href="#">About</a></li>
</ul>
<div class="inline-block">
<label
for="switchTheme"
class="flex items-center cursor-pointer"
>
<div class="relative">
<input type="checkbox" id="switchTheme" class="sr-only" />
<div
class="block bg-gray-600 w-8 h-4 rounded-full dark:bg-gray-200"
></div>
<div
class="dot absolute left-1 top-1 bg-white w-2 h-2 rounded-full transition dark:bg-indigo-700"
></div>
</div>
<div class="ml-2 text-gray-700 font-medium dark:text-gray-200">
Darkmode
</div>
</label>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="py-20 " id="swup" style="background: linear-gradient(90deg, #667eea 0%, #764ba2 100%)">
<div class="container mx-auto px-6 transition-fade">
<h2 class="text-4xl font-bold mb-2 text-white filter drop-shadow-lg">
GiftEZ
</h2>
<h3 class="text-2xl mb-8 text-white filter drop-shadow-lg">
Create a personalized online gift registry using Amazon. Share with friends and family through email.
</h3>
</div>
</div>
<div class="bg-white pb-4 px-4 rounded-md w-full">
<div class="flex justify-between w-full pt-6 ">
<p class="ml-3"> Search Results</p>
</div>
<div class="overflow-x-auto mt-6">
<table class="table-auto border-collapse w-full">
<thead>
<tr class="rounded-lg text-sm font-medium text-gray-700 text-left" style="font-size: 0.9674rem">
<th class="px-4 py-2 bg-gray-200 " style="background-color:#f8f8f8">Image</th>
<th class="px-4 py-2 " style="background-color:#f8f8f8">Item</th>
<th class="px-4 py-2 " style="background-color:#f8f8f8">Price</th>
<th class="px-4 py-2 " style="background-color:#f8f8f8">Price</th>
</tr>
</thead>
<tbody class="text-sm font-normal text-gray-700">
<tr class="hover:bg-gray-100 border-b border-gray-200 py-10">
<td class="px-4 py-4">Intro to CSS</td>
<td class="px-4 py-4">Adam</td>
<td class="px-4 py-4">858</td>
</tr>
<tr class="hover:bg-gray-100 border-b border-gray-200 py-4">
<td class="px-4 py-4 flex items-center">
A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="px-4 py-4">Adam</td>
<td class="px-4 py-4">112</td>
</tr>
<tr class="hover:bg-gray-100 border-gray-200">
<td class="px-4 py-4">Intro to JavaScript</td>
<td class="px-4 py-4">Chris</td>
<td class="px-4 py-4">1,280</td>
</tr>
</tbody>
</table>
</div>
<div class="w-full flex justify-center border-t border-gray-100 pt-4 items-center"></div>
</div>
<!--Sign up form -->
<div class="h-screen flex items-center justify-center ">
<form class="w-full md:w-1/3 bg-white rounded-lg items-center dark:bg-gray-600 shadow-2xl dark:shadow-2xl transition-fade">
<div class="flex font-bold justify-center mt-6">
<i class="fas fa-gift fa-5x text-indigo-700 filter drop-shadow-lg dark:text-indigo-300"></i>
</div>
<h2 class="text-3xl text-center text-indigo-500 mb-4 mt-4 dark:text-indigo-200">Get Started Now!</h2>
<div class="px-12 pb-10">
<div class="w-full mb-2">
<div class="flex justify-center">
<input type='text' placeholder="Username"
class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center dark:bg-gray-200 dark:text-gray-900 shadow-inner dark:shadow-inner" />
</div>
</div>
<div class="w-full mb-2">
<div class="flex justify-center">
<input type='text' placeholder="First Name"
class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center dark:bg-gray-200 dark:text-gray-900 shadow-inner dark:shadow-inner" />
</div>
</div>
<div class="w-full mb-2">
<div class="flex justify-center">
<input type='text' placeholder="Last Name"
class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center dark:bg-gray-200 dark:text-gray-900 shadow-inner" />
</div>
</div>
<div class="w-full mb-2">
<div class="flex justify-center">
<input type='email' placeholder="Email"
class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center dark:bg-gray-200 dark:text-gray-900 shadow-inner" />
</div>
</div>
<div class="w-full mb-2">
<div class="flex justify-center">
<input type='password' placeholder="Password"
class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none dark:bg-gray-200 dark:text-gray-900 shadow-inner" />
</div>
<button type="submit"
class="w-full mt-6 py-2 rounded bg-indigo-500 text-gray-100 focus:outline-none dark:bg-indigo-500">Get Started!</button>
</form>
<a href="#" class="text-sm text-opacity-100 float-right mt-6 mb-4 text-indigo-700 dark:text-indigo-200">Forgot Password?</a>
<a href="#" class="text-sm text-opacity-100 float-left mt-6 mb-8 text-indigo-700 dark:text-indigo-200">Create Account</a>
</div>
</div>
</div>
<!--Features Section
<section class="container mx-auto px-6 p-10">
<h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
Features
</h2>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Personalized Gift Registries</h4>
<p class="text-gray-600 mb-8">Create different registries for different occasions. Create different registries for the same occasion but different lists for different people you share it with.</p>
</div>
<div class="w-full md:w-1/2">
<img src="/public/images/Green Leaves Organic and Feminine Restaurant Logo (1).png" alt="placeholder" />
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<img src="https://picsum.photos/200/300?grayscale" alt="placeholder" />
</div>
<div class="w-full md:w-1/2 pl-10">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Share with Friends and Family</h4>
<p class="text-gray-600 mb-8">With GiftEZ you can share your personalized registries with friends and family by creating an email list.</p>
</div>
</div>
<div class="flex items-center flex-wrap mb-20">
<div class="w-full md:w-1/2">
<h4 class="text-3xl text-gray-800 font-bold mb-3">Edit Your Lists</h4>
<p class="text-gray-600 mb-8">When you create a profile you'll be able to add, edit and delete items from your registry anytime you want.</p>
</div>
<div class="w-full md:w-1/2">
<img src="https://picsum.photos/seed/picsum/200/300" alt="placeholder" />
</div>
</div>
</section> -->
<!-- Footer -->
<footer class="bg-gray-100 dark:bg-gray-500">
<div class="container mx-auto px-6 pt-10 pb-6">
<div class="flex flex-wrap">
<div class="w-full md:w-1/4 text-center md:text-left">
<h5 class="uppercase mb-6 font-bold text-indigo-500 dark:text-indigo-300">GiftEZ</h5>
<ul class="mb-4">
<li class="mt-2"></li>
<a href="#" class="hover:underline text-gray-600 dark:text-gray-100">About Us</a>
</li>
<li class="mt-2">
<a href="#" class="hover:underline text-gray-600 dark:text-gray-100">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="./public/js/animations.js"></script>
<script src="./public/js/theme.js"></script>
</body>
</html>