⌘K

Command Palette

Search for a command to run...

Daftar

Contoh Akhir: Kartu Profil CSS

Lihat bagaimana semua konsep CSS beraksi! Studi kasus lengkap membuat halaman profil menarik mirip Linktree, lengkap dengan daftar link dan video YouTube responsif.

Studi Kasus CSS: Bikin Kartu Profil Keren ala Linktree (Plus Video!)

Selamat! Kamu udah berhasil ngelibas banyak banget materi CSS, dari dasar-dasar sampe teknik layouting canggih dan animasi. Sekarang, saatnya kita gabungin semua ilmu itu buat bikin sesuatu yang nyata, keren, dan pastinya berguna: sebuah halaman profil interaktif mirip Linktree, lengkap dengan daftar link dan video YouTube yang tersemat!

Di studi kasus ini, kita bakal fokus gimana cara:

  • Ngebangun struktur HTML yang semantik buat kartu profil.
  • Nerapin berbagai properti CSS buat ngatur tampilan (warna, font, spasi, shadow).
  • Pake Flexbox buat nata elemen dengan rapi.
  • Bikin tombol link yang menarik dengan efek hover.
  • Nyematin video YouTube dan bikin dia responsif.
  • Ngasih sentuhan akhir biar tampilannya profesional.

Ini bakal jadi ajang pembuktian skill CSS-mu dan ngasih gambaran gimana semua properti itu bekerja sama. Yuk, kita mulai!

Langkah 1: Struktur HTML Dasar

Pertama, kita siapin dulu kerangka HTML-nya. Kita akan bikin kontainer utama, bagian header buat info profil, bagian main buat daftar link dan video, terus footer simpel.

File profil-linktree.html (Contoh):

html
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Budi Linktree - Profil & Video</title>
    <!-- Kita akan membuat file CSS ini di langkah berikutnya -->
    <link rel="stylesheet" href="style-profil-linktree.css" />
    <!-- Opsional: Jika mau pakai ikon dari Font Awesome atau library lain -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
  </head>
  <body>
    <div class="linktree-container">
      <header class="profil-header">
        <img
          src="https://api.dicebear.com/9.x/bottts-neutral/svg?seed=Jude"
          alt="Foto Hadie Suka ngoding"
          class="profil-avatar"
        />
        <!-- Ganti dengan path gambar profilmu -->
        <h1 class="profil-nama">@dankedev</h1>
        <p class="profil-deskripsi">
          Web Developer | Konten Kreator | Pecinta Kopi ☕
        </p>
      </header>
 
      <main class="konten-utama-linktree">
        <section class="daftar-link">
          <a
            href="https://github.com/dankedev"
            target="_blank"
            rel="noopener noreferrer"
            class="tombol-link"
          >
            <!-- <i class="fab fa-github"></i> (Jika pakai Font Awesome) -->
            GitHub Saya
          </a>
          <a
            href="https://youtube.com/@dankedev"
            target="_blank"
            rel="noopener noreferrer"
            class="tombol-link"
          >
            Channel YouTube Utama
          </a>
          <a
            href="https://instagram.com/dankedev"
            target="_blank"
            rel="noopener noreferrer"
            class="tombol-link"
          >
            Instagram
          </a>
          <a
            href="https://dankedev.com"
            target="_blank"
            rel="noopener noreferrer"
            class="tombol-link tombol-link-penting"
          >
            Baca Blog Terbaru Saya!
          </a>
        </section>
 
        <section class="video-unggulan">
          <h2>
            <span role="img" aria-label="Ikon Video">🎬</span> Video Terbaru
            Saya
          </h2>
          <div class="video-wrapper">
            <!-- GANTI VIDEO_ID_ANDA dengan ID video YouTube yang valid -->
            <iframe src="https://www.youtube.com/embed/HHEveXG2W-c">
              title="Contoh Video YouTube" frameborder="0" allow="accelerometer;
              autoplay; clipboard-write; encrypted-media; gyroscope;
              picture-in-picture; web-share" allowfullscreen>
            </iframe>
          </div>
          <p class="deskripsi-video">
            Jangan lupa subscribe untuk konten ngoding seru lainnya!
          </p>
        </section>
      </main>
 
      <footer class="linktree-footer">
        <p>
          © <time datetime="2024">2024</time> BudiSukaNgoding. Dibuat dengan
          HTML & CSS.
        </p>
      </footer>
    </div>
  </body>
</html>

Catatan Penting di HTML:

  • Ganti https://via.placeholder.com/150 dengan path ke gambar profilmu yang sebenernya.
  • Ganti URL di <a> tag dengan link sosial media atau websitemu.
  • SUPER PENTING: Ganti dQw4w9WgXcQ di URL iframe YouTube dengan ID video YouTube yang valid milikmu atau video lain yang relevan. ID video itu bagian URL setelah embed/.
  • Penggunaan ikon (kayak Font Awesome) itu opsional, kalau mau, jangan lupa uncomment link CSS-nya di <head>.

Langkah 2: Ngasih Style dengan CSS (style-profil-linktree.css)

Sekarang, kita bikin "sihir" CSS-nya! Kita bakal bagi jadi beberapa bagian biar gampang diikutin.

A. Style Global dan Body

css
/* File: style-profil-linktree.css */
 
/* Reset dasar (opsional, tapi bagus buat konsistensi) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ini penting banget! */
}
 
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Pilih font yang kamu suka */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Contoh background gradient */
    color: #333; /* Warna teks default, mungkin gak banyak kepake karena kartu punya warna sendiri */
    min-height: 100vh; /* Biar background full tinggi layar */
    display: flex; /* Untuk menengahkan container */
    justify-content: center;
    align-items: center;
    padding: 20px; /* Kasih sedikit padding di body */
}
  • * { box-sizing: border-box; }: Ini "jimat" andalan biar width dan height udah termasuk padding dan border.
  • body: Kita kasih font dasar, background gradient yang kece, dan pake Flexbox buat ngenengahin .linktree-container di tengah halaman secara vertikal dan horizontal. min-height: 100vh; mastiin gradientnya ngisi seluruh tinggi layar.

B. Styling Kontainer Utama Kartu Profil

css
.linktree-container {
    background-color: rgba(255, 255, 255, 0.95); /* Background kartu agak transparan */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px; /* Lebar maksimal kartu */
    text-align: center; /* Biar konten di header (avatar, nama) ke tengah */
}
  • Kita kasih background semi-transparan, padding, sudut melengkung (border-radius), dan bayangan (box-shadow) biar kartunya keliatan "ngambang".
  • max-width penting biar kartunya gak terlalu lebar di layar desktop.

C. Styling Header Profil

css
.profil-header {
    margin-bottom: 30px;
}
 
.profil-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Bikin gambar jadi lingkaran */
    object-fit: cover; /* Pastiin gambar ngisi lingkaran tanpa distorsi */
    margin-bottom: 15px;
    border: 3px solid white; /* Opsional: kasih border putih di avatar */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
 
.profil-nama {
    font-size: 1.8rem; /* atau 28px, dll. */
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}
 
.profil-deskripsi {
    font-size: 1rem; /* atau 16px */
    color: #555;
    line-height: 1.4;
}
  • Avatar dibikin lingkaran pake border-radius: 50%; dan object-fit: cover; biar gambarnya pas.
  • Nama dan deskripsi dikasih style tipografi yang sesuai.
css
.daftar-link {
    display: flex;
    flex-direction: column; /* Tombol numpuk vertikal */
    gap: 15px; /* Jarak antar tombol */
    margin-bottom: 30px; /* Jarak ke section video */
}
 
.tombol-link {
    display: block; /* Biar bisa diatur padding & margin dengan benar */
    background-color: #5c67f2; /* Warna dasar tombol */
    color: white;
    text-decoration: none; /* Ilangin garis bawah link */
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek transisi */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
 
.tombol-link:hover {
    background-color: #4a54d1; /* Warna berubah pas di-hover */
    transform: translateY(-2px) scale(1.02); /* Sedikit naik dan membesar pas di-hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
 
/* Style khusus buat tombol penting */
.tombol-link.tombol-link-penting {
    background-color: #ff4757; /* Warna beda buat tombol penting */
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.5); /* Efek glow */
}
 
.tombol-link.tombol-link-penting:hover {
    background-color: #e03949;
    transform: translateY(-2px) scale(1.03);
}
 
/* Opsional: kalau mau nambahin ikon di tombol pake Font Awesome */
/* .tombol-link i {
    margin-right: 10px;
} */
  • .daftar-link pake Flexbox (column) biar tombolnya numpuk rapi dan ada jarak (gap).
  • .tombol-link di-style jadi kayak tombol beneran. Perhatiin penggunaan transition buat efek hover yang smooth, dan transform buat ngasih sedikit animasi pas hover.
  • Ada style khusus buat .tombol-link-penting biar lebih menonjol.

E. Styling Section Video Unggulan & Video Responsif

css
.video-unggulan {
    margin-bottom: 30px;
}
 
.video-unggulan h2 {
    font-size: 1.5rem;
    color: #444;
    margin-bottom: 15px;
}
 
/* Trik buat bikin iframe video responsif */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Rasio aspek 16:9 (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Background sementara pas video loading */
    border-radius: 8px; /* Samain sama tombol biar konsisten */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
 
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Ilangin border default iframe */
}
 
.deskripsi-video {
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
}
  • Yang paling penting di sini adalah .video-wrapper dan iframe di dalemnya. Ini adalah teknik standar buat bikin video embed (terutama dari YouTube/Vimeo) jadi responsif dan tetep jaga rasio aspeknya.
    • padding-bottom: 56.25%; itu kuncinya buat rasio 16:9.
    • position: relative; di wrapper dan position: absolute; di iframe bikin iframe-nya ngisi penuh wrapper.
css
.linktree-footer {
    margin-top: 20px; /* Jarak dari konten terakhir */
    font-size: 0.8rem;
    color: #777;
}
 
.linktree-footer p {
    margin-bottom: 5px;
}
  • Footer simpel dengan teks copyright dan tanggal.

G. (Opsional) Media Queries untuk Responsivitas Tambahan

Walaupun banyak properti di atas udah responsif (kayak max-width, %, flex-wrap), kita bisa nambahin sedikit media query buat penyesuaian di layar yang lebih kecil lagi kalau perlu.

css
@media screen and (max-width: 480px) {
    .linktree-container {
        padding: 20px; /* Kurangin padding kartu di layar kecil */
    }
 
    .profil-avatar {
        width: 100px;
        height: 100px;
    }
 
    .profil-nama {
        font-size: 1.5rem;
    }
 
    .profil-deskripsi {
        font-size: 0.9rem;
    }
 
    .tombol-link {
        padding: 12px 15px;
        font-size: 0.95rem;
    }
 
    .video-unggulan h2 {
        font-size: 1.3rem;
    }
}
  • Di media query ini, kita ngurangin padding, ukuran avatar, dan ukuran font di layar yang lebarnya 480px atau kurang, biar gak keliatan terlalu penuh.

Hasil Akhir (Bayangan)

Kalau kamu gabungin HTML dan CSS di atas (dan ganti placeholder dengan kontenmu), kamu bakal dapet halaman profil "Linktree-style" yang:

  • Punya header dengan foto profil, nama, dan deskripsi.
  • Daftar tombol link yang rapi dan punya efek hover.
  • Video YouTube yang tersemat dan responsif.
  • Tampilan keseluruhan yang modern dan enak diliat di berbagai ukuran layar.

Ini cuma contoh dasar, kamu bebas berkreasi dengan warna, font, shadow, gradient, atau bahkan nambahin animasi CSS yang udah kita pelajari buat bikin versi yang lebih unik lagi!

Rangkuman CSS yang Dipake

Di studi kasus ini, kita udah nerapin banyak banget konsep CSS:

  • Reset dasar dan box-sizing.
  • Styling body dengan background gradient dan Flexbox buat centering.
  • Box Model: padding, margin, border, border-radius, width, max-width.
  • Tipografi: font-family, font-size, font-weight, color, line-height, text-align.
  • Warna & Background: background-color, rgba() untuk transparansi.
  • Flexbox: Buat layout .daftar-link dan centering .linktree-container.
  • Shadow: box-shadow.
  • Transformasi & Transisi: transform: translateY() scale() dan transition untuk efek hover di tombol.
  • Positioning: position: relative dan absolute untuk trik video responsif.
  • Media Queries: Untuk penyesuaian di layar kecil.

Selamat! Kamu udah berhasil ngebongkar dan (semoga) ngertiin gimana cara bikin halaman web yang lumayan kompleks pake HTML dan CSS. Contoh ini nunjukin kalau dengan modal yang udah kamu pelajari, kamu udah bisa bikin banyak hal keren.

Kunci selanjutnya adalah terus berlatih, bereksperimen, dan jangan takut buat nyoba hal baru. Semakin sering kamu ngoding, semakin banyak "Aha!" momen yang bakal kamu dapet.

Ini adalah akhir dari perjalanan dasar CSS kita. Semoga panduan ini bermanfaat dan bikin kamu makin cinta sama dunia web development! Langkah berikutnya? Mungkin saatnya ngasih "otak" ke websitemu dengan JavaScript!