<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pendaftaran Siswa Baru | SMK DIGITAL</title>
<style>
* {
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
body {
margin: 0;
background: #f4f6f9;
color: #333;
}
header {
background: linear-gradient(135deg, #0d47a1, #1976d2);
color: white;
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo-box {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
width: 55px;
height: auto;
}
nav a {
color: white;
text-decoration: none;
margin: 0 12px;
font-weight: 500;
}
nav a:hover {
text-decoration: underline;
}
.hero {
background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
color: white;
padding: 80px 20px;
text-align: center;
}
.hero h1 {
font-size: 38px;
margin-bottom: 10px;
}
.hero p {
font-size: 18px;
margin-bottom: 25px;
}
section {
padding: 50px 20px;
max-width: 1100px;
margin: auto;
}
section h2 {
text-align: center;
margin-bottom: 30px;
color: #0d47a1;
}
/* INFO BOX */
.info-box {
background: #e3f2fd;
padding: 25px;
border-radius: 12px;
margin-bottom: 40px;
line-height: 1.7;
}
.info-box ul {
padding-left: 18px;
}
/* FORM */
.form-container {
background: white;
padding: 35px 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-width: 900px;
margin: auto;
}
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 10px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 14px;
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: #1976d2;
}
.form-full {
grid-column: 1 / -1;
}
.btn-submit {
background: #1976d2;
color: white;
border: none;
padding: 12px 20px;
border-radius: 6px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
width: 100%;
margin-top: 15px;
}
.btn-submit:hover {
background: #0d47a1;
}
footer {
background: #0d47a1;
color: white;
text-align: center;
padding: 15px;
margin-top: 50px;
font-size: 14px;
}
@media (max-width: 600px) {
.hero h1 {
font-size: 30px;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div class="logo-box">
<div class="logo"><img src="img/logo.png" alt="Logo SMK DIGITAL"></div>
<div>
<strong>SMK DIGITAL</strong><br>
<small>Sekolah Teknologi Masa Depan</small>
</div>
</div>
<nav>
<a href="index.php">Beranda</a>
<a href="login.php">Masuk</a>
<a href="spmb.php">SPMB</a>
<a href="#kontak">Kontak</a>
</nav>
</header>
<!-- HERO -->
<section class="hero">
<h1>Pendaftaran Siswa Baru</h1>
<p>Tahun Pelajaran 2026 / 2027 – SMK DIGITAL</p>
</section>
<!-- INFO -->
<section>
<div class="info-box">
<h2>Informasi Pendaftaran</h2>
<ul>
<li>Gelombang 1: Januari – Maret</li>
<li>Gelombang 2: April – Juni</li>
<li>Seleksi berdasarkan nilai rapor & wawancara</li>
<li>Jurusan tersedia: RPL, TKJ, Multimedia, Bisnis Digital</li>
</ul>
</div>
<!-- FORM -->
<h2>Formulir Pendaftaran Online</h2>
<div class="form-container">
<form action="proses-daftar.php" method="post">
<div class="form-grid">
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="nama" required>
</div>
<div class="form-group">
<label>NISN</label>
<input type="text" name="nisn" required>
</div>
<div class="form-group">
<label>Tempat Lahir</label>
<input type="text" name="tempat_lahir" required>
</div>
<div class="form-group">
<label>Tanggal Lahir</label>
<input type="date" name="tanggal_lahir" required>
</div>
<div class="form-group">
<label>Jenis Kelamin</label>
<select name="jk" required>
<option value="">-- Pilih --</option>
<option>Laki-laki</option>
<option>Perempuan</option>
</select>
</div>
<div class="form-group">
<label>Asal Sekolah</label>
<input type="text" name="asal_sekolah" required>
</div>
<div class="form-group">
<label>Jurusan Pilihan</label>
<select name="jurusan" required>
<option value="">-- Pilih Jurusan --</option>
<option>Rekayasa Perangkat Lunak</option>
<option>Teknik Komputer & Jaringan</option>
<option>Multimedia</option>
<option>Bisnis Digital</option>
</select>
</div>
<div class="form-group">
<label>Nomor HP / WhatsApp</label>
<input type="tel" name="hp" required>
</div>
<div class="form-group form-full">
<label>Alamat Lengkap</label>
<textarea name="alamat" required></textarea>
</div>
</div>
<button type="submit" class="btn-submit">Daftar Sekarang</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer id="kontak">
© 2026 SMK DIGITAL | Sistem Penerimaan Murid Baru
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar