Skip to content

Instantly share code, notes, and snippets.

@ihsanfaisal

ihsanfaisal/profil.html

Created April 15, 2025 00:55
Show Gist options
  • Save ihsanfaisal/4a1458d623a69f12e4fe4a768f113b67 to your computer and use it in GitHub Desktop.
Save ihsanfaisal/4a1458d623a69f12e4fe4a768f113b67 to your computer and use it in GitHub Desktop.
Download ZIP
Profil Siswa
Raw
profil.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
<style>
body {
padding: 0;
min-height: 100vh;
background-color: #ffffff;
}
.profile-header {
background-color: #f8f9fa;
padding: 2rem 0;
margin-bottom: 2rem;
}
.profile-img {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background-color: #60c3ff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.profile-icon {
font-size: 100px;
color: #ffffff;
}
.social-links {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 20px;
}
.social-links a {
font-size: 24px;
color: #6c757d;
transition: color 0.3s;
text-decoration: none;
}
.social-links a:hover {
color: #0d6efd;
}
</style>
</head>
<body>
<div class="profile-header text-center">
<div class="container">
<div class="profile-img">
<i class="bi bi-person-circle profile-icon"></i>
</div>
<h1 class="mt-3">Biodata Diri</h1>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div class="mb-3">
<h5 class="card-title"><i class="bi bi-person me-2"></i>Nama</h5>
<p class="card-text">Muhammad</p>
</div>
<div class="mb-3">
<h5 class="card-title"><i class="bi bi-mortarboard me-2"></i>Kelas</h5>
<p class="card-text">X RPL 1</p>
</div>
<div class="mb-3">
<h5 class="card-title"><i class="bi bi-heart me-2"></i>Hobi</h5>
<p class="card-text">Membaca dan Coding</p>
</div>
</div>
</div>
<div class="social-links">
<a href="https://instagram.com/username" target="_blank"><i class="bi bi-instagram"></i></a>
<a href="https://github.com/username" target="_blank"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment