Landing Page Trusted Paws

Demo project

Pada studi kasus Trusted Paws, kita akan belajar membuat landing page sederhana untuk layanan adopsi hewan peliharaan. Tujuan pembelajaran ini adalah memahami:

Cara menggunakan Bootstrap 5 CDN
Struktur layout dengan container, row, dan col
Membuat Navbar responsif
Membuat Hero Section modern
Menggabungkan Bootstrap + Custom CSS
Teknik positioning gambar card yang menarik

Visualisasi Struktur Folder Akhir

Pastikan hierarki direktori kamu terlihat persis seperti ini:

style.css

dog-1.png

dog-2.png

dog-3.png

index.html

1. Struktur Dasar HTML + Bootstrap CDN

Mari mulai dari bagian <head>.

index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>TrustedPaws</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- External CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

Penjelasan

1. Bootstrap CDN

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">

Digunakan untuk dapat menggunakan seluruh class Bootstrap 5, seperti:

container
row
col
navbar
btn
d-flex
gap
justify-content-center

Tanpa CDN ini, class Bootstrap tidak akan bekerja.

2. Meta Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Digunakan agar layout menjadi responsive di mobile.

3. Google Font Poppins

Digunakan agar tampilan Trusted Paws terlihat modern.

Kemudian di CSS:

body {
    font-family: 'Poppins', sans-serif;
}

4. External CSS

<link rel="stylesheet" href="assets/css/style.css">

Digunakan untuk custom styling yang tidak tersedia di Bootstrap.

Berikut kode navbar Trusted Paws.

index.html

<nav class="navbar navbar-expand-lg py-3">
    <div class="container">

        <a class="navbar-brand d-flex align-items-center gap-2" href="#">
            <span class="fw-bold">Trusted<span class="text-primary">Paws</span></span>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-center" id="navMenu">
            <ul class="navbar-nav gap-lg-4">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Collection</a></li>
                <li class="nav-item"><a class="nav-link" href="#">All Pet</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
        </div>

        <div class="d-none d-lg-block">
            <a href="#" class="btn btn-dark rounded-pill px-4">Login</a>
        </div>

    </div>
</nav>

Breakdown Class Bootstrap

<nav class="navbar navbar-expand-lg py-3">

navbar → komponen navbar Bootstrap
navbar-expand-lg → navbar collapse di layar kecil
py-3 → padding atas bawah

Container Layout

<div class="container">

container berfungsi untuk:

memberi padding kiri kanan
menjaga layout tetap rapi
center alignment otomatis

Logo Brand

<a class="navbar-brand d-flex align-items-center gap-2">

Class yang digunakan:

navbar-brand → styling brand navbar
d-flex → aktifkan flexbox
align-items-center → vertical center
gap-2 → jarak antar elemen

<div class="collapse navbar-collapse justify-content-center">

Penjelasan:

collapse → menu bisa ditoggle
navbar-collapse → styling Bootstrap
justify-content-center → menu di tengah

<ul class="navbar-nav gap-lg-4">

navbar-nav → styling list navbar
gap-lg-4 → jarak antar menu di layar besar

<div class="d-none d-lg-block">

Class penting:

d-none : sembunyikan
d-lg-block : tampil di layar besar

Artinya:

Button login hanya muncul di desktop.

3. Hero Section

Sekarang masuk ke bagian hero.

<section class="hero py-5">
    <div class="container text-center">

        <div class="row justify-content-center">
            <div class="col-lg-8">

                <h1 class="hero-title mb-3">
                    Your Trusted Place to Meet Your New Best Friend
                </h1>

                <p class="hero-subtitle mb-4">
                    Carefully selected pets, ready to bring joy to your home.
                </p>

                <a href="#" class="btn btn-primary btn-hero">
                    Get Started Now
                    <span class="ms-2 circle-next">></span>
                </a>

            </div>
        </div>

Layout Bootstrap

Section Padding

<section class="hero py-5">

py-5 → padding atas bawah besar
hero → custom CSS

Center Content

<div class="container text-center">

container → layout center
text-center → teks rata tengah

Row + Column

<div class="row justify-content-center">
<div class="col-lg-8">

Penjelasan:

row → grid Bootstrap
justify-content-center → center horizontal
col-lg-8 → lebar 8 kolom dari 12

Ini membuat hero tidak terlalu lebar.

Button Hero

<a href="#" class="btn btn-primary btn-hero">

Class:

btn → tombol Bootstrap
btn-primary → warna primary
btn-hero → custom styling

Custom CSS:

.btn-hero {
    background: #bfa7ff;
    border-radius: 50px;
}

4. Cards Pet Section

Bagian ini paling menarik secara layout.

<div class="row mt-6 justify-content-center align-items-end g-4">

Class penting:

mt-6 → margin top custom
justify-content-center → center
align-items-end → sejajar bawah
g-4 → gap antar kolom

Card 1

<div class="col-10 col-md-3">
    <div class="pet-card bg-pink relative">
        <img src="assets/images/dog2.png" class="img-fluid img-absolute">
    </div>
</div>

Grid Responsive

col-10 col-md-3

Artinya:

Mobile → lebar 10 Tablet → lebar 3 Desktop → 3 kolom sejajar

Card Container

pet-card bg-pink relative

CSS:

.pet-card {
    border-radius: 24px;
    height: 260px;
}

Position Relative

.relative {
    position: relative;
}

Digunakan agar gambar bisa absolute di dalam card.

Gambar Absolute

.img-absolute {
    position: absolute;
    bottom: 0;
}

Efek yang dihasilkan:

Gambar "keluar" dari card.

5. Custom CSS Penting

Background Card Warna

.bg-pink { background: #f8a8d8; }
.bg-purple { background: #cbb8ff; }
.bg-yellow { background: #f8dc74; }

Digunakan untuk warna berbeda tiap pet.

Hero Typography

.hero-title {
    font-size: 48px;
    font-weight: 700;
}

Menghasilkan heading besar.

Responsive Font

@media (max-width: 992px)

Digunakan agar font mengecil di tablet.

Koding keseluruhan

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>TrustedPaws</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- External CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">

            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <span class="fw-bold">Trusted<span class="text-primary">Paws</span></span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navMenu">
                <ul class="navbar-nav gap-lg-4">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Collection</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">All Pet</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>

            <div class="d-none d-lg-block">
                <a href="#" class="btn btn-dark rounded-pill px-4">Login</a>
            </div>

        </div>
    </nav>


    <!-- Hero -->
    <section class="hero py-5">
        <div class="container text-center">

            <div class="row justify-content-center">
                <div class="col-lg-8">

                    <h1 class="hero-title mb-3">
                        Your Trusted Place to Meet Your New Best Friend
                    </h1>

                    <p class="hero-subtitle mb-4">
                        Carefully selected pets, ready to bring joy to your home.
                    </p>

                    <a href="#" class="btn btn-primary btn-hero">
                        Get Started Now
                        <span class="ms-2 circle-next">></span>
                    </a>

                </div>
            </div>

            <!-- Cards -->
            <div class="row mt-6 justify-content-center align-items-end g-4">

                <div class="col-10 col-md-3">
                    <div class="pet-card bg-pink relative">
                        <img src="assets/images/dog2.png" class="img-fluid img-absolute" alt="dog1">
                    </div>
                </div>

                <div class="col-10 col-md-3">
                    <div class="pet-card bg-purple relative">
                        <img src="assets/images/dog1.png" class="img-fluid img-absolute" alt="dog2">
                    </div>
                </div>

                <div class="col-10 col-md-3">
                    <div class="pet-card bg-yellow relative">
                        <img src="assets/images/dog3.png" class="img-fluid img-absolute" alt="dog3">
                    </div>
                </div>

            </div>

        </div>
    </section>
</body>

</html>

    body {
        font-family: 'Poppins', sans-serif;
        background: #f7f7f7;
        color: #111;
    }

    .navbar {
        background: transparent;
    }

    .navbar .nav-link {
        color: #333;
        font-weight: 500;
    }

    .navbar .nav-link:hover {
        color: #000;
    }

    .logo {
        width: 28px;
    }

    .hero {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero-title {
        font-size: 48px;
        font-weight: 700;
        line-height: 1.2;
    }

    .hero-subtitle {
        color: #777;
        font-size: 15px;
    }

    .btn-hero {
        background: #bfa7ff;
        border: none;
        padding: 12px 22px;
        border-radius: 50px;
        font-weight: 500;
        color: #000;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .btn-hero:hover {
        background: #a88df8;
        color: #000;
    }

    .relative {
        position: relative;
    }

    .pet-card {
        border-radius: 24px;
        padding: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 260px;
    }

    .pet-card img {
        max-height: 200px;
    }

    .bg-pink {
        background: #f8a8d8;
    }

    .bg-purple {
        background: #cbb8ff;
        max-height: 180px;
    }

    .bg-yellow {
        background: #f8dc74;
    }

    .img-absolute {
        position: absolute;
        min-height: 310px;
        bottom: 0;
    }

    .circle-next {
        background: #000;
        color: #fff;
        padding: 4px 10px;
        border-radius: 50px;
    }

    .mt-6 {
        margin-top: 4.5rem;
    }

    .text-primary {
        color: #a88df8 !important;
    }

    @media (max-width: 992px) {
        .hero-title {
            font-size: 36px;
        }
    }

    @media (max-width: 576px) {
        .hero-title {
            font-size: 28px;
        }

        .pet-card {
            height: 220px;
        }
    }

Study Cate Trusted Paws

Landing Page Trusted Paws

Visualisasi Struktur Folder Akhir

1. Struktur Dasar HTML + Bootstrap CDN

Penjelasan

1. Bootstrap CDN

2. Meta Viewport

3. Google Font Poppins

4. External CSS

2. Navbar (Navigasi Utama)

Breakdown Class Bootstrap

Navbar Container

Container Layout

Logo Brand

Menu Responsive

Navigation List

3. Hero Section

Layout Bootstrap

Section Padding

Center Content

Row + Column

Button Hero

4. Cards Pet Section

Card 1

Grid Responsive

Card Container

Position Relative

Gambar Absolute

5. Custom CSS Penting

Background Card Warna

Hero Typography

Responsive Font

Koding keseluruhan

On this page