|
|
<!DOCTYPE html> |
|
|
<html lang="id"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Portfolio Saya</title> |
|
|
<style> |
|
|
|
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: #6a0dad; |
|
|
color: white; |
|
|
padding: 1rem 0; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
header h1 { |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
nav { |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
nav ul li { |
|
|
margin: 0 1rem; |
|
|
} |
|
|
|
|
|
nav ul li a { |
|
|
text-decoration: none; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
main { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
section { |
|
|
margin-bottom: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
section h2 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 1rem; |
|
|
color: #6a0dad; |
|
|
} |
|
|
|
|
|
#skills ul, #projects ul { |
|
|
list-style: none; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
#skills ul li, #projects ul li { |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
form { |
|
|
max-width: 400px; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
form input, form textarea { |
|
|
padding: 0.5rem; |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 5px; |
|
|
} |
|
|
|
|
|
form button { |
|
|
background: #6a0dad; |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 0.5rem; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
form button:hover { |
|
|
background: #530a85; |
|
|
} |
|
|
|
|
|
footer { |
|
|
text-align: center; |
|
|
padding: 1rem; |
|
|
background: #f8f8f8; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
header h1 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
section h2 { |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<h1>Selamat Datang di Portfolio Saya</h1> |
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="#skills">Skills</a></li> |
|
|
<li><a href="#projects">Projects</a></li> |
|
|
<li><a href="#contact">Contact</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<section id="about"> |
|
|
<h2>Hi, Saya [Nama Kamu]</h2> |
|
|
<p>Seorang developer AI dan Blockchain yang selalu belajar.</p> |
|
|
</section> |
|
|
|
|
|
<section id="skills"> |
|
|
<h2>Skills</h2> |
|
|
<ul> |
|
|
<li>Generative AI</li> |
|
|
<li>Blockchain</li> |
|
|
<li>Software Engineering</li> |
|
|
</ul> |
|
|
</section> |
|
|
|
|
|
<section id="projects"> |
|
|
<h2>Projects</h2> |
|
|
<ul> |
|
|
<li> |
|
|
<strong>Sentiment Analysis</strong>: Web app untuk analisis sentimen dalam Bahasa Indonesia. |
|
|
</li> |
|
|
<li> |
|
|
<strong>Visualisasi Squad Sepak Bola</strong>: Tools untuk membuat formasi tim sepak bola dengan statistik pemain. |
|
|
</li> |
|
|
</ul> |
|
|
</section> |
|
|
|
|
|
<section id="contact"> |
|
|
<h2>Contact</h2> |
|
|
<form> |
|
|
<input type="text" placeholder="Nama" required> |
|
|
<input type="email" placeholder="Email" required> |
|
|
<textarea placeholder="Pesan" rows="4" required></textarea> |
|
|
<button type="submit">Kirim</button> |
|
|
</form> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
© 2025 [Nama Kamu] |
|
|
</footer> |
|
|
</body> |
|
|
</html> |
