<!doctype html>
<html lang="nl">
    
<head>
    <meta charset="UTF-8">
    <meta name="author" content="jouw naam">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lego mozaiek</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=Noto+Sans&display=swap" rel="stylesheet">
    <link href="styles/style.css" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="images/favicon.svg">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="overig">
    <header>
        <nav>
        <div class="menu-wrap">
            <input type="checkbox" class="toggler">
            <div class="hamburger"><div></div></div>
            <div class="menu">
              <div>
                <div>
                  <ul>
                    <li><a href="#">Startpagina</a></li>
                    <li><a href="#">Winkelen</a></li>
                    <li><a href="#">Ontdekken</a></li>
                    <li><a href="#">Help</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
         <span></span>
          <a href=""> <img src="./images/lego-LOGO.svg" alt="logo"> </a>
          <span></span>
          <a href=""><img src="./images/Navigatie/search-Lego.svg" alt="search"></a>
          <a href=""><img src="./images/Navigatie/profiel-Lego.svg" alt="profiel"></a>
          <a href=""><img src="./images/Navigatie/likes-Lego.svg" alt="likes"></a>
          <a href=""><img src="./images/Navigatie/winkelwagen-Lego.svg" alt="winkelwagen"></a>
        </nav>             
    </header>  
    <main>
        <section>
            <div>
                <a href="">overig</a>
                <img src="./images/Navigatie/pijl-Lego.svg" alt="pijl">
                <h4>mozaïekmaker</h4>
            </div>  
            <article>
                <img src="./mozaiek-pagina-lego/mnozaiek.jpeg" alt="mozaiek lego set">
                <button> <img src="./mozaiek-pagina-lego/Expand.svg" alt=""> </button>
                <img src="./mozaiek-pagina-lego/mnozaiek.jpeg" alt="mozaiek lego set klein">
                <img src="./mozaiek-pagina-lego/mozaiek-achterkant-lego.jpeg" alt="mozaiek lego set klein achterkant">   
            </article>
            <h5>Exlusieve</h5>
            <h2>Mozaïekmaker</h2>
            <h2>€99,99</h2>
            <p>Nu beschikbaar</p>
            <article>
                <div>
                    <button>-</button>
                    <p>1</p>
                    <button>+</button>
                </div>
                <div>
                    <p>Limiet 5</p> 
                    <button>i</button>
                </div>
            </article>
            <div>
                <button>In Tas</button>
                <button id="like-button">
                    <div class="like-wrapper">
                      <svg class="heart" width="24" height="24" viewBox="0 0 24 24">
                        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
                      </svg>
                      </div>
                    </div>
                </button>
            </div>
            <article>
                <img src="./mozaiek-pagina-lego/bezorger-Lego.png" alt="bezorger">
                <div>
                    <p>Een leuke City Broodjeszaak cadeau bij elke LEGO® aankoop vanaf € 90, geldig van 16-09-2022 t/m 30-09-2022 of zolang de voorraad strekt.*</p>
                    <a href="">Meer info</a>
                </div>
            </article>
        </section>
        <section>
            <hr>
            <div>
                <img src="./mozaiek-pagina-lego/gps-blauw.svg" alt="gps">
                <p>Winkelvoorraad controleren</p>
            </div>
            <hr>
            <div>
                <img src="./mozaiek-pagina-lego/verzenden.svg" alt="shipping">
                <p>Bezorging en retourering</p>
            </div>
            <article>
                <img src="./mozaiek-pagina-lego/leeftijd.svg" alt="taart">
                <img src="./mozaiek-pagina-lego/stenen.svg" alt="steen">
                <img src="./mozaiek-pagina-lego/vip-punten.svg" alt="kroon">

                <p>10+</p>
                <p>4702</p>
                <p>750¡</p>
                <p>Leeftijden</p>
                <p>Stenen</p>
                <p>VIP-punten</p>
                <img src="./mozaiek-pagina-lego/hashtag.svg" alt="#">
                 <p>40179</p>
                <p>Item</p>
            </article>
        </section>
        <section>
            <hr>
            <div>
                <h2>Kenmerken</h2>
                <button>+</button>
            </div>
            <hr>
            <div>
                <h2>Fanmomenten</h2>
                <button>+</button>
            </div>
            <hr>
            <div>
                <h2>Productgegevens</h2>
                <button>+</button>
            </div>
            <hr>
            <div>
                <h2>Productbeoordelingen Recensies</h2>
                <button>+</button>
            </div>
            <p>Soortgelijke producten zoeken:</p>
                <a href="">Overig</a>
                <a href="">Huisinrichting</a>
                <hr>
        </section>
        <section>
            <h3>Aanbevolen voor jou</h3>        
                <img src="./images/aanbevolen/vuurtoren-link.webp" alt="vuurtoren">
                
                <img src="./images/aanbevolen/piramide-lnik.webp" alt="piramide">
                
                <img src="./images/aanbevolen/kerstboom-link.webp" alt="kerstboom">
                
                <img src="./images/aanbevolen/dinseykasteel-link.webp" alt="kasteel">
                <h4>Grote Piramide van Gizeh</h4>
                <h4>vuurtoren</h4>
                <h4>Kerstboom</h4>
                <h4>Het Disney kasteel</h4>
                <div>
                    <p>€29,99</p>
                    <button>In Tas</button>
                </div>
                <div>
                    <p>€29.99</p>
                    <button>In Tas</button>
                </div>
                <div>
                    <p>€29.99</p>
                    <button>In Tas</button>
                </div>
                <div>
                    <p>€29.99</p>
                    <button>In Tas</button>
                </div>
        </section>
    <footer>
        <div>
            <img src="./images/lego-LOGO.svg" alt="">
            <button> <img src="./images/Navigatie/gps-Lego.svg" alt="gps"> Nederland</button>
        </div>
        <div>
            <a>LEGO catalogi</a>
            <a>Store zoeken</a>
        </div>
        <p>Abonneren op digitale marketing-e-mails</p>
        <div>
            <form action="#">
                
                <label for="email"></label>
                <input type="text" name="emailadress" placeholder="Je e-mailadress">
                <input type="">
    
            </form>
        </div>

        <hr>
        <ul>
            <li>
                <details>
                    <summary>Over ons</summary>
                        <ul>
                            <li>
                                <a href="#">Over de LEGO groep</a>
                            </li>
                            <li>
                                <a href="#">Lego niews</a>
                            </li>
                            <li>
                                <a href="#">Duurzaamheid</a>
                            </li>
                        </ul>
                </details>
            </li>
        </ul>
        <hr>
        <ul>
            <li>
                <details>
                    <summary>Ondersteuning</summary>
                        <ul>
                            <li>
                                <a href="#">Over de LEGO groep</a>
                            </li>
                            <li>
                                <a href="#">Lego niews</a>
                            </li>
                            <li>
                                <a href="#">Duurzaamheid</a>
                            </li>
                        </ul>
                </details>
            </li>
        </ul>
        <hr>
        <ul>
            <li>
                <details>
                    <summary>Attracties</summary>
                        <ul>
                            <li>
                                <a href="#">Over de LEGO groep</a>
                            </li>
                            <li>
                                <a href="#">Lego niews</a>
                            </li>
                            <li>
                                <a href="#">Duurzaamheid</a>
                            </li>
                        </ul>
                </details>
            </li>
        </ul>
        <hr>
        <ul>
            <li>
                <details>
                    <summary>Meer over ons</summary>
                        <ul>
                            <li>
                                <a href="#">Over de LEGO groep</a>
                            </li>
                            <li>
                                <a href="#">Lego niews</a>
                            </li>
                            <li>
                                <a href="#">Duurzaamheid</a>
                            </li>
                        </ul>
                </details>
            </li>
        </ul>
        <hr>
        <h4>volg ons</h4>
        <div>
            <a>Privacybeleid</a> 
            <a>Cookies</a>
            <a>Juridische verklaring</a>
            <a>Gebruiksvoorwaarden</a>
            <a>Toegankelijkheid</a>
            <a>Cookie-instellingen</a>
        </div>
        <p>LEGO System A/S, DK-7190 Billund, Denmark. Personen die online aankopen doen, moeten 18 jaar of ouder zijn. LEGO, het LEGO logo, de minifiguur, DUPLO, LEGENDS OF CHIMA, NINJAGO, BIONICLE, MINDSTORMS en MIXELS zijn handelsmerken/met copyright beschermde onderdelen van de LEGO Groep. ©2022 The LEGO Group. Alle rechten voorbehouden. Bij gebruik van deze website stem je in met de gebruiksvoorwaarden.</p>
    </footer>
    <audio src="audio/plopp-84863.mp3" id="heartaudio"></audio>
    <script defer src="scripts/script.js"></script>
</body>
</html>

    <!-- bronnen -->
    <!-- hamburger menu:
    https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0 -->
    <!-- like knop
    https://codepen.io/animationbro/pen/YzXqzLv -->
    <!-- links in footer 
    https://codepen.io/robertspier/pen/NWMapEM -->