-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
265 lines (250 loc) · 13.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Ahmad Fahmy</title>
<!-- <link rel="stylesheet" href="assets/css/bootstrap.min.css"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm" >
<div class="container">
<a class="navbar-brand fw-bold" href="index.html">Ahmad Fahmy </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarNavAltMarkup">
<ul class="navbar-nav ms-auto px-auto">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
<a class="nav-link active px-4" aria-current="page" href="#about">About</a>
<a class="nav-link active" aria-current="page" href="#project">Project</a>
<a class="nav-link active px-4" aria-current="page" href="#contact">Contact</a>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- Home Start -->
<section id="home" class="home pt-5 mt-3">
<div class="container">
<div class="row">
<div class="col-12 col-md-12 col-lg-7 pt-5 ">
<h1 class="text-uppercase fw-bold">Hi, Saya Fahmy.</h1>
<h1 class="text-uppercase fw-bold">Saya web developer yang sekarang tinggal di <u>Malang</u></h1>
<p class="d-inline ">Backend Web Developer</p> ⭐
<p class="d-inline ">Fullstack Web Developer</p> ⭐
<p class="d-inline ">Frontend Web Developer</p>
<span class="pt-3 d-block"></span>
<a class="btn btn-outline-dark" aria-current="page" href="https://api.whatsapp.com/send?phone=6281252512160" target="_blank">Tanya Aku Di WhatsApp</a>
</div>
<div class="col-12 col-md-12 col-lg-5 pt-2">
<img src="assets/img/image2.jpg" class="rounded shadow img-fluid" alt="Akses : https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.idntimes.com%2Fmen%2Fstyle%2Frijalu-ahimsa%2Fcara-memakai-topi-kupluk-1&psig=AOvVaw1NOaQZe_4phU5sVk6Km7tw&ust=1677294078898000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJDQ17-Vrf0CFQAAAAAdAAAAABAE">
</div>
</div>
</div>
<div class="section-container">
<div class="garing text-center fw-bold">
<marquee behavior="scroll" direction="left" scrollamount="14">
<p class="text-white teks1 d-inline px-3">Web Development</p> ⭐
<p class="text-white teks1 d-inline px-3">Web Administrator</p> ⭐
<p class="text-white teks1 d-inline px-3">Backend Web Developer</p> ⭐
<p class="text-white teks1 d-inline px-3">Fullstack Web Developer</p> ⭐
<p class="text-white teks1 d-inline px-3">Frontend Web Developer</p> ⭐
<p class="text-white teks1 d-inline px-3">Web Design</p> ⭐
<p class="text-white teks1 d-inline px-3">Penetration Testing</p> ⭐
<p class="text-white teks1 d-inline px-3">Cyber Security</p>
</marquee>
</div>
</div>
</section>
<!-- Home End -->
<!-- About Start -->
<section id="about" class="about">
<div class="container">
<div class="row">
<!-- <h1 class="fw-bold text-center">About</h1> -->
<div class="teks1 col-12 col-md-6 col-lg-4 px-4">
<p class="d-inline px-2 text-uppercase">Frontend</p>
⭐
<p class="d-inline px-2 text-uppercase">Backend</p>
<h1 class="fw-bold">Saya anak kedua dari 3 bersaudara</h1>
<p>Saya salah satu dari ketiga saudara saya yang terjun dan fokus di bidanga teknologi informasi khusus nya dibidang programmer, dan saya paling mahir di atau paling saya sukai dibidang WEB DEVELOPMENT</p>
</div>
<div class="teks2 col-12 col-md-6 col-lg-8 px-4 ">
<p class="text2">Saya sendiri masih menempuh pendidikan di SMK PGRI 3 Malang, , pengalaman saya dalam bidang web development baru mulai sekitar 2 atau 3 tahun ini</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum iste at placeat sit officiis fugit delectus laboriosam beatae assumenda eligendi?</p>
<div class="row">
<div class="col-lg-4">
<p class="d-inline text-uppercase text-danger fw-bold">Born In</p>
<p class="d-block fw-bold">Jombang</p>
</div>
<div class="col-lg-4">
<p class="d-inline text-uppercase text-danger fw-bold">Experience</p>
<p class="d-block fw-bold">2+ Years</p>
</div>
<div class="col-lg-4">
<p class="d-inline text-uppercase text-danger fw-bold">Date Of Birth</p>
<p class="d-block fw-bold">09 June 2006</p>
</div>
</div>
</div>
<table class="table table-responsive table-bordered border-dark pt-5 mt-5" border="3">
<tr class="text-center fw-bold">
<td>
<h1>2+</h1>
<p class="text-uppercase">Tahun Pengalaman</p>
</td>
<td class="bg-dark text-white">
<h1>2+</h1>
<p class=" text-uppercase">Project Selesai</p>
</td>
<td>
<h1>0+</h1>
<p class="text-uppercase">Pelanggan Senang</p>
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- About End -->
<!-- Project Start -->
<section id="project" class="project pt-5 ">
<div class="container ">
<h1 class="fw-bold text-center">Project</h1>
<p class="fw-bold text-center">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<div class="row pt-5 d-flex align-items-center justify-content-between">
<div class="col-md-4 col-12 pt-3">
<div class="card" style="width: 18rem;">
<img src="assets/img/image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 col-12 pt-3">
<div class="card" style="width: 18rem;">
<img src="assets/img/image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-4 col-12 pt-3">
<div class="card" style="width: 18rem;">
<img src="assets/img/image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project End -->
<!-- Contact Start -->
<section id="contact" class="contact">
<div class="container">
<div class="row justify-content-center pt-5 mt-3">
<h1 class="text-center fw-bold">Contact Me</h1>
<div class="col-lg-8">
<form action="" method="get" id="formContact">
<div id="error" hidden class="alert alert-danger text-center">
<!-- <p id="para1"></p> -->
</div>
<div id="success" hidden class="alert alert-success text-center">
<!-- <p id="para2"></p> -->
</div>
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" id="nama" placeholder="Example : Budi">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Example : budi@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Pesan</label>
<textarea class="form-control" id="pesan" rows="2" placeholder="Ketik pesan disini"></textarea>
</div>
<div class="mb-3 d-grid gap-2 mx-auto col-6">
<button type="submit" class="btn btn-outline-dark">Kirim</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contact End -->
<!-- Footer Start -->
<footer class="footer bg-dark text-white" id="footer">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<h1 class="fw-bold">Ahmad Fahmy</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi totam labore voluptate cum architecto voluptas.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h1>Sosial Media</h1>
<ul>
<li><i class="fa-brands fa-whatsapp"></i> : <a href="" style="color: #fff; text-decoration: none;" >0812-5251-2160</a></li>
<li ><i class="fa-regular fa-envelope"></i> : <a href="" style="color: #fff; text-decoration: none;" >ahmadfahmy219@gmail.com</a></li>
<li><i class="fa-brands fa-instagram"></i> : <a href="" style="color: #fff; text-decoration: none;" >@fahmyga_21</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h1>Keahlian </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequatur voluptatem eaque, quisquam itaque sapiente sint aperiam nisi delectus perferendis.</p>
</div>
<div class="col-lg-12">
<hr>
<p>© Copyright Ahmad Fahmy 2023-<span id="tahun"></span>. All Rights Reserve.</p>
</div>
</div>
</div>
</footer>
<!-- Footer End -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script language="javascript">
var thn = new Date;
var tahun = thn.getFullYear();
document.getElementById("tahun").innerHTML = tahun;
var contact = document.getElementById("formContact");
contact.addEventListener("submit", (e) => {
e.preventDefault();
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var pesan = document.getElementById("pesan").value;
var alertS = document.getElementById("success");
var error = document.getElementById("error");
var url = "https://web.whatsapp.com/send",
phone = '6281252512160',
text = "Halo 👋 Saya, Memiliki Beberapa Keperluan",
penutup = "Terima Kasih "
;
if(nama != "" && email != "" && pesan != ""){
var tuj = url + '?phone='+ phone +
'&text=' + text + '%0A' + '%0A' +
'*Nama* : ' + nama + '%0A' +
'*Email Address* : '+ email + '%0A' +
'*Pesan* : '+ pesan + '%0A' + '%0A' + penutup ;
window.open(tuj,'_blank');
contact.reset();
alertS.removeAttribute("hidden");
alertS.innerHTML = "Success Terkirim";
} else {
contact.reset();
//contact.load();
error.removeAttribute("hidden");
error.innerHTML = "Gagal Terkirim (Form Harus Terisi Lengkap)";
}
});
</script>
<script src="assets/js/script.js"></script>
</body>
</html>