1881 ⁓ 193∞
Seçkin Üye
Merhaba dostlar ben TRKByte. Bu konuda Kişisel siteniz için harika bir profil kartı yapacağız. İsterseniz kodlara geçelim
- Öncelikle bir klasör oluşturup içerisine index.html, style.css, bg.jpg adında bir arkaplan ve pc.png adında bir profil fotoğrafı hazırlayın.
- Dosyaları oluşturduktan sonra ise index.html dosyamızı kodlarımızı girelim.
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="profile-card">
<div class="top-section">
<i class="message fas fa-envelope"></i>
<i class="notif fas fa-bell"></i>
<div class="pic">
<img src="pic.png" alt="">
</div>
<div class="name">TRKByte</div>
<div class="tag">@TRKByte</div>
</div>
<div class="bottom-section">
<div class="social-media">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fas fa-link"></i></a>
</div>
<div class="video">99 <span>Video</span></div>
<div class="border"></div>
<div class="abone">999K <span>Abone</span></div>
<div class="border"></div>
<div class="izlenme">9M <span>İzlenme</span></div>
</div>
</div>
</body>
</html>
<!-- TRKByte-->[/CODE]
- index.html dosyamıza kodlarımızı girdikten sonra style.css dosyamızı açıp kodlarımızı girelim.
CSS:
*{
margin: 0;
padding: 0;
font-family: "Open Sans",sans-serif;
box-sizing: border-box;
text-decoration: none;
}
body{
background: url(bg.jpg) no-repeat center;
background-size: cover;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.profile-card{
width: 420px;
overflow: hidden;
text-align: center;
position: relative;
box-shadow: 0 0 10px #00000070;
}
.top-section{
padding: 60px 40px;
background: #2c2c54aa;
}
.message,.notif{
position: absolute;
top: 40px;
font-size: 20px;
cursor: pointer;
color: #ffffff50
}
.message{
right: 40px;
}
.notif{
left: 40px;
}
.pic{
width: 150px;
height: 150px;
margin: auto;
margin-bottom: 20px;
border: 2px solid #2c3e50;
border-radius: 50%;
padding: 8px;
position: relative;
}
.pic:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #2c3e50;
left: 0;
top: 0;
box-sizing: border-box;
border-radius: 50%;
animation: wave 1.5s infinite linear;
}
@keyframes wave {
to{
transform: scale(1.5);
opacity: 0;
}
}
.pic img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.name{
color: #f1f1f1;
font-size: 28px;
letter-spacing: 2px;
text-transform: uppercase;
}
.tag{
font-size: 14.2px;
color: #fff;
}
.bottom-section{
background: #f1f1f1;
padding: 60px 40px;
position: relative;
display: flex;
}
.border{
width: 1px;
height: 20px;
background: #bbb;
margin: 0 30px;
}
.social-media{
position: absolute;
width: 100%;
top: -33px;
left: 0;
z-index: 1;
}
.social-media i{
width: 60px;
height: 60px;
background: #2c3e50;
border-radius: 50%;
color: #f1f1f1;
font-size: 20px;
line-height: 60px !important;
margin: 0 10px;
position: relative;
}
.social-media i:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #2c3e50;
left: 0;
top: 0;
box-sizing: border-box;
border-radius: 50%;
z-index: -1;
transition: 0.4s linear;
}
.social-media i:hover:after{
transform: scale(1.4);
opacity: 0;
}
