-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
281 lines (267 loc) · 13.5 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
<!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>Welcome</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- navbar in -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand">
<img src="assets/odip.jpg" alt="sorry logo error" class="rounded-pill">
</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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active a1" href="#">Me</a>
</li>
<li class="nav-item">
<a class="nav-link a1" href="#learn">Why Learn Programming</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link a1" href="#softskill">Soft Skill</a>
</li> -->
<li class="nav-item">
<a class="nav-link a1" href="#media">Media</a>
</li>
<li class="nav-item">
<a class="nav-link a1" href="#contactme">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<br><br><br>
<!-- navbar out -->
<!-- content in -->
<div class="main-container pt-4">
<div class="main-wrapper container-fluid">
<div class="row">
<div class="col-md-6 mb-4">
<div class="wrapper-content1">
<img src="assets/odip1.jpg" alt=""><br><br>
<h2 class="mt-3"> Hallo. </h2>
<p class="text1">Saya Putu Agus Prana Dhiva Satvika, seorang individu yang berdedikasi dalam bidang teknologi informasi (IT) dan sedang menempuh
studi di jurusan Teknik Informatika. Saya ingin berbagi dengan Anda tentang minat dan perjalanan saya dalam
dunia IT yang menarik.</p><br>
<h3>Awal Minat pada Teknologi.</h3>
<p class="text1">Sejak awal, saya telah merasakan ketertarikan yang kuat terhadap dunia teknologi. Melihat
perkembangan yang pesat dan peran yang semakin penting yang dimainkan oleh teknologi informasi, saya
memutuskan untuk mengejar karir di bidang ini. Saya percaya bahwa IT memiliki potensi besar untuk membentuk
dunia yang lebih baik dan memberikan solusi kreatif untuk tantangan yang ada.</p><br>
<h3>Pendidikan di Teknik Informatika.</h3>
<p class="text1">Saat ini, saya sedang menempuh pendidikan di jurusan Teknik Informatika. Melalui program ini,
saya mendapatkan landasan teoritis yang kokoh dalam berbagai aspek teknologi informasi, mulai dari
pemrograman, jaringan komputer, basis data, keamanan informasi, hingga pengembangan perangkat lunak. Saya giat
mengikuti perkuliahan, berpartisipasi in proyek-proyek, dan melakukan penelitian yang relevan untuk terus
meningkatkan pengetahuan dan keterampilan saya di bidang ini.</p><div id="learn" href="#learn"></div>
</div>
</div>
<div class="col-md-6">
<div class="wrapper-content2">
<h2 class="learn">Apa yang Aku Pelajari.</h2><br>
<img src="assets/code1.jpeg" alt=""><br><br>
<h2 class="mt-3">Coding.</h2>
<p class="text1">Dalam era digital yang terus berkembang, coding atau pemrograman telah menjadi keterampilan yang
sangat berharga. Coding melibatkan proses menulis serangkaian instruksi logis yang akan dijalankan oleh
komputer, memungkinkan kita untuk menciptakan aplikasi, perangkat lunak, dan solusi teknologi yang inovatif.</p><br>
<h3>Pentingnya Pemrograman.</h3>
<p class="text1" >Salah satu alasan utama mengapa pemrograman begitu penting adalah permintaan yang terus
meningkat untuk para programmer di dunia kerja. Kemampuan untuk coding adalah keterampilan yang dicari dalam
berbagai industri, termasuk teknologi, keuangan, kesehatan, dan lainnya. Dengan menguasai coding, kita dapat
membuka peluang karir yang menjanjikan dan menjadi bagian dari inovasi teknologi yang terus berkembang.</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="wrapper-content3">
<h2 class="reason">Alasan Mengapa Harus Memperdalam Pemrograman.</h2>
<ul class="text2">
<li><p>Peningkatan Keterampilan Komputasi</p>Memahami cara kerja teknologi komputer membantu kita berinteraksi
dengan komputer secara lebih efektif dan memahami cara kerja perangkat lunak dan aplikasi yang kita gunakan
sehari-hari.</li><br>
<li><p>Keterampilan yang Dibutuhkan dalam Dunia Kerja</p>Permintaan akan para programmer terus meningkat di
berbagai industri. Kemampuan untuk coding menjadi keunggulan kompetitif dalam pasar kerja yang semakin
kompetitif.</li><br>
<li><p>Kreativitas dan Inovasi</p>Coding adalah alat untuk mewujudkan kreativitas dan inovasi. Dengan coding,
kita dapat menciptakan aplikasi, perangkat lunak, dan solusi teknologi yang baru dan unik.</li><br>
<li><p>Pemecahan Masalah</p> Coding melibatkan pemecahan masalah yang melatih pemikiran analitis dan logis.</li>
</ul>
</div>
</div>
</div><br><br>
</div><div id="media" href="#media"></div>
<div class="container-fluid">
<div class="image-grid p-1">
<div class="image-container">
<img src="assets/image5.jpg" alt="Image 1">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 1</h3>
<p>Beautiful Mount</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image1.jpg" alt="Image 2">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 2</h3>
<p>Moon View Between The Mountain</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image2.jpg" alt="Image 3">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 3</h3>
<p>Classic Window 1893</p>
</div>
</div>
</div>
<!-- Add more image containers here -->
</div>
<div class="image-grid p-1">
<div class="image-container">
<img src="assets/image3.jpg" alt="Image 1">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 4</h3>
<p>Beautiful landscape</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image4.jpg" alt="Image 2">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 5</h3>
<p>MacBook and IPhone</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image0.jpg" alt="Image 3">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 6</h3>
<p>Our Earth</p>
</div>
</div>
</div>
<!-- Add more image containers here -->
</div>
<div class="image-grid p-1">
<div class="image-container">
<img src="assets/image7.jpg" alt="Image 1">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 7</h3>
<p>Sky and Earth likes Black and White</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image8.jpg" alt="Image 2">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 8</h3>
<p>MacBook AIR 2018</p>
</div>
</div>
</div>
<div class="image-container">
<img src="assets/image9.jpg" alt="Image 3">
<div class="image-overlay">
<div class="image-overlay-content">
<h3>Image 9</h3>
<p>Beautiful Color Abstrak</p>
</div>
</div>
</div>
<!-- Add more image containers here -->
</div>
</div>
<!-- <div id="contactme" href="#contactme"></div>
<div class="w-100 d-none d-md-flex d-sm-flex pb-3 " style="background-color: rgb(181, 181, 181); border-top:5px solid rgb(199, 199, 199) ;">
<form class="container w-25 mt-5 pb-5" id="Hubungi" href=#Hubungi >
<h1 class="text-dark">Hubungi Kami</h1>
<div>
<label for="nama" class="form-label">Nama Anda</label>
<input type="text" placeholder="Masukan Pesanan" class="form-control" id="nama" aria-describedby="namaHelp">
<div id="namaHelp" class="form-text">We'll never share your name with anyone else.</div>
</div>
<div class="mt-2">
<label for="Email" class="form-label">Email address</label>
<input type="email" placeholder="E-Mail" class="form-control" id="Email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mt-2">
<label for="subjekpesanan" class="form-label">Subjek Pesanan</label>
<input type="text" placeholder="Masukan Pesanan" class="form-control" id="subjekpesanan" aria-describedby="subjekpesananHelp">
<div id="subjekpesananHelp" class="form-text">We'll never share your order with anyone else.</div>
</div>
<div>
<label for="Pesan" class="form-label">Isi Pesan</label>
<textarea cols="40" row="10" placeholder="Masukan Pesan Anda" class="form-control" id="Pesan" aria-describedby="PesanHelp"></textarea>
<div id="PesanHelp" class="form-text">We'll never share your message with anyone else.</div>
</div>
<div class="mb-2 form-check">
<input type="checkbox" class="form-check-input" id="Check1">
<label class="form-check-label" for="Check1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Kirim Pesan</button>
</form>
<div class="col-md-6 col-sm-6 mt-5 pt-5">
<div class="mu-contact-right">
<div class="mu-contact-widget">
<h3>Alamat Rumah</h3>
<p> beralamat di depan istana kepresidenan Tampaksiring yaitu di jalan Ir Soekarno, Manukaya, Tampaksiring, Gianyar yang merupakan salah satu daerah pariwisata paling terkenal di Bali.</p>
<address>
<p><i class="fa fa-phone"></i> (0361) 457 6688</p>
<p><i class="fa-solid fa-envelope"></i> [email protected]</p>
<p><i class="fa fa-map-marker"></i> 012, Manukaya, Tampaksiring, Gianyar</p>
</address>
</div>
<div class="mu-contact-widget">
<br><br>
<h3>Jam Oprasional</h3>
<address>
<p><span>Senin - Jumat</span> 9.00 am s/d 12 pm</p>
<p><span>Sabtu</span> 9.00 am s/d 10 pm</p>
<p><span>Minggu</span> 10.00 am s/d 12 pm</p>
</address> <br>
</div>
<a class="nav-link-back text-dark link-style-type-none "aria-current="page" href="#">kembali ke atas</a>
</div>
</div>
</div> -->
<div class="container-footer text-light">
<footer class="d-flex m-auto w-100 justify-content-space-between">
<p class="footer" id="contactme" href="#contactme" >© 2023 Putu Agus Prana Dhiva Satvika. All rights reserved.</p>
<a href="https://instagram.com/odivpds_" target="_blank"><i class="fa-brands fa-instagram icons"></i></a>
<a href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCHrkVgnPpzcCWSCjsqqmbPHBldHdzfFQKGgsgJLNGNrlgjznWRdwhCdQfPCsTmKrtdcltFg" target="_blank"><i class="fa-solid fa-envelope icons"></i></a>
<a href="https://github.com/odivpds" target="_blank"><i class="fa-brands fa-github icons"></i></a>
<a href="https://api.whatsapp.com/send/?phone=6282247250393&text&type=phone_number&app_absent=0" target="_blank"><i class="fa-brands fa-whatsapp icons"></i></a>
</footer>
</div>
</div>
<!-- content out. -->
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>