Web Design : Cara Membuat Profile Card Menggunakan HTML & CSS - Suka Code
Hallo selamat siang, kali ini kita akan belajar bagaimana cara membuat
sebuah profile card untuk website yang simpel dan keren. Profile card sendiri
dibuat dengan maksud memperkenalkan diri oleh sang pemilik website sehingga
pengunjung mengetahui siapa sih pemilik website atau blog tersebut, dan
bagaimana profile diri sang ownernya. Dari pada kita banyak bicara mending langsung saja kita ke tutorialnya.
Seperti biasa yang perlu kita lakukan adalah membuat folder didalam folder ada 3 file yaitu :
index.html style.css dan gambar.
Kemudian copy dan pastekan source code dibawah ini pada file HTML.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Belajar Bersama Suka Code</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<img src="suka-code.png" alt="Suka-Code">
<h1>Muhammad Ridwan</h1>
<p>Web Designer</p>
<p>Hallo, perkenalkan nama saya Muhammad Ridwan</p>
<button type="button" name="button">Info</button>
</div>
</body>
</html>
Hasil dari code di atas :
Selanjutnya kita buat stylenya biar kelihatan rapih dan keren dengan CSS, berikut ini Source Code nya salin dan pastekan di file style.css
body{
margin: 0;
padding: 0;
background-color: #3598dc;
}
.container{
width: 255px;
background-color: #fff;
text-align: center;
padding: 40px;
margin: auto;
margin-top: 5%;
font-family: sans-serif;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 3px;
overflow: hidden;
}
img{
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
}
h1{
font-size: 25px;
color: #292525;
}
p{
font-size: 18px;
color: #555;
overflow: hidden;
width: 255px;
}
button{
background: #3598dc;
border: none;
width: 50%;
height: 40px;
color: #fff;
border-radius: 3px;
font-size: 13px;
outline: none;
}
button:hover{
background-color:#fff;
border:2px solid #3598dc;
color:Black;
width: 50%;
font-size: 14px;
}
Setelah kita memasukkan code CSS nya di dalam file style.css maka hasil :
Untuk mengganti foto bisa kalian sesuaikan yah dimana letaknya dan nama file untuk foto online dari internet bisa kalian pastekan linknya, jangan lupa bereksperimen dengan warna otak atik aja warnanya biar sesuai dengan yang kalian sukai dan cocok dengan website kalian. Sekian artikel dari saya semoga bermanfaat dan sampai jumpa di artikel selanjutnya.
Suka Code Blog adalah website dengan kumpulan konten seputar Game Development, Web Programming, Android Programming, Windows Programming, dan lain-lain.
Belum ada Komentar untuk "Web Design : Cara Membuat Profile Card Menggunakan HTML & CSS - Suka Code"
Posting Komentar