Membuat Profile Card Website Keren
Hai, sobat komputer kali ini kita akan belajar bagaimana membuat sebuah profile card untuk website yang simple dan keren. Profile card sendiri dibuat dengan maksud memperkenalkan diri sang pemilik website sehingga pengunjung mengetahui siapa sih pemilik website atau blog tersebut dan bagaimana profile diri sang ownernya. Langsung lanjut ke cara membuatnya aja guys jangan kelamaan ngobrol nanti gak selesai - selesai.
Seperti biasa yang perlu kita lakukan adalah membuat file css dan htmlnya ya guys kalo ga nanti source codenya mau di simpen dimana :D.
Kemudian copy dan pastekan source code dibawah ini pada file html ya awas!! jangan sampe ketuker sama file cssnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-card">
<div class="top">
<div id="rectangle"></div>
<img src="pic.jpg" alt="">
</div>
<div class="content">
<h2><b>Sudut Komputer</b></h2>
<h3>Blogger - Youtuber</h3>
<p><strong>Sharing</strong> Pengetahun seputar komputer.</p>
<ul>
<li><a class="fa fa-facebook" href="#"></a></li>
<li><a class="fa fa-twitter" href="#"></a></li>
<li><a class="fa fa-google-plus" href="#"></a></li>
<li><a class="fa fa-youtube" href="#"></a></li>
</ul>
</div>
<div class="footer">
<div id="rectangle1">
</div>
<p>Sudutkom.blogspot.com</p>
</div>
</div>
</body>
</html>
Selanjutnya guys kita buat stylenya biar kelihatan rapih dan keren dengan CSS, berikut adalah source codenya guys langsung comot dan pastekan aja gratis tisssss.
body{
margin: 0;
padding: 0;
background: #191730;
}
.profile-card{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: rgb(255,254,254);
width: 400px;
overflow: hidden;
font-family: 'Montserrat',sans-serif;
color: #555757;
box-shadow: 1px 2px 8px 3px;
}
.top{
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.top img{
padding: 10px 0 0 100px;
width: 200px;
height: 200px;
}
#rectangle{
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 400px solid white;
position: absolute;
bottom: 0;
}
.content{
padding: 0 10px;
text-align: center;
overflow: hidden;
padding: 10px;
}
.content h2{
margin: 0 0 8px 0px;
text-transform: uppercase;
}
.content h3{
margin: 0;
text-transform: uppercase;
}
.content ul{
margin: 0;
padding: 0;
}
.content ul li{
list-style: none;
display: inline-block;
margin: 0 8px;
}
.content ul li a{
text-decoration: none;
color: white;
font-size: 20px;
background: grey;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 30px;
text-align: center;
transition: 0.3s all;
}
.content ul li a:hover{
transform: scale(1.2);
}
#rectangle1{
width: 0;
height: 0;
border-bottom: 30px solid transparent;
border-right: 400px solid white;
position: absolute;
top: -1px;
}
.footer{
width: 100%;
height: 70px;
position: relative;
background: #314652;
color: white;
}
.footer p{
display: block;
margin: 0;
padding: 26px;
}
Untuk mengganti foto bisa kalian sesuaikan ya dimana letaknya dan nama file untuk foto online dari internet bisa kalian pastekan linknya guys, jangan lupa bereksperimen dengan warna guys 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.
0 Response to "Membuat Profile Card Website Keren"
Post a Comment