Desember 03, 2025
Berikut saya buatkan HTML lengkap yang mengikuti format kertas yang Anda foto:
✔ Logo di kiri
✔ Nama & alamat pondok di kanan logo
✔ Garis panjang di bawah kop
✔ Bagian data pribadi
✔ Bagian data orang tua
✔ Tanda tangan di kanan bawah
Silakan langsung pakai atau edit isinya.
✅ SCRIPT HTML LENGKAP
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Formulir Santri</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
line-height: 1.5;
}
/* KOP SURAT */
.kop {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.logo {
width: 90px;
height: 90px;
border: 2px solid #000;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
.kop-teks {
display: flex;
flex-direction: column;
font-size: 18px;
font-weight: bold;
}
.kop-teks small {
font-size: 14px;
font-weight: normal;
}
/* Garis panjang */
.line {
border-top: 2px solid #000;
margin: 10px 0 20px 0;
}
/* Bagian judul data */
h3 {
margin-bottom: 5px;
margin-top: 25px;
text-transform: uppercase;
font-size: 16px;
}
/* Tanda tangan */
.ttd {
margin-top: 80px;
width: 100%;
text-align: right;
font-size: 16px;
}
</style>
</head>
<body>
<!-- KOP -->
<div class="kop">
<div class="logo">Logo</div>
<div class="kop-teks">
Pondok Pesantren A
<small>Jl. Raya Ahmad Yani</small>
</div>
</div>
<div class="line"></div>
<!-- DATA PRIBADI -->
<h3>Data Pribadi</h3>
<p>Nama : Fulan</p>
<p>NIK : 12345</p>
<p>NISN : 3456</p>
<!-- DATA ORANG TUA -->
<h3>Data Orang Tua</h3>
<p>Nama Ayah : Muhammad</p>
<p>...</p>
<p>...</p>
<!-- TANDA TANGAN -->
<div class="ttd">
Solo, 19 Des ’24<br>
Wali Santri<br><br><br>
____________________<br>
Muhammad
</div>
</body>
</html>
Mau saya buatkan versi:
✅ Format siap cetak A4
✅ Ada tabel
✅ Bisa di-isi otomatis pakai PHP
✅ Ada garis ganda pada kop
?
Tinggal bilang saja mau pengembangan model yang mana.
Posted in: CSS
0 komentar:
Posting Komentar