-
Notifications
You must be signed in to change notification settings - Fork 0
/
page.html
306 lines (254 loc) · 16.2 KB
/
page.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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ole&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ole&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/site.webmanifest">
<style>
.ole-regular {
font-family: "Ole", cursive;
font-weight: 400;
font-style: normal;
}
.vollkorn {
font-family: "Vollkorn", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
body{
scroll-behavior:smooth;
}
</style>
</head>
<body class="bg-gradient-to-r from-gray-900 via-black to-gray-900 text-white vollkorn scroll-smooth">
<header class="fixed top-0 left-0 w-full bg-gradient-to-r from-gray-900 via-black to-gray-800 text-white z-50">
<nav class="max-w-[85rem] w-full mx-auto px-5 md:px-20 flex items-center justify-between py-6">
<a class="ole-regular text-5xl md:text-6xl font-semibold text-white" href="page.html" aria-label="Brand">
Creative
</a>
<div class="sm:hidden">
<button type="button" class="hs-collapse-toggle size-7 flex justify-center items-center gap-x-2 rounded-lg border border-gray-700 bg-gray-900 text-white shadow-sm hover:bg-gray-800 focus:outline-none" id="hs-navbar-example-collapse" aria-expanded="false" aria-controls="hs-navbar-example" aria-label="Toggle navigation">
<svg class="hs-collapse-open:hidden" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" x2="21" y1="6" y2="6"/>
<line x1="3" x2="21" y1="12" y2="12"/>
<line x1="3" x2="21" y1="18" y2="18"/>
</svg>
<svg class="hs-collapse-open:block hidden" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"/>
<path d="m6 6 12 12"/>
</svg>
</button>
</div>
<div id="hs-navbar-example" class="hidden hs-collapse transition-all duration-300 sm:flex sm:items-center">
<div class="flex flex-col gap-5 mt-5 sm:flex-row sm:mt-0">
<a class="font-medium text-xl md:text-2xl text-gray-300 hover:text-white" href="page.html">Home</a>
<a class="font-medium text-xl md:text-2xl text-gray-300 hover:text-white" href="page.html#about">About Us</a>
<a class="font-medium text-xl md:text-2xl text-gray-300 hover:text-white" href="page.html#features">Services</a>
<a class="font-medium text-xl md:text-2xl text-gray-300 hover:text-white" href="page.html#contact-us">Contact</a>
</div>
</div>
</nav>
</header>
<section id="1" class="w-full min-h-screen flex items-center justify-center px-6 md:px-20 pt-12 md:pt-20">
<div class="flex flex-col md:flex-row items-center text-center md:text-left space-y-8 md:space-y-0 md:space-x-12">
<div class="md:w-1/2 space-y-6">
<h1 class="text-6xl md:text-8xl font-bold ole-regular text-white">Creative</h1>
<h2 class="text-5xl md:text-7xl font-bold text-blue-500">Organize Your Day, Your Way</h2>
<p class="mt-4 text-xl md:text-2xl text-gray-300">Stay on top of your tasks with Creative. Simple, intuitive, and powerful.</p>
<a href="index.html" class="mt-6 inline-block px-8 py-4 bg-blue-500 text-white rounded-md text-lg hover:bg-blue-600">Get Started for Free</a>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="img/your-entrepreneurship-journey-is.png" alt="Creative App Preview" class="w-[800px] h-[600px] rounded-lg shadow-lg">
</div>
</div>
</section>
<section id="about" class="w-full px-6 md:px-20 py-16 text-white">
<div class="max-w-7xl mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">About Creative</h2>
<p class="text-xl md:text-2xl text-gray-300 mb-6">
Creative is here to help you take control of your tasks, one list at a time. Our intuitive app simplifies your to-do list management, making it easier than ever to stay organized, meet deadlines, and boost productivity.
</p>
<p class="text-lg text-gray-400">
Whether you're a busy professional, a student juggling assignments, or someone looking to streamline their daily routines, Creative provides a flexible, customizable solution that adapts to your needs.
Say goodbye to stress and clutter – and hello to clarity and focus.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12 text-center">
<div class="p-8 bg-gray-800 rounded-lg shadow-lg hover:bg-gray-600 transition duration-300">
<h3 class="text-2xl font-semibold mb-4">User-Friendly Interface</h3>
<p class="text-gray-300">Designed with simplicity in mind, Creative is easy to use, helping you manage tasks with minimal effort.</p>
</div>
<div class="p-8 bg-gray-700 rounded-lg shadow-lg hover:bg-gray-600 transition duration-300">
<h3 class="text-2xl font-semibold mb-4">Powerful Features</h3>
<p class="text-gray-300">From reminders to custom lists, Creative is packed with tools to keep you organized.</p>
</div>
<div class="p-8 bg-gray-800 rounded-lg shadow-lg hover:bg-gray-600 transition duration-300">
<h3 class="text-2xl font-semibold mb-4">Your Productivity Partner</h3>
<p class="text-gray-300">We’re more than an app – we’re your partner in achieving a more productive and balanced life.</p>
</div>
</div>
</section>
<section id="features" class="w-full px-6 md:px-20 ">
<h2 class="text-5xl font-bold text-center mb-16 text-white">Features</h2>
<div class="space-y-12">
<div class="flex flex-col md:flex-row md:items-center md:space-x-10">
<div class="md:w-1/2 p-12 bg-gray-900 rounded-lg shadow-xl hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
<h3 class="text-3xl font-semibold mb-6 text-white">Easy Task Management</h3>
<p class="text-xl text-gray-300">Create, edit, and delete tasks easily to stay organized and productive.</p>
</div>
<div class="md:w-1/2 flex justify-center order-first md:order-last">
<img src="img/ezgif-6-bee98d0fc7.gif" alt="Easy Task Management" class="w-full h-auto max-w-sm rounded-lg shadow-lg">
</div>
</div>
<div class="flex flex-col md:flex-row-reverse md:items-center md:space-x-10">
<div class="md:w-1/2 p-12 bg-gray-900 rounded-lg shadow-xl hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
<h3 class="text-3xl font-semibold mb-6 text-white">Custom Reminders</h3>
<p class="text-xl text-gray-300">Set custom reminders to never miss an important deadline.</p>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="img/custom.png" alt="Custom Reminders" class="w-full h-auto max-w-sm rounded-lg shadow-lg">
</div>
</div>
<div class="flex flex-col md:flex-row md:items-center md:space-x-10">
<div class="md:w-1/2 p-12 bg-gray-900 rounded-lg shadow-xl hover:bg-gray-600 transition duration-300 transform hover:-translate-y-2">
<h3 class="text-3xl font-semibold mb-6 text-white">Collaborate with Others</h3>
<p class="text-xl text-gray-300">Share your lists with friends, family, or colleagues for easy collaboration.</p>
</div>
<div class="md:w-1/2 flex justify-center order-first md:order-last">
<img src="img/collaboration.gif" alt="Collaborate with Others" class="w-full h-auto max-w-sm rounded-lg shadow-lg">
</div>
</div>
</div>
</section>
<section id="how-to-use" class="w-full px-4 py-16 text-white">
<h2 class="text-4xl font-bold mb-10 pl-14">How to Use</h2>
<div class="space-y-8">
<div class="flex flex-col md:flex-row md:items-start md:space-x-6">
<div class="w-full md:w-1/4 flex justify-center mb-4 md:mb-0">
<span class="text-3xl font-bold bg-gray-700 rounded-full p-4 shadow-lg">1</span>
</div>
<div class="w-full md:w-3/4">
<h3 class="text-2xl font-semibold mb-2">Add Your Tasks</h3>
<p class="text-lg text-gray-300">Create new tasks by clicking the 'Add Task' button and filling in the task details such as title, description, and due date.</p>
</div>
</div>
<div class="flex flex-col md:flex-row md:items-start md:space-x-6">
<div class="w-full md:w-1/4 flex justify-center mb-4 md:mb-0">
<span class="text-3xl font-bold bg-gray-700 rounded-full p-4 shadow-lg">2</span>
</div>
<div class="w-full md:w-3/4">
<h3 class="text-2xl font-semibold mb-2">Set Reminders</h3>
<p class="text-lg text-gray-300">Choose to receive reminders for your tasks by selecting a preferred notification method and time.</p>
</div>
</div>
<div class="flex flex-col md:flex-row md:items-start md:space-x-6">
<div class="w-full md:w-1/4 flex justify-center mb-4 md:mb-0">
<span class="text-3xl font-bold bg-gray-700 rounded-full p-4 shadow-lg">3</span>
</div>
<div class="w-full md:w-3/4">
<h3 class="text-2xl font-semibold mb-2">Collaborate</h3>
<p class="text-lg text-gray-300">Share your tasks and lists with others by using the 'Share' feature to collaborate and stay in sync.</p>
</div>
</div>
</div>
<div class="mt-10 flex justify-center">
<a href="index.html" class="inline-block px-8 py-4 bg-blue-500 text-white rounded-md text-lg hover:bg-blue-600">Try now</a>
</div>
</section>
<section id="testimonials" class="w-full max-w-4xl mx-auto px-4 py-16 text-gray-800 dark:text-neutral-200">
<h2 class="text-4xl font-bold text-center mb-10 text-white">Testimonials</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 border-y border-gray-200 divide-y sm:divide-y-0 sm:divide-x divide-gray-200 dark:border-neutral-700 dark:divide-neutral-700">
<div class="py-6 px-4 sm:px-6">
<blockquote>
<span class="text-sm text-white">I'm absolutely floored by the level of care and attention to detail Eliana has put into this project and for one can guarantee that we will be a return customer.</span>
<footer class="mt-3 flex items-center gap-x-3">
<img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Josh Grazioso Avatar">
<div class="text-xs text-gray-500 dark:text-neutral-500">Josh Grazioso</div>
</footer>
</blockquote>
</div>
<div class="py-6 px-4 sm:px-6">
<blockquote>
<span class="text-sm text-white">To say that hiring Eliana has been life-changing is an understatement. My business has tripled and I got my life back.</span>
<footer class="mt-3 flex items-center gap-x-3">
<img class="w-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Nicole Grazioso Avatar">
<div class="text-xs text-gray-500 dark:text-neutral-500">Nicole Grazioso</div>
</footer>
</blockquote>
</div>
</div>
</section>
<section id="contact-us" class="w-full px-4 py-16 text-white">
<h2 class="text-4xl font-bold mb-10 text-center">Contact Us</h2>
<div class="max-w-2xl mx-auto bg-gray-900 p-8 rounded-lg shadow-lg">
<form>
<div class="mb-6">
<label for="name" class="block text-lg font-medium mb-2">Name</label>
<input type="text" id="name" class="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your name" required>
</div>
<div class="mb-6">
<label for="email" class="block text-lg font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter your email" required>
</div>
<div class="mb-6">
<label for="message" class="block text-lg font-medium mb-2">Message</label>
<textarea id="message" rows="5" class="w-full p-3 rounded-lg bg-gray-700 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Write your message" required></textarea>
</div>
<div class="text-center">
<button type="submit" class="px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">Send Message</button>
</div>
</form>
</div>
</section>
<footer class="bg-gray-900 text-white py-4 mt-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="text-center md:text-left mb-6 md:mb-0">
<h3 class="text-4xl ole-regular font-bold">Creative</h3>
<p class="text-gray-400 mt-2">Making your experience better every day.</p>
</div>
<div class="flex gap-6 mb-6 md:mb-0 justify-center md:justify-end">
<a href="page.html" class="text-gray-300 hover:text-white">Home</a>
<a href="#features" class="text-gray-300 hover:text-white">Services</a>
<a href="#1" class="text-gray-300 hover:text-white">About us</a>
<a href="#contact-us" class="text-gray-300 hover:text-white">Contact</a>
</div>
<div class="flex gap-6">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
<div class="text-center mt-4">
<p class="text-gray-500 text-sm">© 2024 Creative. All Rights Reserved.</p>
</div>
</div>
</footer>
<script>
document.getElementById('hs-navbar-example-collapse').addEventListener('click', function () {
const navbar = document.getElementById('hs-navbar-example');
navbar.classList.toggle('hidden');
});
</script>
</body>
</html>