<?php
include_once 'header.php';
?>


<nav class="w-100pc flex flex-column md-flex-row md-px-10 py-5 bg-black">
    <div class="flex justify-between">
        <div href="#" class="flex items-center p-2 mr-4 no-underline hover-scale-up-1 ease-300">
            <img class="h-15 w-auto" src="assets/images/Why-IT_Logo.ico" />
        </div>
        <a data-toggle="toggle-nav" data-target="#nav-items" href="#" class="flex items-center ml-auto md-hidden indigo-lighter opacity-50 hover-opacity-100 ease-300 p-1 m-3">
            <i data-feather="menu"></i>
        </a>
    </div>
    <div id="nav-items" class="hidden flex sm-w-100pc flex-column md-flex md-flex-row md-justify-end items-center">
        <a href="#Home" class="fs-m3 mx-3 py-3 white no-underline hover-scale-up-1 ease-300">Home</a>
        <a href="#Einführung" class="fs-m3 mx-3 py-3 indigo no-underline hover-scale-up-1 ease-300">Einführung</a>
        <a href="#Tutorials" class="fs-m3 mx-3 py-3 indigo no-underline hover-scale-up-1 ease-300">Tutorials</a>
        <a href="#Ergebnisse" class="fs-m3 mx-3 py-3 indigo no-underline hover-scale-up-1 ease-300">Ergebnisse</a>
        <a href="#Kontakt" class="fs-m3 mx-3 py-3 indigo no-underline hover-scale-up-1 ease-300">Kontakt</a>
    </div>
</nav>
<!-- hero section -->
<section id="Home" class="pt-l5">
    <div class="flex flex-column md-flex-row md-w-80pc mx-auto">
        <div class="w-100pc md-w-50pc">
            <div class="ml-5 inline-block br-round bg-indigo-30 indigo-lightest p-2 fs-s2 mb-5">
                <div class="inline-block bg-indigo indigo-lightest br-round px-3 py-1 mr-3 fs-s3">Hello, World!</div>Entdecke die Welt der Informatik
            </div>
            <div class="ml-5">
                <h1 class="white fs-l3 lh-2 md-fs-xl1 md-lh-1 fw-900 ">Why-IT<br />IDPA</h1>
                <div class="white opacity-18 fs-m2 mt-3">Hier kannst du den Beruf </br><span class="border-b bc-indigo bw-2">Informatik</span>
                    kennenlernen</br> und findest eine Sammlung</br>
                    interaktiver Lernmöglichkeiten!</span>
                </div>
            </div>
        </div>
        <div class="w-100pc md-w-50pc">
            <div class="br-8 p-5 m-5 bg-transparent hover-scale-up-1 ease-300">
                <img src="assets/images/home.png" />
            </div>
        </div>
</section>
<!-- Einführung -->
<section id="Einführung" class="p-10 md-p-l5">
    <div class="flex flex-column md-flex-row mx-auto">
        <div class="w-100pc md-w-40pc">
            <div class="br-8 p-5 m-5">
                <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i data-feather="shuffle" class="w-l5"></i></div> <!-- <-Für Icons wechseln: https://feathericons.com/ bei data-feather einsetzen -->
                <h4 class="white fw-600 fs-m3 mb-5">Richtungen</h4>
                <div class="indigo-lightest fw-600 fs-m1 lh-3 opacity-70">
                    Jede Abteilung in der Informatik bietet verschiedene Aufgaben für Informatiker*innen an. Im generellen gibt es drei
                    Haubtrichtungen, welche man in der Informatik
                    angehen kann:
                    Betriebsinformatik, Systemtechnik und Applikationsentwicklung.</div>
            </div>
        </div>
        <div class="w-100pc md-w-40pc">
            <div class="br-8 p-5 m-5">
                <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i data-feather="award" class="w-l5"></i></div>
                <h4 class="white fw-600 fs-m3 mb-5">Vorteile</h4>
                <div class="indigo-lightest fw-600 fs-m1 opacity-70">Nebst, dass die Informatik einer der höher-bezahlten Berufe ist, ist das Programmieren
                    leicht eigenständig zu erlernen. Auch gibt es die Möglichkeit, bequem von zu Hause aus zu arbeiten. Dies kann man alleine, oder auch im Team!
                </div>
            </div>
        </div>
        <div class="w-100pc md-w-40pc">
            <div class="br-8 p-5 m-5">
                <div class="flex justify-center items-center bg-indigo-lightest-10 white w-l5 h-l5 br-round mb-5"><i data-feather="clock" class="w-l5"></i></div>
                <h4 class="white fw-600 fs-m3 mb-5">Zukunft</h4>
                <div class="indigo-lightest fw-600 fs-m1 opacity-70">Die Informatik ist für uns wichtiger denn je und die Nachfrage nach Informatiker*innen, wird zukünftig steigen.
                    Mit fortschreitenden Technologien versuchen Informatiker*innen die Welt für die Menschen einfacher zu gestalten.
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Tutorials -->
<section id="Tutorials" class="py-l5">
    <div class="flex flex-column md-flex-row md-w-80pc mx-auto">
        <div class="w-100pc md-w-45pc">
            <div class="br-8 p-5 m-4 bg-transparent hover-scale-up-1 ease-300">
                <img src="assets/images/tutorial.png" />
            </div>
        </div>
        <div class="w-100pc md-w-55pc">
            <div class="ml-5">
                <h1 class="white fs-m4 lh-2 md-fs-l5 md-lh-1 fw-300">Interaktives </br> Lernen</h1>
                <div class="ml-2 white opacity-18 fs-m1 mt-3">Hier findest du interaktive Lernmöglichkeiten,
                    welche dir die Grundbausteine der Informatik spielerisch oder praktisch beibringen. So kannst du einen kleinen Einblick
                    in die Welt der Informatik bekommen.</span>
                </div>
            </div>
        </div>
</section>
<!-- slider -->
<section class="relative bg-transparent pb-l5">
    <div id="slider-1">
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/w3schools.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">W3Schools</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">W3Schools ist eine Website für angehende Webprogrammierer*innen. Hier findest du einfache Tutorials
                    zu Webentwicklungssprachen wie</br> HTML, CSS, JavaScript, PHP, SQL und JQuery, die die meisten Aspekte der Webprogrammierung abdecken.</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: HTML, CSS, JavaScript, PHP, SQL, JQuery</p>
                <a href="https://www.w3schools.com/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/scratch.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Scratch</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Scratch ist eine einfache Programmiersprache, die ohne schriftlichen Code funktioniert. </br>In Scratch
                    kannst du mit Codeblöcken eigene Spiele programmieren. </br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: Block Code</p>
                <a href="https://scratch.mit.edu/projects/editor/?tutorial=getStarted" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/codeorg.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Code.org Minecraft</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Nutze deine Kreativität und Problemlösungskompetenzen, um Unterwasserwelten</br>
                    mit Code zu erforschen und zu bauen!</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: Block Code</p>
                <a href="https://code.org/minecraft" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/dojacode.jpg');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Doja Code</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Doja Code ist ein Musikvideo, bei dem du
                    selbst </br>kreative Entscheidungen treffen kanst.</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: Css, JavaScript, Python </p>
                <a href="https://dojacode.com/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/applab.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Applab</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Erstellen deine eigene eigene Mobile-App </br>in JavaScript entweder
                    mit blockbasierter Programmierung </br>oder mit Text.</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: JavaScript</p>
                <a href="https://studio.code.org/s/applab-intro/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/edabit.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Edabit</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Lerne Code mit interaktiven Übungen.</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: C#, C++, Java, JavaScript, </br>PHP, Python, Ruby, Swift</p>
                <a href="https://edabit.com/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/lightbot.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Lightbot</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Lerne die Basics über das Programmieren. Steuere einen </br>Roboter
                    und hilf ihm das richtige Feld zu erreichen!</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: Block Code</p>
                <a href="https://www.lightbot.lu/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
        <div class="p-10 md-p-l10 flex justify-center items-center flex-column text-center" style="background-image: url('assets/images/slider/gridgarden.png');">
            <div style="background-color: rgba(0, 0, 0, 0.8); border-radius: 10px;">
                <h2 class="white fs-l3 fw-900">Grid Garden</h2>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Bei Grid Garden, kannst du CSS-Code schreiben, um deinen Karottengarten wachsen zu
                    lassen! </br>Einführung in die Grundlagen der Verwendung von CSS-Grids zur Erstellung von Layouts auf einer Webseite.</br></br></p>
                <p class="indigo-lightest fw-600 fs-m1 opacity-100 my-5 mx-l2">Code Sprachen: Css</p>
                <a href="https://cssgridgarden.com/" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Webseite besuchen</a>
            </div>
        </div>
    </div>
    <ul class="absolute list-none w-100pc flex justify-between top-50pc" style="pointer-events: none;">
        <div style="pointer-events: all;">
            <li><button class="prev ml-10 br-round border-indigo-lightest indigo-lightest bg-black flex justify-center items-center p-2 focus-indigo-lighter outline-none hover-scale-up-1 ease-300"><i data-feather="chevron-left"></i></button></li>
        </div>
        <div style="pointer-events: all;">
            <li><button class="next mr-10 br-round border-indigo-lightest indigo-lightest bg-black flex justify-center items-center p-2  focus-indigo-lighter outline-none hover-scale-up-1 ease-300"><i data-feather="chevron-right"></i></button></li>
        </div>
    </ul>
</section>
<!-- Ergebnisse -->
<section id="Ergebnisse" class="py-l5">
    <div class="flex flex-column md-flex-row md-w-80pc mx-auto">
        <div class="w-100pc md-w-50pc">
            <div class="ml-5">
                <h1 class="white fs-m4 lh-2 md-fs-l5 md-lh-1 fw-300">Ergebnisse der IDPA</h1>
                <div class="white opacity-18 fs-m2 mt-3 mr-2">Wir sind drei Schüler, welche das 3. Schuljahr
                    der Informatikmittelschule Bern besuchen.
                    Wir arbeiten an einer interdisziplinären Projektarbeit (IDPA) über das selbst gewählte Thema
                    <span class="border-b bc-indigo bw-2">
                        «Frauenmangel in den IT-Berufen».
                    </span></br>
                    </br>
                    Für unsere Arbeit haben wir im Internet recherchiert und eine Umfrage
                    bei verschiedenen Schulen durchgeführt.
                    </br>
                    Durch die Recherche und unserer Umfrage haben wir
                    herausgefunden, wieso sich Frauen nicht für Informatik-Berufe entscheiden.
                    Die wichtigsten Informationen, die wir durch den Vergleich der recherchierten Dinge mit der Umfrage
                    herausgefunden haben, ist, dass das Interesse an der Informatik nicht so viel mit den Geschlechter
                    Stereotypen zu tun hat. Denn es liegt viel mehr am mangelnden Wissen und Interesse an der Informatik.
                    Das Interesse jedoch, kann durch die Schule oder Normalisierung vom gebrauch technischer Geräte bei Frauen
                    gefördert werden.
                </div>

                <a href="assets\pdf\IDPA_Why-IT_Grundlage.pdf" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300 mr-5">Grundlage PDF</a>
                <a href="assets\pdf\IDPA_Why-IT_Praxistransfer.pdf" target="_blank" class="button-md bg-indigo white fs-s1 br-4 black fw-600 no-underline my-5 hover-scale-up-1 ease-300">Praxistranfer PDF</a>

            </div>
        </div>
        <div class="w-100pc md-w-50pc">
            <div class="br-8 p-5 m-5 bg-transparent hover-scale-up-1 ease-300">
                <img src="assets/images/research.png" />
            </div>
        </div>
</section>

<?php
include 'footer.php';
include_once 'end-section.php';
?>