Skip to content
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Classic Swedes — mockup opgeschoonde homepage</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=Hanken+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#F4F4F1;
    --paper-2:#EBEAE4;
    --ink:#23292A;
    --ink-soft:#5C635F;
    --accent:#3F5C68;
    --accent-deep:#2C444E;
    --line:#DEDDD6;
    --maxw:1180px;
    --pad:clamp(1.25rem,5vw,4rem);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:400;line-height:1.08;letter-spacing:-0.01em}
  p{max-width:62ch}
  .serif{font-family:"Newsreader",Georgia,serif}

  /* ---- buttons ---- */
  .btn{
    display:inline-block;font-size:.98rem;font-weight:500;
    padding:.72em 1.35em;border-radius:2px;transition:background .18s ease,color .18s ease;
  }
  .btn-primary{background:var(--accent);color:var(--paper)}
  .btn-primary:hover{background:var(--accent-deep)}
  .btn-quiet{color:var(--ink);border-bottom:1px solid var(--ink);border-radius:0;padding:.72em 0}
  .btn-quiet:hover{color:var(--ink-soft);border-color:var(--ink-soft)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* ---- header ---- */
  header{position:sticky;top:0;z-index:20;background:rgba(244,244,241,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:1.5rem;height:72px}
  .brand{display:flex;align-items:center;gap:.6rem;font-family:"Newsreader",serif;font-size:1.35rem;letter-spacing:-.01em}
  .brand svg{display:block}
  .nav-links{display:flex;gap:1.6rem;margin-left:1.5rem;font-size:.96rem;color:var(--ink)}
  .nav-links a{padding:.3em 0;border-bottom:1px solid transparent}
  .nav-links a:hover{border-color:var(--ink)}
  .nav-right{display:flex;align-items:center;gap:1.25rem;margin-left:auto;font-size:.95rem}
  .nav-right .lang{color:var(--ink-soft)}
  @media(max-width:820px){.nav-links{display:none}.nav-right .login{display:none}}

  /* ---- hero ---- */
  .hero{position:relative;min-height:min(82vh,720px);display:flex;align-items:flex-end;
    background:linear-gradient(180deg,rgba(20,28,31,.15) 0%,rgba(20,28,31,.62) 78%,rgba(20,28,31,.78) 100%),
    linear-gradient(120deg,#3F5C68,#2C444E),
    url("https://www.classicswedes.com/banner-1.jpg");
    background-size:cover;background-position:center 40%;color:#F4F4F1}
  .hero-inner{padding-block:clamp(2.5rem,6vw,5rem);width:100%}
  .hero .eyebrow{font-size:.9rem;letter-spacing:.02em;color:#D7DEDD;margin-bottom:1rem}
  .hero h1{font-size:clamp(2.7rem,6.2vw,4.7rem);max-width:16ch;font-weight:400;color:#fff}
  .hero p{font-family:"Newsreader",serif;font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.45;color:#EDEFEE;margin-top:1.1rem;max-width:44ch}
  .hero .fineprint{font-family:"Hanken Grotesk",sans-serif;font-size:.92rem;color:#C9D1D0;margin-top:.4rem}
  .hero-cta{display:flex;align-items:center;gap:1.8rem;margin-top:2rem;flex-wrap:wrap}
  .hero .btn-quiet{color:#fff;border-color:rgba(255,255,255,.7)}
  .hero .btn-quiet:hover{color:#D7DEDD;border-color:#D7DEDD}

  /* ---- stats ---- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding-block:2.4rem;border-bottom:1px solid var(--line)}
  .stat .num{font-family:"Newsreader",serif;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1}
  .stat .lbl{font-size:.9rem;color:var(--ink-soft);margin-top:.35rem}
  @media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}}

  /* ---- section scaffold ---- */
  section{padding-block:clamp(3.5rem,8vw,6.5rem)}
  .label{font-size:.9rem;color:var(--accent);margin-bottom:1.1rem;font-weight:500}
  h2{font-size:clamp(1.95rem,3.8vw,2.9rem);max-width:18ch}
  .lead{font-family:"Newsreader",serif;font-size:1.22rem;line-height:1.55;color:var(--ink);margin-top:1.1rem;max-width:56ch}

  /* ---- map section ---- */
  .map{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  @media(max-width:860px){.map{grid-template-columns:1fr}}
  .map-frame{position:relative;aspect-ratio:4/3;background:var(--paper-2);border-radius:3px;overflow:hidden}
  .map-frame svg{position:absolute;inset:0;width:100%;height:100%}
  .pin{fill:var(--accent)}
  .pin-ring{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:.35}
  .map-note{position:absolute;left:18px;bottom:16px;font-size:.82rem;color:var(--ink-soft);background:rgba(244,244,241,.85);padding:.3em .6em;border-radius:2px}
  .map .btn-quiet{margin-top:1.6rem}

  /* ---- steps ---- */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);margin-top:2.8rem}
  @media(max-width:760px){.steps{grid-template-columns:1fr;gap:2rem}}
  .step{border-top:1px solid var(--line);padding-top:1.1rem}
  .step .n{font-family:"Newsreader",serif;font-size:1.5rem;color:var(--accent);line-height:1}
  .step h3{font-size:1.3rem;margin-top:.7rem}
  .step p{font-size:1rem;color:var(--ink-soft);margin-top:.5rem}

  /* ---- cars grid ---- */
  .cars-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,1.6rem);margin-top:2.6rem}
  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.grid{grid-template-columns:1fr}}
  .car{display:block}
  .car .thumb{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--paper-2)}
  .car .thumb svg{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:56%;opacity:.32}
  .car .meta{margin-top:.7rem}
  .car .model{font-family:"Newsreader",serif;font-size:1.12rem;line-height:1.2}
  .car .sub{font-size:.9rem;color:var(--ink-soft);margin-top:.15rem}
  .car .thumb .tag{position:absolute;left:12px;top:12px;font-size:.76rem;background:var(--accent);color:#fff;padding:.25em .6em;border-radius:2px}
  /* featured car spans two columns */
  .car.feature{grid-column:span 2}
  .car.feature .thumb{aspect-ratio:16/9}
  .car.feature .model{font-size:1.4rem}
  @media(max-width:900px){.car.feature{grid-column:span 2}}
  @media(max-width:480px){.car.feature{grid-column:span 1}}

  /* ---- closing cta ---- */
  .closing{background:var(--accent-deep);color:#F4F4F1;border-radius:4px;padding:clamp(2.5rem,6vw,5rem);text-align:center}
  .closing h2{color:#fff;margin-inline:auto}
  .closing p{color:#D7DEDD;margin:1rem auto 0;max-width:46ch}
  .closing .btn{margin-top:2rem;background:#F4F4F1;color:var(--accent-deep)}
  .closing .btn:hover{background:#fff}
  .closing .fineprint{font-size:.9rem;color:#AEBBBA;margin-top:1rem}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line);padding-block:3.5rem 2.5rem;margin-top:1rem}
  .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
  @media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.foot{grid-template-columns:1fr}}
  .foot h4{font-size:.85rem;color:var(--ink-soft);font-weight:600;font-family:"Hanken Grotesk",sans-serif;margin-bottom:.9rem;letter-spacing:.01em}
  .foot a{display:block;font-size:.95rem;color:var(--ink);padding:.22em 0}
  .foot a:hover{color:var(--accent)}
  .foot .brand{margin-bottom:1rem}
  .foot .desc{font-size:.92rem;color:var(--ink-soft);max-width:32ch}
  .foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}

  .note{background:var(--paper-2);border-left:3px solid var(--accent);font-size:.9rem;color:var(--ink-soft);padding:.9rem 1.1rem;border-radius:2px;margin:0 auto;max-width:var(--maxw)}

  /* one page-load reveal, reduced-motion safe */
  @media(prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
    @keyframes rise{to{opacity:1;transform:none}}
  }
</style>
</head>
<body>

<!-- ============ HEADER ============ -->
<header>
  <div class="wrap nav">
    <a href="#" class="brand" aria-label="Classic Swedes home">
      <svg width="30" height="18" viewBox="0 0 60 32" aria-hidden="true">
        <path d="M3 24 L3 21 Q3 19 5 18.4 L15 15.5 Q17 10 24 10 L40 10 Q47 10 50 15.5 L55 17 Q57 17.6 57 20 L57 24 Q57 25 56 25 L50 25 Q49.6 21 46 21 Q42.4 21 42 25 L20 25 Q19.6 21 16 21 Q12.4 21 12 25 L4 25 Q3 25 3 24 Z" fill="#3F5C68"/>
        <circle cx="16" cy="25" r="3.4" fill="#23292A"/>
        <circle cx="46" cy="25" r="3.4" fill="#23292A"/>
      </svg>
      Classic Swedes
    </a>
    <nav class="nav-links" aria-label="Hoofdmenu">
      <a href="#">Kaart</a>
      <a href="#">Alle Volvo's</a>
      <a href="#">Gallerij</a>
      <a href="#">Community</a>
    </nav>
    <div class="nav-right">
      <span class="lang">NL</span>
      <a href="#" class="login">Inloggen</a>
      <a href="#" class="btn btn-primary">Plaats je Volvo</a>
    </div>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero" style="padding:0">
  <div class="wrap hero-inner reveal">
    <p class="eyebrow">Voorheen Driving Old Swedes</p>
    <h1>Zet je Volvo op de kaart</h1>
    <p>Geef je klassieker een plek in het digitale erfgoed van Volvo's in Europa.</p>
    <p class="fineprint">Gratis, voor Volvo's tot bouwjaar 2000.</p>
    <div class="hero-cta">
      <a href="#" class="btn btn-primary">Plaats je Volvo</a>
      <a href="#" class="btn btn-quiet">Bekijk de kaart</a>
    </div>
  </div>
</section>

<!-- ============ STATS (rustige strook, geen losse sectie) ============ -->
<div class="wrap">
  <div class="stats">
    <div class="stat"><div class="num">101+</div><div class="lbl">klassieke Volvo's</div></div>
    <div class="stat"><div class="num">10+</div><div class="lbl">landen</div></div>
    <div class="stat"><div class="num">90+</div><div class="lbl">leden</div></div>
    <div class="stat"><div class="num">299+</div><div class="lbl">foto's</div></div>
  </div>
</div>

<!-- ============ KAART (signatuur) ============ -->
<section class="wrap">
  <div class="map">
    <div>
      <p class="label">De kaart</p>
      <h2>Zie waar deze Volvo's rijden</h2>
      <p class="lead">Wat dit project uniek maakt is de interactieve kaart. Per regio zie je waar de klassiekers vandaan komen — zo ontstaat stap voor stap een levend archief van Volvo's uit heel Europa.</p>
      <a href="#" class="btn btn-quiet">Bekijk de kaart</a>
    </div>
    <div class="map-frame" role="img" aria-label="Kaart van Europa met locaties van geregistreerde Volvo's">
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
        <!-- subtiele contourlijnen als kaart-textuur -->
        <g stroke="#DEDDD6" stroke-width="1" fill="none" opacity=".8">
          <path d="M-10 70 Q120 40 260 78 T430 70"/>
          <path d="M-10 120 Q120 92 260 128 T430 120"/>
          <path d="M-10 170 Q120 142 260 178 T430 170"/>
          <path d="M-10 220 Q120 192 260 228 T430 220"/>
        </g>
        <g stroke="#DEDDD6" stroke-width="1" fill="none" opacity=".55">
          <path d="M90 -10 Q70 150 96 310"/>
          <path d="M200 -10 Q180 150 206 310"/>
          <path d="M310 -10 Q290 150 316 310"/>
        </g>
        <!-- pins met zachte ring -->
        <g>
          <circle class="pin-ring" cx="150" cy="150" r="14"/>
          <path class="pin" d="M150 138 c-6 0 -10 4 -10 10 c0 7 10 16 10 16 c0 0 10 -9 10 -16 c0 -6 -4 -10 -10 -10 Z"/>
          <circle cx="150" cy="148" r="3.2" fill="#F4F4F1"/>
        </g>
        <g>
          <path class="pin" d="M205 120 c-5 0 -8.5 3.4 -8.5 8.5 c0 6 8.5 13.5 8.5 13.5 c0 0 8.5 -7.5 8.5 -13.5 c0 -5.1 -3.5 -8.5 -8.5 -8.5 Z"/>
          <circle cx="205" cy="128.5" r="2.7" fill="#F4F4F1"/>
        </g>
        <g>
          <path class="pin" d="M235 90 c-5 0 -8.5 3.4 -8.5 8.5 c0 6 8.5 13.5 8.5 13.5 c0 0 8.5 -7.5 8.5 -13.5 c0 -5.1 -3.5 -8.5 -8.5 -8.5 Z"/>
          <circle cx="235" cy="98.5" r="2.7" fill="#F4F4F1"/>
        </g>
        <g>
          <path class="pin" d="M120 195 c-5 0 -8.5 3.4 -8.5 8.5 c0 6 8.5 13.5 8.5 13.5 c0 0 8.5 -7.5 8.5 -13.5 c0 -5.1 -3.5 -8.5 -8.5 -8.5 Z"/>
          <circle cx="120" cy="203.5" r="2.7" fill="#F4F4F1"/>
        </g>
        <g>
          <path class="pin" d="M255 175 c-5 0 -8.5 3.4 -8.5 8.5 c0 6 8.5 13.5 8.5 13.5 c0 0 8.5 -7.5 8.5 -13.5 c0 -5.1 -3.5 -8.5 -8.5 -8.5 Z"/>
          <circle cx="255" cy="183.5" r="2.7" fill="#F4F4F1"/>
        </g>
        <g>
          <path class="pin" d="M290 135 c-5 0 -8.5 3.4 -8.5 8.5 c0 6 8.5 13.5 8.5 13.5 c0 0 8.5 -7.5 8.5 -13.5 c0 -5.1 -3.5 -8.5 -8.5 -8.5 Z"/>
          <circle cx="290" cy="143.5" r="2.7" fill="#F4F4F1"/>
        </g>
      </svg>
      <span class="map-note">101 Volvo's in 10 landen</span>
    </div>
  </div>
</section>

<!-- ============ ZO WERKT HET (echte volgorde → nummering) ============ -->
<section class="wrap" style="background:var(--paper)">
  <p class="label">Zo werkt het</p>
  <h2>In 2 minuten op de kaart</h2>
  <div class="steps">
    <div class="step">
      <div class="n">1</div>
      <h3>Registreer</h3>
      <p>Maak een gratis account aan met je e-mailadres.</p>
    </div>
    <div class="step">
      <div class="n">2</div>
      <h3>Voeg je Volvo toe</h3>
      <p>Kies model en bouwjaar, voeg een paar foto's toe en vertel het verhaal erachter.</p>
    </div>
    <div class="step">
      <div class="n">3</div>
      <h3>Verschijn op de kaart</h3>
      <p>Jouw Volvo wordt onderdeel van een groeiend archief uit heel Europa.</p>
    </div>
  </div>
</section>

<!-- ============ NIEUWSTE VOLVO'S (auto v/d week = 1 grote tegel) ============ -->
<section class="wrap">
  <div class="cars-head">
    <div>
      <p class="label">Uit de community</p>
      <h2>Nieuwste Volvo's</h2>
    </div>
    <a href="#" class="btn btn-quiet">Bekijk alle Volvo's</a>
  </div>

  <div class="grid">
    <!-- featured: auto van de week -->
    <a href="#" class="car feature">
      <div class="thumb">
        <span class="tag">Auto van de week</span>
        <svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#3F5C68"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg>
      </div>
      <div class="meta">
        <div class="model">Volvo 940</div>
        <div class="sub">1996 · Marbeck</div>
      </div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#4A6572"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo V70 R</div><div class="sub">1997 · Jelgava</div></div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#3F5C68"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo Amazon</div><div class="sub">1968 · Porto</div></div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#546A64"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo 240</div><div class="sub">1993 · Leiden</div></div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#4A6572"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo 940</div><div class="sub">1995 · Uithoorn</div></div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#3F5C68"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo Amazon</div><div class="sub">1966 · Dronten</div></div>
    </a>

    <a href="#" class="car">
      <div class="thumb"><svg viewBox="0 0 120 60" aria-hidden="true"><path d="M6 46 L6 40 Q6 37 9 36 L30 29 Q33 20 46 20 L80 20 Q92 20 96 29 L110 33 Q114 34 114 39 L114 46 Q114 48 112 48 L100 48 Q99 41 92 41 Q85 41 84 48 L40 48 Q39 41 32 41 Q25 41 24 48 L8 48 Q6 48 6 46 Z" fill="#546A64"/><circle cx="32" cy="48" r="6.5" fill="#23292A"/><circle cx="92" cy="48" r="6.5" fill="#23292A"/></svg></div>
      <div class="meta"><div class="model">Volvo PV544</div><div class="sub">1965 · De Zilk</div></div>
    </a>
  </div>
</section>

<!-- ============ AFSLUITENDE CTA (de enige tweede oproep) ============ -->
<section class="wrap">
  <div class="closing">
    <h2>Laat jouw Volvo zien aan Europa</h2>
    <p>Word onderdeel van een groeiende community en bouw mee aan een levend archief van klassieke Volvo's.</p>
    <a href="#" class="btn">Plaats je Volvo</a>
    <p class="fineprint">Gratis · klaar in 2 minuten · t/m bouwjaar 2000</p>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="wrap">
    <div class="foot">
      <div>
        <a href="#" class="brand" aria-label="Classic Swedes">
          <svg width="30" height="18" viewBox="0 0 60 32" aria-hidden="true"><path d="M3 24 L3 21 Q3 19 5 18.4 L15 15.5 Q17 10 24 10 L40 10 Q47 10 50 15.5 L55 17 Q57 17.6 57 20 L57 24 Q57 25 56 25 L50 25 Q49.6 21 46 21 Q42.4 21 42 25 L20 25 Q19.6 21 16 21 Q12.4 21 12 25 L4 25 Q3 25 3 24 Z" fill="#3F5C68"/><circle cx="16" cy="25" r="3.4" fill="#23292A"/><circle cx="46" cy="25" r="3.4" fill="#23292A"/></svg>
          Classic Swedes
        </a>
        <p class="desc">Een levend archief van klassieke Volvo's, verzameld en gedeeld door liefhebbers.</p>
      </div>
      <div>
        <h4>Ontdekken</h4>
        <a href="#">Kaart</a>
        <a href="#">Alle Volvo's</a>
        <a href="#">Gallerij</a>
        <a href="#">Achterklepgesprekken</a>
      </div>
      <div>
        <h4>Community</h4>
        <a href="#">Nieuws</a>
        <a href="#">Video's</a>
        <a href="#">Over ons</a>
        <a href="#">FAQ</a>
      </div>
      <div>
        <h4>Meedoen</h4>
        <a href="#">Registreren</a>
        <a href="#">Inloggen</a>
        <a href="#">Nieuwsbrief</a>
        <a href="#">Contact</a>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© 2026 classicswedes.com — onderdeel van Fillingscreens.nl</span>
      <span>Amstelveen · support@classicswedes.com</span>
    </div>
  </div>
</footer>

</body>
</html>