<mat-card class="content-container bg-primary text-white" style="border-radius:20px;">
    <mat-card-title>
        <h1 class="my-3 display-1 text-center">
            <span style="color:#ffffff">S</span><span style="color:#bebdff">kills</span>
            <span class="text-muted">&</span>
            <span style="color:#ffffff">T</span><span style="color:#bebdff">ools</span>
        </h1>
    </mat-card-title>

    <mat-card-subtitle>
        <p class="mb-5 lead text-center">With the right kind of tools, everything is possible</p>
    </mat-card-subtitle>

    <mat-card-content>
        <div class="row justify-content-around">
            <mat-card class="col-4 col-sm-2 m-2" *ngFor="let skill of skills">
                <mat-card-header>
                    <div mat-card-avatar>
                        <img mat-card-image class="m-auto" src="../../../assets/icons/{{skill.logo}}" alt="{{skill.name}}">
                    </div>
                    <mat-card-title>{{skill.name}}</mat-card-title>
                    <mat-card-subtitle>{{skill.kategory}}</mat-card-subtitle>
                </mat-card-header>
                <!--<mat-card-content>
                    <p>{{skill.description}}</p>
                </mat-card-content>-->
                <mat-card-actions>
                    <a href="{{skill.link}}"><button mat-raised-button>visit Website</button></a>
                </mat-card-actions>
            </mat-card>
        </div>

    </mat-card-content>

</mat-card>