<?php
include"session_start.php";
?>
<!-- https://chatgpt.com/c/6976e6cc-76f0-8323-be8b-f3f50a60f99b -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>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 {
width: 55px;
height: 55px;
border-radius: 50%;
background: white;
color: #0d47a1;
font-weight: bold;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
}
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.5), rgba(0,0,0,0.5)),
url("https://images.unsplash.com/photo-1588072432836-e10032774350") center/cover no-repeat;
color: white;
padding: 100px 20px;
text-align: center;
}
.hero h1 {
font-size: 42px;
margin-bottom: 10px;
}
.hero p {
font-size: 18px;
margin-bottom: 25px;
}
.btn {
background: #ffc107;
color: #333;
padding: 12px 22px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.btn:hover {
background: #ffb300;
}
section {
padding: 60px 20px;
max-width: 1100px;
margin: auto;
}
section h2 {
text-align: center;
margin-bottom: 40px;
color: #0d47a1;
}
.about p {
text-align: center;
max-width: 800px;
margin: auto;
line-height: 1.7;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
}
.card {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
text-align: center;
transition: 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-bottom: 10px;
color: #1976d2;
}
.contact {
background: #e3f2fd;
border-radius: 12px;
padding: 40px 20px;
}
.contact p {
text-align: center;
margin: 8px 0;
}
footer {
background: #0d47a1;
color: white;
text-align: center;
padding: 15px;
margin-top: 50px;
font-size: 14px;
}
@media (max-width: 600px) {
.hero h1 {
font-size: 32px;
}
nav {
margin-top: 10px;
}
}
</style>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
.container { max-width: 600px; margin: 20px auto; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.profile-pic { text-align: center; margin-bottom: 20px; }
.profile-pic img { width: 150px; height: 150px; border-radius: 50%; border: 3px solid #007bff; }
.info { margin-bottom: 15px; }
.info label { font-weight: bold; display: inline-block; width: 150px; }
.info span { color: #555; }
footer { text-align: center; padding: 10px; background: #007bff; color: white; margin-top: 20px; }
</style>
</head>
<body>
<!-- HEADER -->
<header>
<div class="logo-box">
<div class="logo"><img src="../img/logo.png" width="80" height="80"></div>
<div>
<strong>SMK DIGITAL</strong><br>
<small>Sekolah Teknologi Masa Depan</small>
</div>
</div>
<nav>
<a href="#">Beranda</a>
<a href="profile.php">Profile</a>
<a href="upload_berkas.php">Upload berkas</a>
<a href="kontak.php">Kontak</a>
<a href="bantuan.php">Bantuan</a>
<a href="logout.php">keluar</a>
</nav>
</header>
<?php
include"../koneksi.php";
$perintah="select * from pendaftar";
$query=mysqli_query($conn,$perintah);
$data=mysqli_fetch_array($query);
?>
<div class="container">
<div class="profile-pic">
<img src="img/ahmad.jpg" alt="Foto Profil Siswa">
</div>
<div class="info">
<label>Nama Lengkap</label>
<span><?=$data['nama'];?></span>
</div>
<div class="info">
<label>NISN </label>
<span><?=$data['nisn'];?></span>
</div>
<div class="info">
<label>Tempat Lahir</label>
<span><?=$data['tempat_lahir'];?></span>
</div>
<div class="info">
<label>Tanggal Lahir</label>
<span><?=$data['tanggal_lahir'];?></span>
</div>
<div class="info">
<label>jenis Kelamin</label>
<span><?=$data['jenis_kelamin'];?></span>
</div>
<div class="info">
<label>Asal Sekolah</label>
<span><?=$data['asal_sekolah'];?></span>
</div>
<div class="info">
<label>Jurusan </label>
<span><?=$data['jurusan_pilihan'];?></span>
</div>
<div class="info">
<label>Nomor HP</label>
<span><?=$data['no_hp'];?></span>
</div>
<div class="info">
<label>Alamat</label>
<span><?=$data['alamat'];?></span>
</div>
<div class="info">
<label>Tanggal Daftar</label>
<span><?=$data['tanggal_daftar'];?></span>
</div>
<div class="info">
<label>Username</label>
<span><?=$data['username'];?></span>
</div>
<div class="info">
<label>Password</label>
<span>***</span>
</div>
</div>
<!-- FOOTER -->
<footer>
© 2026 SMK DIGITAL | Website Resmi Sekolah
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar