@{
    ViewData["Title"] = "Häng med på våra kurser";
}

<div class="container mb-5">
    <h2 class="text-center mt-3 mb-4">@ViewData["Title"]</h2>
    <p class="lead text-center font-weight-bold">Inte sugen på att börja träna något nytt, men vill gärna testa på? Vi har kursen för dig!</p>

    <img src="~/images/kurser.jpg" alt="Arenan" class="maxad" />

    <p class="lead text-center mt-5 mb-3">
        Våra kurser är fasta paket där du under några enstaka gånger i mindre grupper tränar för att lära dig mer.
        Efter en avslutad kurs kommer du att kunna stå på dina egna ben!
    </p>

    <div class="row">
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/kampsport.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Kampsport</h3>
                </div>
            </div>
        </div>
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/crossfit.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Crossfit</h3>
                </div>
            </div>
        </div>
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/kids.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Funky Kidz</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/vardagsstark.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Vardagsstark</h3>
                </div>
            </div>
        </div>
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/yoga.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Yoga</h3>
                </div>
            </div>
        </div>
        <div class="col-sm mt-3">
            <div class="card bg-dark text-white">
                <img class="card-img" src="/images/vikt.jpg">
                <div class="card-img-overlay myKursCard">
                    <h3 class="card-title text-uppercase">Viktminskning</h3>
                </div>
            </div>
        </div>
    </div>


    <p class="lead text-center mt-5 mb-3 font-weight-bold">
        Blev du sugen på att testa på något? Hör av dig till receptionen för starttiden för kursen du gillade.
    </p>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}