<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wireframe Layout</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header>
        <img src="img/curio_logo.webp" alt="Curio Logo" width="70%">
        <nav>
            <a href="#vakkendocenten">vakken + docenten</a>
            <a href="#rooster">rooster</a>
            <a href="#versnellen">versnellen</a>
        </nav>
    </header>

    <main>
    <img src="img/school.png" alt="school" width="100%">  

        <div class="wrapper">
            <div class="vakkendocenten" id="vakkendocenten">
                <h1>vakken</h1>
                <div class="vakken">
                    <div class="vak">
                        <h2>WEB</h2>
                        <p>Tijdens dit vak maak je kennis met de wereld van webontwikkeling. Je leert hoe je websites ontwerpt en bouwt, en krijgt inzicht in HTML, CSS en PHP.</p>
                    </div> 
                    <div class="vak">
                        <h2>NATIVE</h2>
                        <p>Hier leer je het maken van native applicaties voor verschillende platforms. Je werkt met programmeertalen zoals Python en C#.</p>
                    </div>
                    <div class="vak">
                        <h2>PRO/PRA</h2>
                        <p>In de praktijkvakken pas je de kennis en vaardigheden toe die je in andere vakken hebt opgedaan.</p>  
                    </div>  
                    <div class="vak">
                        <h2>Nederlands/Engels</h2>
                        <p>Dit zijn de taalvakken en richten op het verder ontwikkelen van de taal via een online programma</p>
                    </div>
                </div>

                <h1>docenten</h1>
                <div class="docenten">
                    <div class="docent">
                        <img src="img/docenten/ine.jpg" alt="Ine" class="docent-img">
                        <p>Ine</p>
                        <p>docent WEB</p>
                    </div> 
                    <div class="docent">
                        <img src="img/docenten/krist.jpg" alt="Krist" class="docent-img">
                        <p>Krist</p>
                        <p>docent NATIVE</p>
                    </div>
                    <div class="docent">
                        <img src="img/docenten/MustafaKasar.png" alt="Mustafa" class="docent-img">
                        <p>Mustafa</p>
                        <p>docent Engels</p>
                    </div>  
                    <div class="docent">
                        <img src="img/docenten/joep.png" alt="Joep" class="docent-img">
                        <p>Joep</p>
                        <p>Docent Nederlands</p>
                    </div>
                </div>
            </div>

        </div>

    <div class="content">
        <div class="rooster" id="rooster">
            <h1>Rooster</h1>
            <div class="rooster-content">
                <img src="img/rooster_jaar1.png" alt="rooster">
                    <div class="rooster-text">
                        <h2>Dit is hoe het rooster van een eerste jaars er ongeveer uitziet.</h2>
                        <h2>De dagen kunnen soms heel lang zijn, en soms heel kort, soms begin je vroeg, en soms begin je laat.</h2>
                    </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="versnellen" id="versnellen">
            <h1>versnellen</h1>
            <div class="rooster-content">
                <img src="img/Opleidingsoverzicht.png" alt="rooster">
                    <div class="rooster-text">
                        <h2>Op deze opleiding bij Curio is er een mogelijkheid om de opleiding versneld af te ronden. Dit betekent Dat je in 3 jaar klaar bent i.p.v. 4 jaar. Tijdens het versnellen ga je wat sneller door de stof heen. Ook sla je blok E over, en worden blok F en blok G samen gevoegd tot 1 jaar.</h2>
                     
                    </div>
            </div>
        </div>
    </div>
            <div class="extra-info">
                <div class="extra-info-item">
                    <h2>Mijn mening</h2>
                    <p>Ik vind het een hele leuke opleiding want je leert programeren in allerlei talen en je leert snel al een leuke website maken dus ik vind het geweldig.</p>
                </div>
                <div class="extra-info-item">
                    <h2>Huiswerk</h2>
                    <p>Het huiswerk valt wel mee, als je in de les goed werkt hoef je bijna niks thuis te doen.</p>
                </div>
            </div>

    </main> 

    <footer>
        <img src="img/curio_logo.webp" alt="Curio Logo" width="70%">
        <p>&copy; 2024 Diégo van Vessem</p>
            <nav>
                <a href="#">to the top</a>            
            </nav>
    </footer>

</body>
</html>