-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (321 loc) · 12.7 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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Muhammad Khoyron AF - Portofolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto+Condensed:wght@400;700&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<style>
html {
overflow-x: hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm p-3 mb-5">
<a class="navbar-brand" href="#">AlulCode</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-primary" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#skiils">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#timwork">TimWork</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#hub">Hubungi Kami</a>
</li>
</ul>
</div>
</nav>
<div class="container index">
<div class="row row-cols-2">
<div class="col" data-aos="fade-right">
<h1 class="team">
AlulCode - Junior Developer
</h1>
<p>
Saya adalah seorang junior Developer yang duduk di bangku sekolah SMP, saya sangat suka tentang teknologi.
Oleh karena itu saya selalu mengembangkan skill dan kemampuan saya di bidang IT. Saya bercita cita sebagai
Senior Developer yang bisa membahagiakan kedua orang tua saya dan orang di sekitar saya.
</p>
<button class="btn btn-primary rounded-pill text-white mt-4" style="width: 150px; height: 50px">
Hubungi Kami
</button>
</div>
<div class="col" data-aos="fade-left">
<img src="ilustrasi2.png" alt="" width="600" height="400" class="gambar" />
</div>
</div>
</div>
<div class="container" data-aos="fade-up" data-aos="fade-left" id="skiils">
<h1 class="unggul text-center mb-5">Skills</h1>
<div class="card-deck mb-5 text-center">
<div class="card rounded">
<center>
<img src="asset/laravel.png" class="mt-3" alt="Laravel Icon - Icon Mafia" width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2 text-center">Laravel Framework</h5>
<p class="card-text">
Laravel adalah kerangka kerja aplikasi web berbasis PHP yang sumber terbuka, menggunakan konsep
Model-View-Controller.
</p>
</div>
</div>
<div class="card rounded">
<center>
<img src="asset/codeigniter.png" class="mt-3" alt="..." width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2 text-center">Codeigniter</h5>
<p class="card-text">
CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan model MVC untuk
membangun situs web dinamis dengan menggunakan PHP.
</p>
</div>
</div>
<div class="card rounded">
<center>
<img src="asset/bootstrap.png" class="mt-3" alt="..." width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2 text-center">Bootstrap</h5>
<p class="card-text">
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi
web.
</p>
</div>
</div>
<div class="card rounded">
<center>
<img src="asset/jquery.png" class="mt-3" alt="..." width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2 text-center">Jquery</h5>
<p class="card-text">
jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting
pada HTML
</p>
</div>
</div>
<div class="card rounded">
<center>
<img src="asset/php.png" class="mt-3" alt="Php Logo from
freepnglogos.com" width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2 text-center">PHP</h5>
<p class="card-text">
Bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs
web dinamis. PHP dapat digunakan untuk membangun sebuah CMS
</p>
</div>
</div>
</div>
</div>
<div class="container" data-aos="fade-up" id="timwork">
<h1 class="unggul text-center mb-5">TeamWork</h1>
<div class="card-deck mb-5 text-center">
<div class="card rounded">
<center>
<img src="asset/ds45.jpg" class="mt-3 rounded-circle" alt="..." width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2">Developer Security45</h5>
</div>
</div>
<div class="card rounded">
<center>
<img src="asset/X-TECH.png" class="mt-3 rounded-circle" alt="..." width="150" height="150" />
</center>
<div class="card-body">
<h5 class="card-title mt-2">EX-Science</h5>
</div>
</div>
</div>
</div>
<div class="container kontak mt-5" data-aos="fade-up" id="hub">
<section class="mb-4">
<!--Section heading-->
<h2 class="h1-responsive font-weight-bold text-center my-4 mt-5">Hubungi Kami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Apakah Anda memiliki pertanyaan? Jangan ragu untuk menghubungi
kami secara langsung. Tim kami akan kembali kepada Anda dalam hitungan jam untuk membantu Anda.</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="form-group">
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-3">
<input type="text" id="name" name="name" class="form-control" placeholder="Nama">
</div>
</div>
<div class="col-md-6">
<div class="md-form mb-3">
<input type="text" id="email" name="email" class="form-control" placeholder="Email">
</div>
</div>
<!--Grid column-->
</div>
</div>
<!--Grid row-->
<div class="form-group">
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control" placeholder="Subject">
</div>
</div>
</div>
<!--Grid row-->
</div>
<div class="form-group">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"
placeholder="Pesan...."></textarea>
</div>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-primary text-white mb-2" style="width: 100px;" </a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center">
<ul class="list-unstyled mb-0">
<li><i class="fas fa-map-marker-alt fa-2x"></i>
<p>Jawa Timur, Indonesia</p>
</li>
<li><i class="fas fa-phone mt-4 fa-2x"></i>
<p>+62 888 0170 0233</p>
</li>
<li><i class="fas fa-envelope mt-4 fa-2x"></i>
<p>alulgans70@gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</section>
</div>
<!-- Footer -->
<footer class="page-footer font-small bg-primary mt-5">
<!-- Copyright -->
<div class="footer-copyright text-center text-white py-3">© 2022 Copyright:
AlulCode - Coded By Muhammad Khoyron AF <br>
<small>Credit : freepik.com , codepen.io , google.com , icon8</small>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.js'
integrity='sha512-MhphDdrtVgCiTUdFBDrRGigpyWU4xU+V/3NzED9A6ZDD879EvIA39i4buHXc8/+iAS+EXh+GBrkduQprR8+qAA=='
crossorigin='anonymous'></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
AOS.init({
duration: 1500,
easing: "slide",
once: false,
});
$(function () {
$(".svglogo").toggleClass("open");
$(".left").toggleClass("sliderleft");
$(".right").toggleClass("sliderright");
$(".svglogo").fadeOut(1000);
setTimeout(function () {
$("html").css("overflow-y", "scroll");
}, 3500);
});
function validateForm() {
var name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Name cannot be empty";
return false;
}
var email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Email cannot be empty";
return false;
} else {
var re =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Email format invalid";
return false;
}
}
var subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Subject cannot be empty";
return false;
}
var message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Sending...";
formData = {
'name': $('input[name=name]').val(),
'email': $('input[name=email]').val(),
'subject': $('input[name=subject]').val(),
'message': $('textarea[name=message]').val()
};
$.ajax({
url: "mail.php",
method: "POST",
data: formData,
success: function (data, textStatus, jqXHR) {
$('#status').text(data.message);
if (data.code) //If mail was sent successfully, reset the form.
$('#contact-form').closest('form').find("input[type=text], textarea").val("");
},
error: function (jqXHR, textStatus, errorThrown) {
$('#status').text(jqXHR);
}
});
}
document.getElementById('status').innerHTML = "Sending...";
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
</body>
</html>