@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <h4 align="center">Willkommen auf der Bodyculture Videoplattform</h4>
                                <h5 align="center">Bitte wähle deine Kundekette:</h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card" style="margin-top: 2%">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="list-group bgBodyculture">
                                    <a href="category/5" class="list-group-item list-group-item-action flex-column align-items-start">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">Bodyculture</h5>
                                        </div>
                                        <div class="bgBodyculture" style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                    <a href="category/3" class="list-group-item list-group-item-action flex-column align-items-start">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">Fitness Fabrik</h5>
                                        </div>
                                        <div class="bgFitnessFabrik" style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                    <a href="category/2" class="list-group-item list-group-item-action flex-column align-items-start">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">Amanusa</h5>
                                        </div>
                                        <div class="bgAmanusa" style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                    <a href="category/4" class="list-group-item list-group-item-action flex-column align-items-start">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">Intenso</h5>
                                        </div>
                                        <div class="bgIntenso" style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                    <a href="category/6" class="list-group-item list-group-item-action flex-column align-items-start">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1">Killer Sports</h5>
                                        </div>
                                        <div class="bgKillerSports" style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .bgBodyculture {
        background: url({{ URL::asset('img/bodyculture_bg.jpg') }}) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bgAmanusa {
        background: url({{ URL::asset('img/amanusa_bg.jpg') }}) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bgFitnessFabrik {
        background: url({{ URL::asset('img/fitnessfabrik_bg.jpg') }}) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bgIntenso {
        background: url({{ URL::asset('img/intenso_bg.jpg') }}) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .bgKillerSports {
        background: url({{ URL::asset('img/killersports_bg.jpg') }}) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>