-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
210 lines (209 loc) · 14.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Static Website</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>
<body>
<audio autoplay loop>
<source src="assets/audio/🍂 [Copyright Free Chill Background Music] - Way Home by @Tokyo Music Walker 🇯🇵.mp3">
</audio>
<!-- Navbar -->
<nav class="navbar pt-3 fixed-top navbar-expand-lg navbar-dark shadow-sm d-flex justify-content-between">
<div class="container">
<a class="navbar-brand fw-semibold lh-1" href="#">
<i class="bi bi-c-circle-fill me-1 icon-copy" style="font-size: 16px"></i>
Designed by Pasha🍋
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#timeline">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
<div class="ms-5">
<a type="button" class="btn-dark ms-5" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Coming soon.">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-toggle-on" viewBox="0 0 16 16">
<path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" />
</svg>
</a>
</div>
</div>
</nav>
<!-- Section Landingpage-->
<section id="jumbotron" class="jumbotron mt-5">
<div class="d-flex bg-trasparent rounded-3">
<div class="container pt-3 mt-3 col-md-6 ms-5 ps-5">
<h6 class="sapaan m-0">Halo, Saya</h6>
<h1 class="name display-4 fw-bold">Muhammad Iqbal Pasha Al Farabi🌳</h1>
<p class="col-md-12">
Saya seorang pelajar dengan pengetahuan tentang pengembangan dan desain perangkat lunak. Di website ini saya mencoba berbagi beberapa pengalaman, kenangan atau momen menyenangkan saya di sekolah selama kurun waktu 3 tahun yang telah dilalui, mungkin memang tahun 2022 adalah tahun yang cukup banyak momen nya, ya~ tau sendiri lah 2 tahun ke belakang wabah covid merajalela sehingga mobilitas di luar rumah termasuk di sekolah pun terbatas.
</p>
<button class="btn btn-about btn-lg rounded-pill" href="#footer">Contact me.</button>
</div>
<div class="col-md-4 me-4 py-5">
<img src="assets/img/profile.png" width="350" />
</div>
</div>
</section>
<!-- Akhir Section Landingpage -->
<!-- Section Timeline-->
<section id="timeline" class="timeline mt-5" style="padding-top: 175px;">
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
<h4>2020</h4>
<i class="fa-solid fa-bullseye"></i>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">
<h4>2022</h4>
<i class="fa-solid fa-bullseye"></i>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">
<h4>2022</h4>
<i class="fa-solid fa-bullseye"></i>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 3">
<h4>2022</h4>
<i class="fa-solid fa-bullseye"></i>
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-label="Slide 3">
<h4>2022</h4>
<i class="fa-solid fa-bullseye"></i>
</button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="memory-slide-one row h-100 align-items-center">
<div class="col-md-4">
<div class="memory-slide-img">
<img class="img-memory rounded img-fluid" src="assets/img/school.jfif" alt="" />
</div>
</div>
<div class="col-md-8">
<div class="memory-slide-text">
<h3 class="satu btn rounded-pill">Juli, 2020</h3>
<h5 class="satu-title">Masa Awal Bersekolah</h5>
<p>
Bulan ini adalah bulan awal saya bersekolah di SMKN 13 Bandung, pada awal-awal bersekolah, pembelajaran masih dilaksanakan secara online atau PJJ dan tatap muka pun terbatas dikarenakan adanya wabah covid-19, tidak banyak
kegiatan bersama yang dilakukan, pertemuan pertama bersama teman sekelas setelah kegiatan pengukuran baju cukup berkesan untuk saya.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="memory-slide-one row h-100 align-items-center">
<div class="col-md-4">
<div class="memory-slide-img">
<img class="img-memory rounded img-fluid" src="assets/img/jogja.jpg" alt="" />
</div>
</div>
<div class="col-md-8">
<div class="memory-slide-text">
<h3 class="dua btn rounded-pill">Maret, 2022</h3>
<h5 class="dua-title">Kunjungan Industri ke Jogjakarta</h5>
<p>
Pada tanggal 17-19 Mei sekolah kami, SMKN 13 Bandung kembali melaksanakan kunjungan industri. Selama kegiatan ini kami mendapatkan banyak pengalaman seru, ilmu yang bermanfaat. Banyak kejadian
lucu dan menyenangkan selama perjalanan kunjungan ini, seperti bus yang saya tempati yaitu bus 9 tertahan dan tertinggal oleh rombongan bus lain karena berkonflik dengan pengendara mobil lain yang
bersenggolan. Selain itu berkunjung ke industri, kami juga berkunjung ke pantai Sandranan dan Tebing Breksi.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="memory-slide-one row h-100 align-items-center">
<div class="col-md-4">
<div class="memory-slide-img">
<img class="img-memory rounded img-fluid" src="assets/img/bukber.jpg" alt="" />
</div>
</div>
<div class="col-md-8">
<div class="memory-slide-text">
<h3 class="tiga btn rounded-pill">April, 2022</h3>
<h5 class="tiga-title">Smartren dan Buka Bersama</h5>
<p>
Pada bulan Ramadhan SMKN 13 Bandung ikut berpatisipasi dalam kegiatan yang diselenggarakan oleh Disdik Pro. Jawa Barat. Terdapat banyak kegiatan yang dilakukan oleh saya dan teman-teman semua selama kegiatan ini berlangsung, seperti sholat dhuha berjamaah, menghapal surat, menulis Mushaf Al-Quran dan kegiatan buka bersama di hari akhir kegiatan.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="memory-slide-one row h-100 align-items-center">
<div class="col-md-4">
<div class="memory-slide-img">
<img class="img-memory rounded img-fluid" src="assets/img/porak.jpg" alt="" />
</div>
</div>
<div class="col-md-8">
<div class="memory-slide-text">
<h3 class="empat btn rounded-pill">Juni, 2022</h3>
<h5 class="empat-title">Pekan Olahraga Antar Kelas (PORAK)</h5>
Pada tanggal 17 Juni 2022, osis kembali mengadakan acara PORAK atau Pekan Olahraga Antar Kelas, yang dimana acaranya baru kembali dilaksanakan secara tatap muka, setelah porak sebelumnya dilaksanakan secara daring. Sehingga, acara ini begitu meriah sekali, kelas saya mengikuti beberapa cabang pertandingan dan saya bersama teman saya lainnya ikut memeriahkan kegiatan ini dengan mendukung tim kelas, kelas lain pun sama saling mendukung timnya masing-masing. Hari terakhir kegiatan adalah puncak kegiatannya dan sangat meriah sekali.
</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="memory-slide-one row h-100 align-items-center">
<div class="col-md-4">
<div class="memory-slide-img">
<img class="img-memory rounded img-fluid" src="assets/img/fotstud.jpg" alt="" />
</div>
</div>
<div class="col-md-8">
<div class="memory-slide-text">
<h3 class="lima btn rounded-pill">September, 2022</h3>
<h5 class="lima-title">Foto Studio Angkatan</h5>
<p>
Pada tanggal 3 September 2022, siswa seangkatan mengadakan kegiatan foto studio bersama satu angkatan, saya ikut juga kegiatan ini yang bagi saya ini merupakan pengalaman yang lumayan berkesan. Berangkat barengan, pulang barengan juga, kapan lagi gitu.
</p>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
</button>
</div>
</div>
</section>
<!-- Footer/Contact -->
<footer id="footer" class="py-2 px-3 text-center mt-5">
<div class="d-flex justify-content-center mb-3">
<div class="me-2"><a class="d-flex btn btn-lg rounded-pill" href="https://api.whatsapp.com/send/?phone=%2B62895636930042&text&type=phone_number&app_absent=0"><i class="bi bi-whatsapp me-2"></i>WhatsApp</a></div>
<div class="ms-2"><a class="d-flex btn btn-lg rounded-pill" href="https://www.instagram.com/miqbalpasha_/"><i class="bi bi-instagram me-2"></i>Instagram</a></div>
</div>
<p>Created with ❤ by <a href="assets/doc/CV_M Iqbal Pasha Al Farabi_SMKN 13 Bandung.pdf" class="fw-bold">M Iqbal Pasha</a></p>
</footer>
<!--Akhir Footer-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
</script>
</body>
</html>