<?php
get_header();
?>
<div class="container-fluid">
        <div class="row">
            <div class="col-12 bg-dark-st d-flex justify-content-center">
                <img width="300px" src="https://nebelkrieger.de/data/f6bf46603211478bf46fc3b75df36051/files///users/7b3eb366286fc133f9118717046a786b.png" alt="">
            </div>
        </div>
        <div class="row sticky-top">
            <div class="col-12 bg-dark-st">
                <div class="d-flex flex-row justify-content-center">
            <div class="btn btn-outline-light me-auto my-2">Home</div>

            <div class="btn btn-outline-light m-2">Forum</div>
                <div class="btn btn-outline-light m-2">Gildensatzung</div>
                <div class="btn btn-outline-light m-2">Bewerbung schreiben</div>
                <div class="btn btn-outline-light m-2">Datenschutz</div>
                <div class="btn btn-outline-light ms-auto my-2">Login</div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
<div class="col-12 col-md-3" style="font-size: 90%;"> 
<div class="container-fluid">
                    <div class="row py-2 mb-2 bg-light-st">
                        <div class="col-12"><h6>Raids</h6></div>
                        <div class="col-12 d-flex flex-column">
                            <div class="mb-1 bg-darkl-st p-2">
                                <div class="d-flex flex-row justify-content-between">
                                <div class="fw-bold">Sanktum der Herrschaft</div>
                                <div>01.01.1990</div>
                                </div>
                                <hr class="my-1">
                                <div class="d-flex flex-row justify-content-between">
                                <div>Anmeldungen:</div><div>13</div>
                                </div>
                                <div class="d-flex flex-row justify-content-between">
                                <div>Abmedungen:</div><div>3</div>
                                </div>
                                <div class="d-flex flex-row justify-content-between">
                                <div>Ersatzbank:</div><div>5</div>
                                </div>
                            </div>
                            <div class="mb-1 bg-darkl-st p-2">
                                <div class="d-flex flex-row justify-content-between">
                                <div class="fw-bold"><span class="fa fa-fw fa-triangle-exclamation"></span> Sanktum der Herrschaft</div>
                                <div>04.01.1990</div>
                                </div>
                                <hr class="my-1">
                                <div class="d-flex flex-row justify-content-between">
                                <div>Anmeldungen:</div><div>2</div>
                                </div>
                                <div class="d-flex flex-row justify-content-between">
                                <div>Abmedungen:</div><div>7</div>
                                </div>
                                <div class="d-flex flex-row justify-content-between">
                                <div>Ersatzbank:</div><div>3    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pt-2 mb-2 bg-light-st">
                        <div class="col-12"><h6>Spielersuche</h6></div>
                        <div class="col-12">
                            <table class="table bg-dark-st   text-light border-light table-sm">
                                <tr>
                                    <th>Klasse</th>
                                    <th>Skillung</th>
                                    <th>Nachfrage</th>
                                </tr>
                                <tr>
                                    <td class="bg-druid">Druide</td>
                                    <td class="text-center">Wildheit</td>
                                    <td class="bg-danger">Hoch</td>
                                </tr>
                                <tr>
                                    <td class="bg-shaman">Schamane</td>
                                    <td class="text-center">Elementar</td>
                                    <td class="bg-yellow">Mittel</td>
                                </tr>
                                <tr>
                                    <td class="bg-demonhunter">Dämonenjäger</td>
                                    <td class="text-center">Alle</td>
                                    <td class="bg-green">Niedrig</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row pt-2 bg-light-st">
                        <div class="col-12"><h6>Sanktum der Herrschaft</h6></div>
                        <div class="col-12">
                            <table class="table bg-dark-st text-light border-light table-sm">
                                <tr>
                                    <td>Tarragrue</td>
                                    <td class="text-success" title="Firstkill: 01.01.1990" data-bs-toggle="tooltip">N
                                    </td>
                                    <td class="text-success">H</td>
                                    <td class="text-danger">M</td>
                                </tr>
                                <tr>
                                    <td>Auge des Kerkermeisters</td>
                                    <td class="text-success">N</td>
                                    <td class="text-success">H</td>
                                    <td class="text-danger">M</td>
                                </tr>
                                <tr>
                                    <td>Die Neun</td>
                                    <td class="text-success">N</td>
                                    <td class="text-success">H</td>
                                    <td class="text-danger">M</td>
                                </tr>
                                <tr>
                                    <td>[etc]</td>
                                    <td>N</td>
                                    <td>H</td>
                                    <td>M</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-9">
                <div class="container-fluid">
                    <div class="row p-2 mb-2 bg-light-st">
                        <div class="col-2 text-center d-flex flex-column">
                            <div class="bg-blue display-6 text-center">14</div>
                            <div class="bg-gray small p-1">Februar</div>
                            <div class="bg-druid small text-dark">Raid</div>
                            <div class="mt-auto bg-darkl-st p-2">
                                <img src="https://avatars.dicebear.com/api/bottts/Fips.svg" alt="" width="50px">
                                <div class="small text-light">Autor: <span class="text-shaman">Fips</span></div>
                            </div>
                        </div>
                        <div class="col-10 p-2 bg-dark-st"> 
                            <div class="d-flex flex-column">
                                <h3>ENDLICH DOWN!!! (10/10 HC!)</h3>   
                                <div class="d-flex flex-row justify-content-between border-top border-light pt-2">
                                <p>
                                    Happy Valentinstag!<br>
                                    Am heutigen Montag beschenkten wir uns selber und konnten endlich "Sylvanas" bezwingen.<br>
                                    Nach sehr vielen Wochen, an denen wir viel übten und knapp scheiterten, konnten wir heute endlich den Sieg erringen!<br>
                                    Vielen Dank an alle Raider für diesen tollen Erfolg! Patch 9.2 kann kommen!
                                </p>
                                <img class="m-2" src="https://via.placeholder.com/320x240" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row p-2 mb-2 bg-light-st">
                        <div class="col-2 text-center d-flex flex-column">
                            <div class="bg-blue display-6 text-center">01</div>
                            <div class="bg-gray small p-1">Januar</div>
                            <div class="bg-rogue small text-dark">News</div>
                            <div class="mt-auto bg-darkl-st p-2">
                                <img src="https://avatars.dicebear.com/api/bottts/Maluson.svg" alt="" width="50px">
                                <div class="small text-light">Autor: <span class="text-warlock">Maluson</span></div>
                            </div>
                        </div>
                        <div class="col-10 bg-dark-st p-2">
                            <div class="d-flex flex-column">
                                    <h3>Happy New Year!</h3>   
                                <div class="d-flex flex-row justify-content-between border-top border-light pt-2">
                                <p>
                                    2022!<br>
                                    Ein neues Jahr steht uns nun bevor.<br>
                                    Wir wünschen allen ein schönes, erfolgreiches und vor allem gesundheitlich tolles Jahr 2022!<br>
                                    Bei uns geht es bereits ab Donnerstag weiter mit den Raids.<br>
                                    Wir freuen uns bereits und hoffen, dass wir "Sylvanas" noch ärgern dürfen in den kommenden Wochen.<br>
                                </p>
                                <img class="m-2" src="https://via.placeholder.com/320x240" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

    </script>
<?php
get_footer();