Dalam kesempatan kali ini saya akan membagikan cara membuat profile card Dengan menggunakan HTML DAN CSS.
Langsung saja kita ke tutorial nya.
Pertama kalian buat dulu file index.html nya,kemudian paste kan kode berikut:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="img">
<img src="profile. png" alt="" srcset="">
</div>
<div class="content ">
<h2>JONH DUE</h2>
<p>Web devdeloper</p>
<div class="center">
<div class="box center">
<h1>1000</h1>
<p>Followers</p>
</div>
<div class=" box center">
<h1>125</h1>
<p>Following</p>
</div>
</div>
<button class="btn">FOLLOW</button>
</div>
</div>
</body>
</html>
Kemudian buat lagi file style.css nya,dan pastekan kode berikut:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: linear-gradient( to right,#ff9472, #f2709c ) ;
color: rgb(34, 34, 34);
height: 100vh; display: flex;
justify-content : center;
align-items: center;
}
.card{
width: 320px;
height: 340px;
background: white;
border-radius : 10px;
position: relative;
display : flex;
cursor: pointer;
justify-content : center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.13);
}
.card::before{
Content:"";
position: absolute;
top: 26;
width: 95%;
height: 120px;
z-index: 1;
border-radius : 10px 10px 0 0;
background : #ff9472;
box-shadoW: 0 0 20px rgba(0, 0, 0, 0.13);
transform-origin: bottom;
transition: transform .4s;
}
.card:hover::before{ transform: translateY(-5px) scaleY(1 .2) ; }
.card .img {
width: 120px;
height: 120px;
border-radius: 50%;
Z-index: 10;
transform: translateY( 50px);
border: 10px solid white;
overflow: hidden;
position: absolute;
}
.card .img img{
width: 120%;
height: 120%;
transform: translate(-8%, -8 );
}
.content {
width: 100%;
height: 100%;
transform: translateY( 170px);
flex-direction : column;
display: flex;
z-index: 20;
align-items: center;
}
.content p{
margin: Oem 0;
}
.card .img {
width: 120px;
height: 120px;
border-radius: 50%;
Z-index: 10;
transform: translateY(50px);
border: 10px solid white;
overflow: hidden;
position: absolute;
}
.card.img img {
width: 120%;
height: 120%;
transform: translate(-8%, -8%);
}
.content{
width: 100%;
height: 100%;
transform: translateY(170px);
flex-direction : column;
display: flex;
z-index: 20;
align-items: center;
}
.content p{
margin: Oem 0;
}
Untuk hasilnya silahkan coba sendiri aja hehe.
mungkin segitu dulu untuk hari ini,terima kasih sudah berkunjung di blog saya.
Tags
HTML