@extends('student.layout.app')
@section('content')
    <style>
        div.gallery {
            margin: 22px;
            border: 3px solid #ccc;
            float: left;
            width: 180px;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }
    </style>
    <div class="main-panel">
        <div class="content-wrapper">

            <div class="row">
                <div class="col-md-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            @foreach($books as $book)
                                <div class="gallery">
                                    <a target="_blank" href="{{$book->link ?? ''}}">
                                        <img src="{{asset('images/'.($book->image ?? ''))}}" alt="Cinque Terre"
                                             width="600" height="600">
                                    </a>
                                    <div class="desc">{{$book->title ?? ''}}</div>
                                    <div class="desc">{{$book->author ?? ''}}</div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>



@endsection