-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprofile.html
More file actions
213 lines (205 loc) · 13 KB
/
profile.html
File metadata and controls
213 lines (205 loc) · 13 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Hugi - Profile</title>
<!-- CSS -->
<link rel="stylesheet" href="./src/css/style.css" />
</head>
<body>
<!-- Header -->
<header class="flex justify-between items-center p-8 border-b border-gray-400">
<ul class="flex items-center gap-8">
<img src="./src/assets/logo.svg" alt="" />
<li><a href="index.html" class="hover:text-blue-500">Home</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<div class="space-x-4">
<a href="login.html" class="text-blue-400 hover:text-blue-500">Masuk</a>
<a href="" class="bg-green-400 p-4 rounded-md text-white hover:bg-green-500">Bergabung</a>
</div>
</header>
<!-- Hero -->
<section class="grid grid-cols-2 py-8 pl-20 gap-20">
<div class="flex flex-col justify-center col-span-1 space-y-8">
<p class="text-[#50BEA9] text-2xl font-bold">- Kata Sambutan -</p>
<p class="text-[48px] 2xl:text-5xl font-bold">Prof. Dr. dr. Budi Iman Santoso, Sp.O.G, Subsp.Urogin RE, MPH</p>
<p class="text-[#666666] text-[24px] 2xl:text-4xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla. Pellentesque consectetur laoreet tortor, quis tristique risus tristique non. Aliquam aliquam metus et lorem placerat, eu convallis sem rhoncus. In blandit ornare
vulputate. Quisque dolor magna, pellentesque quis feugiat vitae, rhoncus in nunc. Maecenas ut eleifend turpis, ac tristique odio. Proin a massa vitae purus rhoncus tincidunt. Praesent tempus
purus ultrices euismod tempor. Morbi in nunc consequat odio vulputate sagittis. Ut sagittis consequat nibh, eu eleifend turpis sagittis vitae. Phasellus efficitur laoreet malesuada.
Vestibulum sit amet luctus nulla. Nunc vel tellus ac est eleifend consectetur. Integer interdum tellus vitae arcu rhoncus, in porta lectus mollis
</p>
</div>
<img src="./src/assets/profile.svg" alt="" class="col-span-1 w-full" />
</section>
<!-- Sejarah -->
<section class="py-8 gap-20 pl-20">
<div class="flex flex-col justify-center col-span-1 space-y-8 mb-12">
<p class="text-[#50BEA9] text-2xl font-bold">- Sejarah -</p>
<p class="text-[48px] 2xl:text-5xl font-bold">Sejarah HUGI Indonesia</p>
<p class="text-[#666666] text-[14px] 2xl:text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
<div class="flex flex-col items-center rounded-xl space-y-6">
<h3 class="font-bold text-md lg:text-xl">Lorem ipsum dolor sit amet</h3>
<p class="flex justify-center items-center size-[200px] rounded-full bg-blue-400 text-2xl text-white font-[800]">2024</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla.
</p>
<a href="" class="bg-[#50BEA9] p-4 rounded-md text-white hover:bg-green-600">Detail</a>
</div>
<div class="flex flex-col items-center rounded-xl space-y-6">
<h3 class="font-bold text-md lg:text-xl">Lorem ipsum dolor sit amet</h3>
<p class="flex justify-center items-center size-[200px] rounded-full bg-blue-400 text-2xl text-white font-[800]">2024</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla.
</p>
<a href="" class="bg-[#50BEA9] p-4 rounded-md text-white hover:bg-green-600">Detail</a>
</div>
<div class="flex flex-col items-center rounded-xl space-y-6">
<h3 class="font-bold text-md lg:text-xl">Lorem ipsum dolor sit amet</h3>
<p class="flex justify-center items-center size-[200px] rounded-full bg-blue-400 text-2xl text-white font-[800]">2024</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla.
</p>
<a href="" class="bg-[#50BEA9] p-4 rounded-md text-white hover:bg-green-600">Detail</a>
</div>
<div class="flex flex-col items-center rounded-xl space-y-6">
<h3 class="font-bold text-md lg:text-xl">Lorem ipsum dolor sit amet</h3>
<p class="flex justify-center items-center size-[200px] rounded-full bg-blue-400 text-2xl text-white font-[800]">2024</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla.
</p>
<a href="" class="bg-[#50BEA9] p-4 rounded-md text-white hover:bg-green-600">Detail</a>
</div>
<div class="flex flex-col items-center rounded-xl space-y-6">
<a href="" class="bg-[#50BEA9] size-full flex items-center justify-center text-lg rounded-md text-white hover:bg-green-600">More ></a>
</div>
</div>
</section>
<!-- Visi dan Misi -->
<section class="px-20 space-y-4 p-8">
<p class="text-[#50BEA9] text-2xl font-bold">- Visi dan Misi -</p>
<div class="grid grid-cols-2 gap-20">
<div class="space-y-8">
<p class="text-[48px] 2xl:text-5xl font-bold">Visi HUGI Indonesia</p>
<p class="text-[#666666] text-[14px] 2xl:text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla. Pellentesque consectetur laoreet tortor, quis tristique risus tristique non. Aliquam aliquam metus et lorem placerat, eu convallis sem rhoncus. In blandit
ornare vulputate. Quisque dolor magna, pellentesque quis feugiat vitae, rhoncus in nunc. Maecenas ut eleifend turpis, ac tristique odio. Proin a massa vitae purus rhoncus tincidunt.
Praesent tempus purus ultrices euismod tempor. Morbi in nunc consequat odio vulputate sagittis. Ut sagittis consequat nibh, eu eleifend turpis sagittis vitae. Phasellus efficitur laoreet
malesuada. Vestibulum sit amet luctus nulla. Nunc vel tellus ac est eleifend consectetur. Integer interdum tellus vitae arcu rhoncus, in porta lectus mollis
</p>
</div>
<div class="space-y-8">
<p class="text-[48px] 2xl:text-5xl font-bold">Misi HUGI Indonesia</p>
<p class="text-[#666666] text-[14px] 2xl:text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non sollicitudin lorem. Curabitur nec lacus nec lorem iaculis posuere id vel dui. Morbi metus mi, tincidunt vel faucibus
pretium, suscipit et nulla. Pellentesque consectetur laoreet tortor, quis tristique risus tristique non. Aliquam aliquam metus et lorem placerat, eu convallis sem rhoncus. In blandit
ornare vulputate. Quisque dolor magna, pellentesque quis feugiat vitae, rhoncus in nunc. Maecenas ut eleifend turpis, ac tristique odio. Proin a massa vitae purus rhoncus tincidunt.
Praesent tempus purus ultrices euismod tempor. Morbi in nunc consequat odio vulputate sagittis. Ut sagittis consequat nibh, eu eleifend turpis sagittis vitae. Phasellus efficitur laoreet
malesuada. Vestibulum sit amet luctus nulla. Nunc vel tellus ac est eleifend consectetur. Integer interdum tellus vitae arcu rhoncus, in porta lectus mollis
</p>
</div>
</div>
</section>
<!-- Struktur Organisasi -->
<section class="px-20 space-y-4 p-8">
<p class="text-[#50BEA9] text-2xl font-bold">- Struktur Organisasi -</p>
<p class="text-[48px] 2xl:text-5xl font-bold">Struktur Organisasi HUGI Indonesia</p>
<div class="grid grid-cols-1">
<div>
</div>
</div>
<a href="" alt="" class="bg-[#50BEA9]">Detail</a>
</section>
<!-- Footer -->
<footer class="bg-[#E5FFF1] flex justify-between items-center flex-wrap px-8 py-12">
<div class="flex flex-wrap gap-16">
<img src="./src/assets/logo.svg" alt="" class="mb-auto" />
<ul class="space-y-4">
<li><h4 class="font-bold">Home</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<ul class="space-y-4">
<li><h4 class="font-bold">Profil</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<ul class="space-y-4">
<li><h4 class="font-bold">Cabang HUGI</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<ul class="space-y-4">
<li><h4 class="font-bold">Events</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<ul class="space-y-4">
<li><h4 class="font-bold">Membership</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
<ul class="space-y-4">
<li><h4 class="font-bold">Publikasi</h4></li>
<li><a href="" class="hover:text-blue-500">Kata sambutan</a></li>
<li><a href="" class="hover:text-blue-500">Profil</a></li>
<li><a href="" class="hover:text-blue-500">Cabang HUGI</a></li>
<li><a href="" class="hover:text-blue-500">Events</a></li>
<li><a href="" class="hover:text-blue-500">Membership</a></li>
<li><a href="" class="hover:text-blue-500">Publikasi</a></li>
</ul>
</div>
<div>
<ul class="space-y-4 text-[#7E8280]">
<li>
<a href="" class="hover:text-blue-500 flex gap-2 items-center"><img src="./src/assets/footer/email.svg" alt="icon" />admin@hugi-indonesia.com</a>
</li>
<li>
<a href="" class="hover:text-blue-500 flex gap-2 items-center"><img src="./src/assets/footer/whatsapp.svg" alt="icon" />081288019565</a>
</li>
<li>
<a href="" class="hover:text-blue-500 flex gap-2 items-center"><img src="./src/assets/footer/instagram.svg" alt="icon" />HUGIINDONESIA</a>
</li>
<li>
<a href="" class="hover:text-blue-500 flex gap-2 items-center"><img src="./src/assets/footer/youtube.svg" alt="icon" />HUGIINDONESIA</a>
</li>
</ul>
</div>
</footer>
</body>
</html>