Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Opális Webdesign - Meet the Team</title>
  <style>
    :root{
      --primary:#1877f2;--primary-dark:#125ac0;
      --text-main:#ffffff;--text-muted:#d8e2ee;
      --shadow-soft:0 18px 44px rgba(0,0,0,.46);
      --transition:.25s ease;
      --font-stack:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",-system-ui,sans-serif
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:var(--font-stack);
      background:
        radial-gradient(circle at top left, rgba(24,119,242,.12), transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,.6), transparent 60%),
        #071821;
      color:var(--text-main);
      overflow-x:hidden
    }
    .taakbalk{
      position:fixed;top:16px;left:50%;transform:translateX(-50%);
      padding:12px 22px;display:flex;align-items:center;gap:26px;justify-content:space-between;
      backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
      background:radial-gradient(circle at top left, rgba(24,119,242,.14), transparent 70%) rgba(5,16,24,.74);
      border-radius:999px;border:1px solid rgba(255,255,255,.08);
      box-shadow:0 18px 48px rgba(0,0,0,.32);z-index:9999;width:max(68%,960px);max-width:1180px;transition:var(--transition)
    }
    .taakbalk.scrolled{padding:9px 20px;background:radial-gradient(circle at top left, rgba(24,119,242,.18), transparent 75%) rgba(3,10,15,.96);border-color:rgba(255,255,255,.12);box-shadow:0 12px 40px rgba(0,0,0,.45)}
    .logo{font-size:1.2rem;font-weight:700;letter-spacing:.08em;color:#fff}
    .logo span{color:var(--primary)}
    .nav{display:flex;gap:24px;font-size:.9rem;color:var(--text-muted);align-items:center;flex:1;justify-content:center}
    .nav a{text-decoration:none;color:inherit;position:relative;padding-bottom:3px;transition:var(--transition)}
    .nav a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:var(--primary);transition:var(--transition);border-radius:999px;transform:translateX(-50%)}
    .nav a:hover{color:#fff}.nav a:hover::after{width:16px}
    .taakbalk-cta{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .btn-primary-outline{padding:8px 16px;border-radius:999px;border:1px solid var(--primary);color:var(--primary);font-size:.8rem;font-weight:600;transition:var(--transition);background:rgba(3,8,14,.6);backdrop-filter:blur(14px)}
    .btn-primary-outline:hover{background:var(--primary);color:#fff;box-shadow:0 8px 22px rgba(24,119,242,.38);transform:translateY(-1px)}
    @media (max-width:980px){.nav{display:none}.taakbalk{width:94%}}

    .team-page{padding-top:96px;padding-bottom:16px;min-height:100vh;display:flex;justify-content:center}
    .team-grid{width:min(1280px,100%);margin:0 auto;padding:4px 4% 8px;display:grid;grid-template-columns:220px minmax(0,1.6fr) 180px;gap:22px;align-items:flex-start}
    .side-pill-wrap{display:flex;flex-direction:column;gap:8px}
    .side-pill{display:inline-flex;align-items:center;gap:14px;padding:10px 20px;background:#e5f1ff;color:#0b1c2b;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.14);font-size:.8rem}
    .side-pill .pill-left{background:var(--primary);color:#fff;padding:8px 14px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px;white-space:nowrap;font-size:.7rem;font-weight:600}
    .side-intro{font-size:.8rem;line-height:1.7;color:var(--primary);max-width:220px}

    .cards-wrap{display:flex;gap:16px;align-items:stretch}
    .member-rect{
      flex:1;position:relative;
      background:radial-gradient(circle at top left, rgba(24,119,242,.18), transparent 70%) rgba(5,16,23,.98);
      border-radius:26px;border:1px solid rgba(255,255,255,.06);
      box-shadow:var(--shadow-soft);
      padding:14px 12px 10px;
      display:flex;flex-direction:column;gap:6px;overflow:hidden;
      backdrop-filter:blur(18px)
    }
    .member-label{font-size:.64rem;font-weight:600;letter-spacing:.16em;color:rgba(135,168,210,.9);text-transform:uppercase}
    .member-role{font-size:.7rem;font-weight:500;color:var(--primary);text-transform:uppercase;letter-spacing:.14em;margin-top:1px}
    .member-name{font-size:1.18rem;font-weight:700;color:#fff;margin-top:4px}

    .member-photo{
      margin-top:6px;width:100%;height:320px;
      border-radius:18px;overflow:hidden;
      background:#0a1720;border:1px solid rgba(255,255,255,.08);
      display:flex;align-items:center;justify-content:center
    }
    .member-photo img{width:100%;height:100%;object-fit:cover;display:block}

    .member-text{margin-top:4px;font-size:.84rem;line-height:1.6;color:var(--text-muted)}
    .member-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;font-size:.72rem}
    .member-tags span{padding:4px 9px;border-radius:999px;background:rgba(3,10,16,.98);border:1px solid rgba(255,255,255,.08);color:rgba(216,226,238,.94);display:inline-flex;align-items:center;gap:5px}
    .member-tags span::before{content:"•";color:var(--primary)}
    .member-bio{margin-top:4px;background:rgba(255,255,255,.03);border-radius:16px;padding:6px 8px;border:1px solid rgba(255,255,255,.06);font-size:.8rem;line-height:1.7;color:var(--text-muted)}
    .member-cta{margin-top:2px;font-size:.76rem}
    .member-cta a{color:var(--primary);font-weight:600;text-decoration:none}
    .member-cta a:hover{color:var(--primary-dark);text-decoration:underline}

    .side-cta{font-size:.78rem;line-height:1.7;color:rgba(216,226,238,.7);max-width:160px;padding-top:4px}
    .side-cta a{color:var(--primary);font-weight:600;text-decoration:none}
    .side-cta a:hover{color:var(--primary-dark);text-decoration:underline}

    @media (max-width:980px){
      .team-page{padding-top:90px}
      .team-grid{grid-template-columns:1fr;gap:10px;padding:4px 5% 8px}
      .cards-wrap{flex-direction:column;gap:12px}
      .side-cta{max-width:none}
    }
    @media (max-width:480px){
      .team-page{padding-top:82px;padding-bottom:10px}
      .team-grid{padding:2px 5% 6px;gap:6px}
      .member-photo{height:260px}
      .member-bio{font-size:.78rem;line-height:1.6}
    }
  </style>
</head>
<body>

<div class="taakbalk">
  <div class="logo">Opális<span>Webdesign</span></div>
  <nav class="nav">
    <a href="/">Home</a>
    <a href="/#diensten">Diensten</a>
    <a href="https://proconnect24.com/werkwijze">Werkwijze</a>
    <a href="/#cases">Cases</a>
    <a href="https://proconnect24.com/meet-the-team">The Team</a>
    <a href="https://proconnect24.com/contact">Contact</a>
  </nav>
  <div class="taakbalk-cta">
    <a href="#contact" class="text-link">Offerte</a>
    <a href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call" class="btn-primary-outline">Plan een call</a>
  </div>
</div>

<main class="team-page" id="team">
  <div class="team-grid">

    <aside class="side-pill-wrap">
      <div class="side-pill">
        <div class="pill-left"><span>OPÁLIS</span><span>TEAM</span></div>
        <div class="pill-right">CREATIVE ENGINEERING,<br> ZONDER RUIS.</div>
      </div>
      <p class="side-intro">
        Rechtstreeks schakelen met twee experts die jouw merkstrategie, design,
        techniek en optimalisatie in één gestroomlijnd proces gieten.
      </p>
    </aside>

    <section class="cards-wrap">

      
      <article class="member-rect">
        <div class="member-label">Founder</div>
        <div class="member-role">Head of Creative Engineering &amp; Sales</div>
        <div class="member-name">Dimitri G. Simonis</div>

        <div class="member-photo">
          <img
            src="https://drive.google.com/thumbnail?id=1018H3rfZ7GMSwka964FvALnhmbj7F1LT&sz=w1200"
            alt="Dimitri G. Simonis"
            loading="lazy"
            decoding="async"
            referrerpolicy="no-referrer"
          />
        </div>

        <p class="member-text">Dimitri is het creatieve brein achter <strong>Opális Webdesign</strong>.</p>
        <div class="member-tags">
          <span>Creative engineering</span><span>Sales &amp; funnels</span><span>Brand positioning</span>
        </div>
        <div class="member-bio">
          Dimitri koppelt merkstrategie, conversiepsychologie en strak, modern design aan elkaar om websites te bouwen die presteren.
        </div>
        <div class="member-cta">
          Wil je sparren met Dimitri?
          <a href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call">Plan een call ↗</a>
        </div>
      </article>

      
      <article class="member-rect">
        <div class="member-label">Implementation</div>
        <div class="member-role">Head of Implementation &amp; Optimising</div>
        <div class="member-name">Ryan Heidekamp</div>

        <div class="member-photo">
          <img
            src="https://drive.google.com/thumbnail?id=12I7U8N5_XA59fkcb2XaPrTXthnom9Lxp&sz=w1200"
            alt="Ryan Heidekamp"
            loading="lazy"
            decoding="async"
            referrerpolicy="no-referrer"
          />
        </div>

        <p class="member-text">Ryan zorgt dat alles onder de motorkap klopt.</p>
        <div class="member-tags">
          <span>Technische implementatie</span><span>Performance &amp; SEO</span><span>Data &amp; optimalisatie</span>
        </div>
        <div class="member-bio">
          Hij richt techniek, snelheid, tracking en funnel-logica zo in dat elke klik meetbaar is en elke verbetering onderbouwd.
        </div>
        <div class="member-cta">
          Klaar om met Ryan te schakelen?
          <a href="https://calendly.com/ryanheidekamp1/30min">Plan een strategiecall ↗</a>
        </div>
      </article>

    </section>

    <aside class="side-cta" id="contact">
      Liever direct duidelijkheid?<br>
      <a href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call">Plan een gratis strategiecall.</a>
    </aside>

  </div>
</main>

<script>
  const taakbalk = document.querySelector('.taakbalk');
  window.addEventListener('scroll', () => {
    if (window.scrollY > 20) taakbalk.classList.add('scrolled');
    else taakbalk.classList.remove('scrolled');
  });
</script>

</body>
</html>

Opális

✅ Durable.co Website Generation Prompt

Business Name: OpálisWebdesign
Industry: Web Design & Development
Business Description:
We are a team of passionate and experienced web developers who strive for greatness in every project. At OpálisWebdesign, we specialize in crafting elegant, high-performing websites that help businesses stand out and succeed online.

Page Type: Landing Page

Design Style:

Professional and modern

Clean layout with intuitive navigation

Use of professional colors (e.g. navy, charcoal, white, teal accents)

Main Headline:
Elevate Your Online Presence with OpálisWebdesign

Subheadline:
Tailored web solutions that combine aesthetics, performance, and innovation.

Sections to Include:

Hero section with headline, subheadline, and CTA button (“Get a Free Quote” or “Let’s Talk”)

About Us: A short paragraph about your team and mission

Services Overview: Web design, development, UX/UI, SEO optimization

Portfolio Preview (with space to add images later)

Testimonials section

Contact form

Call-to-Actions:

"Let's Build Something Great Together"

“Get Started”

“Request a Free Consultation”

Tone & Messaging:
Professional, confident, inspiring

Logo Placeholder: Yes

Social Media Links: Add placeholders for LinkedIn, Instagram, and GitHub