Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contact | Opális Webdesign</title>
  <style>
    :root {
      --primary: #1877f2;
      --primary-dark: #125ac0;
      --bg-deep: #020812;
      --bg-elevated: rgba(7, 22, 33, 0.96);
      --text-main: #ffffff;
      --text-muted: #c6d3e3;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --shadow-soft: 0 22px 70px rgba(0, 0, 0, 0.55);
      --radius-xl: 26px;
      --radius-lg: 20px;
      --transition: all 0.25s ease;
      --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", 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,0.16), transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,0.9), transparent 70%),
        var(--bg-deep);
      color: var(--text-main);
      overflow-x: hidden;
      padding: 0;
    }

    /* TAAKBALK */
    .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,0.14), transparent 70%)
        rgba(4, 12, 22, 0.96);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
      z-index: 9999;
      width: max(72%, 980px);
      max-width: 1320px;
      transition: var(--transition);
    }

    .taakbalk.scrolled {
      padding: 9px 20px;
      background:
        radial-gradient(circle at top left, rgba(24,119,242,0.22), transparent 75%)
        rgba(1, 6, 12, 0.98);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65);
    }

    .logo {
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #ffffff;
      white-space: nowrap;
    }
    .logo span {
      color: var(--primary);
      margin-left: 4px;
    }
    .logo a {
      text-decoration: none;
      color: inherit;
    }

    .nav {
      display: flex;
      gap: 24px;
      font-size: 0.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);
      font-weight: 400;
    }

    .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: #ffffff;
    }

    .nav a:hover::after {
      width: 16px;
    }

    .taakbalk-cta {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }

    .taakbalk-cta a.text-link {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-decoration: none;
      transition: var(--transition);
    }

    .taakbalk-cta a.text-link:hover {
      color: #ffffff;
    }

    .btn-primary-outline {
      padding: 8px 18px;
      border-radius: 999px;
      border: 1px solid var(--primary);
      color: var(--primary);
      text-decoration: none;
      font-size: 0.8rem;
      font-weight: 600;
      transition: var(--transition);
      background: rgba(3, 8, 14, 0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .btn-primary-outline:hover {
      background: var(--primary);
      color: #ffffff;
      box-shadow: 0 8px 22px rgba(24,119,242,0.4);
      transform: translateY(-1px);
    }

    /* CONTACT PAGE LAYOUT */
    .page-shell {
      padding: 140px 6% 80px;
      display: flex;
      justify-content: center;
    }

    .contact-wrapper {
      width: 100%;
      max-width: 1240px;
      background: linear-gradient(
                  to bottom,
                  rgba(10, 25, 40, 0.98),
                  rgba(5, 14, 24, 0.98)
                );
      border-radius: var(--radius-xl);
      padding: 34px 34px 32px;
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border-subtle);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .contact-header-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      margin-bottom: 26px;
    }

    .contact-header h1 {
      font-size: 2.4rem;
      font-weight: 700;
      margin-bottom: 6px;
      color: #ffffff;
    }

    .contact-header p {
      font-size: 0.98rem;
      color: var(--text-muted);
      max-width: 540px;
      line-height: 1.7;
    }

    .page-tabs {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      font-size: 0.95rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .page-tabs a {
      text-decoration: none;
      position: relative;
      padding-bottom: 6px;
      transition: var(--transition);
      color: var(--text-muted);
      font-weight: 500;
    }

    .page-tabs a.active {
      color: #ffffff;
      font-weight: 600;
    }

    .page-tabs a.active::after,
    .page-tabs a:hover::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 34px;
      height: 2px;
      border-radius: 999px;
      background: var(--primary);
    }

    .page-tabs a:hover {
      color: #ffffff;
    }

    /* GRID */
    .contact-layout {
      display: grid;
      grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1.4fr);
      gap: 26px;
      align-items: flex-start;
    }

    .contact-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 20px;
    }

    .contact-card {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: var(--radius-lg);
      padding: 20px 18px 18px;
      box-shadow: 0 14px 40px rgba(0,0,0,0.4);
      transition: var(--transition);
    }

    .contact-card:hover {
      transform: translateY(-4px);
      border-color: rgba(24,119,242,0.45);
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      background: radial-gradient(circle at top left, rgba(24,119,242,0.08), transparent) rgba(3, 10, 18, 0.98);
    }

    .contact-card h2 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 4px;
      color: #ffffff;
    }

    .contact-card p.role {
      font-size: 0.86rem;
      color: rgba(198,211,227,0.9);
      margin-bottom: 10px;
    }

    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.9rem;
    }

    .contact-info a {
      text-decoration: none;
      color: var(--primary);
      font-weight: 600;
      transition: var(--transition);
      word-break: break-word;
    }

    .contact-info a:hover {
      color: #ffffff;
    }

    /* CTA CARD RECHTS */
    .cta-panel {
      background: rgba(3, 10, 18, 0.98);
      border-radius: var(--radius-lg);
      padding: 20px 18px 18px;
      border: 1px solid rgba(255,255,255,0.09);
      box-shadow: 0 18px 52px rgba(0,0,0,0.7);
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .cta-panel::before {
      content: "";
      position: absolute;
      top: -40px;
      right: -40px;
      width: 140px;
      height: 140px;
      background: radial-gradient(circle, rgba(24,119,242,0.24), transparent);
      opacity: 0.9;
      pointer-events: none;
    }

    .cta-label {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(144,164,189,0.9);
    }

    .cta-panel h2 {
      font-size: 1.35rem;
      font-weight: 700;
      color: #ffffff;
    }

    .cta-panel p {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 4px;
    }

    .btn-primary {
      margin-top: 6px;
      padding: 11px 20px;
      border-radius: 999px;
      background: var(--primary);
      border: none;
      color: #ffffff;
      font-weight: 700;
      font-size: 0.9rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 14px 32px rgba(24,119,242,0.5);
      transition: var(--transition);
      cursor: pointer;
      position: relative;
      z-index: 1;
    }

    .btn-primary span.arrow {
      font-size: 1rem;
      transform: translateY(1px);
      transition: var(--transition);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(24,119,242,0.65);
    }

    .btn-primary:hover span.arrow {
      transform: translate(3px, 1px);
    }

    .cta-note {
      font-size: 0.78rem;
      color: rgba(162,178,198,0.95);
      margin-top: 4px;
    }

    .contact-footer {
      margin-top: 22px;
      font-size: 0.82rem;
      color: rgba(140,155,176,0.95);
    }

    .contact-footer a {
      color: var(--primary);
      text-decoration: underline;
      transition: var(--transition);
    }

    .contact-footer a:hover {
      color: #ffffff;
    }

    /* RESPONSIVE */
    @media (max-width: 1080px) {
      .taakbalk {
        width: 94%;
      }
      .contact-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .nav {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .page-shell {
        padding: 120px 4% 50px;
      }
      .contact-wrapper {
        padding: 22px 18px 20px;
        border-radius: 20px;
      }
      .contact-header-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .contact-header h1 {
        font-size: 1.9rem;
      }
      .page-tabs {
        margin-top: 4px;
      }
    }
  </style>
</head>
<body>

  
  <div class="taakbalk">
    <div class="logo">
      <a href="https://proconnect24.com">Opális<span>Webdesign</span></a>
    </div>
    <nav class="nav">
      <a href="https://proconnect24.com/#diensten">Diensten</a>
      <a href="https://proconnect24.com/#werkwijze">Werkwijze</a>
      <a href="https://proconnect24.com/#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="https://proconnect24.com/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="page-shell">
    <section class="contact-wrapper">
      <div class="contact-header-row">
        <div class="contact-header">
          <h1>Neem contact op met Opális Webdesign</h1>
          <p>
            Wil je weten hoe we jouw online aanwezigheid kunnen omzetten in een constante stroom van leads en afspraken?
            Laat van je horen — we reageren persoonlijk, concreet en snel.
          </p>
        </div>
        <div class="page-tabs">
          <a href="https://proconnect24.com/contact" class="active">Contact</a>
          <a href="https://proconnect24.com/meet-the-team">Meet the team</a>
        </div>
      </div>

      <div class="contact-layout">
        
        <div class="contact-cards">
          <div class="contact-card">
            <h2>Dimitri Simonis</h2>
            <p class="role">Projectcoördinator & Webdesigner</p>
            <div class="contact-info">
              <a href="tel:+31611835310">📞 +31 6 11 83 53 10</a>
              <a href="mailto:Dimitri@opaliswebdesign.com">✉️ Dimitri@opaliswebdesign.com</a>
            </div>
          </div>

          <div class="contact-card">
            <h2>Ryan</h2>
            <p class="role">Webdeveloper — Technische ontwikkeling & onderhoud</p>
            <div class="contact-info">
              <a href="mailto:Ryan@opaliswebdesign.com">✉️ Ryan@opaliswebdesign.com</a>
            </div>
          </div>
        </div>

        
        <aside class="cta-panel">
          <div class="cta-label">Gratis strategiecall</div>
          <h2>Plan direct jouw Opális sessie</h2>
          <p>
            In 20 minuten helder of jullie website, funnels en branding goed genoeg zijn
            om kwalitatieve aanvragen én afspraken binnen te halen.
          </p>
          <a
            class="btn-primary"
            href="https://calendly.com/d-g-simonis-zakelijk/next-steps-to-go-online-opalis-call"
            target="_blank"
            rel="noopener"
          >
            Plan een call <span class="arrow">↗</span>
          </a>
          <div class="cta-note">
            Geen verkooppraat. Concreet advies, duidelijke vervolgstappen.
          </div>
        </aside>
      </div>

      <div class="contact-footer">
        Liever direct mailen? Stuur je vraag naar
        <a href="mailto:Dimitri@opaliswebdesign.com">Dimitri@opaliswebdesign.com</a>
        en je ontvangt snel een reactie.
      </div>
    </section>
  </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>

Location

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