@extends('student.layouts.app')
@push("styles")
<style>
    .card-img-top {
        height: 10vw;
        object-fit: cover;
    }

    .card {
        width: 100%;
    }

    @media only screen and (max-width: 767px) {
        .card-img-top {
            height: 25vw;
            object-fit: cover;
        }
    }

    @media only screen and (max-width: 575px) {
        .card-img-top {
            height: 45vw;
            object-fit: cover;
        }
    }
</style>
@endpush
@section('titlePage', 'Soft Skills')
@section('content')
<script>
    document.getElementById("ktss-12").classList.add("active");
</script>
<div class="left-content mt-1">
    <h5 class="breadcrumb-item active">SOFT SKILLS</h5>
</div>
<div class="row">
    <div class="col-12">
        @include('common.alert')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @foreach ($data as $item)
                    <div class="col-xl-4 col-md-12">
                        <div class="card pricing-card">
                            <div>
                               <!-- <img class="card-img-top" style="height:200px;" src="{{asset($item->image)}}" alt="{{$item->title}}">  -->
                               <img class="card-img-top" style="height:200px;" src="{{asset('assets/coursee-01.png')}}" alt="{{$item->title}}">
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-4">
                                    <li class="mb-3 tx-14 tx-primary"><span><i class="fa fa-check me-2 tx-10"></i></span>Title : {{$item->title}}</li>
                                    <!-- <li class="mb-3 tx-14 tx-primary"><span><i class="fa fa-check me-2 tx-10"></i></span>{{$item->title}}</li> -->
                                </ul>
                                <div class="tx-center">
                                    <a href="{{route('student.soft-skills.detail', $item->id)}}" class="btn btn-primary-light btn-block">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection