HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
568x27
201 Bytes
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arsitek & Desain Interior | Wujudkan Ruang Impian Anda</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
    
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* --- CSS VARIABLES (Earthy Palette) --- */
        :root {
            --bg-offwhite: #FCFBF9;
            --bg-cream: #F4EFEA;
            --bg-beige: #E6DCD3;
            --color-terra: #C27A65;
            --color-terra-hover: #A86551;
            --color-sage: #94A89A;
            --text-dark: #3A3530;
            --text-light: #6C655E;
            --font-heading: 'Playfair Display', serif;
            --font-body: 'Lato', sans-serif;
            --transition: all 0.3s ease;
        }

        /* --- GLOBAL STYLES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            color: var(--text-dark);
            background-color: var(--bg-offwhite);
            line-height: 1.6;
            overflow-x: hidden;
        }

        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            font-weight: 600;
            color: var(--text-dark);
        }

        p {
            color: var(--text-light);
            margin-bottom: 1rem;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 5rem 0;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 3rem auto;
            color: var(--text-light);
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            border-radius: 4px;
            font-weight: 700;
            font-family: var(--font-body);
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .btn-primary {
            background-color: var(--color-terra);
            color: #fff;
        }

        .btn-primary:hover {
            background-color: var(--color-terra-hover);
            transform: translateY(-2px);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--color-terra);
            border-color: var(--color-terra);
        }

        .btn-outline:hover {
            background-color: var(--color-terra);
            color: #fff;
        }

        /* --- NAVIGATION --- */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: transparent;
            padding: 1.5rem 5%;
            z-index: 1000;
            transition: var(--transition);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header.sticky {
            background-color: rgba(252, 251, 249, 0.95);
            padding: 1rem 5%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            backdrop-filter: blur(10px);
        }

        .logo {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            letter-spacing: 1px;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-dark);
            transition: var(--transition);
        }

        .nav-links a:hover {
            color: var(--color-terra);
        }

        .mobile-toggle {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* --- HERO SECTION --- */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            background: linear-gradient(rgba(244, 239, 234, 0.85), rgba(244, 239, 234, 0.85)), url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding: 0 20px;
        }

        .hero h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2.5rem;
            color: var(--text-dark);
        }

        .hero-btns {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        /* --- ABOUT SECTION --- */
        .about-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-img {
            position: relative;
        }

        .about-img img {
            border-radius: 8px;
            box-shadow: -15px 15px 0 var(--color-sage);
        }

        .about-text h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }

        .about-text p {
            font-size: 1.05rem;
        }

        /* --- SERVICES SECTION --- */
        .services-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .service-card {
            background-color: var(--bg-cream);
            padding: 3rem 2rem;
            border-radius: 8px;
            text-align: center;
            transition: var(--transition);
            border-bottom: 4px solid transparent;
        }

        .service-card:hover {
            transform: translateY(-10px);
            border-color: var(--color-terra);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .service-icon {
            font-size: 3rem;
            color: var(--color-terra);
            margin-bottom: 1.5rem;
        }

        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .service-card ul {
            list-style: none;
            margin-top: 1.5rem;
            text-align: left;
        }

        .service-card ul li {
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            color: var(--text-light);
        }

        .service-card ul li i {
            color: var(--color-sage);
            margin-right: 8px;
        }

        /* --- PORTFOLIO SECTION --- */
        .portfolio-filters {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            background: none;
            border: none;
            font-family: var(--font-body);
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-light);
            cursor: pointer;
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
            transition: var(--transition);
        }

        .filter-btn.active, .filter-btn:hover {
            background-color: var(--bg-beige);
            color: var(--text-dark);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 1.5rem;
        }

        .portfolio-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            aspect-ratio: 4/3;
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .portfolio-overlay {
            position: absolute;
            inset: 0;
            background: rgba(58, 53, 48, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: var(--transition);
        }

        .portfolio-item:hover img {
            transform: scale(1.05);
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-overlay h3 {
            color: #fff;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            transform: translateY(20px);
            transition: var(--transition);
        }

        .portfolio-overlay p {
            color: var(--bg-beige);
            transform: translateY(20px);
            transition: var(--transition);
            transition-delay: 0.1s;
        }

        .portfolio-item:hover .portfolio-overlay h3,
        .portfolio-item:hover .portfolio-overlay p {
            transform: translateY(0);
        }

        /* Lightbox Modal */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.9);
            z-index: 2000;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 2rem;
        }

        .lightbox.active {
            display: flex;
        }

        .lightbox img {
            max-width: 90%;
            max-height: 80vh;
            border-radius: 4px;
        }

        .lightbox-caption {
            color: #fff;
            margin-top: 1rem;
            font-family: var(--font-heading);
            font-size: 1.5rem;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 2.5rem;
            cursor: pointer;
        }

        /* --- PRICING SECTION --- */
        .pricing-tabs {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 0.8rem 2rem;
            border: 2px solid var(--bg-beige);
            background: transparent;
            font-family: var(--font-body);
            font-weight: 700;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
        }

        .tab-btn.active, .tab-btn:hover {
            background: var(--bg-beige);
            color: var(--text-dark);
        }

        .pricing-content {
            display: none;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .pricing-content.active {
            display: grid;
        }

        .pricing-card {
            background: #fff;
            padding: 3rem 2rem;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
            border: 1px solid var(--bg-cream);
            position: relative;
        }

        .pricing-card.popular {
            border: 2px solid var(--color-terra);
            transform: scale(1.05);
        }

        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-terra);
            color: #fff;
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
        }

        .pricing-card h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .price {
            font-size: 2.5rem;
            font-family: var(--font-heading);
            color: var(--color-terra);
            margin-bottom: 1.5rem;
        }

        .price span {
            font-size: 1rem;
            color: var(--text-light);
            font-family: var(--font-body);
        }

        .pricing-card ul {
            list-style: none;
            margin-bottom: 2rem;
            text-align: left;
        }

        .pricing-card ul li {
            padding: 0.8rem 0;
            border-bottom: 1px solid var(--bg-cream);
            color: var(--text-light);
        }

        .pricing-card ul li i {
            color: var(--color-sage);
            margin-right: 10px;
        }

        /* --- TESTIMONIALS SECTION --- */
        .testimonials {
            background-color: var(--bg-cream);
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .testi-card {
            background: var(--bg-offwhite);
            padding: 2.5rem;
            border-radius: 8px;
            position: relative;
        }

        .testi-card i {
            position: absolute;
            top: 2rem;
            right: 2rem;
            font-size: 3rem;
            color: var(--bg-beige);
            opacity: 0.5;
        }

        .testi-text {
            font-style: italic;
            margin-bottom: 2rem;
            position: relative;
            z-index: 1;
        }

        .testi-client {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .testi-client img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }

        .client-info h4 {
            font-family: var(--font-body);
            margin-bottom: 0.2rem;
        }

        .client-info p {
            margin: 0;
            font-size: 0.85rem;
        }

        /* --- CONTACT SECTION --- */
        .contact-wrapper {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 3rem;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 700;
            color: var(--text-dark);
        }

        .form-control {
            width: 100%;
            padding: 1rem;
            border: 1px solid var(--bg-beige);
            border-radius: 4px;
            font-family: var(--font-body);
            font-size: 1rem;
            background: var(--bg-offwhite);
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--color-terra);
            background: #fff;
        }

        textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }

        .contact-wrapper button {
            width: 100%;
            border: none;
        }

        /* --- FOOTER --- */
        footer {
            background-color: var(--text-dark);
            color: var(--bg-cream);
            padding: 4rem 5% 2rem;
            text-align: center;
        }

        .footer-logo {
            font-family: var(--font-heading);
            font-size: 2rem;
            color: #fff;
            margin-bottom: 1rem;
            display: inline-block;
        }

        .footer-socials {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .footer-socials a {
            color: var(--bg-cream);
            font-size: 1.5rem;
            transition: var(--transition);
        }

        .footer-socials a:hover {
            color: var(--color-terra);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 2rem;
            font-size: 0.9rem;
            color: #aaa;
        }

        /* --- FLOATING WA BUTTON --- */
        .float-wa {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #25D366;
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
            z-index: 1000;
            transition: var(--transition);
        }

        .float-wa:hover {
            transform: scale(1.1);
            color: #fff;
        }

        /* --- FADE IN ANIMATION --- */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- RESPONSIVE DESIGN --- */
        @media (max-width: 992px) {
            .hero h1 { font-size: 2.8rem; }
            .about-wrapper { grid-template-columns: 1fr; gap: 2rem; }
            .about-img { order: -1; }
            .pricing-card.popular { transform: none; }
        }

        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                background: var(--bg-offwhite);
                flex-direction: column;
                text-align: center;
                padding: 2rem 0;
                box-shadow: 0 10px 10px rgba(0,0,0,0.05);
                transition: var(--transition);
            }
            .nav-links.active { left: 0; }
            .mobile-toggle { display: block; }
            .hero h1 { font-size: 2.2rem; }
            .hero-btns { flex-direction: column; }
            .section-title { font-size: 2rem; }
            .contact-wrapper { padding: 2rem 1.5rem; }
        }
    </style>
</head>
<body>

    <!-- Header Navigation -->
    <header id="header">
        <a href="#" class="logo">StudioRuang.</a>
        <nav>
            <ul class="nav-links" id="navLinks">
                <li><a href="#beranda">Beranda</a></li>
                <li><a href="#tentang">Tentang</a></li>
                <li><a href="#layanan">Layanan</a></li>
                <li><a href="#portofolio">Portofolio</a></li>
                <li><a href="#harga">Harga</a></li>
                <li><a href="#kontak">Kontak</a></li>
            </ul>
        </nav>
        <div class="mobile-toggle" id="mobileToggle">
            <i class="fas fa-bars"></i>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="beranda">
        <div class="hero-content fade-in">
            <h1>Mewujudkan Ruang Impian Anda dengan Sentuhan Hangat & Personal</h1>
            <p>Saya membantu pemilik rumah dan pelaku bisnis merancang tata ruang yang estetis, fungsional, dan nyaman tanpa kesan kaku.</p>
            <div class="hero-btns">
                <a href="#kontak" class="btn btn-primary">Konsultasi Gratis</a>
                <a href="#portofolio" class="btn btn-outline">Lihat Portofolio</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="container" id="tentang">
        <div class="about-wrapper fade-in">
            <div class="about-text">
                <h2>Halo, Mari Wujudkan Ruang Cerita Anda.</h2>
                <p>Saya adalah arsitek independen yang percaya bahwa setiap ruangan memiliki cerita dan karakter penghuninya. Berbeda dengan pendekatan korporat yang kaku, saya menawarkan kolaborasi yang hangat dan transparan.</p>
                <p>Dengan pengalaman menangani berbagai proyek residensial dan komersial (kafe, ritel, kantor), fokus saya adalah menggabungkan estetika natural dengan fungsi ruang yang optimal. Mari berdiskusi tentang ide Anda, dan kita tuangkan ke dalam desain yang nyata.</p>
                <a href="#kontak" class="btn btn-primary" style="margin-top: 1rem;">Mari Berdiskusi</a>
            </div>
            <div class="about-img">
                <!-- Placeholder Image -->
                <img src="https://images.unsplash.com/photo-1542621323-22045331f021?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Arsitek sedang bekerja merancang denah">
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="container" id="layanan" style="background-color: var(--bg-offwhite);">
        <h2 class="section-title fade-in">Layanan Desain</h2>
        <p class="section-subtitle fade-in">Solusi rancang bangun menyeluruh yang disesuaikan dengan skala kebutuhan dan anggaran Anda.</p>
        
        <div class="services-wrapper fade-in">
            <!-- Service 1 -->
            <div class="service-card">
                <i class="fas fa-home service-icon"></i>
                <h3>Desain Layout Rumah</h3>
                <p>Perencanaan denah fungsional yang mengoptimalkan sirkulasi cahaya, udara, dan kenyamanan aktivitas harian.</p>
                <ul>
                    <li><i class="fas fa-check"></i> Konsep tata letak ruang</li>
                    <li><i class="fas fa-check"></i> Rencana sirkulasi efisien</li>
                    <li><i class="fas fa-check"></i> 2D Floor Plan rendering</li>
                </ul>
            </div>
            <!-- Service 2 -->
            <div class="service-card">
                <i class="fas fa-drafting-compass service-icon"></i>
                <h3>Drafting DED</h3>
                <p>Pembuatan Gambar Kerja teknis (Detail Engineering Drawing) yang akurat sebagai panduan kontraktor saat konstruksi.</p>
                <ul>
                    <li><i class="fas fa-check"></i> Gambar Arsitektural detail</li>
                    <li><i class="fas fa-check"></i> Gambar Struktur dasar</li>
                    <li><i class="fas fa-check"></i> Gambar Mekanikal & Elektrikal</li>
                </ul>
            </div>
            <!-- Service 3 -->
            <div class="service-card">
                <i class="fas fa-couch service-icon"></i>
                <h3>Interior Designer</h3>
                <p>Perancangan estetika dalam ruang dengan pemilihan material, warna, dan furnitur yang menciptakan nuansa personal.</p>
                <ul>
                    <li><i class="fas fa-check"></i> Moodboard & Konsep Gaya</li>
                    <li><i class="fas fa-check"></i> Visualisasi 3D Interior</li>
                    <li><i class="fas fa-check"></i> Spesifikasi Custom Furniture</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section class="container" id="portofolio">
        <h2 class="section-title fade-in">Karya & Portofolio</h2>
        <p class="section-subtitle fade-in">Jelajahi beberapa proyek pilihan mulai dari konsep layout dasar hingga visualisasi interior realistis.</p>

        <div class="portfolio-filters fade-in">
            <button class="filter-btn active" data-filter="all">Semua</button>
            <button class="filter-btn" data-filter="layout">Layout</button>
            <button class="filter-btn" data-filter="ded">DED / Teknis</button>
            <button class="filter-btn" data-filter="interior">Interior</button>
        </div>

        <div class="portfolio-grid fade-in">
            <!-- Item 1: Interior -->
            <div class="portfolio-item interior">
                <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Ruang Tamu Estetik">
                <div class="portfolio-overlay">
                    <h3>Living Room Earthy</h3>
                    <p>Interior - Residensial</p>
                </div>
            </div>
            <!-- Item 2: Layout -->
            <div class="portfolio-item layout">
                <img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Blueprint Denah Rumah">
                <div class="portfolio-overlay">
                    <h3>Denah Tropis Modern</h3>
                    <p>Layout - Rumah Tinggal</p>
                </div>
            </div>
            <!-- Item 3: Interior -->
            <div class="portfolio-item interior">
                <img src="https://images.unsplash.com/photo-1556912173-3bb406ef7e77?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Dapur Minimalis">
                <div class="portfolio-overlay">
                    <h3>Kitchen Set Custom</h3>
                    <p>Interior - Apartemen</p>
                </div>
            </div>
            <!-- Item 4: DED -->
            <div class="portfolio-item ded">
                <img src="https://images.unsplash.com/photo-1503387837-b154d5074bd2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Gambar Kerja Konstruksi">
                <div class="portfolio-overlay">
                    <h3>Gambar Kerja Cafe</h3>
                    <p>DED - Komersial</p>
                </div>
            </div>
            <!-- Item 5: Layout -->
            <div class="portfolio-item layout">
                <img src="https://images.unsplash.com/photo-1536895058696-a69b1c7ba34e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Denah 2D Berwarna">
                <div class="portfolio-overlay">
                    <h3>Optimasi Lahan Sempit</h3>
                    <p>Layout - Residensial</p>
                </div>
            </div>
            <!-- Item 6: Interior -->
            <div class="portfolio-item interior">
                <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Interior Kantor Butik">
                <div class="portfolio-overlay">
                    <h3>Office Space Hangat</h3>
                    <p>Interior - Kantor</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section (Tabbed) -->
    <section class="container" id="harga" style="background-color: var(--bg-offwhite);">
        <h2 class="section-title fade-in">Paket & Investasi</h2>
        <p class="section-subtitle fade-in">Pilih jenis layanan untuk melihat opsi paket yang sesuai dengan cakupan proyek Anda.</p>

        <div class="pricing-tabs fade-in">
            <button class="tab-btn active" data-target="price-layout">Layout Rumah</button>
            <button class="tab-btn" data-target="price-ded">Drafting DED</button>
            <button class="tab-btn" data-target="price-interior">Desain Interior</button>
        </div>

        <!-- Layout Pricing -->
        <div class="pricing-content active fade-in" id="price-layout">
            <div class="pricing-card">
                <h3>Dasar</h3>
                <div class="price">Rp X0.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Konsultasi Awal (Online)</li>
                    <li><i class="fas fa-check"></i> Denah 2D Hitam Putih</li>
                    <li><i class="fas fa-check"></i> 1x Revisi Mayor</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
            <div class="pricing-card popular">
                <div class="popular-badge">Paling Diminati</div>
                <h3>Standar</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Konsultasi Detail</li>
                    <li><i class="fas fa-check"></i> Denah 2D Berwarna / Render</li>
                    <li><i class="fas fa-check"></i> Konsep Fasad Sederhana</li>
                    <li><i class="fas fa-check"></i> 2x Revisi</li>
                </ul>
                <a href="#kontak" class="btn btn-primary">Pilih Paket</a>
            </div>
            <div class="pricing-card">
                <h3>Premium</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Denah 2D Berwarna Detail</li>
                    <li><i class="fas fa-check"></i> Model 3D Eksterior Dasar</li>
                    <li><i class="fas fa-check"></i> Estimasi Kasar Material</li>
                    <li><i class="fas fa-check"></i> Revisi Tanpa Batas*</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
        </div>

        <!-- DED Pricing (Hidden by default) -->
        <div class="pricing-content fade-in" id="price-ded">
            <div class="pricing-card">
                <h3>Arsitektural</h3>
                <div class="price">Rp X0.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Denah, Tampak, Potongan</li>
                    <li><i class="fas fa-check"></i> Detail Pola Lantai & Plafon</li>
                    <li><i class="fas fa-check"></i> Jadwal Pintu & Jendela</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
            <div class="pricing-card popular">
                <div class="popular-badge">Standar Proyek</div>
                <h3>Lengkap (Ars+Struktur)</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Semua Paket Arsitektural</li>
                    <li><i class="fas fa-check"></i> Detail Pondasi & Pemesian</li>
                    <li><i class="fas fa-check"></i> Rencana Atap & Sanitasi</li>
                </ul>
                <a href="#kontak" class="btn btn-primary">Pilih Paket</a>
            </div>
            <div class="pricing-card">
                <h3>DED Komprehensif</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Arsitektural & Struktur</li>
                    <li><i class="fas fa-check"></i> Detail MEP (Mekanikal Elektrikal)</li>
                    <li><i class="fas fa-check"></i> File CAD Asli (.dwg)</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
        </div>

        <!-- Interior Pricing (Hidden by default) -->
        <div class="pricing-content fade-in" id="price-interior">
            <div class="pricing-card">
                <h3>Konseptual</h3>
                <div class="price">Rp X0.000<span> /ruang</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Moodboard & Palet Warna</li>
                    <li><i class="fas fa-check"></i> Referensi Gaya Furnitur</li>
                    <li><i class="fas fa-check"></i> Rekomendasi Material Dasar</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
            <div class="pricing-card popular">
                <div class="popular-badge">Sangat Disarankan</div>
                <h3>Visual 3D</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Layout Furnitur Detail</li>
                    <li><i class="fas fa-check"></i> 3-4 View Render 3D Realistis</li>
                    <li><i class="fas fa-check"></i> Spesifikasi Material Dinding/Lantai</li>
                </ul>
                <a href="#kontak" class="btn btn-primary">Pilih Paket</a>
            </div>
            <div class="pricing-card">
                <h3>Build & Custom</h3>
                <div class="price">Rp XX.000<span> /m²</span></div>
                <ul>
                    <li><i class="fas fa-check"></i> Render 3D Resolusi Tinggi</li>
                    <li><i class="fas fa-check"></i> Gambar Kerja Custom Furniture</li>
                    <li><i class="fas fa-check"></i> RAB Detail (Rencana Anggaran)</li>
                </ul>
                <a href="#kontak" class="btn btn-outline">Pilih Paket</a>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="testimonials">
        <div class="container">
            <h2 class="section-title fade-in">Apa Kata Klien</h2>
            <div class="testi-grid fade-in">
                <div class="testi-card">
                    <i class="fas fa-quote-right"></i>
                    <p class="testi-text">"Sangat puas dengan desain interior kafe kami. Sentuhan earthy-nya dapet banget, suasananya jadi hangat dan bikin pengunjung betah berlama-lama."</p>
                    <div class="testi-client">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Bapak Rendi">
                        <div class="client-info">
                            <h4>Rendi Pratama</h4>
                            <p>Pemilik Kopi Kala</p>
                        </div>
                    </div>
                </div>
                <div class="testi-card">
                    <i class="fas fa-quote-right"></i>
                    <p class="testi-text">"Layout rumah yang dibuat sangat mengerti kebutuhan keluarga kami. Lahan yang terbatas bisa dimaksimalkan tanpa terasa sempit. Komunikasinya juga ramah."</p>
                    <div class="testi-client">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Ibu Siska">
                        <div class="client-info">
                            <h4>Siska Amalia</h4>
                            <p>Pemilik Rumah Tinggal</p>
                        </div>
                    </div>
                </div>
                <div class="testi-card">
                    <i class="fas fa-quote-right"></i>
                    <p class="testi-text">"Gambar kerja DED-nya sangat rapi dan detail. Kontraktor di lapangan tidak kebingungan sama sekali saat eksekusi. Sangat profesional!"</p>
                    <div class="testi-client">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Bapak Anton">
                        <div class="client-info">
                            <h4>Anton Wijaya</h4>
                            <p>Developer Properti</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section class="container" id="kontak">
        <h2 class="section-title fade-in">Mari Memulai Proyek Anda</h2>
        <p class="section-subtitle fade-in">Isi formulir di bawah ini untuk konsultasi awal secara gratis. Saya akan membalas pesan Anda sesegera mungkin.</p>
        
        <div class="contact-wrapper fade-in">
            <!-- Formspree action placeholder -->
            <form action="https://formspree.io/f/your_form_id_here" method="POST">
                <div class="form-group">
                    <label for="nama">Nama Lengkap</label>
                    <input type="text" id="nama" name="nama" class="form-control" required placeholder="Contoh: Budi Santoso">
                </div>
                <div class="form-group">
                    <label for="wa">Nomor WhatsApp</label>
                    <input type="tel" id="wa" name="wa" class="form-control" required placeholder="Contoh: 08123456789">
                </div>
                <div class="form-group">
                    <label for="layanan">Layanan yang Diminati</label>
                    <select id="layanan_minat" name="layanan" class="form-control" required>
                        <option value="" disabled selected>Pilih salah satu...</option>
                        <option value="Desain Layout Rumah">Desain Layout Rumah</option>
                        <option value="Drafting DED">Drafting DED (Gambar Kerja)</option>
                        <option value="Desain Interior">Desain Interior</option>
                        <option value="Belum Yakin / Konsultasi Dulu">Belum Yakin / Konsultasi Dulu</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="deskripsi">Ceritakan Singkat Kebutuhan Anda</label>
                    <textarea id="deskripsi" name="deskripsi" class="form-control" required placeholder="Contoh: Saya berencana merenovasi ruang tamu dan dapur ukuran 4x6m dengan gaya japandi..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Kirim Pesan</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <a href="#" class="footer-logo">StudioRuang.</a>
        <p style="color: var(--bg-beige); max-width: 400px; margin: 0 auto;">Merancang ruang yang menceritakan siapa Anda melalui sentuhan natural, hangat, dan personal.</p>
        
        <div class="footer-socials">
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-behance"></i></a>
            <a href="#"><i class="fab fa-pinterest"></i></a>
            <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; 2024 StudioRuang (Freelance Architect). Hak Cipta Dilindungi.</p>
        </div>
    </footer>

    <!-- Floating WhatsApp Button -->
    <a href="https://wa.me/6281234567890" target="_blank" class="float-wa">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Lightbox Modal for Portfolio -->
    <div class="lightbox" id="lightbox">
        <span class="lightbox-close" id="lightboxClose">&times;</span>
        <img src="" alt="Zoomed Portfolio Image" id="lightboxImg">
        <div class="lightbox-caption" id="lightboxCaption"></div>
    </div>

    <!-- JavaScript STUFF -->
    <script>
        // 1. Sticky Navigation
        const header = document.getElementById('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('sticky');
            } else {
                header.classList.remove('sticky');
            }
        });

        // 2. Mobile Menu Toggle
        const mobileToggle = document.getElementById('mobileToggle');
        const navLinks = document.getElementById('navLinks');
        
        mobileToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            const icon = mobileToggle.querySelector('i');
            if(navLinks.classList.contains('active')){
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });

        // Close mobile menu on link click
        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileToggle.querySelector('i').classList.remove('fa-times');
                mobileToggle.querySelector('i').classList.add('fa-bars');
            });
        });

        // 3. Fade-in Animation on Scroll (Intersection Observer)
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.15
        };

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });

        // 4. Portfolio Filter
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class from all buttons
                filterBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');

                const filterValue = btn.getAttribute('data-filter');

                portfolioItems.forEach(item => {
                    if (filterValue === 'all' || item.classList.contains(filterValue)) {
                        item.style.display = 'block';
                        setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 50);
                    } else {
                        item.style.opacity = '0';
                        item.style.transform = 'scale(0.8)';
                        setTimeout(() => { item.style.display = 'none'; }, 300);
                    }
                });
            });
        });

        // 5. Portfolio Lightbox Modal
        const lightbox = document.getElementById('lightbox');
        const lightboxImg = document.getElementById('lightboxImg');
        const lightboxCaption = document.getElementById('lightboxCaption');
        const lightboxClose = document.getElementById('lightboxClose');

        portfolioItems.forEach(item => {
            item.addEventListener('click', () => {
                const img = item.querySelector('img').src;
                const title = item.querySelector('h3').innerText;
                
                lightboxImg.src = img;
                lightboxCaption.innerText = title;
                lightbox.classList.add('active');
                document.body.style.overflow = 'hidden'; // prevent scrolling
            });
        });

        lightboxClose.addEventListener('click', () => {
            lightbox.classList.remove('active');
            document.body.style.overflow = 'auto';
        });

        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox) {
                lightbox.classList.remove('active');
                document.body.style.overflow = 'auto';
            }
        });

        // 6. Pricing Tabs Logic
        const tabBtns = document.querySelectorAll('.tab-btn');
        const pricingContents = document.querySelectorAll('.pricing-content');

        tabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Remove active class
                tabBtns.forEach(b => b.classList.remove('active'));
                pricingContents.forEach(c => c.classList.remove('active'));

                // Add active to clicked
                btn.classList.add('active');
                const targetId = btn.getAttribute('data-target');
                document.getElementById(targetId).classList.add('active');
            });
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
1047KB
Transfer Size
1132KB
Content Size
291.0ms
Dom Content Loaded
384.0ms
First Paint
494.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests