-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
198 lines (185 loc) · 11.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Wide Hub</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font -->
<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=Noto+Sans+Kaithi&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-200">
<!-- Header -->
<div class="bg-white p-5 shadow-md flex justify-between items-center">
<div class="flex items-center space-x-0 flex-col">
<!-- Logo placeholder; replace 'path-to-your-logo.svg' with your logo's path -->
<img src="./images/LOGO1.png" alt="Logo" class="h-11">
<div class="text-xs font-bold text-left">WorldWide Hub</div>
</div>
<div class="flex space-x-4 items-center">
<div class="flex bg-white items-center rounded-full border border-gray-300">
<input type="text" placeholder="search" class="rounded-l-full w-96 py-0 px-4 leading-tight focus:outline-none">
<div class="p-2">
<button class="text-gray-500 rounded-full p-2 hover:bg-gray-100 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"></path>
</svg>
</button>
</div>
</div>
<div>
<img src="./images/duzlemsiz.png" alt="BirdTop" class="h-24">
</div>
<div>
<button class="text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none font-bold rounded-full px-4 py-2">
Log In
</button>
</div>
</div>
</div>
<!-- Tab Bar -->
<div class="flex justify-center mt-4 py-2 bg-gray-100 gap-x-6 border-2 border-black rounded-full">
<!-- Updated #Agenda part to match the provided image with more pronounced shadow and border -->
<div class="bg-yellow-500 border-2 border-black rounded-full py-0.5 px-0.5 flex items-center shadow-lg text-black text-sm font-bold">
<button class="bg-white border-2 border-black rounded-full py-1 px-4 flex items-center shadow-lg text-black text-sm font-bold"> #Agenda </button>
</div>
<!-- Increase space between the elements by using `gap-x-6` for more space -->
<a href="#" class="text-gray-600 hover:text-gray-800 px-3 py-1 rounded-full"> #education </a>
<a href="#" class="text-gray-600 hover:text-gray-800 px-3 py-1 rounded-full"> #education </a>
<a href="#" class="text-gray-600 hover:text-gray-800 px-3 py-1 rounded-full"> #education </a>
<!-- ... more tabs ... -->
</div>
<!-- Main Content -->
<div class="container mx-auto mt-8">
<div class="flex flex-row -mx-2">
<!-- Sidebar -->
<div class="flex flex-col w-full md:w-1/4 px-2 mb-4 gap-5 ml-8">
<div class="text-xl font-bold ml-24">Most Liked Entrys</div>
<div class="flex flex-col bg-yellow-50 rounded-3xl shadow top-0 p-1 border-2 border-black">
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">Watering schedule</span>
<span class="text-lg mb-4 p-1">462</span>
</div>
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">Obama</span>
<span class="text-lg mb-4 p-1">254</span>
</div>
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">What happened to Kate?</span>
<span class="text-lg mb-4 p-1">1762</span>
</div>
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">The reasons to use slippers on your summer location</span>
<span class="text-lg mb-4 p-1">361</span>
</div>
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">What can I do to make money quick</span>
<span class="text-lg mb-4 p-1">73</span>
</div>
<div class="flex flex-row top-0 rounded-3xl text-left p-2 justify-between hover:bg-yellow-100">
<span class="text-lg mb-4 p-1 w-72">Pitbull new song</span>
<span class="text-lg mb-4 p-1">0</span>
</div>
<!-- Sidebar content -->
<!-- Repeat your sidebar blocks here -->
</div>
</div>
<div class="flex flex-col p-1 w-[800px] ml-11">
<div class="flex flex-col justify-start mb-4 border-2 border-b-black">
<div class="mb-6 text-xl font-bold"><h4>Insomnia</h4></div>
<div class="mb-8 w-[600px]"><p>it is a common sleep disorder that can make it hard to fall asleep, stay asleep, or cause you to
wake up too early and not be able to get back to sleep. Insomnia can lead to daytime sleepiness,
lack of energy, irritability, and difficulty concentrating.horrible to have it :/</p></div>
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
</svg>
</div>
</div>
<div class="flex flex-col justify-start border-2 border-b-black">
<div class="mb-6 text-xl font-bold"><h4>Insomnia</h4></div>
<div class="mb-8"><p>it is a common sleep disorder that can make it hard to fall asleep, stay asleep, or cause you to
wake up too early and not be able to get back to sleep. Insomnia can lead to daytime sleepiness,
lack of energy, irritability, and difficulty concentrating. horrible to have it :/</p></div>
<div class="mb-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
</svg>
</div>
</div>
</div>
<div class="mr-7 bg-[url('./images/livechat.png')] bg-contain bg-no-repeat bg-center h-[350px] w-[400px]">
<div class="flex flex-col mt-8 ml-4 text-xs">
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-orange-500 font-bold">Satoshi</span>: ITU Blockchain is the best
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">20:09</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-purple-700 font-bold">Vitalik</span>: Awesome project guys amazing!!
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">20:15</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-pink-700 font-bold">Utku</span>: That team is the best
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">20:18</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-yellow-900 font-bold">Emre</span>: What a bird man.
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">20:21</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-blue-500 font-bold">Edison</span>: I did it
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">21:03</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-red-800 font-bold">Sokrates</span>: There is no better team than these guys
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">21:16</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-sky-400 font-bold">World_wideGuy</span>: It's been exciting year
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">22:34</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-green-600 font-bold">oturan_sinek</span>: I'm new here guys what is BLOCKCHAİN
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">01:12</span></div>
</div>
<div class="flex flex-row mb-3">
<div class="w-80">
<span class="text-orange-500 font-bold">Satoshi</span>: I don't know bro but the team is the best.
</div>
<div class="mr-4"><span class="text-gray-500 font-bold">01:14</span></div>
</div>
<div class="w-[360px] max-w-xl p-3 flex items-center gap-3 absolute mt-[230px]">
<input type="text" placeholder="Type your message here..." class="w-full border-2 border-gray-300 rounded-lg p-2 text-sm focus:outline-none focus:border-gray-400" />
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg transition-colors">Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- Fixed container for the button -->
<div class="flex justify-center fixed right-0 bottom-10">
<!-- Button with an image inside it -->
<button>
<img src="./images/duzlemli.png" alt="Hi_image" class="h-40 hover:h-36 transition-all duration-300" />
</button>
</div>
</body>
</html>