Artikel kali ini bukan tentang vb6 tetapi tentang code html dan css untuk membuat kartu Profil Media Sosial.
Berikut dibawah ini adalah contoh output dari code html dan css untuk membuat Profil Card Media Sosial :
 |
| Profil Card Medsos |
Untuk membuatnya bukalah sebuah Aplikasi bahasa html disni saya menggunakan VSCode untuk Desktop atau ACode untuk versi Hp silahkan dipilih.
<!DOCTYPE html>
<html>
<head>
<title>Profil Media Sosial</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.profile-card {
background-color: rgba(191, 253, 255);
width: 300px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.profile-image img {
width: 120px;
height: 140px;
border-radius: 0%;
margin-bottom: 15px;
}
.profile-info h2 {
margin: 10px 0 5px;
font-size: 1.5em;
}
.profile-info p {
margin: 5px 0;
color: #666;
}
.follow-me {
font-weight: bold;
color: #007BFF;
}
.followers {
font-size: 0.9em;
}
.follow-button {
background-color:silver;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-top: 10px;
}
.follow-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="profile-card">
<div class="profile-image">
<img src="nama foto profil Anda" alt="Foto Profil">
</div>
<div class="profile-info">
<h2>Nurhasan</h2>
<p>@Nurhasanachan</p>
<p class="follow-me">Follow me</p>
<p class="followers">Followers: <span>54785</span></p>
</div>
<button class="follow-button">
<a style="text-decoration:none" href="link medsos Anda" class=
"button"></>Folow Me</a></button>
</div>
</body>
</html>
Catatan: Simpan Foto Profil Anda satu folder dengan kode html ini
Jika sudah mengetik kode diatas jalankan codenya dengan menekan tombol Run, maka hasilnya akan tampak pada gambar diatas.
Demikian artikel singkat pada hari ini tentang cara membuat Profile Card dengan code html dan css, semoga artikel ini bermanfaat buat kita semua,Amin.
Selamat mencoba semoga berhasil
No comments:
Post a Comment