Menambahkan Gambar dan Link Tiny Ver
<a class="linktree-item" href="GANTI_DENGAN_URL_TUJUAN" target="_blank" rel="noopener">
<img class="linktree-item-img" src="GANTI_DENGAN_URL_GAMBAR.png" alt="Judul link"/>
<span class="linktree-item-text">
<span class="linktree-item-title">Judul Link</span>
<span class="linktree-item-desc">Deskripsi singkat tentang link ini.</span>
</span>
</a>
<style>
.linktree-item{
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 12px 16px;
background: var(--link-bg);
border: 1px solid var(--link-border);
border-radius: 14px;
box-shadow: var(--shadow);
text-decoration: none !important;
transition: transform 0.12s ease, background 0.15s ease;
}
.linktree-item:hover{
background: var(--link-hover);
transform: translateY(-2px);
}
.linktree-item-img{
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.linktree-item-text{
display: flex;
flex-direction: column;
min-width: 0;
}
.linktree-item-title{
font-size: clamp(13px, 3.6vw, 15px);
font-weight: 700;
color: var(--link-text);
line-height: 1.3;
}
.linktree-item-desc{
font-size: clamp(11px, 3vw, 12px);
color: var(--muted);
line-height: 1.4;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (max-width: 380px){
.linktree-item-img{ width: 42px; height: 42px; }
}
</style>
Comments
Post a Comment