-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathteam.html
217 lines (208 loc) · 11.6 KB
/
team.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kun Fayakun</title>
<link rel="icon" type="image/x-icon" href="Gambar/Kun Fayakun Icon.png">
<link rel="stylesheet" href="CSS/font.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons&display=block">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="CSS/style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-950 text-white text-body overflow-x-hidden">
<nav class="hidden md:flex py-6 navbar bg-transparent">
<div class="container mx-auto flex justify-between items-center px-8">
<div>
<a href="index.html" class="text-white font-bold text-2xl">
<img src="Gambar/Kun Fayakun.png" alt="Kun Fayakun" class="h-8" />
</a>
</div>
<div>
<ul class="flex space-x-8">
<li>
<a href="index.html" class="hover:text-cyan-300">Home</a>
</li>
<li>
<a href="history.html" class="hover:text-cyan-300">History</a>
</li>
<li>
<a href="implementation.html" class="hover:text-cyan-300">Implementation</a>
</li>
<li>
<a href="team.html"
class="hover:text-cyan-300 underline underline-offset-2 decoration-cyan-300">Team</a>
</li>
<li>
<a href="source.html" class="hover:text-cyan-300">Source</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="flex md:hidden py-6 navbar bg-transparent">
<div class="container mx-auto flex flex-col">
<div class="flex flex-row justify-between items-center px-6">
<a href="index.html" class="text-white font-bold text-2xl">
<img src="Gambar/Kun Fayakun 2.png" alt="Kun Fayakun" class="h-8 mb-1" />
</a>
<span class="material-icons text-4xl" onclick="toggleMenu()">menu</span>
</div>
<div id="menu" class="hidden">
<ul class="flex flex-col mt-6 space-y-2 justify-center items-center w-full">
<li class="w-full">
<a href="index.html" class="block px-6 py-2 hover:bg-gray-700 rounded-md">Home</a>
</li>
<li class="w-full">
<a href="history.html" class="block px-6 py-2 hover:bg-gray-700 rounded-md">History</a>
</li>
<li class="w-full">
<a href="implementation.html"
class="block px-6 py-2 hover:bg-gray-700 rounded-md">Implementation</a>
</li>
<li class="w-full">
<a href="team.html"
class="block px-6 py-2 bg-cyan-500 text-gray-950 font-bold rounded-md">Team</a>
</li>
<li class="w-full">
<a href="source.html" class="block px-6 py-2 hover:bg-gray-700 rounded-md">Source</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mx-auto flex items-center justify-center flex-col text-center mt-8 md:mt-24">
<img src="Gambar/Kun Fayakun.png" alt="Kun Fayakun" class="h-12 md:h-16 lg:h-24 mb-0 md:mb-1 lg:mb-2" />
<h1
class="bg-gradient-to-br from-cyan-500 to-cyan-200 bg-clip-text text-transparent font-bold text-3xl md:text-4xl md:text-5xl mb-2 md:mb-6 mx-6">
Team members</h1>
<p class="text-white text-mono text-xs md:text-base text-center mx-6 md:mx-12 lg:mx-64">
“We focus on the details of everything we do. By harnessing the power of AI, people can be helped from all
aspects of need around the world to focus on what matters most to them, freeing them from routine work and
opening up new opportunities.”
</p>
</div>
<div class="container mx-auto">
<div
class="flex-col lg:mx-48 flex md:flex-row space-y-6 md:space-y-0 md:space-x-12 my-12 mb-32 justify-items-center">
<div data-aos="fade-up" data-aos-duration="1000"
class="md:w-1/2 bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col items-center mx-6 md:mx-auto">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4">
<img src="Gambar/Ahmad Zainul Mufid(foto).jpg" alt="Ahmad Zainul Mufid"
class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mb-2 text-center">Ahmad Zainul Mufid</h3>
<p class="text-gray-400 text-center text-sm md:text-base mb-4">I am a software engineer, who is ready to
win the itechno 2024 web
design competition. my skills can be anything, because I have to be able to do everything.</p>
<div class="flex space-x-4">
<a href="https://github.com/ahmadzainulmufid" target="_blank"
class="text-white hover:text-gray-400">
<i class="material-icons">code</i>
</a>
<a href="https://www.linkedin.com/in/ahmad-zainul-mufid-b29b91219/" target="_blank"
class="text-white hover:text-gray-400">
<i class="material-icons">business_center</i>
</a>
<a href="https://wa.me/+6288294258864" target="_blank" class="text-white hover:text-gray-400">
<i class="material-icons">chat</i>
</a>
</div>
</div>
<div data-aos="fade-up" data-aos-duration="1000"
class="md:w-1/2 bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col items-center mx-6 md:mx-auto">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4">
<img src="Gambar/Muhammad Fajrul Falah.jpeg" alt="Muhammad Fajrul Falah"
class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold mb-2 text-center">Muhammad Fajrul Falah</h3>
<p class="text-gray-400 text-center mb-4 text-sm md:text-base">An Informatics Engineering Student where
his passion lies in UI/UX Design, Graphic Design, and Front-End Web Developer.</p>
<div class="flex space-x-4">
<a href="https://github.com/fajrulfalah28" target="_blank" class="text-white hover:text-gray-400">
<i class="material-icons">code</i>
</a>
<a href="https://www.linkedin.com/in/muhammad-fajrul-falah-213100231/" target="_blank"
class="text-white hover:text-gray-400">
<i class="material-icons">business_center</i>
</a>
<a href="https://wa.me/+6281315509677" target="_blank" class="text-white hover:text-gray-400">
<i class="material-icons">chat</i>
</a>
</div>
</div>
</div>
</div>
<footer class="bg-gray-800 text-white py-8 md:pt-8">
<div class="container mx-auto px-4 md:px-8">
<div class="flex flex-col mx-6 md:mx-0 md:flex-row md:space-x-32">
<div class="about mb-6 md:mb-0 md:w-2/3">
<h4 class="font-bold text-base md:text-xl mb-4">Kun Fayakun</h4>
<p class="mb-4 text-xs md:text-base">Kun Fayakun, website made by a passionate team of aspiring web
designer
from
Politeknik
Negeri Jakarta, with creativity as our cornerstone and innovation as our core values, we're
ready to
showcase our skills at the iTechno 2024 Web Design Competition. Our website name, "Kun Fayakun"
which
translates to "Jadilah, maka jadilah." represents our ability to transform ideas into reality
through the
power of web design.</p>
</div>
<div class="contact-info md:w-1/3 flex flex-col">
<h4 class="font-bold text-base md:text-xl mb-4">Our Socials</h4>
<div class="text-xs md:text-base space-y-4 w-full">
<div class="flex flex-col">
<p>Muhammad Fajrul Falah</p>
<div class="social-icons flex md:space-x-4">
<a href="https://www.instagram.com/fajrul.falah28/"
class="bg-medium-gray pr-2 py-2 rounded text-xl md:text-base"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/muhammad-fajrul-falah-213100231/"
class="bg-medium-gray p-2 rounded text-xl md:text-base"><i
class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/fajrulfalah28"
class="bg-medium-gray p-2 rounded text-xl md:text-base"><i
class="fab fa-github"></i></a>
</div>
</div>
<div class="flex flex-col">
<p>Ahmad Zainul Mufid</p>
<div class="social-icons flex md:space-x-4">
<a href="https://www.instagram.com/ahmadzainulmfd_/"
class="bg-medium-gray pr-2 py-2 rounded text-xl md:text-base"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/ahmad-zainul-mufid-b29b91219/"
class="bg-medium-gray p-2 rounded text-xl md:text-base"><i
class="fab fa-linkedin-in"></i></a>
<a href="https://github.com/ahmadzainulmufid/"
class="bg-medium-gray p-2 text-xl md:text-base rounded"><i
class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="border-gray-700 my-8">
<div class="text-center text-xs md:text-base">
<p>Kun Fayakun © 2024, All Rights Reserved</p>
</div>
</footer>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
function toggleMenu() {
var menu = document.getElementById("menu");
menu.classList.toggle("hidden");
}
</script>
</body>
</html>