Embed

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Webdesign</title>

  <link href="https://fonts.cdnfonts.com/css/aquire" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet"/>

  <style>
    /* --- 1) Navbar styles --- */
    header, .navbar, #header, #navbar, nav {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      background: transparent !important;
      z-index: 9999 !important;
      transition: background 0.3s ease, position 0.3s ease;
    }

    header.header-scrolled, .navbar.header-scrolled, #header.header-scrolled, #navbar.header-scrolled, nav.header-scrolled {
      position: fixed !important;
      background: rgba(0, 0, 0, 0.9) !important;
    }

    /* --- 2) Hero Section --- */
    #vanta-bg {
      position: relative !important;
      z-index: 1 !important;
      margin-top: 0 !important;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      background: #000;
      color: white;
    }

    /* --- 3) Body reset --- */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: #000;
      overflow-x: hidden;
    }

    /* --- 4) Geanimeerde teksten --- */
    .animated-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      margin: 0;
      text-align: center;
      font-family: 'Aquire', sans-serif;
      font-weight: 400;
      color: inherit;
      text-shadow:
        0 0 5px rgba(255,255,255,0.8),
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.2);
    }

    /* AI TEKST (Groot) */
    .first-text {
      font-size: 8vw;
      opacity: 0;
      animation: fadeInHoldFadeOut 1.5s ease forwards;
    }

    /* PORTFOLIO TEKST (Aangepast: Iets groter gemaakt) */
    .second-text {
      font-size: 6.5vw; /* AANGEPAST: Was 5vw, nu 6.5vw */
      opacity: 0;
      animation: appearAnim 1s ease-out forwards;
      animation-delay: 2.5s;
    }

    @keyframes fadeInHoldFadeOut {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes appearAnim {
      0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .sub-text {
      position: absolute;
      /* Iets meer ruimte gegeven omdat PORTFOLIO groter is geworden */
      top: calc(50% + 6.5vw); 
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      margin: 0;
      text-align: center;
      font-family: 'Raleway', sans-serif;
      font-size: 1.6rem;
      opacity: 0;
      animation: slideIn 2s ease forwards;
      animation-delay: 2.5s;
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateX(-50%) translateY(50px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* --- 5) Responsive tweaks --- */
    @media (min-width: 1024px) {
      .first-text { font-size: 6vw; }
      .second-text { font-size: 5vw; } /* Iets groter op desktop */
      .sub-text {
        font-size: 1.4rem;
        top: calc(50% + 5vw);
      }
    }
    @media (max-width: 767px) {
      .first-text { font-size: 10vw; }
      .second-text { font-size: 8.5vw; } /* Iets groter op mobiel */
      .sub-text {
        font-size: 1.2rem;
        top: calc(50% + 10vw);
      }
    }
  </style>
</head>
<body>

  <section id="vanta-bg">
    <h1 class="animated-text first-text">AI</h1>
    <h1 class="animated-text second-text">PORTFOLIO</h1>
    <p class="sub-text">Our Projects</p>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
  <script>
    VANTA.NET({
      el: "#vanta-bg",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xff8800, /* Oranje lijntjes */
      backgroundColor: 0x000000,
      points: 12.00,
      maxDistance: 30.00,
      spacing: 20.00
    });

    // Scroll-detectie
    window.addEventListener('scroll', function() {
      document.querySelectorAll('header, .navbar, #header, #navbar, nav')
        .forEach(el => {
          if (window.scrollY > 0) {
            el.classList.add('header-scrolled');
          } else {
            el.classList.remove('header-scrolled');
          }
        });
    });
  </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
  /* --- STAP 1: FONTS IMPORTEREN (Cabin & Raleway) --- */
  @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&family=Raleway:wght@300;400;600&display=swap');

  /* --- AQUIRE THEME SETTINGS --- */
  body, html {
    margin: 0;
    padding: 0;
    background-color: #000000; /* Diep zwart */
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif; 
    color: #ffffff;
  }

  .portfolio-section {
    padding: 60px 20px;
    background-color: #000000;
    text-align: center;
  }

  /* --- TYPOGRAFIE --- */
  .section-title {
    font-family: 'Cabin', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    text-transform: none; 
    letter-spacing: 0.5px;
  }

  .section-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    color: #a1a1aa;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    line-height: 1.6;
  }

  /* Grid Layout - Desktop Standaard */
  .clients-grid {
    display: grid;
    /* Op desktop past hij er zoveel mogelijk naast elkaar */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
  }

  /* Client Card */
  .client-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
    border: 1px solid transparent; 
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s;
  }
  
  .client-item:hover {
    background-color: #0f0f0f;
    transform: translateY(-5px);
  }

  /* Logo Styling */
  .client-logo-container {
    height: 90px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    width: 100%;
  }

  .client-logo {
    max-width: 180px;
    max-height: 100%;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s;
  }
  
  /* Teksten */
  .client-name {
    font-family: 'Cabin', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
  }

  .client-desc {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #d4d4d4;
    margin-bottom: 30px;
    min-height: 60px; 
  }

  /* --- KNOP STYLING (WITTE PIL) --- */
  .visit-btn {
    display: inline-block;
    padding: 12px 35px;
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ffffff;
    font-family: 'Cabin', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px; 
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .visit-btn:hover {
    background-color: transparent;
    color: #ffffff;
    cursor: pointer;
  }

  /* --- MOBIELE AANPASSINGEN (RESPONSIVE) --- */
  @media (max-width: 768px) {
    .clients-grid {
      /* Forceer 1 kolom op kleine schermen */
      grid-template-columns: 1fr; 
      gap: 40px; 
      padding: 0 10px; /* Beetje extra ruimte aan de zijkant */
    }

    .section-title { 
      font-size: 2.2rem; 
    }
    
    .client-desc {
      min-height: auto; /* Op mobiel hoeft de hoogte niet vast te staan */
    }
  }
</style>
</head>
<body>

<div class="portfolio-section">
  
  <h2 class="section-title">Our Partners</h2>
  <p class="section-subtitle">
    We create modern digital solutions for brands that expect the best.
  </p>

  <div class="clients-grid">

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://cdn.durable.co/blocks/16gLpsrBO9e43VW3LrPM3CjYMPB7bBWas7O3iIacCTWyhbF7csoVuDJ8Jh1reqLW.png" alt="J5 Logo" class="client-logo">
      </div>
      <h3 class="client-name">J5</h3>
      <p class="client-desc">
        An online store where you can easily browse and buy premium shoes.
      </p>
      <a href="https://j5amsterdam.com/" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://placehold.co/180x90/000000/ffffff?text=%3F&font=roboto" alt="Question Mark Logo" class="client-logo">
      </div>
      <h3 class="client-name">Our Current Project</h3>
      <p class="client-desc">
        Currently in development: an innovative new platform for digital growth.
      </p>
      <a href="https://www.testaquire.com" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://cdn.durable.co/blocks/342XQiHOgQVt07KXPJzs6ZjSbsoaS8rGsXD8zM7lpQ7jIazyHMCqUoZ6IcYbsf84.png" alt="Soñora Curaçao Logo" class="client-logo">
      </div>
      <h3 class="client-name">Soñora Curaçao</h3>
      <p class="client-desc">
        Modern booking platform and information site built for luxury vacation villa.
      </p>
      <a href="https://sonoracuracao.nl/" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
         <img src="https://cdn.durable.co/blocks/bCIPG1C73JRSJVOatRP6TNQe1MWkDvf7r6Cur1vmD12nkHqgQgKLZ10sCdF64jSj.png" alt="Renovliesbehang Expert Logo" class="client-logo">
      </div>
      <h3 class="client-name">Renovlies Expert</h3>
      <p class="client-desc">
        A conversion-focused site designed to generate leads and streamline quotes.
      </p>
      <a href="https://renovliesbehangexpert.nl/" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://cdn.durable.co/blocks/eaTt7OvzjobJNvP2NroISTokkYiMz90Pac4Cd8MqVxrcRUMNvemm63Xr7givWrIU.png" alt="AFA Cup Logo" class="client-logo">
      </div>
      <h3 class="client-name">AFA Cup</h3>
      <p class="client-desc">
        A fast, easy-to-use event site for registrations and real-time tournament updates.
      </p>
      <a href="https://afacup.com/" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://cdn.durable.co/blocks/36b6WbhWTrb3spScDm0MmSOR37RHiiMWOWf7B2aalGf02kLwapegAAt4rM00kKMH.png" alt="MTC Logo" class="client-logo">
      </div>
      <h3 class="client-name">MTC</h3>
      <p class="client-desc">
        A clean, professional website built for trading experts & beginners.
      </p>
      <a href="https://www.motivatedtradingcompany.com" target="_blank" class="visit-btn">Visit Website</a>
    </div>

    <div class="client-item">
      <div class="client-logo-container">
        <img src="https://www.turbostrategy.io/img/logo.svg" alt="TurboStrategy Logo" class="client-logo">
      </div>
      <h3 class="client-name">TurboStrategy</h3>
      <p class="client-desc">
        An automated trading bot that helps you trade smarter and grow your results.
      </p>
      <a href="https://www.turbostrategy.io/" target="_blank" class="visit-btn">Visit Website</a>
    </div>

  </div>
</div>

</body>
</html>