Upload - Githubissues

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ausbildungsmesse | RÖWAPLAN</title>
    <link rel="stylesheet" href="style\style.css" />
</head>

<body>
    <div class="container">

        <div class="mainContainerGreen">
            <h1>RÖWAPLAN</h1>

            <div class="section">
                <h2>Du findest programmieren interessant?</h2>

                <div class="smallWhiteContainer">
                    <h1>
                        <b1>Es muss nicht immer kompliziert sein</b1>
                    </h1>

                    <br />

                    <h4>
                        <a href="https://makecode.microbit.org/#editor">
                            <b3>lass deiner kreativität freien lauf</b3>
                        </a>
                    </h4>

                    <img src="https://rwms.roewaplan.de/images/logo.svg"
                        style="height: 50px; width: 150px; align-self: center" />
                </div>

                <div class="detailSection"></div>
            </div>
            <div class="section">
                <h2 class="headingGreen">Interesse am Programmieren und schon etwas Kenntnisse?</h2>
                <h3>Hier ein paar Seiten auf denen ihr üben könnt</h3>
                <div class="detailSection">
                    <details>
                        <summary>Vue.js Playground</summary>
                        <p>
                            Auf der Seite könnt ihr mit HTML, CSS und JavaScript(vue.js) eine
                            Website erstellen und seht die Veränderungen direkt in einem
                            Ansichts-Fenster daneben
                        </p>
                        <ul>
                            <li>
                                <a href="https://play.vuejs.org/">Link zum vue.js Playground</a>
                            </li>
                        </ul>
                    </details>
                </div>
            </div>

            <div class="section">
                <h2>Anwendungs Entwickler</h2>
                <h3>Welche Möglichkeiten / Vorteile bietet der Beruf</h3>
                <ul class="onGreenList">
                    <li>Zukunftssicher</li>
                    <li>Viele Verschiedene Bereiche</li>
                    <li>Eigene Spiele Entwickeln</li>
                    <li>Eigene Apps Erstellen</li>
                    <li>Eigene Website Erstellen</li>
                </ul>
            </div>

            <div class="smallWhiteContainer">
                <div class="section">
                    <h2>Über Röwaplan</h2>
                    <h3>Als Anwendungsentwickler bei Röwaplan</h3>
                    <ul>
                        <li>Du wirst Webanwendungen entwickeln</li>
                        <li>Verwendete Programmiersprachen sind Java und Kotlin</li>
                    </ul>
                    <h2>
                        <b1>ihr habt euch für unseren Stand interresiert und wollt jetzt mehr
                            über uns wissen?</b1>
                    </h2>
                    <h2>
                        <h4>
                            <a href="https://www.roewaplan.de/ueber-uns">
                                <b3>besuch doch mal unsere Website</b3>
                            </a>
                        </h4>
                    </h2>
                </div>
            </div>
        </div>

        <div class="mainContainerWhite">

            <div class="VideoGame">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/89KUBpcgg58" title="Ferrari 488 GTE | Forza Horizon 5 | Steering Wheel Gameplay" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>

            <div class="VideoCode">

            </div>

        </div>

    </div>
</body>

</html>

css

:root {
    --roewagruen: #007556;
}
@font-face {
    font-family: 'Frutiger';
    src: url('../resources/font/FTC_____.ttf');
    font-weight: normal;
    font-style: normal;

  }

  html{
    font-family: 'Frutiger';
  }

body {
    height: fit-content;
    min-height: 96vh;
    width: 99vw;
    margin: 0;
    padding: 0;
    color: black;
    background-color: white;
}

.container {
    display: flex;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.mainContainerGreen {
    height: fit-content;
    min-height: 93vh;
    width: 40vw;
    margin-left: 2vw;
    margin-right: 20px;
    background-color: white;
    border: var(--roewagruen) 5px solid;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 20px;
}

.smallWhiteContainer {
    height: fit-content;
    min-height: 23vh;
    width: 33vw;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    background-color: #f0f0f0;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 10px;
}

.mainContainerWhite {
    display: flex;
    flex-direction: column;
    min-height: 93vh;
    width: 40vw;
    margin-left: 11vw;
    margin-right: 2vw;
    background-color: var(white);
    border: var(--roewagruen) 5px solid;
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 20px;
}

details{
    color: white;
}

.onGreenList{
    color: white;
}

.VideoCode,
.VideoGame {
    height: calc(50% - 10px);
    background-color: #f0f0f0;
}

.VideoGame {
    margin-bottom: 20px;
}

h1 {
    color: #FFFFFF;
    text-align: center;
    background-color: var(--roewagruen);
    border-radius: 20px;
}

h2,
h3 {
    color: #FFFFFF;
    text-align: center;
    background-color: var(--roewagruen);
    border-radius: 20px;
}

h4 {
    color: var(--roewagruen);
    text-align: left;
    background-color: #f0f0f0;
    border-radius: 20px;
    font-size: 20px;
}

/*TDOD: Needs to be adjusted for Videos and not iframe*/
iframe{
    border-radius: 20px;
    border: 2px solid var(--roewagruen);
}

.headingGreen{
    color: var(--roewagruen);
    background-color: white;
}

Roewaplan-Ausbildung / ABBA

Upload #2