← Terug naar Home

HTML Code van Jurre's site

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Basis HTML5 template">
  <title>Jurre's site.</title>
  <link rel="stylesheet" href="styles.css">
  <style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
</style>
</head>
<body>
  <audio id="bg-audio" autoplay loop style="display:none;" aria-hidden="true">
    <source src="cdn/bg.mp3" type="audio/mpeg">
  </audio>
 <h1>Jurre's site voor HTML-Opdracht</h1>
 <a style="color: blueviolet" href="code-html.html"><b>Klik hier voor de HTML-code.</b></a><a style="color: red" href="code-css.html"><br><b>Klik hier voor de CSS-code.</b></a> 
 <div class="sect1">
  <img style="width: 256px; height: auto;" src="cdn/duck.gif" alt="Een eend die kwakt">
   <h2>Jurre.</h2>
   <p>🙋🏻‍♂️</p>
   <ul>
    <li>Naam: <b>Jurre</b></li>
    <li>Root: <a href="https://jurre.art">jurre.art</a></li>
   </ul>
 </div>
  <div class="sect2">
   <h2>Wat doe ik in mijn dagelijks leven?</h2>
   <p>Ik hou ervan om erop uit te gaan met mijn vrienden. Alhoewel kan ik ook altijd wel genieten van het proces van creatie en hou ik van retro-games.<br>Ook hou ik van muziek en kunst.</p>
 </div>
  <div class="sect3">
   <h2>Favoriete vak!</h2>
   <p id="fav-vak">Interaction Design natuurlijk duh.</p>
 </div>
 <div class="footer">
    <h5><i>Gemaakt door Jurre in opdracht van het <u>Koning Willem 1 College</u>.</i></h5>
 </div>
 <HR>jurre.art &copy; 2025<HR>

<script> // ingevoegd met hulp van ChatGPT
  (function(){
    const images = document.querySelectorAll('.sect1 img');
    images.forEach(img => {
      if (!img.dataset.orig) img.dataset.orig = img.src || '';
      const hoverSrc = 'cdn/duck-2.gif';
      const swapToHover = () => { if (img.dataset.orig !== hoverSrc) img.src = hoverSrc; };
      const restore = () => { if (img.dataset.orig) img.src = img.dataset.orig; };
      img.addEventListener('mouseenter', swapToHover);
      img.addEventListener('mouseleave', restore);
      img.addEventListener('touchstart', swapToHover, {passive:true});
      img.addEventListener('touchend', restore, {passive:true});
    });
  })();

  document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById('bg-audio');
    if (audio) {
      try {
        audio.volume = 0.45;
        if (audio.paused) audio.play().catch(() => {});
      } catch (e) {}
    }
    
    const favVak = document.getElementById('fav-vak');
    if (favVak) {
      const originalText = 'Interaction Design natuurlijk duh.';
      const hoverText = 'Grapje, dat was geslijm. DBB-Motion.';
      favVak.addEventListener('mouseenter', () => { favVak.textContent = hoverText; });
      favVak.addEventListener('mouseleave', () => { favVak.textContent = originalText; });
    }
  });
</script>

</body>
</html>