-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (229 loc) · 13.8 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
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
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<title>BetterHalf - Find your partner</title>
<!-- favicon -->
<link rel="shortcut icon" href="./src/images/OG-images/favicon.ico" type="image/x-icon">
<!-- Inter -->
<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=Gentium+Book+Plus:ital,wght@0,700;1,400;1,700&family=Inter:wght@400;500;700;800;900&display=swap"
rel="stylesheet">
<!-- Flowbite -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.1.1/flowbite.min.css" rel="stylesheet" />
<style>
* {
font-family: 'Inter', sans-serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="overflow-x-hidden scrollbar-hide w-screen min-h-screen">
<div class="w-full h-full flex flex-col">
<!-- hero -->
<div class="w-full h-screen object-center bg-cover flex flex-col"
style="background-image: url(./images/hero.jpg);">
<!-- nav -->
<div
class="z-50 text-lg w-full fixed bg-opacity-50 backdrop-blur-2xl transition-all duration-300 h-20 rounded-b-xl border-2 border-t-0 border-gray-200 flex flex-row justify-between text-gray-950 items-center px-11">
<!-- logo -->
<div>
<a href="index.html"><img src="./src/images/OG-images/horizontalnoBG.png" alt="BetterHalf"
class="w-48 "></a>
</div>
<div class="flex flex-row space-x-4">
<a href="about.html">
<div
class="mr-11 hover:bg-[#ec679e] hover:px-7 transition-all duration-500 p-3 rounded-md hover:text-black">
About</div>
</a>
<a href="./src/modules/authentication/register.php">
<div
class="hover:bg-[#ec679e] hover:px-7 transition-all duration-500 p-3 rounded-md hover:text-white">
Register</div>
</a>
<a href="./src/modules/authentication/login.php">
<div
class="hover:bg-[#ec679e] hover:px-7 transition-all duration-500 p-3 rounded-md hover:text-white">
Login</div>
</a>
</div>
</div>
<div class="p-7 px-36 w-full flex-grow mt-20">
<div
class="w-full rounded-2xl h-full border-2 border-gray-200 flex justify-center items-center bg-gray-950 bg-opacity-10 backdrop-blur-xl">
<div class="flex flex-col text-white">
<div class="text-8xl font-normal text-center items-center justify-center"
style="font-family: 'Inter', sans-serif;;">
Make The First Move
</div>
<div class="flex flex-row space-x-6 items-center justify-center mt-10">
<a href="./src/modules/authentication/register.php">
<div
class="bg-[#ec679e] px-11 p-5 rounded-lg font-semibold text-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 hover:translate-x-1">
Join</div>
</a>
<a href="./src/modules/authentication/login.php">
<div
class="border-2 border-white px-11 p-5 rounded-lg font-semibold text-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 hover:translate-x-1 backdrop-blur-2xl bg-gray-950 text-white bg-opacity-20">
Sign in</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- testimonial -->
<div
class=" bg-opacity-50 bg-[#ec679e] text-center text-6xl font-semibold w-full h-32 flex items-center justify-center">
Testimonials
</div>
<!-- <div class="w-full min-h-screen items-center justify-center px-32">
<div class="flex flex-row w-full h-full space-x-1 divide-x-2 divide-[#ec679e] p-8">
<div class="w-1/2 flex flex-col space-y-4 divide-y-2 p-20 px-20 pr-10 items-center justify-center">
<div
class="h-1/2 w-full rounded-2xl bg-cover bg-center mb-11 transition-all duration-300 hover:backdrop-blur-2xl">
<img src="./images/c1.jpg" alt="Andrew and Alicia" class="rounded-2xl shadow-2xl h-full w-full">
</div>
<div class="h-1/2 w-full rounded-2xl bg-cover bg-center">
<img src="./images/c2.jpg" alt="Andrew and Alicia" class="rounded-2xl shadow-2xl h-full w-full">
</div>
</div>
<div class="w-1/2 min-h-screen flex flex-col space-y-4 p-6 items-center justify-center px-20 pl-10">
<div class="h-1/2 w-full rounded-2xl bg-cover bg-center"
style=" background-image: url(./images/c3.jpg);">
</div>
</div>
</div>
</div> -->
<div class="h-fit w-full px-40 flex justify-center items-center p-11">
<div class="grid grid-cols-5 grid-rows-9 gap-5 rounded-2xl w-full h-full">
<div
class="row-span-3 rounded-3xl rounded-bl-none border-2 border-gray-500 col-span-3 col-start-1 row-start-1 flex flex-row hover:shadow-2xl ease-in-out transition-all duration-300 hover:-translate-y-2 hover:translate-x-2">
<div class="h-full w-2/6 rounded-bl-none bg-gray-950 rounded-l-2xl overflow-hidden">
<img src="./images/c1.jpg" alt=""
class="object-cover object-center rounded-l-2xl border-r-2 border-gray-500 rounded-bl-none">
</div>
<div class="h-full flex-grow flex flex-col p-5 justify-center items-center">
<blockquote>
"Joining BetterHalf was the best decision we ever made! <br>
Thanks to this incredible platform, we found each other <br>
in the vast sea of possibilities" <br><br>
- Sarah and Alex
</blockquote>
</div>
</div>
<div
class="row-span-3 rounded-3xl rounded-br-none border-2 border-gray-500 col-span-3 col-start-3 row-start-4 flex flex-row hover:shadow-2xl ease-in-out transition-all duration-300 hover:-translate-y-2 hover:-translate-x-2">
<div class="h-full w-2/6 bg-gray-950 rounded-l-2xl overflow-hidden">
<img src="./images/c2.jpg" alt=""
class="object-cover object-center rounded-l-2xl border-r-2 border-gray-500">
</div>
<div class="h-full flex-grow flex flex-col p-5 justify-center items-center">
<blockquote>
"BetterHalf isn't just a dating site,it's a matchmaker of hearts! <br>
Emily and I connected through shared interests and <br>
values, creating a bond that has only strengthened over time.<br>
The features like the interactive map helped us discover <br>
that our perfect match was closer than we thought"<br><br>
- Emily and James
</blockquote>
</div>
</div>
<div
class="row-span-3 rounded-3xl rounded-bl-none border-2 border-gray-500 col-span-3 col-start-1 row-start-7 flex flex-row hover:shadow-2xl ease-in-out transition-all duration-300 hover:-translate-y-2 hover:translate-x-2">
<div class="h-full w-2/6 bg-gray-950 rounded-l-2xl overflow-hidden rounded-bl-none">
<img src="./images/c3.jpg" alt=""
class="object-cover object-center rounded-bl-none rounded-l-2xl border-r-2 border-gray-500">
</div>
<div class="h-full flex-grow flex flex-col p-5 justify-center items-center">
<blockquote>
"Finding true love seemed like an elusive dream until we discovered BetterHalf.<br>
The calendar feature helped us plan memorable dates,<br>
and the chat functionality kept us connected every step of the way" <br><br>
- Olivia and Michael
</blockquote>
</div>
</div>
</div>
</div>
<!-- Features -->
<div
class="bg-opacity-50 bg-[#ec679e] text-center text-6xl font-semibold w-full h-32 flex items-center justify-center">
Features
</div>
<div class="w-full h-screen items-center justify-center py-24 px-16">
<div class="flex flex-row space-x-11 w-full h-full">
<div
class="w-1/3 border-2 border-gray-300 h-full hover:w-5/6 transition-all duration-300 flex-flex-col shadow-2xl rounded-2xl">
<div class="w-full hover:w-full h-full rounded-2xl border-1 border-gray-600 flex flex-col group transition-all duration-300 bg-cover bg-center"
style="background-image: url('./images/cal.png');">
<div
class="h-1/2 group-hover:h-full bg-cover bg-center rounded-t-2xl transition-all duration-300">
</div>
<!-- <div class="flex grow bg-cover bg-center rounded-b-2xl bg-opacity-20 backdrop-blur-2xl group-hover:w-0 transition-all duration-300"></div> -->
</div>
<div class="text-center text-xl">
<div class="text-2xl font-semibold text-center mt-5">Plan out events!</div>
<p>Intuitive and beautiful calendar to plan out your next date</p>
</div>
</div>
<div
class="w-1/3 border-2 border-gray-300 h-full hover:w-5/6 transition-all duration-300 flex-flex-col shadow-2xl rounded-2xl">
<div class="w-full hover:w-full h-full rounded-2xl border-1 border-gray-600 flex flex-col group transition-all duration-300 bg-cover bg-center"
style="background-image: url('./images/chat.png');">
<div
class="h-1/2 group-hover:h-full bg-cover bg-center rounded-t-2xl transition-all duration-300">
</div>
<!-- <div class="flex grow bg-cover bg-center rounded-b-2xl bg-opacity-20 backdrop-blur-2xl group-hover:w-0 transition-all duration-300"></div> -->
</div>
<div class="text-center text-xl">
<div class="text-2xl font-semibold text-center mt-5">Keep in touch</div>
<p>Chat with your friends and connections</p>
</div>
</div>
<div
class="w-1/3 border-2 border-gray-300 h-full hover:w-5/6 transition-all duration-300 flex-flex-col shadow-2xl rounded-2xl">
<div class="w-full hover:w-full h-full rounded-2xl border-1 border-gray-600 flex flex-col group transition-all duration-300 bg-cover bg-center"
style="background-image: url('./images/map.png');">
<div
class="h-1/2 group-hover:h-full bg-cover bg-center rounded-t-2xl transition-all duration-300">
</div>
<!-- <div class="flex grow bg-cover bg-center rounded-b-2xl bg-opacity-20 backdrop-blur-2xl group-hover:w-0 transition-all duration-300"></div> -->
</div>
<div class="text-center text-xl">
<div class="text-2xl font-semibold text-center mt-5">Interactive Map</div>
<p>
Find out connections near you in an interactive map!
</p>
</div>
</div>
</div>
</div>
<div
class="w-full h-72 bg-[#ec679e] bg-opacity-50 mt-9 flex flex-row divide-x-2 p-5 divide-gray-600 justify-center items-center">
<div class="w-1/2 h-full p-28 items-center justify-center flex flex-col space-y-7 ">
<div>
<img src="./src/images/OG-images/horizontalnoBG.png" alt="BetterHalf" class="w-60 ">
</div>
<div class="justify-center items-center text-center space-y-7">
<div class="text-sm font-light">Oh hey there, once you've collected enough rejection stories, be
sure to write a bestseller</div>
<div>© 2023 Betterhalf</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.1.1/flowbite.min.js"></script>
</body>
</html>