<!--
  LUXURY JEWELLERY HOMEPAGE
  WordPress Custom HTML Block
  Replace image URLs and # links with your own assets/pages.
-->

<style>
  .lf-site {
    --black:#111111;
    --charcoal:#242424;
    --cream:#f8f6f2;
    --gold:#b18a52;
    --light:#f3f1ed;
    --white:#fff;
    --border:#dedbd5;
    font-family: Arial, Helvetica, sans-serif;
    color:var(--black);
    background:#fff;
    line-height:1.5;
  }

  .lf-site * { box-sizing:border-box; }

  .lf-site a {
    color:inherit;
    text-decoration:none;
  }

  /* TOP BAR */
  .lf-topbar {
    background:var(--black);
    color:#fff;
    text-align:center;
    font-size:12px;
    letter-spacing:.08em;
    padding:9px 15px;
  }

  .lf-topbar span {
    margin:0 18px;
  }

  /* HEADER */
  .lf-header {
    background:#fff;
    border-bottom:1px solid var(--border);
    position:relative;
    z-index:10;
  }

  .lf-header-main {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 4%;
    gap:30px;
  }

  .lf-logo {
    font-family:Georgia, serif;
    font-size:27px;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .lf-logo small {
    display:block;
    font-family:Arial,sans-serif;
    font-size:8px;
    letter-spacing:.3em;
    text-align:center;
    margin-top:-3px;
  }

  .lf-search {
    flex:1;
    max-width:500px;
    position:relative;
  }

  .lf-search input {
    width:100%;
    border:0;
    border-bottom:1px solid #999;
    padding:11px 35px 10px 5px;
    font-size:13px;
    outline:none;
  }

  .lf-search button {
    position:absolute;
    right:0;
    top:6px;
    border:0;
    background:none;
    font-size:18px;
    cursor:pointer;
  }

  .lf-actions {
    display:flex;
    gap:20px;
    font-size:12px;
    white-space:nowrap;
  }

  /* NAV */
  .lf-nav {
    display:flex;
    justify-content:center;
    gap:30px;
    border-top:1px solid #eee;
    padding:14px 20px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .lf-nav a:hover {
    color:var(--gold);
  }

  /* HERO */
  .lf-hero {
    min-height:610px;
    background:
      linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.05)),
      url('https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=2200&q=85')
      center/cover no-repeat;
    display:flex;
    align-items:center;
    color:#fff;
  }

  .lf-hero-content {
    max-width:600px;
    padding:80px 7%;
  }

  .lf-eyebrow {
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:11px;
    margin-bottom:18px;
  }

  .lf-hero h1 {
    font-family:Georgia,serif;
    font-size:clamp(42px,6vw,76px);
    font-weight:400;
    line-height:1.02;
    margin:0 0 22px;
  }

  .lf-hero p {
    font-size:17px;
    max-width:470px;
    margin-bottom:30px;
  }

  .lf-button {
    display:inline-block;
    padding:14px 27px;
    background:#fff;
    color:#111;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    border:1px solid #fff;
    transition:.25s;
  }

  .lf-button:hover {
    background:transparent;
    color:#fff;
  }

  .lf-button.dark {
    background:#111;
    color:#fff;
    border-color:#111;
  }

  .lf-button.dark:hover {
    background:#fff;
    color:#111;
  }

  /* TRUST BAR */
  .lf-trust {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid var(--border);
  }

  .lf-trust-item {
    text-align:center;
    padding:23px 15px;
    border-right:1px solid var(--border);
    font-size:12px;
  }

  .lf-trust-item:last-child {
    border-right:0;
  }

  .lf-trust-item strong {
    display:block;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:10px;
    margin-bottom:4px;
  }

  /* GENERAL */
  .lf-section {
    padding:75px 5%;
  }

  .lf-section-header {
    text-align:center;
    max-width:650px;
    margin:0 auto 42px;
  }

  .lf-section-header h2 {
    font-family:Georgia,serif;
    font-size:39px;
    font-weight:400;
    margin:0 0 10px;
  }

  .lf-section-header p {
    color:#666;
    margin:0;
  }

  /* CATEGORIES */
  .lf-category-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }

  .lf-category {
    position:relative;
    height:390px;
    overflow:hidden;
    background:#eee;
  }

  .lf-category img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
  }

  .lf-category:hover img {
    transform:scale(1.04);
  }

  .lf-category-overlay {
    position:absolute;
    inset:auto 0 0;
    padding:35px 20px 22px;
    color:#fff;
    text-align:center;
    background:linear-gradient(transparent,rgba(0,0,0,.72));
  }

  .lf-category-overlay h3 {
    font-family:Georgia,serif;
    font-size:26px;
    font-weight:400;
    margin:0 0 8px;
  }

  .lf-category-overlay span {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
  }

  /* FEATURE SPLIT */
  .lf-split {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:520px;
    background:var(--cream);
  }

  .lf-split-image {
    min-height:520px;
    background:
      url('https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=1400&q=85')
      center/cover no-repeat;
  }

  .lf-split-content {
    display:flex;
    align-items:center;
    padding:70px 10%;
  }

  .lf-split-content h2 {
    font-family:Georgia,serif;
    font-size:44px;
    line-height:1.1;
    font-weight:400;
    margin:0 0 20px;
  }

  .lf-split-content p {
    color:#555;
    max-width:480px;
    margin-bottom:27px;
  }

  /* STYLE GRID */
  .lf-style-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
  }

  .lf-style {
    text-align:center;
  }

  .lf-style img {
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    margin-bottom:10px;
  }

  .lf-style span {
    font-family:Georgia,serif;
    font-size:17px;
  }

  /* PRODUCTS */
  .lf-products {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
  }

  .lf-product-image {
    position:relative;
    background:#f5f4f1;
    aspect-ratio:1/1.05;
    overflow:hidden;
  }

  .lf-product-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
  }

  .lf-product:hover img {
    transform:scale(1.03);
  }

  .lf-heart {
    position:absolute;
    right:13px;
    top:13px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:0;
    background:#fff;
    cursor:pointer;
    font-size:17px;
  }

  .lf-product-info {
    padding:14px 2px;
  }

  .lf-product-info h3 {
    font-family:Georgia,serif;
    font-size:17px;
    font-weight:400;
    margin:0 0 6px;
  }

  .lf-price {
    font-size:13px;
    color:#555;
  }

  /* VALUES */
  .lf-values {
    background:#f7f6f3;
  }

  .lf-value-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
  }

  .lf-value {
    text-align:center;
  }

  .lf-value-icon {
    width:55px;
    height:55px;
    margin:0 auto 18px;
    border:1px solid var(--gold);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    font-size:22px;
  }

  .lf-value h3 {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:20px;
  }

  .lf-value p {
    color:#666;
    font-size:13px;
  }

  /* TESTIMONIAL */
  .lf-testimonial {
    text-align:center;
    max-width:760px;
    margin:auto;
  }

  .lf-stars {
    color:var(--gold);
    letter-spacing:4px;
    margin-bottom:18px;
  }

  .lf-testimonial blockquote {
    font-family:Georgia,serif;
    font-size:29px;
    line-height:1.35;
    font-weight:400;
    margin:0 0 20px;
  }

  .lf-testimonial cite {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-style:normal;
  }

  /* NEWSLETTER */
  .lf-newsletter {
    background:#191919;
    color:#fff;
    text-align:center;
    padding:70px 20px;
  }

  .lf-newsletter h2 {
    font-family:Georgia,serif;
    font-size:36px;
    font-weight:400;
    margin:0 0 10px;
  }

  .lf-newsletter p {
    color:#ccc;
    margin-bottom:25px;
  }

  .lf-newsletter-form {
    max-width:480px;
    margin:auto;
    display:flex;
  }

  .lf-newsletter-form input {
    flex:1;
    padding:14px;
    border:0;
    min-width:0;
  }

  .lf-newsletter-form button {
    padding:14px 23px;
    border:0;
    background:var(--gold);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:10px;
    cursor:pointer;
  }

  /* FOOTER */
  .lf-footer {
    background:#111;
    color:#fff;
    padding:60px 5% 25px;
  }

  .lf-footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    padding-bottom:50px;
  }

  .lf-footer h3 {
    font-family:Georgia,serif;
    font-weight:400;
    font-size:21px;
    margin-top:0;
  }

  .lf-footer h4 {
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.15em;
    color:#aaa;
  }

  .lf-footer p,
  .lf-footer a {
    color:#aaa;
    font-size:12px;
  }

  .lf-footer a {
    display:block;
    margin:8px 0;
  }

  .lf-footer a:hover {
    color:#fff;
  }

  .lf-footer-bottom {
    border-top:1px solid #333;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    color:#777;
    font-size:10px;
  }

  /* MOBILE */
  @media(max-width:900px) {
    .lf-search { display:none; }
    .lf-nav {
      overflow-x:auto;
      justify-content:flex-start;
      white-space:nowrap;
      gap:20px;
    }

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

    .lf-style-grid {
      grid-template-columns:repeat(3,1fr);
    }

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

    .lf-split {
      grid-template-columns:1fr;
    }

    .lf-split-image {
      min-height:380px;
    }

    .lf-footer-grid {
      grid-template-columns:1fr 1fr;
    }
  }

  @media(max-width:600px) {
    .lf-header-main {
      height:64px;
      padding:0 18px;
    }

    .lf-logo {
      font-size:21px;
    }

    .lf-actions {
      gap:10px;
      font-size:10px;
    }

    .lf-topbar span {
      margin:0 5px;
    }

    .lf-hero {
      min-height:560px;
    }

    .lf-hero-content {
      padding:50px 25px;
    }

    .lf-section {
      padding:55px 18px;
    }

    .lf-category-grid {
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .lf-category {
      height:260px;
    }

    .lf-category-overlay h3 {
      font-size:20px;
    }

    .lf-products {
      grid-template-columns:1fr 1fr;
      gap:12px;
    }

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

    .lf-value-grid {
      grid-template-columns:1fr;
    }

    .lf-trust {
      grid-template-columns:1fr 1fr;
    }

    .lf-trust-item {
      border-bottom:1px solid var(--border);
    }

    .lf-footer-grid {
      grid-template-columns:1fr;
      gap:25px;
    }

    .lf-footer-bottom {
      flex-direction:column;
      gap:10px;
    }

    .lf-newsletter-form {
      flex-direction:column;
      gap:7px;
    }
  }
</style>


<div class="lf-site">

  <!-- TOP BAR -->
  <div class="lf-topbar">
    <span>FREE SHIPPING</span>
    <span>30 DAY RETURNS</span>
    <span>LIFETIME GUARANTEE</span>
  </div>


  <!-- HEADER -->
  <header class="lf-header">

    <div class="lf-header-main">

      <a href="#" class="lf-logo">
        LUMIÈRE
        <small>FINE JEWELLERY</small>
      </a>

      <form class="lf-search">
        <input type="search" placeholder="Search jewellery...">
        <button type="submit">⌕</button>
      </form>

      <div class="lf-actions">
        <a href="#">♡ Wishlist</a>
        <a href="#">Account</a>
        <a href="#">Bag (0)</a>
      </div>

    </div>

    <nav class="lf-nav">
      <a href="#">New Arrivals</a>
      <a href="#">Engagement</a>
      <a href="#">Diamond Rings</a>
      <a href="#">Wedding Rings</a>
      <a href="#">Earrings</a>
      <a href="#">Pendants</a>
      <a href="#">Bracelets</a>
      <a href="#">Gemstones</a>
      <a href="#">Gifts</a>
      <a href="#">Custom Design</a>
    </nav>

  </header>


  <!-- HERO -->
  <section class="lf-hero">

    <div class="lf-hero-content">

      <div class="lf-eyebrow">Made for your forever</div>

      <h1>Jewellery as individual as you.</h1>

      <p>
        Discover beautifully crafted fine jewellery, made with exceptional
        materials and designed to mark the moments that matter.
      </p>

      <a href="#" class="lf-button">Explore the collection</a>

    </div>

  </section>


  <!-- TRUST -->
  <section class="lf-trust">

    <div class="lf-trust-item">
      <strong>Expert Craftsmanship</strong>
      Made with care
    </div>

    <div class="lf-trust-item">
      <strong>Exceptional Value</strong>
      Direct-to-you pricing
    </div>

    <div class="lf-trust-item">
      <strong>Free Returns</strong>
      Shop with confidence
    </div>

    <div class="lf-trust-item">
      <strong>Lifetime Care</strong>
      Here for the journey
    </div>

  </section>


  <!-- CATEGORIES -->
  <section class="lf-section">

    <div class="lf-section-header">
      <h2>Find your perfect piece</h2>
      <p>
        From timeless classics to contemporary designs, discover jewellery
        created for every occasion.
      </p>
    </div>

    <div class="lf-category-grid">

      <a href="#" class="lf-category">
        <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=900&q=80" alt="Engagement rings">
        <div class="lf-category-overlay">
          <h3>Engagement Rings</h3>
          <span>Shop collection →</span>
        </div>
      </a>

      <a href="#" class="lf-category">
        <img src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=900&q=80" alt="Diamond rings">
        <div class="lf-category-overlay">
          <h3>Diamond Rings</h3>
          <span>Shop collection →</span>
        </div>
      </a>

      <a href="#" class="lf-category">
        <img src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=900&q=80" alt="Earrings">
        <div class="lf-category-overlay">
          <h3>Earrings</h3>
          <span>Shop collection →</span>
        </div>
      </a>

      <a href="#" class="lf-category">
        <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=900&q=80" alt="Fine jewellery">
        <div class="lf-category-overlay">
          <h3>Fine Jewellery</h3>
          <span>Explore all →</span>
        </div>
      </a>

    </div>

  </section>


  <!-- CUSTOM DESIGN -->
  <section class="lf-split">

    <div class="lf-split-image"></div>

    <div class="lf-split-content">

      <div>

        <div class="lf-eyebrow">Made around you</div>

        <h2>Create something uniquely yours.</h2>

        <p>
          Bring your vision to life with our custom jewellery service.
          Choose your stone, metal and setting, then let our craftspeople
          create a piece made specifically for you.
        </p>

        <a href="#" class="lf-button dark">Discover custom design</a>

      </div>

    </div>

  </section>


  <!-- RING STYLES -->
  <section class="lf-section">

    <div class="lf-section-header">
      <h2>Explore ring styles</h2>
      <p>Find a setting that feels unmistakably you.</p>
    </div>

    <div class="lf-style-grid">

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Solitaire</span>
      </a>

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1598560912005-59a0e7d9e4d6?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Halo</span>
      </a>

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1589674781759-c21c37956a44?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Vintage</span>
      </a>

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1603561596112-db2e3f7f7c5a?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Trilogy</span>
      </a>

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1627293509201-cd2b3a6c3c2a?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Side Stone</span>
      </a>

      <a href="#" class="lf-style">
        <img src="https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=600&q=80" alt="">
        <span>Bridal Set</span>
      </a>

    </div>

  </section>


  <!-- PRODUCTS -->
  <section class="lf-section" style="background:#f8f7f4;">

    <div class="lf-section-header">
      <h2>New arrivals</h2>
      <p>Fresh designs, thoughtfully made.</p>
    </div>

    <div class="lf-products">

      <article class="lf-product">
        <a href="#">
          <div class="lf-product-image">
            <button class="lf-heart">♡</button>
            <img src="https://images.unsplash.com/photo-1617038260897-41a1f14a8ca0?auto=format&fit=crop&w=800&q=80" alt="Diamond ring">
          </div>
          <div class="lf-product-info">
            <h3>Oval Diamond Solitaire Ring</h3>
            <div class="lf-price">From $1,895</div>
          </div>
        </a>
      </article>

      <article class="lf-product">
        <a href="#">
          <div class="lf-product-image">
            <button class="lf-heart">♡</button>
            <img src="https://images.unsplash.com/photo-1603561596112-db2e3f7f7c5a?auto=format&fit=crop&w=800&q=80" alt="Gold ring">
          </div>
          <div class="lf-product-info">
            <h3>Classic Diamond Band</h3>
            <div class="lf-price">From $895</div>
          </div>
        </a>
      </article>

      <article class="lf-product">
        <a href="#">
          <div class="lf-product-image">
            <button class="lf-heart">♡</button>
            <img src="https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&w=800&q=80" alt="Diamond earrings">
          </div>
          <div class="lf-product-info">
            <h3>Round Diamond Stud Earrings</h3>
            <div class="lf-price">From $695</div>
          </div>
        </a>
      </article>

      <article class="lf-product">
        <a href="#">
          <div class="lf-product-image">
            <button class="lf-heart">♡</button>
            <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=800&q=80" alt="Gold pendant">
          </div>
          <div class="lf-product-info">
            <h3>Solitaire Diamond Pendant</h3>
            <div class="lf-price">From $495</div>
          </div>
        </a>
      </article>

    </div>

  </section>


  <!-- VALUE / APPROACH -->
  <section class="lf-section lf-values">

    <div class="lf-section-header">
      <h2>Our approach</h2>
      <p>Exceptional jewellery should come with an exceptional experience.</p>
    </div>

    <div class="lf-value-grid">

      <div class="lf-value">
        <div class="lf-value-icon">◇</div>
        <h3>Exceptional Quality</h3>
        <p>
          Carefully selected materials and meticulous craftsmanship
          go into every piece.
        </p>
      </div>

      <div class="lf-value">
        <div class="lf-value-icon">✦</div>
        <h3>Honest Value</h3>
        <p>
          Beautiful jewellery at considered prices, without
          unnecessary markups.
        </p>
      </div>

      <div class="lf-value">
        <div class="lf-value-icon">♢</div>
        <h3>Made to Order</h3>
        <p>
          Personalise your jewellery with the details that make
          it yours.
        </p>
      </div>

      <div class="lf-value">
        <div class="lf-value-icon">♡</div>
        <h3>Personal Service</h3>
        <p>
          Real guidance from people who care about helping you
          find the right piece.
        </p>
      </div>

    </div>

  </section>


  <!-- TESTIMONIAL -->
  <section class="lf-section">

    <div class="lf-testimonial">

      <div class="lf-stars">★★★★★</div>

      <blockquote>
        “Beautiful craftsmanship, incredible service and a piece
        we will treasure for years to come.”
      </blockquote>

      <cite>Verified customer</cite>

    </div>

  </section>


  <!-- NEWSLETTER -->
  <section class="lf-newsletter">

    <h2>Stay in the know</h2>

    <p>
      Be the first to discover new collections, special offers
      and jewellery inspiration.
    </p>

    <form class="lf-newsletter-form">
      <input type="email" placeholder="Your email address" required>
      <button type="submit">Subscribe</button>
    </form>

  </section>


  <!-- FOOTER -->
  <footer class="lf-footer">

    <div class="lf-footer-grid">

      <div>
        <h3>LUMIÈRE</h3>
        <p>
          Fine jewellery thoughtfully designed and beautifully made
          for life's most meaningful moments.
        </p>
      </div>

      <div>
        <h4>Shop</h4>
        <a href="#">Engagement Rings</a>
        <a href="#">Diamond Rings</a>
        <a href="#">Wedding Rings</a>
        <a href="#">Earrings</a>
        <a href="#">Pendants</a>
        <a href="#">Bracelets</a>
      </div>

      <div>
        <h4>Services</h4>
        <a href="#">Custom Design</a>
        <a href="#">Book an Appointment</a>
        <a href="#">Ring Size Guide</a>
        <a href="#">Jewellery Care</a>
        <a href="#">Delivery</a>
        <a href="#">Returns</a>
      </div>

      <div>
        <h4>About</h4>
        <a href="#">Our Story</a>
        <a href="#">Contact</a>
        <a href="#">FAQs</a>
        <a href="#">Journal</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </div>

    </div>

    <div class="lf-footer-bottom">
      <span>© 2026 Lumière Fine Jewellery. All rights reserved.</span>
      <span>Made with care.</span>
    </div>

  </footer>

</div>