forked from vaishnavi0077/Web_Wizards
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
234 lines (201 loc) · 14.1 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem ipsum</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="Web_Wizards/style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ////////////////////////////////// navbar ////////////////////////////////////////////////////////////////-->
<nav
class=" header relative px-4 py-2 flex justify-between items-center bg-black dark:bg-gray-800 border-b-2 dark:border-gray-600">
<a class="text-2xl font-bold text-violet-600 dark:text-white flex flex-row " href="#">
<img class="" src="" alt="image">
<span class="px-3">Lorem ipsum</span>
</a>
<div class="lg:hidden">
<button class="navbar-burger flex items-center text-violet-600 dark:text-gray-100 p-1" id="navbar_burger">
<svg class="block h-6 w-6 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Hamberger menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</button>
</div>
<ul
class="hidden absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2 lg:mx-auto lg:flex lg:items-center lg:w-auto lg:space-x-6">
<li>
<div class=" relative mx-auto text-black">
<input class="border border-gray-200 bg-white font-semibold placeholder-slate-500 h-8 justify-center px-5 pr-16 rounded-lg text-sm focus:outline-none dark:bg-gray-500 dark:border-gray-50 dark:text-gray-200 hover:bg-white " type="search" name="search" placeholder="Search">
<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
<svg class="text-green-900 dark:text-gray-200 h-3 w-4 fill-current "
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
xml:space="preserve" width="512px" height="512px">
<path
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
</svg>
</button>
</div>
</li>
</ul>
<div class="hidden lg:flex">
<button id="theme-toggle" type="button" class="hidden lg:inline-block lg:ml-auto py-1.5 px-3 m-1 text-center bg-black border border-black rounded-md text-black dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700">
<svg id="theme-toggle-light-icon" class="hidden" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
</svg>
</button>
<!-- //////////////////////////////////////////Sign in///////////////////////////////////////////////// -->
<div>
<span class="hidden" id="util_data" data="{{ json_encode($util_data) }}"></span>
<a class=" py-1.5 px-3 m-1 text-center border-gray-200 bg-white border rounded-md text-blue-700 font-extrabold hover:bg-gray-100 dark:text-purple-600 dark:bg-gray-700 hidden lg:inline-block hover:text-black"
href="login1.html">
Sign In
</a>
</div>
<!-- //////////////////////////////////////////Sign up///////////////////////////////////////////////// -->
<div>
<span class="hidden" id="util_data" data="{{ json_encode($util_data) }}"></span>
<a class=" py-1.5 px-3 m-1 text-center border-gray-200 bg-white border rounded-md text-[#228B22] font-extrabold hover:bg-gray-100 dark:text-purple-600 dark:bg-gray-700 hidden lg:inline-block hover:text-black"
href="register.html">
Sign-up
</a>
</div>
</div>
</nav>
<!-- mobile navbar -->
<div class="navbar-menu relative z-50 hidden">
<div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-50"></div>
<nav
class=" header fixed backdrop-blur-md dark:bg-gray-600 top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-6 px-6 border-r overflow-y-auto">
<div class="flex items-center mb-8">
<a class="mr-auto text-2xl font-bold text-violet-600 dark:text-gray-100"
href="https://tailwindflex.com/">
Lorem ipsum
</a>
<button class="navbar-close">
<svg class="h-6 w-6 text-white cursor-pointer hover:text-gray-500"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
<div class=" relative mx-auto text-gray-600">
<input class="border-2 border-gray-200 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none placeholder-black dark:bg-gray-500 dark:border-gray-50 text-black font-semibold" type="search" name="search" placeholder="Search">
<button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
<svg class="text-purple-800 dark:text-gray-200 h-4 w-4 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
xml:space="preserve" width="512px" height="512px">
<path
d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
</svg>
</button>
</div>
<div class="mt-auto">
<div class="pt-6">
<button id="theme-toggle-2" type="button" class=" py-2.5 w-[97.6%] mb-3 rounded-xl flex justify-center align-middle py-1.5 px-3 m-1 text-center text-black dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700">
<a class="block m-1 border-gray-200 bg-white text-green-800 font-extrabold hover:text-black hover:bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-4 py-3 mb-3 text-sm text-center rounded-xl "
href="register.html">
Sign-up
</a>
<a class="block m-1 text-center text-blue-700 font-extrabold hover:text-black hover:bg-gray-100 dark:text-gray-300 dark:bg-gray-700 px-4 py-3 mb-3 text-sm rounded-xl border-gray-200 bg-white"
href="login1.html">
Sign in
</a>
</button>
</div>
</div>
</nav>
</div>
<footer>
<div class="footer w-full h-44 absolute bottom-0 left-0 grid grid-cols-4 grid-rows-2 text-gray-300 ">
<!-- ////////////////////////////////////////Contact section////////////////////////////////////////////// -->
<div class=" pb-4 mx-4">
<ul class=" pb-4 h-12 m-4 text-sm font-medium justify-center"> Contact us
<li class="text-sm font-normal pt-2 flex flex-row items-center">
<img class="w-4 h-4 m-1" src="assets/phone-6015.svg" alt="">+91 456 8976 000
</li>
<li class="text-sm font-normal pt-2 flex flex-row items-center">
<img class="w-4 h-4 m-1" src="assets/mail-message-5778.svg" alt="">
[email protected]</li>
</ul>
</div>
<!-- ///////////////////////////////////////////Company///////////////////////////////////////////////////////// -->
<div class="comapany text-sm font-semibold m-4">
<span class="font-medium ">Company</span>
<ul class="text-xs pt-3 px-2 font-normal">
<li class="brief">About us</li>
<li class="brief">Home</li>
<li class="brief">Career </li>
<li class="brief">Contact us</li>
</ul>
</div>
<!-- //////////////////////////////////////////Quick links ///////////////////////////////////////////////////// -->
<div class="links text-sm font-semibold
m-4"> Quick links
<ul class="text-xs pt-3 px-2 font font-normal">
<li>
<a href="#">links</a>
</li>
<li>
<a href="#">links</a>
</li>
<li>
<a href="#">links</a>
</li>
<li>
<a href="#">links</a>
</li>
</ul>
</div>
<!-- ///////////////////////////////////////Help suppport//////////////////////////////////////////////////////////// -->
<div class="help text-sm font-semibold
m-4"> Help & Support
<ul class="text-xs pt-3 px-2 font font-normal">
<li>
<a href="#">Privacy policy</a>
</li>
<li>
<a href="#">Terms & conditions</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
</ul>
</div>
<!-- //////////////////////////////////////Social media////////////////////////////////////////////////////////////////// -->
<div class="social text-sm font-semibold mx-4 my-4 col-start-2 col-end-4 items-center content-center
">
<ul class="flex flex-row gap-x-4 pt-4 justify-center items-center">
<span>Let's get social :</span>
<li class="icons">
<svg width="20px" height="20px" class=" text-white bg-white rounded-xl " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.87 28.87" id="instagram"><defs><linearGradient id="a" x1="-1.84" x2="32.16" y1="30.47" y2="-3.03" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fed576"></stop><stop offset=".26" stop-color="#f47133"></stop><stop offset=".61" stop-color="#bc3081"></stop><stop offset="1" stop-color="#4c63d2"></stop></linearGradient></defs><g><g><rect width="28.87" height="28.87" fill="url(#a)" rx="6.48" ry="6.48"></rect><g><path fill="#fff" d="M10 5h9c.2.1.5.1.7.2a4.78 4.78 0 0 1 3.8 3.3 8 8 0 0 1 .3 1.5v8.8a6.94 6.94 0 0 1-1.2 3.1 5.51 5.51 0 0 1-4.5 1.9h-7.5a5.49 5.49 0 0 1-3.7-1.2A5.51 5.51 0 0 1 5 18.14v-7a7.57 7.57 0 0 1 .1-1.5 4.9 4.9 0 0 1 3.8-4.3zm-3.1 9.5v3.9a3.42 3.42 0 0 0 3.7 3.7q3.9.15 7.8 0c2.3 0 3.6-1.4 3.7-3.7q.15-3.9 0-7.8a3.52 3.52 0 0 0-3.7-3.7q-3.9-.15-7.8 0a3.42 3.42 0 0 0-3.7 3.7z"></path><path fill="#fff" d="M9.64 14.54a4.91 4.91 0 0 1 4.9-4.9 5 5 0 0 1 4.9 4.9 4.91 4.91 0 0 1-4.9 4.9 5 5 0 0 1-4.9-4.9zm4.9-3.1a3.05 3.05 0 1 0 3 3 3 3 0 0 0-3-3z"></path><path fill="#fff" d="M18.34 9.44a1.16 1.16 0 0 1 1.2-1.2 1.29 1.29 0 0 1 1.2 1.2 1.2 1.2 0 0 1-2.4 0z"></path></g></g></g></svg>
</li>
<li class="icons">
<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" id="facebook"><path fill="#1877f2" d="M1024,512C1024,229.23016,794.76978,0,512,0S0,229.23016,0,512c0,255.554,187.231,467.37012,432,505.77777V660H302V512H432V399.2C432,270.87982,508.43854,200,625.38922,200,681.40765,200,740,210,740,210V336H675.43713C611.83508,336,592,375.46667,592,415.95728V512H734L711.3,660H592v357.77777C836.769,979.37012,1024,767.554,1024,512Z"></path><path fill="#fff" d="M711.3,660,734,512H592V415.95728C592,375.46667,611.83508,336,675.43713,336H740V210s-58.59235-10-114.61078-10C508.43854,200,432,270.87982,432,399.2V512H302V660H432v357.77777a517.39619,517.39619,0,0,0,160,0V660Z"></path></svg>
</li>
<li class="icons">
<svg width="20px" height="20px" class=" text-white bg-white rounded-xl "xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#0288D1" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5V37z"></path><path fill="#FFF" d="M12 19H17V36H12zM14.485 17h-.028C12.965 17 12 15.888 12 14.499 12 13.08 12.995 12 14.514 12c1.521 0 2.458 1.08 2.486 2.499C17 15.887 16.035 17 14.485 17zM36 36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698-1.501 0-2.313 1.012-2.707 1.99C24.957 25.543 25 26.511 25 27v9h-5V19h5v2.616C25.721 20.5 26.85 19 29.738 19c3.578 0 6.261 2.25 6.261 7.274L36 36 36 36z"></path>
</svg>
</li>
<li class="icons">
<svg width="20px" height="20px" class=" text-white bg-white rounded-xl " xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 1668.56 1221.19" viewBox="0 0 1668.56 1221.19" id="twitter-x"><path d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z" transform="translate(52.39 -25.059)"></path></svg>
</li>
<li>
<div class="text-xs font-normal" >
| Copyright 2024 All rights reserved
</div>
</li>
</ul>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>