forked from SatyaPrakashPalai/Techteam
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
276 lines (225 loc) · 12.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Conceptify</title>
</head>
<body>
<!--------------------------------------------------------Header------------------------------------------------------------------>
<header class="text-black body-font">
<div
class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center"
>
<a
class="flex title-font font-medium items-center text-black mb-4 md:mb-0"
>
<img
src="images\graphic-designer 1.png"
fill="none"
class="w-10 h-10 "
viewBox="0 0 24 24"
>
<path
d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
></path>
</svg>
<span class="ml-3 text-xl">Conceptify</span>
</a>
<nav
class="md:ml-auto flex flex-wrap items-center text-base justify-center font-semibold"
>
<a class="mr-5">Works</a>
<a class="md:mr-5">About</a>
</nav>
<button
class="inline-flex items-center bg-black md:rounded-none text-white border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0"
>
Contact
</button>
</div>
</header>
<!-----------------------------------------------------------Hero------------------------------------------------------------------------->
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 pt-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 md:text-7xl md:font-semibold">Get your
<br class="hidden lg:inline-block">brand online
</h1>
<p class="mb-8 leading-relaxed md:text-2xl md:py-2">Web and app development</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-blue-600 border-0 md:rounded-none py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Contact</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 md:rounded-none border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Works</button>
</div>
</div>
</div>
</section>
<section class="">
<div class="container mx-auto flex flex-col px-5 md:px-2 md:py-24 md: justify-center items-center">
<img class="lg:w-full md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="images\fe222d8788419f353b1a413cb98b1a29 1.png">
</div>
</section>
<div class="about w-5/6 my-0 lg:flex mx-auto lg:justify-around space-y-4 lg:mx-0">
<div class="frame9 text-1xl lg:text-2xl md:w-1/2 space-y-5 items-center">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<button class="bg-black text-white px-3 py-2">
<a href="#">About us</a>
</button>
</div>
<div class="frame11 space-y-5">
<h1 class="text-7xl font-bold">10+</h1>
<p>Designers & Developers</p>
<h1 class="text-7xl font-bold">8+</h1>
<p>Projects</p>
</div>
</div>
<!--------------------------------------------------Works----------------------------------------------------->
<section>
<div class=" text-black my-10 py-20 space-y-7 md:text-2xl font-semibold ">
<div class="text-6xl font-semibold w-3/4 mx-auto lg:text-7xl lg:font-normal text-black mb-10">
<p>Works</p>
</div>
<div class="md:flex md:space-x-8 w-3/4 md: mx-auto space-y-8 md:space-y-0 md:mx-auto">
<div class="spacce-y-4">
<img class="" src="images\b88341dc0f5351f4d7fae58fcec1456c 2 (1).png" alt="">
<p class="">We.mov</p>
</div>
<div>
<img src="images\1016a0f6c393a702e9e42111e5b0c16a 1 (1).png" alt="">
<p>Wellness24</p>
</div>
</div>
<div class="md:flex md:space-x-8 w-3/4 mx-auto space-y-8 md:space-y-0">
<div class="spacce-y-4">
<img src="images\03faa2d69e7ebcbcd64adc1aeff381e9 1 (1).png" alt="">
<p class="">Medora</p>
</div>
<div>
<img src="images\697a269d391b95b21161733727e995f5 1 (1).png" alt="">
<p>Carnival.</p>
</div>
</div>
</div>
</section>
<!----------------------------------------------------Reviews-------------------------------------------------------->
<section>
<div class="bg-black text-gray-400 my-10 py-20">
<div class="text-6xl font-semibold w-3/4 mx-auto lg:text-7xl lg:font-normal text-white">
<p>Reviews</p>
</div>
<div class="w-2/3 mx-auto my-20 lg:text-2xl">
<div class="flex justify-start space-x-3">
<img class="" src="images\Ellipse 1.png" alt="">
<p class="text-white">John Doe, CEO at Dextrain
<br> ⭐⭐⭐⭐⭐
</p>
</div>
<div class="my-2 mb-8">“ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ”</div>
<div class="flex justify-start space-x-3 ">
<img class="" src="images\Ellipse 1 (1).png" alt="">
<p class="text-white">Jane Doe, CEO at Sykus
<br> ⭐⭐⭐⭐⭐
</p>
</div>
<div class="my-2">“ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ”</div>
</div>
</div>
</section>
<!-------------------------------------------------FAQs-------------------------------------------------------->
<section>
<div class=" my-10 py-20">
<div class="text-6xl font-semibold w-3/4 mx-auto lg:text-7xl lg:font-normal">
<p>FAQs</p>
</div>
<div class="w-2/3 mx-auto lg:mx-40 my-20 lg:text-2xl">
<div class="flex justify-start space-x-20">
<p class="text-2xl lg:text-3xl mb-8 font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
<img class="w-4 h-3 my-3" src="images\Vector 1.png" alt="">
</div>
<div class="my-2 mb-8 lg:w-5/6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</div>
<div class="flex justify-start space-x-20">
<p class="text-2xl lg:text-3xl mb-8 font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit?
</p>
<img class="w-4 h-3 my-3" src="images\Vector 1.png" alt="">
</div>
<div class="my-2 mb-8 lg:w-5/6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni</div>
</div>
</div>
</section>
<!-------------------------------------------------footer------------------------------------------------------>
<footer class="text-gray-600 body-font bg-gray-100">
<div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<img src="images\graphic-designer 1.png" alt="">
<span class="ml-3 text-xl">Conceptify</span>
</a>
</div>
<div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center md:justify-end ">
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<nav class="list-none mb-10 md:space-y-2">
<li>
<a class="text-gray-600 hover:text-gray-800">About</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Works</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4 ">
<nav class="list-none mb-10 space-y-2" >
<li>
<div class="flex items-center space-x-2 justify-center md:justify-start" ><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
<a class="text-gray-600 hover:text-gray-800">Instagram</a>
</div>
</li>
<li>
<div class="flex items-center space-x-2 justify-center md:justify-start">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
<a class="text-gray-600 hover:text-gray-800">Facebook</a>
</div>
</li>
<li>
<div class="flex items-center space-x-2 justify-center md:justify-start">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
<a class="text-gray-600 hover:text-gray-800">Twitter</a>
</div>
</li>
</nav>
</div>
</div>
</div>
<hr class="border-gray-500 w-4/5 mx-auto lg:w-full">
<div class="">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center sm:text-left">© Conceptify 2022.
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">All rights reserved</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center space-x-2 sm:justify-start">
<p class="text-gray-500 text-sm text-center sm:text-left">Privacy Policy
</p>
<p class="text-gray-500 text-sm text-center sm:text-left">Terms & conditions
</p>
</span>
</div>
</div>
</footer>
</body>
</html>