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