-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
304 lines (282 loc) · 16.7 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Header -->
<nav class="p-4">
<div class="max-w-6xl mx-auto flex justify-between items-center">
<!-- Logo -->
<div>
<a href="#"><img src="./img/Logo.png" alt=""></a>
</div>
<!-- Nav links -->
<div class="hidden md:flex items-center space-x-4">
<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">Community</a>
<a href="#">Blog</a>
<a href="#">Pricing</a>
<button class="bg-[#4CAF4F] px-5 py-2.5 text-white rounded ">Register Now <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="flex-col px-4 md:flex-row bg-[#F5F7FA] flex py-16 justify-around items-center ">
<!-- Text Section -->
<div class="space-y-4 text-center md:text-left">
<h1 class="text-4xl md:text-6xl">Lessons and insights</h1>
<h1 class="text-4xl md:text-6xl text-[#4CAF4F]">from 8 years</h1>
<p class="text-[#717171] text-lg md:text-base">Where to grow your business as a photographer: site or social media?</p>
<button class="bg-[#4CAF4F] px-5 py-2.5 text-white rounded">Register</button>
</div>
<!-- Image Section -->
<div class="mt-8 md:mt-0">
<img src="./img/Illustration.png" alt="image" >
</div>
</div>
<!-- Our Clients Section -->
<div class="mt-8 px-4 max-w-6xl mx-auto text-center">
<!-- Heading and Subtext -->
<div>
<h2 class="text-4xl font-semibold text-[#4D4D4D]">Our Clients</h2>
<p class="text-[#717171] text-lg md:text-base mt-2">We have been working with some Fortune 500+ clients</p>
</div>
<!-- Logos Section -->
<div class="grid grid-cols-3 md:grid-cols-7 gap-8 mt-8">
<img src="./img/Logo (1).png" alt="Client 1">
<img src="./img/Logo (2).png" alt="Client 2">
<img src="./img/Logo (3).png" alt="Client 3">
<img src="./img/Logo (4).png" alt="Client 4">
<img src="./img/Logo (5).png" alt="Client 5">
<img src="./img/Logo (6).png" alt="Client 6">
<img src="./img/Logo (3).png" alt="Client 7">
</div>
</div>
<!-- Service Section -->
<div class="text-center mt-16">
<h2 class="text-3xl font-semibold text-[#4D4D4D]">Manage your entire community <br> in a single system</h2>
<p class="text-lg text-[#717171] mt-2">Who is Nextcent suitable for?</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 px-4 max-w-6xl mx-auto">
<!-- Membership Organisations -->
<div class="text-center p-6">
<div class="flex justify-center mb-4">
<img src="./img/Icon.png" alt="Membership Organisations" >
</div>
<h3 class="text-2xl text-[#4D4D4D] font-bold mb-2">Membership <br> Organisations</h3>
<p class="text-[#717171]">Our membership management software provides full automation of membership renewals and payments.</p>
</div>
<!-- National Associations -->
<div class="text-center p-6">
<div class="flex justify-center mb-4">
<img src="./img/Icon (1).png" alt="National Associations" >
</div>
<h3 class="text-2xl text-[#4D4D4D] font-bold mb-2">National <br> Associations</h3>
<p class="text-[#717171]">Our membership management software provides full automation of membership renewals and payments.</p>
</div>
<!-- Clubs And Groups -->
<div class="text-center p-6">
<div class="flex justify-center mb-4">
<img src="./img/Icon (2).png" alt="Clubs And Groups" >
</div>
<h3 class="text-2xl text-[#4D4D4D] font-bold mb-2">Clubs And <br> Groups</h3>
<p class="text-[#717171]">Our membership management software provides full automation of membership renewals and payments.</p>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="flex-col px-4 md:flex-row flex py-16 justify-around items-center max-w-6xl mx-auto">
<!-- Image Section -->
<div class="mt-8 md:mt-0 md:w-1/2">
<img src="./img/Frame 35.png" alt="image">
</div>
<!-- Text Section -->
<div class="space-y-4 text-center md:text-left md:w-1/2">
<h1 class="text-2xl md:text-4xl text-[#4D4D4D] font-bold">The unseen of spending three years at Pixelgrade</h1>
<p class="text-[#717171] text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo ipsum. Sed accumsan quam vitae est varius fringilla. Pellentesque placerat vestibulum lorem sed porta. Nullam mattis tristique iaculis. Nullam pulvinar sit amet risus pretium auctor. Etiam quis massa pulvinar, aliquam quam vitae, tempus sem. Donec elementum pulvinar odio.</p>
<button class="bg-[#4CAF4F] px-5 py-2.5 text-white rounded">Learn More</button>
</div>
</div>
<!-- Helping Local -->
<section class="w-full bg-[#F5F7FA] h-72 ">
<div class="max-w-6xl mx-auto flex flex-col space-y-12 md:flex-col lg:flex-row md:space-y-8 lg:justify-between items-center ">
<div class="flex flex-col space-y-2">
<h1 class="text-2xl md:text-3xl lg:text-4xl font-semibold text-center">Helping a local</h1>
<h1 class="text-2xl md:text-3xl lg:text-4xl font-semibold text-[#4CAF4F] text-center">Business reinvent itself</h1>
<p>We reached here with our hard work and dedication</p>
</div>
<div class=" grid grid-cols-2 grid-rows-2 gap-12">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-user-group text-2xl text-[#4CAF4F]"></i>
<div class="flex flex-col">
<span class="font-bold">2,245,341</span>
<span class="text-sm text-[#717171]">Members</span>
</div>
</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-circle-nodes text-2xl text-[#4CAF4F]"></i>
<div class="flex flex-col">
<span class="font-bold">46,328</span>
<span class="text-sm text-[#717171]">Clubs</span>
</div>
</div>
<div class="flex items-center space-x-2">
<i class="fa-solid fa-calendar-days text-2xl text-[#4CAF4F]"></i>
<div class="flex flex-col">
<span class="font-bold">828,867</span>
<span class="text-sm text-[#717171]">Event Bookings</span>
</div>
</div>
<div class="flex items-center space-x-2">
<i class="fa-regular fa-credit-card text-2xl text-[#4CAF4F]"></i>
<div class="flex flex-col">
<span class="font-bold">2,245,341</span>
<span class="text-sm text-[#717171]">Payment</span>
</div>
</div>
</div>
</div>
</section>
<!-- How ro design -->
<section class="w-full h-1/2 flex mt-12 lg:m-0">
<div class=" max-w-6xl mx-auto flex flex-col lg:flex-row space-y-8 lg:space-x-24 items-center">
<!-- bg image -->
<div class="w-full h-96 bg-[url('img/mobile-login.png')] bg-center bg-cover bg-no-repeat ">
</div>
<!-- Content -->
<div class="flex flex-col space-y-4 lg:items-start items-center px-4">
<h1 class=" text-lg md:text-3xl lg:text-5xl font-semibold">How to design your site footer like we did</h1>
<p class="text-[#4D4D4D]">Donec a eros justo. Fusce egestas tristique ultrices. Nam tempor, augue nec tincidunt molestie, massa nunc varius arcu, at scelerisque elit erat a magna. Donec quis erat at libero ultrices mollis. In hac habitasse platea dictumst. Vivamus vehicula leo dui, at porta nisi facilisis finibus. In euismod augue vitae nisi ultricies, non aliquet urna tincidunt. Integer in nisi eget nulla commodo faucibus efficitur quis massa. Praesent felis est, finibus et nisi ac, hendrerit venenatis libero. Donec consectetur faucibus ipsum id gravida.</p>
<button class="bg-[#4CAF4F] text-white px-8 py-3 rounded hover:bg-[#4CAF00]">Learn More</button>
</div>
</div>
</section>>
<!-- Testimonial Section -->
<section class="w-full bg-[#F5F7FA] h-screen lg:h-96 flex ">
<div class="max-w-6xl mx-auto flex flex-col space-y-8 md:flex-col lg:flex-row md:space-y-6 lg:justify-between items-center">
<!-- image -->
<div class="w-full lg:w-1/4 h-80 flex items-center">
<img class="w-full h-full" src="img/image 9.png" alt="image9">
</div>
<!-- content -->
<div class="w-full lg:w-2/3 flex flex-col space-y-4 px-4">
<p class="text-[#4D4D4D]">Maecenas dignissim justo eget nulla rutrum molestie. Maecenas lobortis sem dui, vel rutrum risus tincidunt ullamcorper. Proin eu enim metus. Vivamus sed libero ornare, tristique quam in, gravida enim. Nullam ut molestie arcu, at hendrerit elit. Morbi laoreet elit at ligula molestie, nec molestie mi blandit. Suspendisse cursus tellus sed augue ultrices, quis tristique nulla sodales. Suspendisse eget lorem eu turpis vestibulum pretium. Suspendisse potenti. Quisque malesuada enim sapien, vitae placerat ante feugiat eget. Quisque vulputate odio neque, eget efficitur libero condimentum id. Curabitur id nibh id sem dignissim finibus ac sit amet magna.</p>
<span class="text-[#4CAF4F]">Tim Smith</span>
<p class="text-[#4D4D4D]">British Dragon Boat Racing Association</p>
<!-- frame -->
<div class="flex space-x-4 md:justify-between lg:justify-between">
<img src="/img/Logo (1).png" alt="logo1">
<img src="/img/Logo (2).png" alt="logo2">
<img src="/img/Logo (3).png" alt="logo3">
<img src="/img/Logo (4).png" alt="logo4">
<img src="/img/Logo (5).png" alt="logo5">
<button class="text-[#4CAF4F] font-semibold">Meet All Customer →</button>
</div>
</div>
</div>
</section>
<!-- Caring is new marketing section -->
<section class="w-full h-full lg:screen flex items-center mt-24 lg:m-0">
<div class="max-w-6xl mx-auto flex flex-col space-y-4 items-center lg:mt-8">
<!-- content -->
<div class=" w-full md:w-3/2 lg:w-1/2 flex flex-col space-y-2 py-6 px-3 lg:p-0 ">
<h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-[#717171] text-center">Caring is the new marketing</h1>
<p class="text-[#4D4D4D] text-center">The Nextcent blog is the best place to read about the latest membership insights, trends and more. See who's joining the community, read about how our community are increasing their membership income and lot's more.</p>
</div>
<!-- cards -->
<div class="w-full flex flex-col md:flex-wrap lg:flex-row justify-between">
<!-- card 1 -->
<div class=" w-full lg:w-1/4 h-1/2 items-center relative flex flex-col items-center mt-24">
<img class="w-full rounded " src="img/image 18.png" alt="imge">
<div class=" w-2/3 absolute bottom-[-100px] bg-[#F5F7FA] rounded shadow flex flex-col items-center space-y-2 px-3 py-6">
<p class="text-center text-[#4D4D4D]">Creating Streamlined Safeguarding Processes with OneRen</p>
<button class="text-[#4CAF4F]">Read More →</button>
</div>
</div>
<!-- card 2 -->
<div class=" w-full lg:w-1/4 h-1/2 items-center relative flex flex-col items-center mt-24">
<img class="w-full rounded " src="img/image 19.png" alt="imge">
<div class=" w-2/3 absolute bottom-[-100px] bg-[#F5F7FA] rounded shadow flex flex-col items-center space-y-2 px-3 py-6">
<p class="text-center text-[#4D4D4D]">What are your safeguarding responsibilities, how can you manage them?</p>
<button class="text-[#4CAF4F]">Read More →</button>
</div>
</div>
<!-- card 3 -->
<div class=" w-full lg:w-1/4 h-1/2 items-center relative flex flex-col items-center mt-24">
<img class="w-full rounded " src="img/image 20.png" alt="imge">
<div class=" w-2/3 absolute bottom-[-100px] bg-[#F5F7FA] rounded shadow flex flex-col items-center space-y-2 px-3 py-6">
<p class="text-center text-[#4D4D4D]">Revamping the Membership Model with Triathlon Australia</p>
<button class="text-[#4CAF4F]">Read More →</button>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footerc class="w-full h-screen flex flex-col items-center mt-32" >
<!-- text -->
<div class="w-full h-72 bg-[#F5F7FA] flex flex-col space-y-4 items-center justify-center">
<div class="w-full lg:w-1/2 flex flex-col space-y-2 items-center ">
<h1 class="text-3xl lg:text-6xl font-bold text-center">Pellentesque suscipit fringilla libero eu.</h1>
<button class="bg-[#4CAF4F] text-white py-3 px-4 hover:bg-[#4CAF00]">Get a Demo →</button>
</div>
</div>
<div class="w-full h-auto lg:h-96 bg-[#263238] mt-8 ">
<div class="max-w-6xl mx-auto flex flex-col lg:flex-row justify-between items-start lg:items-center mt-12 p-6 ">
<div class=" w-full lg:w-1/4 flex flex-col space-y-8 items-start">
<img class=" w-1/2" src="img/white-Logo.png" alt="logo">
<div class="text-[#F5F7FA]">
<p>Copyright © 2020 Landify UI Kit.</p>
<p>All rights reserved</p>
</div>
<!-- social -->
<div class="flex space-x-4 items-center">
<img src="img/insta.png" alt="instagram">
<img src="img/global.png" alt="Global">
<img src="img/twitter.png" alt="twitter">
<img src="img/youtube.png" alt="youtube">
</div>
</div>
<!-- others -->
<div class="w-3/2 flex flex-col lg:flex-row space-y-6 lg:space-x-24">
<!-- company -->
<div class="flex flex-col space-y-4">
<h2 class="text-xl text-[#fff] font-semibold">Company</h2>
<ul class="flex flex-col space-y-2 text-[#F5F7FA]">
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonial</a></li>
</ul>
</div>
<!-- Suppor -->
<div class="flex flex-col space-y-4">
<h2 class="text-xl text-[#fff] font-semibold">Support</h2>
<ul class="flex flex-col space-y-2 text-[#F5F7FA]">
<li><a href="#">Help center</a></li>
<li><a href="#">Terms of service</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
<!-- stay up to date -->
<div class="flex flex-col space-y-4">
<h2 class="text-xl text-[#fff] font-semibold">Stay up to date</h2>
<div class="flex relative">
<input class="bg-[#4D4D4D] text-[#fff] px-6 py-2 rounded placeholder:text-[#F5F7FA] border-none outline-none" type="text" placeholder="Your Email Address">
<img class="w-6 absolute right-2 top-3" src="img/send.png" alt="send">
</div>
</div>
</div>
</div>
</div>
</footerc>
</body>
</html>