TUGAS PWEB-D MINGGU KE-2 (MEMBUAT CV HTML)
TUGAS PWEB-D MINGGU KE-2 (MEMBUAT CV HTML)
Pada minggu kedua pemrograman web kelas D ditugaskan membuat CV menggunakan HTML. Disini saya memiliki 4 file dan satu folder.
Link Repository : https://github.com/bagusistighfar86/bagusistighfar86.github.io/tree/main/pweb-d/pertemuan2
Link Web : https://bagusistighfar86.github.io/pweb-d/pertemuan2/
1. index.html
Menyimpan code data umum tentang profil saya
<!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>CV Bagus</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="foto">
<img src="gambar/foto.png" alt="Foto Bagus">
</div>
<h1 class="bagus">BAGUS</h1>
<div class="tabel">
<h2 class="Biodata">Biodata</h2>
<table class="Biodata">
<tr>
<td class="create-bold">Nama Lengkap</td>
<td>Muhammad Bagus Istigfar</td>
</tr>
<tr>
<td class="create-bold">Tempat, Tanggal Lahir</td>
<td>Probolinggo, 9 November 2000</td>
</tr>
<tr>
<td class="create-bold">Jenis Kelamin</td>
<td>Laki - Laki</td>
</tr>
<tr>
<td class="create-bold">Agama</td>
<td>Islam</td>
</tr>
<tr>
<td class="create-bold">Alamat</td>
<td>Jl. Ir. H. Juanda No.67</td>
</tr>
<tr>
<td class="create-bold">Status</td>
<td>Pacaran</td>
</tr>
<tr>
<td class="create-bold">Pekerjaan</td>
<td>Mahasiswa</td>
</tr>
</table>
</div>
<div class="lanjut">
<p>Ingin Tahu Lebih Lanjut</p>
<div class="btn">
<form action="biodata_lanjut.html">
<button>Klik untuk lanjut!</button>
</form>
</div>
</div>
</div>
</body>
</html>
2. biodata_lanjut.html
Menyimpan code data lanjutan tentang saya
<!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>CV Bagus</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="tabel">
<h2 class="Pendidikan">Riwayat Pendidikan</h2>
<table class="Pendidikan">
<thead class="create-bold">
<th>Jenjang Pendidikan</td>
<th>Keterangan</td>
<th>Tahun</td>
<thead>
<tr>
<td>Sekolah Dasar</td>
<td>SDN Sukabumi 10 Probolinggo</td>
<td>2007 - 2013</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>SMPN 1 Probolinggo</td>
<td>2013 - 2016</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>SMPN 1 Probolinggo</td>
<td>2016 - 2019</td>
</tr>
<tr>
<td>Perguruan Tinggi</td>
<td>Informatika Institut Teknologi Sepuluh Nopember</td>
<td>2019 - Sekarang</td>
</tr>
</table>
</div>
<div class="tabel">
<h2 class="InfoUmum">Informasi Umum</h2>
<table class="InfoUmum">
<tr>
<td>Nomor HP</td>
<td>082229334329</td>
<tr>
<tr>
<td>Email</td>
<td>bagusistighfar86@gmail.com</td>
</tr>
<tr>
<td>Instagram</td>
<td><a href="https://www.instagram.com/bagusistighfar/">bagusistighfar</a></td>
</tr>
<tr>
<td rowspan="3"> Hobi</td>
<td>Bermain Basket</td>
</tr>
<tr ba>
<td bgcolor="#92caf0">Mengerjakan PR</td>
</tr>
<tr>
<td>Videografi</td>
</tr>
</table>
</div>
</div>
</body>
</html>
3. style.css
Menyimpan code style berupa css untuk menambah hiasan pada tampilan HTML
@import url(reset.css);
body{
font-family: Arial, Helvetica, sans-serif;
background-image: url(gambar/leaves.png);
}
.container{
width: 1000px;
height: 1500px;
margin : 0 auto;
padding : 100px 0;
}
.foto img {
display: block;
margin : 0 auto;
background: rgb(135,206,250);
background: linear-gradient(180deg, rgba(135,206,250,0) 50%, rgba(135,206,250,1) 100%);
border-radius: 50%;
width: 350px;
}
h1.bagus {
font-size: 35px;
font-weight: bold;
text-align: center;
margin-top: 30px;
margin-bottom: 50px;
}
.tabel h2{
font-weight: bold;
font-size: 25px;
margin-left: 15px;
}
.tabel table{
font-size: 20px;
margin-top: 20px;
width: 100%;
}
.create-bold{
font-weight: bold;
}
table tr:nth-child(odd){
background-color: #92caf0;
}
table tr:nth-child(even){
background-color: #a8cfe6;
}
table,thead,th, tr,td{
padding: 10px;
}
.tabel{
background-color: #a8cfe6;
padding: 30px;
padding-bottom: 20px;
border-radius: 20px;
margin-bottom: 50px;
}
table.Pendidikan tr:nth-child(odd){
background-color: #a8cfe6;
}
table.Pendidikan tr:nth-child(even){
background-color: #92caf0;
}
table.Pendidikan thead th{
background-color: #92caf0;
}
.lanjut p{
font-size: 15px;
text-align: center;
}
.lanjut button{
display: block;
margin: 10px auto;
font-size: 15px;
border-radius: 10px;
background-color: #a8cfe6;
padding : 10px 30px;
border-width: 0px;
box-shadow: 0px 5px 5px #4CAF50;
}
button:hover {
background-color: #4CAF50;
color: white;
}
.InfoUmum a{
text-decoration: none;
color: salmon;
}
4. reset.css
Menyimpan code untuk reset setting style html agar lebih mudah dalam memodifikasi css. Code ini saya dapatkan dari https://meyerweb.com/eric/tools/css/reset/. Dan informasi ini saya dapatkan dari youtube Sandhika Galih Web Programming UNPAS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
5. Folder gambar untuk menyimpan resource gambar
Komentar
Posting Komentar