@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 Studiokette:</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">
                                    <a href="category/5" class="list-group-item list-group-item-action flex-column align-items-start bgBodyculture">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1" style="color: white">Bodyculture</h5>
                                        </div>
                                        <div  style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a><br>
                                    <a href="category/3" class="list-group-item list-group-item-action flex-column align-items-start bgFitnessFabrik">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1" style="color: white">Fitness Fabrik</h5>
                                        </div>
                                        <div style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a><br>
                                    <a href="category/2" class="list-group-item list-group-item-action flex-column align-items-start bgAmanusa">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1" style="color: white">Amanusa</h5>
                                        </div>
                                        <div style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a><br>
                                    <a href="category/4" class="list-group-item list-group-item-action flex-column align-items-start bgIntenso">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1" style="color: white">Intenso</h5>
                                        </div>
                                        <div style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a><br>
                                    <a href="category/6" class="list-group-item list-group-item-action flex-column align-items-start bgKillerSports">
                                        <div class="d-flex w-100 justify-content-between">
                                            <h5 class="mb-1" style="color: white">Killer Sports</h5>
                                        </div>
                                        <div  style="width: 100%; max-height: 80px">
                                            <br><br><br><br>
                                        </div>
                                    </a>
                                    <!--<div class="row">
                                        <div class="col-md-12">
                                            <a href="{{url('category/5')}}" class="btn btn-lg btn-dark btn-block">Bodyculture</a>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="{{url('category/3')}}" class="btn  btn-lg btn-warning btn-block">Fitness Fabrik</a>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="{{url('category/2')}}" class="btn  btn-lg btn-success btn-block">Amanusa</a>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="{{url('category/4')}}" class="btn  btn-lg btn-light btn-block">Intenso</a>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="{{url('category/6')}}" class="btn btn-info btn-block">Killer Sports</a>
                                        </div>
                                    </div>-->
                                </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>