INDEX.HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Hadid Abdilla</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Hadid<span>.</span></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="keahlian.html">Keahlian</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="hero-text">
<h1>Halo, Saya <span>Hadid Abdilla</span></h1>
<p>Mahasiswa Informatika yang tertarik pada pengembangan web, machine learning, dan analisis data.</p>
<div class="btn-group">
<a href="portfolio.html" class="btn btn-primary">Lihat Portfolio</a>
<a href="kontak.html" class="btn btn-outline">Hubungi Saya</a>
</div>
</div>
<div class="hero-image">
<img src="https://i.pinimg.com/originals/76/1f/8a/761f8a312a6e5033f9291c27d29d3e06.jpg" alt="Foto Profil">
</div>
</section>
<footer>
<p>© 2026 Hadid Abdilla. All Rights Reserved.</p>
</footer>
</body>
</html>
TENTANG.HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tentang Saya</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Hadid<span>.</span></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="keahlian.html">Keahlian</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="section-title">
<h2>Tentang Saya</h2>
<p>Profil singkat dan perjalanan saya.</p>
</div>
<div class="about">
<img src="https://i.pinimg.com/originals/76/1f/8a/761f8a312a6e5033f9291c27d29d3e06.jpg" alt="Tentang Saya">
<div>
<p>Saya adalah mahasiswa Informatika yang memiliki minat besar pada teknologi, khususnya pengembangan web, data science, dan machine learning.</p>
<br>
<p>Saya senang membangun aplikasi sederhana yang bermanfaat dan terus belajar teknologi baru untuk meningkatkan kemampuan saya.</p>
<br>
<p><strong>Lokasi:</strong> Lampung, Indonesia</p>
<p><strong>Pendidikan:</strong> S1 Informatika</p>
<p><strong>Email:</strong> hadid@gmail.com</p>
</div>
</div>
</div>
<footer>
<p>© 2026 Hadid Abdilla. All Rights Reserved.</p>
</footer>
</body>
</html>
KEAHLIAN.HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keahlian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Hadid<span>.</span></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="keahlian.html">Keahlian</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="section-title">
<h2>Keahlian Saya</h2>
<p>Beberapa teknologi yang saya kuasai.</p>
</div>
<div class="skills">
<div class="skill">
<div class="skill-header"><span>HTML</span><span>95%</span></div>
<div class="progress"><span style="width:95%"></span></div>
</div>
<div class="skill">
<div class="skill-header"><span>CSS</span><span>90%</span></div>
<div class="progress"><span style="width:90%"></span></div>
</div>
<div class="skill">
<div class="skill-header"><span>JavaScript</span><span>85%</span></div>
<div class="progress"><span style="width:85%"></span></div>
</div>
<div class="skill">
<div class="skill-header"><span>Python</span><span>88%</span></div>
<div class="progress"><span style="width:88%"></span></div>
</div>
<div class="skill">
<div class="skill-header"><span>Machine Learning</span><span>80%</span></div>
<div class="progress"><span style="width:80%"></span></div>
</div>
</div>
</div>
<footer>
<p>© 2026 Hadid Abdilla. All Rights Reserved.</p>
</footer>
</body>
</html>
PORTFOLIO.HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Hadid<span>.</span></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="keahlian.html">Keahlian</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>Beberapa proyek yang pernah saya kerjakan.</p>
</div>
<div class="portfolio-grid">
<div class="project">
<img src="https://picsum.photos/600/400?random=1" alt="Proyek 1">
<div class="project-content">
<h3>Website CRUD</h3>
<p>Aplikasi CRUD sederhana menggunakan HTML, CSS, JavaScript, dan PHP.</p>
</div>
</div>
<div class="project">
<img src="https://picsum.photos/600/400?random=2" alt="Proyek 2">
<div class="project-content">
<h3>Prediksi Harga Crypto</h3>
<p>Analisis dan prediksi harga BNB dan ETH menggunakan Machine Learning.</p>
</div>
</div>
<div class="project">
<img src="https://picsum.photos/600/400?random=3" alt="Proyek 3">
<div class="project-content">
<h3>Dashboard Data</h3>
<p>Visualisasi data interaktif menggunakan Python dan Matplotlib.</p>
</div>
</div>
</div>
</div>
<footer>
<p>© 2026 Hadid Abdilla. All Rights Reserved.</p>
</footer>
</body>
</html>
KONTAK.HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontak</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="logo">Hadid<span>.</span></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="keahlian.html">Keahlian</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="section-title">
<h2>Hubungi Saya</h2>
<p>Silakan kirim pesan melalui formulir berikut.</p>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Informasi Kontak</h3>
<p><strong>Email:</strong> hadid@gmail.com</p>
<p><strong>Telepon:</strong> +62 812-3456-7890</p>
<p><strong>Lokasi:</strong> Lampung, Indonesia</p>
<p><strong>GitHub:</strong> github.com/hadidabdilla</p>
<p><strong>Instagram:</strong> @hadid814</p>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Nama Anda" required>
<input type="email" placeholder="Email Anda" required>
<textarea placeholder="Tulis pesan Anda..." required></textarea>
<button type="submit" class="btn btn-primary" style="border:none;cursor:pointer;">Kirim Pesan</button>
</form>
</div>
</div>
</div>
<footer>
<p>© 2026 Hadid Abdilla. All Rights Reserved.</p>
</footer>
</body>
</html>
STYLE.CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
background:#f5f7fb;
color:#333;
line-height:1.6;
}
header{
background:#0f172a;
position:sticky;
top:0;
z-index:1000;
}
nav{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
}
.logo{
color:#fff;
font-size:24px;
font-weight:bold;
}
.logo span{
color:#2563eb;
}
nav ul{
display:flex;
list-style:none;
gap:20px;
}
nav a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:0.3s;
}
nav a:hover{
color:#2563eb;
}
.hero{
max-width:1100px;
margin:auto;
min-height:80vh;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
padding:40px 20px;
}
.hero-text{
flex:1;
}
.hero-text h1{
font-size:48px;
margin-bottom:15px;
color:#0f172a;
}
.hero-text h1 span{
color:#2563eb;
}
.hero-text p{
font-size:18px;
color:#555;
margin-bottom:25px;
}
.btn-group{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.btn{
display:inline-block;
padding:12px 24px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:0.3s;
}
.btn-primary{
background:#2563eb;
color:#fff;
}
.btn-primary:hover{
background:#1d4ed8;
}
.btn-outline{
border:2px solid #2563eb;
color:#2563eb;
}
.btn-outline:hover{
background:#2563eb;
color:#fff;
}
.hero-image{
flex:1;
text-align:center;
}
.hero-image img{
width:320px;
max-width:100%;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}
.container{
max-width:1100px;
margin:auto;
padding:60px 20px;
}
.section-title{
text-align:center;
margin-bottom:40px;
}
.section-title h2{
font-size:36px;
color:#0f172a;
margin-bottom:10px;
}
.section-title p{
color:#666;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}
.card{
background:#fff;
padding:25px;
border-radius:16px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}
.card:hover{
transform:translateY(-5px);
}
.card h3{
margin-bottom:10px;
color:#2563eb;
}
.about{
display:grid;
grid-template-columns:1fr 2fr;
gap:40px;
align-items:center;
}
.about img{
width:100%;
border-radius:16px;
}
.skills{
display:grid;
gap:20px;
}
.skill{
background:#fff;
padding:20px;
border-radius:14px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.skill-header{
display:flex;
justify-content:space-between;
margin-bottom:8px;
font-weight:600;
}
.progress{
width:100%;
height:10px;
background:#e5e7eb;
border-radius:999px;
overflow:hidden;
}
.progress span{
display:block;
height:100%;
background:#2563eb;
border-radius:999px;
}
.portfolio-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}
.project{
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.project img{
width:100%;
height:180px;
object-fit:cover;
}
.project-content{
padding:20px;
}
.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}
.contact-info, .contact-form{
background:#fff;
padding:30px;
border-radius:16px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.contact-info p{
margin-bottom:15px;
}
.contact-form input,
.contact-form textarea{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #d1d5db;
border-radius:10px;
outline:none;
}
.contact-form textarea{
min-height:120px;
resize:vertical;
}
footer{
background:#0f172a;
color:#fff;
text-align:center;
padding:25px;
margin-top:60px;
}
@media(max-width:768px){
nav{
flex-direction:column;
gap:15px;
}
nav ul{
flex-wrap:wrap;
justify-content:center;
}
.hero{
flex-direction:column-reverse;
text-align:center;
}
.hero-text h1{
font-size:36px;
}
.about{
grid-template-columns:1fr;
}
.contact-wrapper{
grid-template-columns:1fr;
}
}
Komentar
Posting Komentar