<!-- 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>
</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="#profil">Profil</a>
<a href="#jurusan">Jurusan</a>
<a href="#kontak">Kontak</a>
<a href="login.php">Masuk</a>
<a href="spmb.php">SPMB</a>
</nav>
</header>
<!-- HERO -->
<section class="hero">
<h1>Selamat Datang di SMK DIGITAL</h1>
<p>Mewujudkan generasi unggul di bidang teknologi dan industri digital</p>
<a href="#profil" class="btn">Lihat Profil Sekolah</a>
</section>
<!-- PROFIL -->
<section id="profil" class="about">
<h2>Profil Sekolah</h2>
<p>
SMK DIGITAL adalah sekolah menengah kejuruan yang berfokus pada pengembangan
kompetensi teknologi informasi, rekayasa perangkat lunak, dan keterampilan digital.
Kami membekali peserta didik dengan pengetahuan, sikap, dan keterampilan
agar siap menghadapi dunia kerja dan industri masa depan.
</p>
</section>
<!-- JURUSAN -->
<section id="jurusan">
<h2>Program Keahlian</h2>
<div class="cards">
<div class="card">
<h3>Rekayasa Perangkat Lunak</h3>
<p>Pemrograman web, mobile, database, dan aplikasi modern.</p>
</div>
<div class="card">
<h3>Teknik Komputer & Jaringan</h3>
<p>Instalasi jaringan, server, keamanan sistem, dan infrastruktur IT.</p>
</div>
<div class="card">
<h3>Multimedia</h3>
<p>Desain grafis, video editing, animasi, dan konten kreatif digital.</p>
</div>
<div class="card">
<h3>Bisnis Digital</h3>
<p>Digital marketing, e-commerce, dan manajemen bisnis berbasis teknologi.</p>
</div>
</div>
</section>
<!-- KONTAK -->
<section id="kontak" class="contact">
<h2>Kontak Kami</h2>
<p>📍 Alamat: Jl. Teknologi No. 123, Indonesia</p>
<p>📞 Telp: (021) 12345678</p>
<p>📧 Email: info@smkdigital.sch.id</p>
</section>
<!-- FOOTER -->
<footer>
© 2026 SMK DIGITAL | Website Resmi Sekolah
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar