HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
501x550
435 KB
Share this result

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

Open in browser
index.HTML <!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bless & Shine</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:wght@400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#fff7fa;
    color:#5b3545;
}

/* NAVBAR */
nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,0.96);
    padding:18px 7%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 3px 20px rgba(180,80,120,.12);
}

.logo{
    font-family:'DM Serif Display',serif;
    font-size:27px;
    color:#c85b82;
}

.logo span{
    color:#e8a5bc;
}

nav ul{
    display:flex;
    gap:28px;
    list-style:none;
}

nav ul li a{
    text-decoration:none;
    color:#663b4d;
    font-weight:600;
    font-size:14px;
}

nav ul li a:hover{
    color:#d65c87;
}

/* HERO */
.hero{
    min-height:90vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:60px 8%;
    gap:50px;
    background:linear-gradient(135deg,#fff,#ffe8f0);
}

.hero-text small{
    color:#c85b82;
    letter-spacing:3px;
    font-weight:bold;
}

.hero-text h1{
    font-family:'DM Serif Display',serif;
    font-size:70px;
    line-height:1;
    margin:18px 0;
    color:#8e405d;
}

.hero-text h1 span{
    color:#d77d9d;
}

.hero-text p{
    font-size:16px;
    line-height:1.8;
    max-width:500px;
}

.btn{
    display:inline-block;
    margin-top:28px;
    padding:15px 28px;
    background:#c85b82;
    color:white;
    text-decoration:none;
    border-radius:30px;
    font-weight:bold;
    box-shadow:0 8px 20px rgba(200,91,130,.25);
}

.btn:hover{
    background:#a94368;
}

.hero-img{
    display:flex;
    justify-content:center;
}

.hero-img img{
    width:100%;
    max-width:500px;
    height:550px;
    object-fit:cover;
    border-radius:250px 250px 25px 25px;
    box-shadow:0 20px 45px rgba(160,70,100,.2);
}

/* GENERAL */
section{
    padding:80px 8%;
}

.title{
    text-align:center;
    margin-bottom:50px;
}

.title h2{
    font-family:'DM Serif Display',serif;
    font-size:43px;
    color:#8e405d;
}

.title p{
    margin-top:10px;
    color:#9a6879;
}

/* ABOUT */
.about{
    background:white;
}

.about-box{
    max-width:900px;
    margin:auto;
    text-align:center;
    line-height:1.9;
    font-size:16px;
}

/* PROFILE */
.profile{
    background:#fff0f5;
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.profile-card{
    background:white;
    padding:35px 25px;
    text-align:center;
    border-radius:25px;
    box-shadow:0 8px 25px rgba(180,80,120,.1);
}

.profile-card .icon{
    font-size:42px;
    margin-bottom:15px;
}

.profile-card h3{
    color:#b84f75;
    margin-bottom:10px;
}

.profile-card p{
    line-height:1.7;
    font-size:14px;
}

/* PRODUCTS */
.products{
    background:white;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.product{
    background:#fff8fb;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(180,80,120,.1);
    transition:.3s;
}

.product:hover{
    transform:translateY(-8px);
}

.product img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
}

.product-info{
    padding:20px;
}

.product-info h3{
    color:#843d58;
    margin-bottom:8px;
}

.product-info p{
    font-size:13px;
    color:#8d6a76;
    line-height:1.5;
}

.price{
    color:#c6537d;
    font-size:18px;
    font-weight:bold;
    margin:12px 0;
}

.buy{
    width:100%;
    border:none;
    background:#d87599;
    color:white;
    padding:12px;
    border-radius:20px;
    cursor:pointer;
    font-weight:bold;
}

.buy:hover{
    background:#b94f76;
}

/* BANNER */
.banner{
    margin-top:60px;
    padding:60px 30px;
    border-radius:35px;
    text-align:center;
    background:linear-gradient(135deg,#f7b8cc,#fff);
}

.banner h2{
    font-family:'DM Serif Display',serif;
    font-size:40px;
    color:#8e405d;
}

.banner p{
    margin-top:10px;
}

/* BMC */
.bmc{
    background:#fff0f5;
}

.bmc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.bmc-card{
    background:white;
    padding:25px;
    border-radius:22px;
    box-shadow:0 5px 20px rgba(180,80,120,.08);
}

.bmc-card h3{
    color:#c3557c;
    margin-bottom:12px;
}

.bmc-card p{
    font-size:14px;
    line-height:1.7;
}

/* CONTACT */
.contact{
    background:white;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.contact-info{
    background:#fff0f5;
    padding:35px;
    border-radius:30px;
}

.contact-info h3{
    font-family:'DM Serif Display',serif;
    font-size:30px;
    color:#8e405d;
    margin-bottom:20px;
}

.contact-item{
    margin:18px 0;
    line-height:1.6;
}

form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

input,textarea{
    border:1px solid #edbfd0;
    padding:15px;
    border-radius:15px;
    font-family:inherit;
    outline:none;
}

textarea{
    height:150px;
    resize:none;
}

button.submit{
    border:none;
    background:#c85b82;
    color:white;
    padding:15px;
    border-radius:25px;
    font-weight:bold;
    cursor:pointer;
}

/* FOOTER */
footer{
    background:#8e405d;
    color:white;
    text-align:center;
    padding:30px;
}

footer p{
    margin:5px;
    font-size:14px;
}

/* TOAST */
#toast{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#8e405d;
    color:white;
    padding:15px 22px;
    border-radius:30px;
    display:none;
    z-index:2000;
}

/* RESPONSIVE */
@media(max-width:900px){

    nav{
        flex-direction:column;
        gap:15px;
    }

    nav ul{
        gap:15px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-text p{
        margin:auto;
    }

    .hero-text h1{
        font-size:55px;
    }

    .hero-img img{
        height:450px;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .profile-grid,
    .bmc-grid{
        grid-template-columns:1fr;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:550px){

    section{
        padding:60px 5%;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .hero-text h1{
        font-size:45px;
    }

    .title h2{
        font-size:35px;
    }
}
</style>
</head>

<body>

<!-- NAVBAR -->
<nav>

    <div class="logo">
        🎀 Bless <span>&</span> Shine
    </div>

    <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#profil">Profil</a></li>
        <li><a href="#produk">Produk</a></li>
        <li><a href="#bmc">BMC</a></li>
        <li><a href="#kontak">Kontak</a></li>
    </ul>

</nav>


<!-- BERANDA -->
<section class="hero" id="beranda">

    <div class="hero-text">

        <small>BEAUTY • STYLE • ELEGANCE</small>

        <h1>
            Bless<br>
            <span>& Shine</span>
        </h1>

        <p>
            Temukan berbagai pilihan skincare dan accessories
            yang cantik, elegan, dan cocok untuk melengkapi
            penampilan sehari-hari.
        </p>

        <a href="#produk" class="btn">
            Lihat Produk ♡
        </a>

    </div>

    <div class="hero-img">

        <img
        src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?auto=format&fit=crop&w=900&q=85"
        alt="Beauty Product">

    </div>

</section>


<!-- TENTANG -->
<section class="about">

    <div class="title">
        <h2>About Bless & Shine</h2>
        <p>Beauty and accessories in one place</p>
    </div>

    <div class="about-box">

        <p>
            <b>Bless & Shine</b> merupakan usaha yang menyediakan
            berbagai produk skincare dan accessories dengan konsep
            feminin, elegan, dan kekinian.
        </p>

        <br>

        <p>
            Kami hadir untuk membantu pelanggan menemukan produk
            kecantikan dan accessories yang dapat menunjang
            penampilan serta meningkatkan rasa percaya diri.
        </p>

    </div>

</section>


<!-- PROFIL -->
<section class="profile" id="profil">

    <div class="title">
        <h2>Profil Usaha</h2>
        <p>Kenali lebih dekat Bless & Shine</p>
    </div>

    <div class="profile-grid">

        <div class="profile-card">
            <div class="icon">🎀</div>
            <h3>Visi</h3>
            <p>
                Menjadi usaha skincare dan accessories
                yang dikenal karena produk yang menarik,
                berkualitas, dan terjangkau.
            </p>
        </div>

        <div class="profile-card">
            <div class="icon">✨</div>
            <h3>Misi</h3>
            <p>
                Menyediakan produk yang sesuai dengan kebutuhan
                pelanggan serta memberikan pelayanan yang ramah.
            </p>
        </div>

        <div class="profile-card">
            <div class="icon">💗</div>
            <h3>Konsep</h3>
            <p>
                Menggabungkan skincare dan accessories
                dengan konsep feminin, cute, aesthetic,
                dan elegan.
            </p>
        </div>

    </div>

</section>


<!-- PRODUK -->
<section class="products" id="produk">

    <div class="title">
        <h2>Our Products</h2>
        <p>Skincare & accessories pilihan</p>
    </div>

    <div class="product-grid">


        <!-- PRODUK 1 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1556229010-6c3f2c9ca5f8?auto=format&fit=crop&w=700&q=85"
            alt="Skincare">

            <div class="product-info">

                <h3>Daily Facial Care</h3>

                <p>
                    Perawatan wajah untuk digunakan
                    dalam rutinitas sehari-hari.
                </p>

                <div class="price">
                    Rp35.000
                </div>

                <button class="buy"
                onclick="addCart('Daily Facial Care')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 2 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1571781926291-c477ebfd024b?auto=format&fit=crop&w=700&q=85"
            alt="Skincare">

            <div class="product-info">

                <h3>Hydrating Care</h3>

                <p>
                    Produk perawatan untuk membantu
                    menjaga kelembapan kulit.
                </p>

                <div class="price">
                    Rp45.000
                </div>

                <button class="buy"
                onclick="addCart('Hydrating Care')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 3 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&w=700&q=85"
            alt="Beauty Products">

            <div class="product-info">

                <h3>Beauty Essentials</h3>

                <p>
                    Pilihan beauty essentials untuk
                    melengkapi koleksi kecantikan.
                </p>

                <div class="price">
                    Rp50.000
                </div>

                <button class="buy"
                onclick="addCart('Beauty Essentials')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 4 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1611652022419-a9419f74343d?auto=format&fit=crop&w=700&q=85"
            alt="Necklace">

            <div class="product-info">

                <h3>Elegant Necklace</h3>

                <p>
                    Kalung minimalis untuk memberikan
                    kesan elegan pada penampilan.
                </p>

                <div class="price">
                    Rp30.000
                </div>

                <button class="buy"
                onclick="addCart('Elegant Necklace')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 5 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=700&q=85"
            alt="Ring">

            <div class="product-info">

                <h3>Sweet Ring</h3>

                <p>
                    Cincin dengan desain manis yang
                    cocok untuk berbagai outfit.
                </p>

                <div class="price">
                    Rp20.000
                </div>

                <button class="buy"
                onclick="addCart('Sweet Ring')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 6 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1573408301185-9146fe634ad0?auto=format&fit=crop&w=700&q=85"
            alt="Bracelet">

            <div class="product-info">

                <h3>Charm Bracelet</h3>

                <p>
                    Gelang cantik untuk mempermanis
                    penampilan sehari-hari.
                </p>

                <div class="price">
                    Rp25.000
                </div>

                <button class="buy"
                onclick="addCart('Charm Bracelet')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 7 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=700&q=85"
            alt="Jewelry">

            <div class="product-info">

                <h3>Coquette Collection</h3>

                <p>
                    Accessories dengan gaya feminin
                    dan aesthetic.
                </p>

                <div class="price">
                    Rp35.000
                </div>

                <button class="buy"
                onclick="addCart('Coquette Collection')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>


        <!-- PRODUK 8 -->
        <div class="product">

            <img
            src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?auto=format&fit=crop&w=700&q=85"
            alt="Beauty Set">

            <div class="product-info">

                <h3>Beauty Gift Set</h3>

                <p>
                    Paket cantik yang cocok untuk
                    hadiah maupun penggunaan pribadi.
                </p>

                <div class="price">
                    Rp75.000
                </div>

                <button class="buy"
                onclick="addCart('Beauty Gift Set')">
                    Tambah ke Keranjang
                </button>

            </div>

        </div>

    </div>


    <div class="banner">

        <h2>Shine Every Day ✨</h2>

        <p>
            Your beauty, your style, your shine.
        </p>

    </div>

</section>


<!-- BMC -->
<section class="bmc" id="bmc">

    <div class="title">
        <h2>Business Model Canvas</h2>
        <p>Konsep bisnis Bless & Shine</p>
    </div>

    <div class="bmc-grid">

        <div class="bmc-card">
            <h3>1. Customer Segments</h3>
            <p>
                Remaja, pelajar, mahasiswa, dan perempuan
                yang menyukai skincare serta accessories.
            </p>
        </div>

        <div class="bmc-card">
            <h3>2. Value Proposition</h3>
            <p>
                Produk cantik, aesthetic, terjangkau,
                dan cocok untuk kebutuhan sehari-hari.
            </p>
        </div>

        <div class="bmc-card">
            <h3>3. Channels</h3>
            <p>
                Instagram, WhatsApp, website,
                dan penjualan secara langsung.
            </p>
        </div>

        <div class="bmc-card">
            <h3>4. Customer Relationships</h3>
            <p>
                Pelayanan ramah, fast response,
                promo, dan komunikasi dengan pelanggan.
            </p>
        </div>

        <div class="bmc-card">
            <h3>5. Revenue Streams</h3>
            <p>
                Pendapatan berasal dari penjualan
                skincare, accessories, dan gift set.
            </p>
        </div>

        <div class="bmc-card">
            <h3>6. Key Resources</h3>
            <p>
                Produk, supplier, modal, kemasan,
                media sosial, dan website.
            </p>
        </div>

        <div class="bmc-card">
            <h3>7. Key Activities</h3>
            <p>
                Pengadaan produk, promosi,
                penjualan, packing, dan pelayanan.
            </p>
        </div>

        <div class="bmc-card">
            <h3>8. Key Partners</h3>
            <p>
                Supplier skincare, supplier accessories,
                jasa pengiriman, dan partner promosi.
            </p>
        </div>

        <div class="bmc-card">
            <h3>9. Cost Structure</h3>
            <p>
                Biaya pembelian produk, kemasan,
                promosi, transportasi, dan operasional.
            </p>
        </div>

    </div>

</section>


<!-- KONTAK -->
<section class="contact" id="kontak">

    <div class="title">
        <h2>Contact Us</h2>
        <p>Hubungi Bless & Shine</p>
    </div>

    <div class="contact-grid">

        <div class="contact-info">

            <h3>Let's Connect 🎀</h3>

            <div class="contact-item">
                📱 <b>WhatsApp</b><br>
                0812-3456-7890
            </div>

            <div class="contact-item">
                📸 <b>Instagram</b><br>
                @blessandshine
            </div>

            <div class="contact-item">
                📧 <b>Email</b><br>
                blessandshine@gmail.com
            </div>

            <div class="contact-item">
                📍 <b>Lokasi</b><br>
                Medan, Sumatera Utara
            </div>

        </div>


        <form onsubmit="sendMessage(event)">

            <input
            type="text"
            placeholder="Nama kamu"
            required>

            <input
            type="email"
            placeholder="Email kamu"
            required>

            <input
            type="text"
            placeholder="Produk yang ingin ditanyakan">

            <textarea
            placeholder="Tulis pesan kamu..."
            required></textarea>

            <button
            type="submit"
            class="submit">
                Kirim Pesan 💗
            </button>

        </form>

    </div>

</section>


<!-- FOOTER -->
<footer>

    <p>🎀 Bless & Shine</p>

    <p>
        Skincare • Accessories • Beauty
    </p>

    <p>
        © 2026 Bless & Shine. All Rights Reserved.
    </p>

</footer>


<!-- TOAST -->
<div id="toast"></div>


<script>

function addCart(product){

    const toast = document.getElementById("toast");

    toast.innerHTML =
    "💗 " + product + " berhasil ditambahkan!";

    toast.style.display = "block";

    setTimeout(function(){

        toast.style.display = "none";

    },2500);
}


function sendMessage(event){

    event.preventDefault();

    const toast = document.getElementById("toast");

    toast.innerHTML =
    "🎀 Pesan berhasil dikirim!";

    toast.style.display = "block";

    setTimeout(function(){

        toast.style.display = "none";

    },2500);

}

</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
501KB
Transfer Size
507KB
Content Size
300.0ms
Dom Content Loaded
112.0ms
First Paint
514.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